/* ============================================================
   PRIME ACADEMY GROUP — v6.1.2
   page-online-training.css — Online Training, and nothing else.

   Load order: fonts.css → system.css → shared.css → page-online-training.css

   The opening, the nav, the dark panel, the closing pair, the footer and the
   eyebrow are all in shared.css. Five arrangements are this page's own:

     · the free-course cards
     · the four subject areas, sixteen titles between them
     · the five-step run
     · the certificate block
     · the package cards

   No new colour, radius, type size or easing. The bullet is the site's own,
   taken from the privacy page rather than invented here.
   ============================================================ */

/* ── THE SITE'S BULLET ──
   Taken from the privacy page and used on Platform, not invented here: a
   square with the corner just knocked off, in deep at 50%. Not a disc, because
   every other small mark on this site is a square with a soft corner and a
   round bullet would be the one exception. 6px at 25% is 1.5px of corner, the
   same proportion --r-chip has on the 40px chip, so the bullet and the chip
   are the same shape at two sizes. .5em down puts it on the x-height of the
   first line rather than its top.

   It replaced a ticked chip on both lists here. A tick asserts "included",
   which is right in a comparison table where a plan might not have something;
   in a list of what a course covers, nothing is being contrasted and the mark
   was only decoration. */
.fc-covers li,.pk-items li{position:relative;padding-left:var(--s4);
  font-size:var(--t-small);line-height:var(--lh-small);color:var(--muted)}
.fc-covers li::before,.pk-items li::before{content:'';position:absolute;
  left:0;top:.5em;width:6px;height:6px;border-radius:25%;
  background:color-mix(in srgb, var(--deep) 50%, transparent)}

/* ═══ 1 · THE OPENING ═══
   Shot for this page at 16:9 and mirrored, which puts the people on the right
   and leaves the open side of the room under the type rather than a face.

   The crop sits lower in the source than the shared 40%, so the frame carries
   more of the table and the group rides a little higher in it. */
.open-bg img{object-position:center 52%}

/* ═══ 2 · FREE COURSES ═══
   Three cards, and each is a whole course rather than a teaser: the section's
   whole argument is that nothing has been cut down, so the card shows what is
   covered and who it suits before it asks anybody to sign up. */
.fcs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.fc{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s5);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
.fc:hover{transform:translateY(-4px);box-shadow:var(--lift);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
.fc:hover .btn-primary{background:var(--deep-press)}
.fc:hover .btn svg{transform:translateX(3px)}

/* Free is the point of the section, so it is stated in the accent rather than
   whispered in grey. Same pill the Plans page puts its saving in. */
.fc-tag{align-self:flex-start;margin-bottom:var(--s5);
  font-family:var(--font-display);font-weight:600;font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--deep);
  background:var(--wash);border-radius:var(--r-pill);padding:5px 12px}
.fc h3{margin-bottom:var(--s3)}
/* One step above the list beneath it. Both were --t-small and the card had no
   hierarchy: a summary of the course and a list of its parts read as the same
   rank. */
.fc-blurb{max-width:none;font-size:var(--t-text);line-height:var(--lh-text);
  margin-bottom:var(--s4);padding-bottom:var(--s3);
  border-bottom:1px solid var(--hair);text-wrap:pretty}

/* ── TWO NAMED BLOCKS ──
   What it covers, then who it suits. Unlabelled, the bullets ran into a grey
   sentence and a reader had to work out that the last line answered a
   different question from the four above it.

   Bright Blue, the same accent the site's eyebrow carries, at a size below it:
   .6875rem against the eyebrow's .75rem. So the two blocks are plainly labelled
   and the label still sits under the section heading rather than competing
   with it. */
.fc-label{max-width:none;margin:0 0 var(--s4);
  font-family:var(--font-display);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azure);line-height:1}

.fc-covers{list-style:none;display:flex;flex-direction:column;gap:var(--s1);
  margin:0 0 var(--s3)}

/* Its own block, under its own rule, so it reads as the card's closing fact
   rather than a fifth thing the course covers. */
.fc-who{padding-top:var(--s4);border-top:1px solid var(--hair);
  margin-bottom:var(--s6)}
.fc-who p:last-child{max-width:none;margin:0;font-size:var(--t-small);
  line-height:var(--lh-small)}

/* THE SPACER SITS ABOVE THE BUTTON, not inside the list. With flex:1 on the
   covers the slack collected between the bullets and who-it-suits, which left
   a hole in the middle of the shorter two cards. Here only the buttons line
   up, and the words stay together. */
.fc .btn{align-self:stretch;justify-content:center;margin-top:auto}


/* ═══ 3 · THE RANGE ═══
   Four cards, one per subject area, each carrying its four titles in full.
   v4.7 hid these behind an accordion; four cards of four lines is shorter than
   either that or the plain list, and nothing is behind a click. */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);
  margin-bottom:var(--s6)}
