/* ============================================================
   PRIME ACADEMY GROUP · primeacg.com — v4
   training.css — online-training page styles
   Lifted verbatim out of the single-file pages in www/website/.
   ============================================================ */
/* ============================================================
   ONLINE TRAINING (v4) - page-scoped section styles, O1-O6.
   The shared v4 spine — tokens, primitives, nav, footer and the
   reveal scaffold — is base.css + components.css, both loaded
   ahead of this file. Nothing here adds to the spine or
   redefines a token - each rule is scoped to one .t-* section.

   Band rhythm, top to bottom:
     O1 deep photo . O2 mist . O3 navy . O4 white . O5 mist . O6 shell
   The dark band (O3) is the one section with no platform capture
   in it - screenshots are light and dissolve into a dark surface.
   ============================================================ */

/* Heading emphasis: <b> inside a section head is the accent half of
   the line, never a weight change alone. Deep blue on light bands,
   azure on dark ones - same rule the other v4 pages follow. */
/* Two-colour headings are global now - see base.css. */

/* the spine ships .h1/.h2/.lead with no margins - each section owns its rhythm */
.t-range h2, .t-free h2, .t-inside h2, .t-packs h2{ margin:0 0 clamp(14px,1.6vw,20px); }
.t-range .lead, .t-free .lead, .t-inside .lead, .t-packs .lead{ margin:0; max-width:70ch; }
.t-free .section-head, .t-inside .section-head, .t-packs .section-head,
.t-range .section-head{ margin-bottom:clamp(38px,4.6vw,64px); }

/* ---------- O1 . MASTHEAD - deep band over photography ----------
   Transposed from .s-mast in about.css so the three inner pages
   open on the same shape: same height, same scrim, same two buttons
   in the same order, title left / lead right. */
.t-mast{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:74vh;
  padding-block:clamp(148px,17vw,210px) clamp(64px,8vw,98px);
}
.t-mast .s-who__scrim{
  background:
    linear-gradient(180deg,rgba(20,33,61,.93),rgba(20,33,61,.78)),
    radial-gradient(94% 74% at 88% -8%,rgba(33,150,243,.15),transparent 60%);
}
.t-mast .parallax-inner > img{ object-position:center 44%; }
.t-mast h1{ color:#fff; max-width:14ch; text-wrap:balance; }
.t-mast__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.t-mast__rule{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:var(--prime-gradient);
}

/* ---------- O2 . COURSE RANGE - mist band ----------
   Four subject groups, four titles each. No filters and no search in
   v1: sixteen rows is short enough to read straight down. */
/* Collapsed by subject area. One column, not the 2x2 it used to be: opening a group
   in a two-column grid stretches its row and leaves a hole beside it. */
.t-groups{ display:flex; flex-direction:column; gap:10px; }

.t-group{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--white);
}
.t-group summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(15px,1.7vw,19px) clamp(16px,1.9vw,22px);
  border-radius:var(--radius);
  transition:background-color var(--dur-fast) var(--ease);
}
.t-group summary::-webkit-details-marker{ display:none; }
.t-group summary:focus-visible{ outline:2px solid var(--azure); outline-offset:-2px; }

/* A real heading, sized off .t-pack h3. It was 11.5px uppercase with letterspacing,
   which is the eyebrow style: correct when these were column labels sitting above
   a list, wrong now that the row is the thing you click. */
.t-group__name{
  margin:0;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(17px,1.6vw,20px); line-height:1.2;
  letter-spacing:var(--track-md); color:var(--navy);
  transition:color var(--dur-fast) var(--ease);
}

.t-group__n{
  flex:none; display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--slate);
  transition:color var(--dur-fast) var(--ease);
}

/* HOVER — surface and type only, no coloured edge and no transform: these open
   in place, they do not navigate. Same reasoning as .p-step a file over. */
.t-group summary:hover{ background:var(--mist); }
.t-group:hover .t-group__name{ color:var(--deep); }
.t-group:hover .t-group__n{ color:var(--deep); }

/* OPEN — the title holds the brand blue, so the expanded group reads without
   hunting for the chevron. */
.t-group[open] .t-group__name{ color:var(--deep); }
/* chevron, rotating on open. Same 8px hairline the nav dropdown uses. */
.t-group__n::after{
  content:""; width:8px; height:8px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur-fast) var(--ease);
}
.t-group[open] .t-group__n::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.t-group[open] summary{ border-bottom:1px solid var(--line-soft); }
/* Ticked list, two up. Lifted from .t-inc / .t-covers rather than invented: same
   azure tick, same 26px indent. Hairline rules between rows read as a table
   inside a card, which is what this looked like before. */
