/* ============================================================================
   ctc-hero.css — the cover-flow hero for the "content" course design
   (/courses/vibe-directing).

   course-content.css is generated and must not be hand-edited, so the hero
   rework lives here instead and is loaded after it. Every rule adds the
   .ctc-hero-slider class, so it only ever affects the reworked hero and the
   original .hero rules stay untouched for any other page using that design.

   Layout: copy centred, slider full-bleed underneath, one breakpoint at 900px.

   The whole hero is budgeted to fit one viewport so the slider is visible
   without scrolling. That is why the type scales on min(vw, vh) rather than vw
   alone — on a short laptop the height term binds and everything shrinks
   together, instead of the strip sliding below the fold.
   ========================================================================== */

.ctc-page .hero.ctc-hero-slider {
  --ctc-pad: 5vw;            /* the hero's side gutter */
  --ctc-header: 92px;        /* .hm-header is fixed — clear it */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The base .ctc-page .hero rule sets align-items: flex-end for its original
     row layout. In a column the cross axis is horizontal, so inheriting that
     pins the slider to the right edge at content width — it must be reset. */
  align-items: stretch;
  overflow: visible;
  background: var(--white);
  min-height: 100vh;
  min-height: 100svh;        /* mobile: ignore the collapsing browser chrome */
  padding: calc(var(--ctc-header) + clamp(12px, 2vh, 32px))
           var(--ctc-pad)
           clamp(14px, 2.5vh, 34px);
}

/* ── copy ─────────────────────────────────────────────────────────────────
   Centred to sit over the full-bleed strip — a left-aligned block leaves a
   dead white half where the hero photo used to be. */
.ctc-page .ctc-hero-slider .hero-copy {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2.2vh, 26px);
}

.ctc-page .ctc-hero-slider .hero-title {
  text-align: center;
  margin: 0;
  font-size: clamp(38px, min(6.2vw, 9.5vh), 92px);
  line-height: 0.92;
}

/* The yellow strapline. The original rule is a nowrap inline-flex pill sized
   for the left-aligned hero; centred multi-line copy needs it to wrap. */
.ctc-page .ctc-hero-slider .hero-subtitle {
  display: inline-block;
  white-space: normal;
  text-align: center;
  font-size: clamp(13px, min(1.35vw, 2.1vh), 20px);
  line-height: 1.35;
  padding: clamp(8px, 1.4vh, 14px) clamp(12px, 1.4vw, 18px);
  border-radius: 6px;
}

.ctc-page .ctc-hero-slider .hero-cta {
  height: clamp(50px, 7vh, 64px);
}

/* ── slider strip ─────────────────────────────────────────────────────────
   Cancel the gutter so the cards run off both screen edges. */
.ctc-page .ctc-hero-slider .hero-band {
  margin: clamp(16px, 2.5vh, 36px) calc(var(--ctc-pad) * -1) 0;
}

.ctc-page .ctc-hero-slider .cf {
  --cf-accent: #1200ff;      /* matches .hero-cta on this page */
  --cf-ink: var(--black);
}

/* The component's default 40px/34px breathing room is more than a
   one-viewport hero can spend. */
.ctc-page .ctc-hero-slider .cf-frame {
  padding: clamp(14px, 2.5vh, 34px) 0 clamp(12px, 2vh, 26px);
}
.ctc-page .ctc-hero-slider .cf-dots {
  gap: 8px;
}

.ctc-page .ctc-hero-slider .cf-prev { left: var(--ctc-pad); }
.ctc-page .ctc-hero-slider .cf-next { right: var(--ctc-pad); }

/* Yellow rule closing the hero, before the black stats block. It sits right on
   the fold, which is the point — it signals there is more below. */
.ctc-page .ctc-hero-lime {
  height: 14px;
  background: #e9ef00;
}

@media (max-width: 900px) {
  .ctc-page .hero.ctc-hero-slider {
    --ctc-pad: 22px;
    --ctc-header: 84px;
  }
  /* vw alone collapses the headline on a phone; the height term takes over. */
  .ctc-page .ctc-hero-slider .hero-title {
    font-size: clamp(32px, min(11vw, 8vh), 56px);
  }
  .ctc-page .ctc-hero-slider .hero-subtitle {
    font-size: clamp(13px, min(4.2vw, 2.1vh), 20px);
  }
  /* On mobile the original design swaps in .hero-subtitle-mobile; the
     reworked hero uses the one centred strap at every width. */
  .ctc-page .ctc-hero-slider .hero-subtitle { display: inline-block; }
  .ctc-page .ctc-hero-slider .hero-subtitle-mobile { display: none; }
  .ctc-page .ctc-hero-slider .cf-nav { width: 44px; height: 44px; }
}