.area{border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s5);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
/* Not a link, so it warms rather than lifting. */
.area:hover{background:var(--wash);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
.area-head{display:grid;grid-template-columns:56px minmax(0,1fr);
  column-gap:var(--s2);align-items:center;margin-bottom:var(--s4);
  padding-bottom:var(--s4);border-bottom:1px solid var(--hair)}
.area-ico{width:48px;height:48px;border-radius:var(--r-card);font-size:26px;
  display:flex;align-items:center;justify-content:center;
  background:var(--deep);color:#fff;
  transition:background var(--fast) var(--ease)}
.area:hover .area-ico{background:var(--azure)}
.area-head h3{margin-bottom:2px}
/* The count is a fact about the card, not a heading, so it takes the fine size
   and the muted ink rather than another line of display type. */
.area-n{margin:0;max-width:none;font-size:var(--t-fine);
  line-height:var(--lh-fine);color:var(--faint)}

.titles{list-style:none;display:flex;flex-direction:column;gap:var(--s3);margin:0}
/* Title and audience on two lines, not one: the audience line is the useful
   half and running it on after the title buries it. */
.titles li{display:flex;flex-direction:column;gap:3px}
.titles b{font-family:var(--font-display);font-weight:500;font-size:.95rem;
  line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.titles span{font-size:.85rem;line-height:var(--lh-small);
  color:#9d9d9d}

/* The offer to do the mapping for you. */
/* Words across the full width, action beneath them. Set beside each other the
   paragraph was held to a measure with the button parked in the space it left;
   stacked, the words use the whole block and the action follows the thing it
   is answering. */
.roles{background:var(--wash);border-radius:var(--r-card);padding:var(--s6);
  display:flex;flex-direction:column;align-items:flex-start}
.roles h3{margin-bottom:var(--s3)}
/* Same eyebrow the pricing note carries, so the two blocks that sit under a
   grid and explain something about it are labelled the same way. */
.roles .tag{margin-bottom:var(--s3)}
/* No measure. The block is already a comfortable line length and capping it
   left a dead strip down the right-hand side. */
.roles p{max-width:none;margin:0 0 var(--s5);font-size:var(--t-small);
  line-height:var(--lh-small)}

/* ═══ 4 · INSIDE A COURSE, on the dark panel ═══
   Five cards, one per step. They were five bare numbers with text under them
   and a hairline behind, which read as a table of contents rather than a
   sequence of things that happen.

   Same card as the navy pairs elsewhere on the site: the capability tiles'
   surface, the stepper's chip, and the shared eyebrow carrying the number,
   which is the one place on this site where a numbered label is honest —
   these ARE in order and the order matters. */
.run{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  gap:var(--s4);margin:0;padding:0}
.step{display:flex;flex-direction:column;
  background:color-mix(in srgb, #fff 7%, transparent);
  border:1px solid color-mix(in srgb, #fff 13%, transparent);
  border-radius:var(--r-card);padding:var(--s5);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
/* Not a link, so it warms rather than lifting, like the tiles. */
.step:hover{background:color-mix(in srgb, #fff 12%, transparent);
  border-color:color-mix(in srgb, var(--azure) 46%, transparent)}
/* The stepper badge in the state it settles into, at 44px rather than 56:
   five of them across one panel need the width back. */
.step-ico{width:44px;height:44px;border-radius:var(--r-chip);font-size:21px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s5);background:var(--deep);
  border:1px solid color-mix(in srgb, var(--azure) 90%, transparent);
  color:color-mix(in srgb, var(--azure) 45%, #fff)}
.step .tag{margin-bottom:var(--s3)}
.step h3{font-size:1rem;margin-bottom:6px}
.step p{max-width:none;font-size:var(--t-small);line-height:var(--lh-small);
  margin:0;color:color-mix(in srgb, #fff 64%, var(--navy))}

/* ═══ 5 · THE CERTIFICATE ═══
   Its own light panel now. Inside the dark one, under the five steps, it was a
   second subject with its own picture and its own heading, which made that
   panel two sections wearing one background. */
.cert{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);
  align-items:stretch}
/* The picture matches its column, as it does on About and on Plans. */
.cert-fig{position:relative;overflow:hidden;border-radius:var(--r-card);
  background:var(--wash)}
.cert-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.02);
  transition:filter var(--fast) var(--ease),transform var(--fast) var(--ease)}
.cert-fig:hover img{filter:none;transform:scale(1.035)}
.cert-fig::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--deep) 8%, transparent) 0%,
    color-mix(in srgb, var(--deep) 2%, transparent) 46%,
    color-mix(in srgb, var(--navy) 15%, transparent) 100%)}
.cert-text{display:flex;flex-direction:column;justify-content:center}
.cert-text h2{margin-bottom:var(--s4)}
/* The first sentence is the claim; the two paragraphs under it are the working
   out. So it takes the lead size and they drop to small, which is the step the
   rest of the site puts between a section's opening line and its detail. */
.cert-text .lead{max-width:none;margin-bottom:var(--s5)}
.cert-text p:not(.lead){max-width:none;font-size:var(--t-small);
  line-height:var(--lh-small)}
.cert-text p:not(.lead) + p{margin-top:var(--s4)}
.cert-text .btn{align-self:flex-start;margin-top:var(--s6)}

/* ═══ 5 · PACKAGES ═══
   The homepage's picture card, carrying a contents list and a price note.
   Priced on enquiry, and it stays that way: the client's figures cover
   subscriptions, not these bundles. */
.pks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
/* THE WHOLE CARD IS THE LINK, so the thing that looks like a link inside it is
   a span: a link cannot sit inside a link. */
.pk{display:flex;flex-direction:column;background:var(--panel);
  text-decoration:none;color:inherit;
  border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
/* The homepage option card's hover, exactly: the card lifts and takes the
   shadow, the border gives way to it, the photograph releases to full colour
   and the chip goes Bright Blue. The enquiry link answers with it, since the
   pointer is rarely on the words themselves. */
.pk:hover{transform:translateY(-4px);box-shadow:var(--lift);
  border-color:transparent}
.pk:hover .link{color:var(--azure)}
.pk:hover .link svg{transform:translateX(3px)}
.pk-fig{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--wash)}
.pk-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.02);
  transition:filter var(--fast) var(--ease),transform var(--fast) var(--ease)}
.pk:hover .pk-fig img{filter:none;transform:scale(1.035)}
.pk-fig::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--deep) 8%, transparent) 0%,
    color-mix(in srgb, var(--deep) 2%, transparent) 46%,
    color-mix(in srgb, var(--navy) 15%, transparent) 100%)}