.t-titles{
  list-style:none; margin:0;
  padding:clamp(14px,1.6vw,18px) clamp(16px,1.9vw,22px) clamp(16px,1.8vw,20px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,18px) clamp(20px,2.6vw,40px);
}
.t-titles li{ position:relative; padding:0 0 0 26px; border:0; }
.t-titles li::before{
  content:""; position:absolute; left:3px; top:.42em; width:6px; height:11px;
  border-right:2px solid var(--azure); border-bottom:2px solid var(--azure);
  transform:rotate(42deg);
}
@media (max-width:700px){ .t-titles{ grid-template-columns:1fr; } }
.t-titles b{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:15px; line-height:1.3; letter-spacing:var(--track-sm); color:var(--navy);
}
.t-titles span{ display:block; margin-top:3px; font-size:13.5px; line-height:1.5; color:var(--slate); }

/* the closer: a photograph and the offer to do the mapping for you */
.t-map{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,64px); align-items:center;
  margin-top:clamp(46px,5.6vw,78px);
}
.t-map__fig, .t-proof__fig{
  /* radius and shadow live on the figure, not the image - otherwise the hover
     zoom scales the drop shadow along with the picture. */
  margin:0; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 34px 64px -38px rgba(20,33,61,.55);
  /* matches the text block's height, then overhangs it by 25px top and bottom. */
  align-self:stretch; position:relative; margin-block:-25px; min-height:340px;
}
.t-map__fig img, .t-proof__fig img{
  /* absolutely positioned so the picture contributes no intrinsic height:
     the row is then set by the text beside it, and the photo fills whatever
     that comes to instead of dictating its own height from its shape. */
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur) var(--ease);
}
.t-map__fig:hover img, .t-proof__fig:hover img{ transform:scale(1.04); }
.t-map h3{ margin:0 0 12px; font-size:clamp(22px,2.4vw,31px); line-height:1.14; letter-spacing:var(--track-lg); }
/* No max-width. The grid is already 1fr 1fr, so the column IS the measure — at a
   536px half that is about 57 characters. A 52ch cap on top of it just left the
   text short of its own column. */
.t-map p{ margin:0 0 1em; font-size:15.5px; line-height:1.66; color:var(--slate); }
.t-map p:last-child{ margin-bottom:0; }
/* .t-map .t-map__act, not .t-map__act: the rule above is (0,1,1) and a bare class
   is (0,1,0), so the authored spacing lost and the button sat flush against the
   copy. */
.t-map .t-map__act{ margin:clamp(18px,2vw,24px) 0 0; }

/* hand-off out to the other half of the offer */


/* ---------- O3 . FREE COURSES - navy band ---------- */
.t-free-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.9vw,24px); align-items:stretch;
}
.t-free-card{
  display:flex; flex-direction:column;
  padding:clamp(24px,2.7vw,34px); border-radius:var(--radius);
  background:rgba(255,255,255,.045); border:1px solid var(--line-on-dark);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.t-free-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.075);
  border-color:var(--ring-on-dark);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.55);
}
.t-free-card{ position:relative; cursor:pointer; }
.t-free-card .link-arrow::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:var(--radius); }
.t-free-card__tag{
  margin:0 0 11px; font-family:var(--font-display); font-weight:700;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--azure);
}
.t-free-card h3{ margin:0 0 12px; font-size:clamp(20px,2vw,25px); line-height:1.16; letter-spacing:var(--track-md); color:#fff; }
.t-free-card__blurb{ margin:0 0 20px; font-size:14.5px; line-height:1.58; color:rgba(255,255,255,.72); }
.t-covers{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; flex:1 1 auto; }
.t-covers li{ position:relative; padding-left:26px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.86); }
.t-covers li::before{
  content:""; position:absolute; left:3px; top:.4em; width:6px; height:11px;
  border-right:2px solid var(--azure); border-bottom:2px solid var(--azure);
  transform:rotate(42deg);
}
.t-free-card__who{
  margin:0 0 22px; padding-top:16px; border-top:1px solid var(--line-on-dark);
  font-size:13px; line-height:1.55; color:rgba(255,255,255,.58);
}
.t-free-card__who b{ color:rgba(255,255,255,.86); font-weight:600; }
.t-free-card .link-arrow{ margin-top:auto; }
.t-free__note{
  margin:clamp(30px,3.4vw,42px) auto 0; max-width:72ch; text-align:center;
  font-size:14.5px; line-height:1.64; color:rgba(255,255,255,.64);
}

/* ---------- O4 . INSIDE A COURSE - white band ----------
   Five steps read left to right on one rail, so the shape of a run is
   visible before any of the words are. Numbers sit on the rule. */
.t-run{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
}
.t-run li{ position:relative; padding-top:clamp(26px,2.6vw,32px); border-top:2px solid var(--line);
  transition:border-color var(--dur-fast) var(--ease); }
/* Pill, not a disc: same shape family as the capability rail's markers on Home.
   It sits on the rule with the copy below it, so the extra width just covers a
   little more of the rule and nothing shifts. */
