/* Phone and tablet layouts for the W.E launch page.
   The Claude Design page is drawn for desktop with inline styles, so these rules override them
   with !important. Hooks: data-screen-label (from the design), and data-book, data-tl, data-prem,
   data-prem-cap (added by scripts/build-design-page.py). Desktop (above 1100px) is untouched
   except for the rules in the first block. */

/* All sizes */
[data-book] { display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none !important; }
[data-prem-cap] { display: none; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Tablet and below: the timeline strip gets room for its labels and swipes sideways. */
@media (max-width: 1100px) {
  [data-tl] { scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  [data-tl]::-webkit-scrollbar { display: none; }
  [data-tl] > div { min-width: 960px !important; }
}

/* The section is #approach since Masterclass v2 (29 Sep 2026), with an empty #curriculum anchor as
   its first child, so every child index below is one more than it was. */
/* Below the two-column curriculum: rows size to their text (they overlapped), and the stage
   sits above the list so a changing chapter never pushes it down. */

/* The chapter stage is 720 x 700 when the Measure rows stack (the design's script switches at a
   940 px window, so this does too). build-design-page.py item 9 sets the inner height to match. */
@media (max-width: 940px) {
  [data-stage] { aspect-ratio: 720 / 700 !important; }
}

/* Phones */
@media (max-width: 760px) {
  /* The nav is in site-header.css, shared with the other pages. */
  /* Hero: the full first screen, the popups across the top of the photo, the headline at the foot. */
  header[data-screen-label="Hero"] { padding: 4px 10px 0 !important; }
  header[data-screen-label="Hero"] > div {
    border-radius: 24px !important;
    height: max(660px, calc(100svh - 66px)) !important;
    min-height: 0 !important;
  }
  header[data-screen-label="Hero"] > div > div:last-child { padding: 22px 20px 22px !important; gap: 18px !important; }
  header[data-screen-label="Hero"] [data-reveal] { min-width: 0 !important; width: 100%; gap: 14px !important; }
  header[data-screen-label="Hero"] [data-reveal] > div:first-child { flex-wrap: wrap; gap: 8px 10px !important; }
  header[data-screen-label="Hero"] [data-reveal] > div:first-child > span:first-child { white-space: nowrap; height: 26px !important; }
  header[data-screen-label="Hero"] [data-reveal] > div:first-child > span:last-child { font-size: 11px !important; letter-spacing: 0.1em !important; }
  header[data-screen-label="Hero"] h1 { font-size: clamp(40px, 11.6vw, 52px) !important; }
  header[data-screen-label="Hero"] p { font-size: 15px !important; line-height: 1.5 !important; }
  header[data-screen-label="Hero"] [data-book] { height: 52px !important; font-size: 15px !important; }
  header[data-screen-label="Hero"] [data-reveal]:last-child > a:last-child { height: 46px !important; font-size: 14px !important; }
  header[data-screen-label="Hero"] [data-reveal]:last-child { gap: 10px !important; }
  /* The popups: full width across the top, a little smaller, never over the headline. */
  header[data-screen-label="Hero"] [data-pop] {
    top: 12px !important; left: 12px !important; right: 12px !important;
    width: auto !important; max-width: 380px;
    zoom: 0.82;
    padding: 14px 16px !important;
    gap: 10px !important;
  }
  header[data-screen-label="Hero"] [data-pop="nudge"] { left: auto !important; }


  [data-screen-label="Premise"] { padding: 44px 20px 56px !important; gap: 28px !important; }
  [data-prem] { border-radius: 20px !important; }

  #approach { padding: 16px 20px 72px !important; }
  #approach > div:nth-child(2) { flex-wrap: wrap; gap: 6px 16px !important; padding-bottom: 20px !important; }
  #approach > div:nth-child(3) { padding-top: 24px !important; gap: 28px !important; }
  #approach > div:nth-child(3) > div:nth-child(2) > div:last-child > div:first-child { font-size: 24px !important; }

  #guide > div { padding: 64px 20px !important; gap: 40px !important; }
  #guide [style*="font-size: 40px"] { font-size: clamp(22px, 6.3vw, 40px) !important; }
  #guide [style*="repeat(3, minmax(0px, 1fr))"] { gap: 14px !important; }

  #inside { padding: 72px 0 !important; }
  #inside > div:first-child { padding: 0 20px 28px !important; }
  #inside > div:nth-child(2) { height: calc(min(520px, 100vw - 72px) / 1.6 + 72px) !important; }
  #inside [data-shot] { width: min(520px, calc(100vw - 72px)) !important; }
  #inside [data-shot] > div:first-child { width: 100% !important; height: auto !important; aspect-ratio: 1.6; }

  [data-screen-label="Promises"] > div { padding: 0 20px !important; }
  [data-screen-label="Promises"] [data-reveal] { padding: 32px 0 !important; }
  [data-screen-label="Promises"] [data-reveal] + [data-reveal] { border-top: 1px solid #E6DACB; }

  [data-screen-label="CTA"] { padding: 56px 12px 64px !important; }
  [data-screen-label="CTA"] > div { border-radius: 24px !important; }
  [data-screen-label="CTA"] > div > div:last-child { min-height: 320px !important; }

  footer > div { padding: 24px 20px !important; }
}

/* Small phones (320 to 374 px wide): the eyebrow wraps to two lines here, so the popups step down
   and the hero grows a little to keep them clear of the headline. */
@media (max-width: 374px) {
  header[data-screen-label="Hero"] > div { height: max(690px, calc(100svh - 66px)) !important; }
  header[data-screen-label="Hero"] [data-pop] { zoom: 0.74; }
  header[data-screen-label="Hero"] [data-reveal] > div:first-child > span:last-child { font-size: 10px !important; letter-spacing: 0.08em !important; }
  header[data-screen-label="Hero"] p { font-size: 14px !important; }
}

/* ── Second pass, 27 Sep 2026 ─────────────────────────────────────────────────────────────── */

/* Timeline strip: a soft fade on the right says it scrolls; the extra end margin keeps the
   last label clear of the fade once swiped to the end. */
@media (max-width: 1100px) {
  [data-tl] { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  [data-tl] > div { margin-right: 56px; }
}

/* Tablets: "Your guide" side by side instead of a photo stacked over a long empty band, and the
   three promises in one row instead of two plus one. */
@media (min-width: 700px) and (max-width: 1100px) {
  #guide > div { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important; gap: 44px !important; padding: 88px 32px !important; }
  #guide [style*="font-size: 40px"] { font-size: clamp(26px, 3.4vw, 40px) !important; }
  [data-screen-label="Promises"] > div { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 28px !important; }
  [data-screen-label="Promises"] [data-reveal] > div:first-child { font-size: 28px !important; }
}

/* Touch screens cannot hover, so the carousel's "Hover to pause" hint is hidden; the arrows stay. */
@media (pointer: coarse) {
  #inside > div:first-child > div:last-child > span:first-child { display: none; }
}

@media (max-width: 760px) {
  /* The lightbox shows the screen at its own shape instead of a phone-tall panel that is mostly
     empty. "Actual size" still opens it for panning. */
  #inside div:has(> iframe[style*="scale("]) { height: calc((100vw - 48px) / 1.6) !important; border-radius: 12px !important; }
}

/* Tablets: the closing block keeps the design's two halves instead of a full-width photo. */
@media (min-width: 700px) and (max-width: 1100px) {
  [data-screen-label="CTA"] > div { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; }
  [data-screen-label="CTA"] { padding: 88px 32px !important; }
}

/* ── Third pass, 1 Oct 2026 (Masterclass v3) ──────────────────────────────────────────────── */

/* The runtime writes every inline style back as "prop: value" (a space after the colon), so an
   attribute selector must be written that way to match. The two #guide rules above were fixed
   for this on 1 Oct; before that the phone and tablet sizes for the stats never applied. */

/* Hero popups on phones: nothing reads smaller than 12 px. The popups are drawn at zoom 0.82
   (0.74 below 375 px), so each small size is raised until size x zoom is at least 12. */
@media (max-width: 760px) {
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 10.5px"],
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 11px"],
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 11.5px"],
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 12.5px"] { font-size: 14.7px !important; }
  header[data-screen-label="Hero"] [data-pop] span[style*="height: 24px"] { height: auto !important; min-height: 24px; padding: 4px 10px !important; }
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 13.5px"] { font-size: 15px !important; }
  /* The larger text makes the check-in card taller; tighter spacing gives the height back so the
     cards still clear the headline (scripts/hero-check.mjs). */
  header[data-screen-label="Hero"] [data-pop] { padding: 12px 14px !important; gap: 8px !important; }
  /* v3's hero label and line are longer (Dr Niru, 1 Oct), so the headline steps down a size and
     the cards sit closer to the top to keep the gap between them. */
  header[data-screen-label="Hero"] h1 { font-size: clamp(38px, 10.6vw, 50px) !important; }
  header[data-screen-label="Hero"] [data-pop] { top: 8px !important; }
  header[data-screen-label="Hero"] > div { height: max(690px, calc(100svh - 66px)) !important; }
  header[data-screen-label="Hero"] [data-pop="nudge"] [style*="height: 30px"] { height: 28px !important; }
}
@media (max-width: 374px) {
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 10.5px"],
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 11px"],
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 11.5px"],
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 12.5px"] { font-size: 16.3px !important; }
  header[data-screen-label="Hero"] [data-pop] [style*="font-size: 13.5px"] { font-size: 16.3px !important; }
}

/* Timeline strip: a soft fade on the left as well, so a label passing the edge fades out instead
   of being cut mid-word ("ero"); the start margin keeps the first label clear of it. */
@media (max-width: 1100px) {
  [data-tl] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 86%, transparent); }
  [data-tl] > div { margin-left: 20px; }
}

/* Tablets: v3's longer hero label runs under the check-in card, so the cards sit a little higher. */
@media (min-width: 761px) and (max-width: 1100px) {
  header[data-screen-label="Hero"] [data-pop] { top: 16px !important; }
}

/* ── Masterclass v3 loop, 1 Oct 2026 ──────────────────────────────────────────────────────── */

/* The word ribbon is back in the loop design. */
@media (max-width: 760px) {
  [data-marquee] { font-size: 32px !important; gap: 32px !important; }
  [data-marquee] > span { gap: 32px !important; }
  [data-screen-label="Ribbon"] { padding: 22px 0 !important; }
}

/* Day 0, 963 px and below: the stage shows the console window only (the build scales it to 852 px
   there) and the week list with the cohort strip follows it at full size. */
@media (max-width: 963px) {
  [data-prem] { aspect-ratio: 852 / 600 !important; }
  [data-prem-cap] { display: flex; flex-direction: column; margin-top: -12px; }
  [data-prem-cap] > button { border: none; background: none; }
  [data-prem-cap] [data-k="cohort"] { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
  [data-prem-cap] [data-k="cohort"] > div { display: flex; justify-content: space-between; align-items: flex-end; height: 34px; max-width: 420px; }
  [data-prem-cap] [data-k="cohort"] > span { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 19px; line-height: 1.2; color: #7A6B63; }
}

/* Six stages, one loop: the centre text keeps clear of the side pills at every size. */
#approach > div:nth-child(3) > div:first-child > div > div:nth-child(3) { padding: 0 25% !important; }

/* Phones: a 300 px ring with smaller pills; the stage description sits under the ring (the ring is
   too small to hold it), with room kept for four lines so the stage below never jumps. */
@media (max-width: 760px) {
  #approach > div:nth-child(3) > div:first-child { padding: 30px 0 128px !important; }
  #approach > div:nth-child(3) > div:first-child > div { max-width: 300px !important; }
  #approach > div:nth-child(3) > div:first-child button { height: 40px !important; padding: 0 14px !important; font-size: 18px !important; }
  #approach > div:nth-child(3) > div:first-child > div > div:nth-child(3) { padding: 0 24% !important; gap: 6px !important; }
  #approach > div:nth-child(3) > div:first-child > div > div:nth-child(3) > div:nth-child(1) { font-size: 30px !important; }
  #approach > div:nth-child(3) > div:first-child > div > div:nth-child(3) > div:nth-child(2) { font-size: 28px !important; }
  #approach > div:nth-child(3) > div:first-child > div > div:nth-child(3) > div:nth-child(3) {
    position: absolute; top: calc(100% + 34px); left: 0; right: 0; max-width: none !important;
    font-size: 15px !important; line-height: 1.55 !important;
  }
}


/* ── Launch review, 5 Oct 2026 ─────────────────────────────────────────────────────────────── */

/* The hero's journey row (Women leaders, Senior leaders, Managers). On phones the three pills share
   one row, and the hero is taller by that row, so the popups still clear the headline
   (scripts/hero-check.mjs). */
@media (max-width: 760px) {
  header[data-screen-label="Hero"] [data-jrow] { gap: 8px !important; margin-top: 2px !important; }
  header[data-screen-label="Hero"] [data-jrow] > div { flex-wrap: nowrap !important; gap: 6px !important; }
  header[data-screen-label="Hero"] [data-jrow] a { flex: 1 1 auto; justify-content: center; padding: 0 8px !important; height: 34px !important; font-size: 13px !important; }
  header[data-screen-label="Hero"] > div { height: max(780px, calc(100svh + 24px)) !important; }
}
@media (max-width: 374px) {
  header[data-screen-label="Hero"] [data-jrow] a { font-size: 12px !important; padding: 0 6px !important; }
  header[data-screen-label="Hero"] > div { height: max(800px, calc(100svh + 44px)) !important; }
}
/* Tablets: the button column sits under the headline here, so the journey row needs the hero taller. */
@media (min-width: 761px) and (max-width: 1100px) {
  header[data-screen-label="Hero"] > div { height: max(min(860px, 92vh), min(760px, 86vh)) !important; }
}