/* The chip straddles the image edge, exactly as it does on the homepage's
   option cards. The same mark on all six, because all six are the same kind of
   thing: what differs is the photograph and the contents, not the type. */
.pk-ico{position:absolute;left:var(--s5);top:0;transform:translateY(-50%);z-index:3;
  width:56px;height:56px;border-radius:var(--r-card);background:var(--deep);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;
  transition:background var(--fast) var(--ease)}
.pk:hover .pk-ico{background:var(--azure)}
/* 52px, not 64: the chip hangs 28px into the body, so the top padding is what
   sets the gap under it. */
.pk-body{position:relative;display:flex;flex-direction:column;flex:1;
  padding:52px var(--s6) var(--s6)}
.pk-body h3{margin-bottom:var(--s3)}
.pk-lead{max-width:none;font-size:var(--t-small);line-height:var(--lh-small);
  margin-bottom:var(--s4);text-wrap:pretty}
.pk-items{list-style:none;display:flex;flex-direction:column;gap:var(--s2);
  margin:0 0 var(--s4);padding:var(--s4) 0 0;border-top:1px solid var(--hair);
  flex:1}
.pk .link{align-self:flex-start;margin-top:auto}

/* ── ONE PRICING NOTE, NOT SIX ──
   The same three lines sat inside every card, so a reader met them six times
   and the cards were a fifth longer for it. Said once, under the set, it is a
   fact about how packages are sold rather than a caveat on each one.

   No picture and no mark, so it cannot be mistaken for a seventh package: the
   cards above are all photograph and chip, this is a labelled statement on the
   wash. */
.pk-note{margin-top:var(--s5);background:var(--wash);
  border-radius:var(--r-card);padding:var(--s6)}
.pk-note h3{margin-bottom:var(--s3)}
.pk-note p{max-width:none;margin:0;font-size:var(--t-small);
  line-height:var(--lh-small)}

/* ═══ RESPONSIVE ═══ */

@media (max-width:1200px){
  /* Five cards across need width for a chip, a label, a title and three lines. */
  .run{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1080px){
  .fcs{grid-template-columns:1fr 1fr}
  .fcs .fc:last-child{grid-column:1/-1}
  .pks{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .fcs,.areas,.pks{grid-template-columns:1fr}
  .fcs .fc:last-child{grid-column:auto}
  .run{grid-template-columns:1fr 1fr}
  /* Words first, then the picture. Nothing to match, so it takes 4:3. */
  .cert{grid-template-columns:1fr;gap:var(--s5)}
  .cert-fig{order:2;aspect-ratio:4/3}
  .pk-ico{width:48px;height:48px;font-size:22px}
  .pk-body{padding-top:46px}
}
@media (max-width:560px){
  .run{grid-template-columns:1fr;gap:var(--s5)}
  .area,.fc{padding:var(--s5)}
  .pk-body{padding:46px var(--s5) var(--s5)}
  .roles{padding:var(--s5)}

}