/* ==========================================================================
   PRIME Academy — homepage
   Depends on base.css for tokens, buttons and the header/footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — copy column ruled off from a media column, with the cohort-average
   card breaking the gutter to overlap both.
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 470px;
  border-bottom: 1px solid var(--rule);
}

/* Grid items default to min-width:auto, which lets a wide child push the
   track past the container. Every column here is free to shrink. */
.hero > * { min-width: 0; }

.hero__copy {
  padding: 64px var(--gut) 56px;
  border-right: 1px solid var(--rule);
}

.hero__copy .eyebrow { display: block; margin-bottom: 26px; }

.hero h1 {
  font: 800 62px/1.02 var(--sans);
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 26px;
  max-width: 11ch;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Hero title reveal — a dim duplicate of the headline sits behind the real
   one; the real headline is clipped and sweeps open left to right on load,
   exposing its true (multi-colour, incl. the accent em) styling as it
   passes. Built as a grid overlay of two layers rather than a
   background-clip gradient, so the wipe respects the heading's existing
   two-colour styling instead of fighting a single gradient across it.

   Both layers are injected by JS (see site.js) — a script-disabled page
   never gets `.hero-title-wipe` or the `.wipe-text` class, so the heading
   falls straight back to the plain, always-visible `.hero h1` rule above.
   -------------------------------------------------------------------------- */

.hero-title-wipe {
  display: grid;
  margin-bottom: 26px;
}
.hero-title-wipe > * { grid-area: 1 / 1; }
/* Spacing now lives on the wrapper — a grid item's own margin does not push
   the wrapper's next sibling the way normal block flow would. */
.hero-title-wipe h1 { margin-bottom: 0; }

.hero-title-dim {
  font: 800 62px/1.02 var(--sans);
  letter-spacing: -.03em;
  max-width: 11ch;
  text-wrap: balance;
  color: var(--ink-faint);
  pointer-events: none;
  user-select: none;
}
.hero-title-dim em { font-style: normal; color: inherit; }

.js .hero h1.wipe-text { clip-path: inset(0 100% 0 0); }
.js.is-ready .hero h1.wipe-text {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) var(--wipe-delay, 260ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .hero h1.wipe-text,
  .js.is-ready .hero h1.wipe-text {
    clip-path: inset(0 0 0 0);
    transition: none;
  }
}

.hero__lead {
  font: 400 17px/1.6 var(--sans);
  margin-bottom: 34px;
  max-width: 44ch;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.hero__credentials {
  display: flex;
  gap: 22px;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.hero__credentials .rule-v {
  width: 1px;
  height: 34px;
  background: var(--rule);
  flex: none;
}

.hero__media { position: relative; }

.hero__media .img-slot {
  height: 100%;
  min-height: 520px;
  align-items: flex-start;
  padding: 20px;
}

.hero__stat {
  position: absolute;
  left: -64px;
  bottom: 44px;
  width: 290px;
  background: var(--navy);
  color: var(--white);
  padding: 26px 28px;
  box-shadow: 14px 14px 0 rgba(105, 101, 200, .28);
}
.hero__stat .eyebrow { display: block; margin-bottom: 14px; }
.hero__stat__figure {
  font: 800 54px/1 var(--sans);
  letter-spacing: -.03em;
}
.hero__stat__note {
  font: 400 13px/1.5 var(--sans);
  color: rgba(255, 255, 255, .82);
  margin-top: 10px;
}


/* --------------------------------------------------------------------------
   Proof bar
   -------------------------------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}

.proof > dl {
  padding: 30px 32px;
  border-right: 1px solid var(--rule);
  /* dt is first in source for validity — reversing puts the figure on top. */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}
.proof > dl:last-child { border-right: 0; }

.proof dd {
  margin: 0;
  font: 800 38px/1 var(--sans);
  letter-spacing: -.03em;
  color: var(--ink);
}
.proof dd span { color: var(--accent-text); }

.proof dt {
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-top: 10px;
}


/* --------------------------------------------------------------------------
   Programmes
   -------------------------------------------------------------------------- */

.programmes { padding: 56px var(--gut) 8px; }

.course-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.course-card {
  display: block;
  padding: 30px 32px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  color: inherit;
}
.course-card:hover { background: var(--tint); color: inherit; }
.course-card:nth-child(odd) { border-right: 1px solid var(--rule); }

.course-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.course-card .eyebrow {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  margin-bottom: 12px;
}

.course-card h3 {
  font: 800 24px/1.1 var(--sans);
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 12px;
}

.course-card p {
  font: 400 15px/1.55 var(--sans);
  max-width: 38ch;
}

.badge {
  background: var(--accent);
  color: var(--white);
  font: 700 10px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 10px;
  white-space: nowrap;
  flex: none;
}
.badge--muted { background: var(--mauve); }

.course-card__foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}
.course-card__price {
  font: 800 20px/1 var(--sans);
  color: var(--ink);
}
.course-card__unit {
  font: 400 13px/1 var(--sans);
  color: var(--mauve);
}
.course-card__foot .spacer { flex: 1; }


/* --------------------------------------------------------------------------
   Mock tests — inset navy panel with a sample band report
   -------------------------------------------------------------------------- */

.mocks {
  margin: 48px var(--gut) 0;
  background: var(--navy);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr 380px;
}

.mocks__copy {
  padding: 48px;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.mocks__copy .eyebrow { display: block; margin-bottom: 22px; }

.mocks h2 {
  font: 800 40px/1.06 var(--sans);
  letter-spacing: -.03em;
  margin-bottom: 18px;
  max-width: 22ch;
  text-wrap: balance;
}

.mocks p {
  font: 400 16px/1.6 var(--sans);
  color: rgba(255, 255, 255, .8);
  margin-bottom: 30px;
  max-width: 46ch;
}

.mocks__report {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mocks__report .eyebrow { display: block; margin-bottom: 18px; }

.band {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.band dt {
  font: 400 14px/1 var(--sans);
  color: rgba(255, 255, 255, .8);
}
.band dd {
  margin: 0;
  font: 800 20px/1 var(--sans);
}
.band--gap dd { color: var(--mauve); }

.band--total {
  padding: 16px 0 0;
  border-top: 2px solid var(--purple);
  margin-top: 6px;
}
.band--total dt {
  font: 700 13px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}
.band--total dd {
  font-size: 30px;
  color: var(--accent-text);
}


/* --------------------------------------------------------------------------
   Trainers
   -------------------------------------------------------------------------- */

.trainers { padding: 56px var(--gut) 0; }

.trainer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.trainer {
  padding: 28px 28px 32px;
  border-right: 1px solid var(--rule);
}
.trainer:last-child { border-right: 0; }

.trainer .img-slot {
  height: 150px;
  padding: 12px;
  margin-bottom: 20px;
}

.trainer h3 {
  font: 800 18px/1.1 var(--sans);
  color: var(--ink);
}

.trainer__creds {
  font: 600 10.5px/1.5 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-top: 8px;
}

.trainer p {
  font: 400 14px/1.55 var(--sans);
  margin-top: 14px;
}


/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.cta {
  margin-top: 56px;
  background: var(--shell);
  border-top: 1px solid var(--rule);
  padding: 52px var(--gut);
  display: flex;
  align-items: center;
  gap: 40px;
}

.cta h2 {
  font: 800 34px/1.1 var(--sans);
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 12px;
  max-width: 24ch;
  text-wrap: balance;
}

.cta p {
  font: 400 16px/1.55 var(--sans);
  max-width: 52ch;
}

.cta .spacer { flex: 1; }
.cta .btn { padding: 20px 30px; white-space: nowrap; }


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1079px) {
  .hero { grid-template-columns: 1fr; }

  .hero__copy {
    border-right: 0;
    padding: 44px var(--gut) 36px;
  }
  .hero h1,
  .hero-title-dim { font-size: 46px; max-width: 16ch; }

  /* The overlap only works with a gutter to break into — below the hero
     splits, the stat card becomes a full-width navy band. */
  .hero__media .img-slot { min-height: 0; height: 260px; }

  .hero__stat {
    position: static;
    width: auto;
    box-shadow: none;
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    padding: 24px var(--gut);
  }
  .hero__stat .eyebrow { flex-basis: 100%; margin-bottom: 6px; }
  .hero__stat__figure { font-size: 46px; }
  /* Definite basis + min-width:0 — `flex:1` on a zero basis would make this
     contribute its max-content width to the parent grid track. */
  .hero__stat__note { margin-top: 0; flex: 1 1 20ch; min-width: 0; }

  .mocks { grid-template-columns: 1fr; }
  .mocks__copy {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding: 36px var(--gut);
  }
  .mocks h2 { font-size: 30px; }
  .mocks__report { padding: 32px var(--gut); }

  .trainer-grid { grid-template-columns: 1fr; }
  .trainer {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-inline: 0;
  }
  .trainer:last-child { border-bottom: 0; }

  .cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .cta h2 { font-size: 28px; }
}

/* Four proof columns get too narrow for the letter-spaced labels well before
   the main layout collapses. */
@media (max-width: 899px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof > dl { padding: 22px 24px; }
  .proof > dl:nth-child(2n) { border-right: 0; }
  .proof > dl:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .proof dd { font-size: 30px; }
}

@media (max-width: 719px) {
  .hero h1,
  .hero-title-dim { font-size: 36px; max-width: none; }
  .hero__lead { font-size: 15px; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { display: block; }

  .hero__credentials { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero__credentials .rule-v { display: none; }

  .proof > dl { padding: 20px; }
  .proof dd { font-size: 26px; }
  .proof dt { font-size: 9.5px; }

  .programmes { padding: 30px var(--gut) 0; }
  .course-grid { grid-template-columns: 1fr; }
  .course-card {
    padding: 20px 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .course-card:nth-child(odd) { border-right: 0; }
  .course-card h3 { font-size: 20px; margin-bottom: 8px; }
  .course-card p { font-size: 14px; }

  .mocks { margin-inline: 0; }
  .mocks h2 { font-size: 26px; }
  .mocks .btn { display: block; }

  .trainers { padding-top: 30px; }
  .cta { padding: 28px var(--gut); }
  .cta h2 { font-size: 24px; }
  .cta .btn { display: block; width: 100%; }
}