.t-run__n{
  position:absolute; left:0; top:0; transform:translateY(-50%);
  min-width:42px; height:30px; padding:0 12px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  color:#fff; background:var(--deep);
  transition:background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.t-run h3{ margin:0 0 8px; font-size:clamp(16px,1.5vw,18.5px); line-height:1.22; letter-spacing:var(--track-sm);
  transition:color var(--dur-fast) var(--ease); }

/* Hover: rule, marker and title move together to the same accent, at the same
   speed, so a step reads as one thing lighting up rather than three effects.
   Same 180ms and same azure as the equivalent steps on Subscription Plans and
   Contact, and as the capability rail's active step on Home.
   No cursor change and no movement: these are steps, not links, and a pointer
   on text that does not click is worse than no hover at all. Colour only, so
   the site's reduced-motion rule flattens it for free. */
.t-run li:hover{ border-top-color:var(--azure); }
.t-run li:hover .t-run__n{ background:var(--azure); box-shadow:0 8px 24px rgba(33,150,243,.38); }
.t-run li:hover h3{ color:var(--deep); }
.t-run p{ margin:0; font-size:13.5px; line-height:1.56; color:var(--slate); }

/* the proof: what the learner actually walks away with */
.t-proof{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.4vw,64px); align-items:center;
  margin-top:clamp(48px,5.8vw,82px);
}
.t-proof h3{ margin:0 0 12px; font-size:clamp(22px,2.4vw,31px); line-height:1.14; letter-spacing:var(--track-lg); }
/* No max-width, same reasoning as .t-map p above: the grid is 1fr 1fr, so the
   column is already the measure and a ch cap on top only holds the text short. */
.t-proof p{ margin:0 0 12px; font-size:15.5px; line-height:1.66; color:var(--slate); }
.t-proof p:last-child{ margin-bottom:0; }
/* two classes, not one: .t-proof p is (0,1,1) and beats a bare .t-proof__act */
.t-proof .t-proof__act{ margin:clamp(18px,2vw,24px) 0 0; }

/* ---------- O5 . PACKAGES - mist band ---------- */
.t-pack-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.9vw,24px); align-items:stretch;
}
.t-pack{
  display:flex; flex-direction:column;
  padding:clamp(24px,2.7vw,34px); border-radius:var(--radius);
  background:var(--white); border:1px solid var(--line);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.t-pack:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px -20px rgba(20,33,61,.45);
}
.t-pack{ position:relative; cursor:pointer; }
.t-pack .link-arrow::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:var(--radius); }
.t-pack__tag{
  margin:0 0 11px; font-family:var(--font-display); font-weight:700;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--deep);
}
.t-pack h3{ margin:0 0 12px; font-size:clamp(20px,2vw,25px); line-height:1.16; letter-spacing:var(--track-md); }
.t-pack__blurb{ margin:0 0 20px; font-size:14.5px; line-height:1.58; color:var(--slate); }
.t-inc{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; flex:1 1 auto; }
.t-inc li{ position:relative; padding-left:26px; font-size:13.5px; line-height:1.5; color:var(--navy); }
.t-inc li::before{
  content:""; position:absolute; left:3px; top:.4em; width:6px; height:11px;
  border-right:2px solid var(--azure); border-bottom:2px solid var(--azure);
  transform:rotate(42deg);
}
.t-pack__price{ margin:15px 0 25px; padding:25px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.t-pack__price b{ display:block; font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--navy); }
.t-pack__price span{ display:block; margin-top:5px; font-size:13px; line-height:1.45; color:var(--slate); }

/* how a package is actually bought in v1, and where the other page starts */
.t-manual{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,26px); margin-top:clamp(34px,4vw,54px);
}
/* the grid column already sets the width here, so the callout's own 62ch box
   cap would only open dead space on the right of each — let them fill */
.t-manual > .callout{ max-width:none; }




.t-manual p{ margin:0 0 12px; max-width:50ch; font-size:14.5px; line-height:1.6; color:var(--slate); }

/* ---------- PLACEHOLDER MARKER — now silent ----------
   .ph drew a dotted underline and a help cursor until 04 Aug, when the client
   asked for it gone. It renders nothing now; the class stays in the markup so
   the content can still be found. See www/PLACEHOLDER-CONTENT.md — the sixteen
   course titles and the three free titles on this page are all unconfirmed. */

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .t-run{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(28px,4vw,38px); }
}
@media (max-width:1080px){
  .t-free-grid, .t-pack-grid{ grid-template-columns:1fr; }
  .t-free-card, .t-pack{ padding:clamp(22px,3vw,28px); }
  .t-covers, .t-inc{ flex:0 0 auto; }
}
@media (max-width:900px){
  .t-map, .t-proof, .t-manual{ grid-template-columns:1fr; }
  .t-mast{ min-height:auto; }
  .t-mast h1{ max-width:none; }
}
@media (max-width:600px){
  .t-run{ grid-template-columns:1fr; }
}