/* ==========================================================================
   responsive.css — everything that is not the 1440 artboard
   --------------------------------------------------------------------------
   THE RULE FOR THIS FILE: nothing may apply AT 1440. Every selector sits
   inside either a `max-width: 1439px` query or a `min-width: 1441px` one,
   so the verified artboard rendering is untouched by construction and can
   be proved so by toggling this stylesheet at that width.

   Reference frames (file VTwXbZhC5eXcRZcW0J4fwF), measured:

     Mobile portrait   30583:417300    390   gutter 16  card 142x213  bar 64
     Mobile landscape  30583:417344    844   gutter 32  card 120x180  bar 64
     Tablet portrait   30583:417373    834   gutter 32  card 177x265  bar 88
     Tablet landscape  30583:417403   1194   gutter 64  card 161x241  bar 88
     Desktop           30583:417433   1440   gutter 64  card 202x303  bar 88
     Desktop extended  30583:417443   1920   gutter 64  card 282x423  bar 108

   Two things those frames show that are worth writing down:

     - They key off ORIENTATION, not width. Mobile landscape (844) and
       tablet portrait (834) are the same width with cards half again
       apart. This file is width-only by decision, so the ~840 band takes
       a value between the two rather than matching either.
     - The design grows past 1440 rather than freezing. We follow that at
       roughly half rate, by decision — see the min-width block at the end.

   The hero is deliberately NOT taken from these frames. The reference
   tablet hero is an 834x278 banner strip; ours is a full-bleed cinematic
   plate, which is the point of the concept. Where the two agree is mobile
   portrait: 390x520 is exactly 3:4, which is what the phone block below
   already does.

   The page was built to one fixed width. Two things made it break below it:

     1. `.page` and `.app-bar` carried `min-width: 1200px`, a hard floor —
        under it the layout simply overflowed sideways rather than adapting.
     2. The hero's metadata panel is a stack of fixed widths (a 326px logo,
        a 471px tagline) anchored inside a plate whose height is in `vw`.
        As the viewport narrows the plate shrinks but the stack does not,
        so the synopsis and buttons grew out through the bottom of the hero
        and collided with the first rail's heading. That is the collision
        visible at 1024.

   So the approach is: release the floor, then step the fixed dimensions
   down at each breakpoint. Card sizes come from tokens, so most of the
   grid re-sizes from a handful of custom-property overrides rather than
   from per-component rules.

   Breakpoints, and why each one exists:
     1439  laptops — the hero stack first stops fitting its plate
     1199  the 1200px floor; below it the page must actually reflow
      899  tablets — pointer may be coarse, rails need to page by touch
      599  phones — the app bar and hero panel restructure
   ========================================================================== */


/* ==========================================================================
   1439 — laptop
   The plate is now shorter than the artboard's, so the metadata stack has
   to come down with it or it grows out of the bottom.
   ========================================================================== */

@media (max-width: 1439px) {
  :root {
    --card-vertical-width:   184px;
    --card-vertical-height:  276px;
    --card-horizontal-width: 384px;
    --card-expanded-width:   480px;
  }

  .hero__logo   { width: 286px; height: 95px; }
  .hero__tagline { width: 430px; }

  /* Two lines, always. A third line is what pushed the buttons through the
     bottom of the plate — clamping is honest here because the synopsis is
     a teaser, not the content. */
  .hero__tagline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .hero__action { width: calc(500px + var(--frame-gutter)); }

  /* Safety net for the whole sub-artboard range: the badge is capped to
     the card width, and the label is set nowrap, so anything that does not
     fit was being cut mid-word. If a step below ever undershoots, this
     degrades to an ellipsis instead. At 1439 the label still fits at 14px
     (165px of text in 168px of room), so nothing changes here yet. */
  .card-badge { text-overflow: ellipsis; }
}


/* ==========================================================================
   1199 — below the old hard floor
   From here the page genuinely reflows rather than overflowing.
   ========================================================================== */

@media (max-width: 1199px) {
  .page,
  .app-bar { min-width: 0; }

  :root {
    --card-vertical-width:   164px;
    --card-vertical-height:  246px;
    --card-horizontal-width: 330px;
    --card-expanded-width:   420px;
  }

  .hero__logo    { width: 246px; height: 82px; }
  .hero__tagline { width: 400px; font-size: var(--type-body-m-size); }
  .hero__action  { width: calc(440px + var(--frame-gutter)); }

  .hero .button-primary { width: 180px; }

  /* The branded rail's stage is a fixed 480px cut from the artboard. Below
     it, hold the same proportion instead so the artwork keeps its framing. */
  .rail-branded__stage { height: 33.4vw; }

  /* Top 10 numerals are drawn to a 90x117 frame; bring the frame and the
     overlap down together or the poster stops sitting on the digit. */
  .card-top10__digit { width: 74px; height: 96px; margin-right: -11px; }

  /* "New Episodes Weekly" is 165px at the artboard's 14px. The badge is
     capped at the card width less 16, so it starts being cut here: a
     164px card leaves 148. The face comes down with the card rather than
     the label being clipped mid-word. Measured, not guessed — see the
     step at each breakpoint below. */
  .card-badge { font-size: 12px; }

  .footer__links { gap: var(--space-l) 32px; }
}


/* ==========================================================================
   899 — tablet
   ========================================================================== */

@media (max-width: 899px) {
  :root {
    --card-vertical-width:   146px;
    --card-vertical-height:  219px;
    --card-horizontal-width: 292px;
    --frame-gutter: clamp(20px, 3.4vw, 32px);
  }

  /* Two of the four nav links carry the browse model; the rest are reachable
     from Explore. Better to drop them than to let the row wrap under the
     logo. */
  .app-bar__links .app-bar__link:nth-child(n + 3) { display: none; }
  .app-bar__menu { gap: var(--space-xl); }

  /* The hero's three constants are independent, and they satisfy
     plate = visible + overlap (56.25 = 39.444 + 16.806). At this width the
     16:9 plate is only ~432px, and an overlap of 16.8vw pushes the panel so
     far up its lockup reaches the app bar. Take the overlap back and give
     the height to the visible box — the pair still sums to the plate, so
     the rail below still tucks under by the remainder. */
  .hero {
    --hero-visible: 48vw;
    --hero-overlap: 8.25vw;
  }

  .hero__logo    { width: 206px; height: 68px; }
  .hero__tagline { width: min(360px, 62vw); }
  .hero__action  { width: min(420px, 78vw); }

  /* The chevrons sit over the artwork and are only reachable with a
     pointer; the rails and hero both page by swipe at this size. */
  .hero__arrow { display: none; }

  .card-top10__digit { width: 62px; height: 80px; margin-right: -9px; }

  .card-badge { font-size: 10.5px; padding: 3px 6px; }

  .rail-branded__logo { width: 260px; height: auto; }
}


/* ==========================================================================
   599 — phone
   ========================================================================== */

@media (max-width: 599px) {
  :root {
    --card-vertical-width:   132px;
    --card-vertical-height:  198px;
    --card-horizontal-width: 258px;
    --frame-gutter: 16px;
    --rail-gap: var(--space-m);
  }

  /* Logo and actions only. The link row cannot fit beside them, and
     stacking it would push the hero down behind a two-line bar. */
  .app-bar__links { display: none; }
  .app-bar { padding: var(--space-l) var(--frame-gutter); }

  /* A 16:9 plate is only ~56vw tall here — about 219px on a 390 screen,
     which cannot hold a logo, a meta row, two lines of synopsis and a
     button row and still show the artwork behind them.

     The panel cannot simply move below the plate: it is a child of
     .hero__stage, which clips. So the plate turns portrait instead and the
     panel keeps its place at the foot of it. The poster crops to 3:4
     rather than being letterboxed, which is what a phone wants anyway.

     The stage also comes into normal flow here, so it gives .hero its
     height and the hero stops overlapping the first rail — there is no
     room at this width for the overlap the desktop layout uses. */
  .hero { height: auto; }

  .hero__stage {
    position: relative;
    aspect-ratio: 3 / 4;
  }

  /* The panel lifts to clear the pagination, which can no longer sit in the
     bottom-right corner: at this width that corner is where the buttons
     are, and the dots landed on top of the watchlist button. They go
     centred under the panel instead, which is where a phone expects them. */
  .hero__action {
    bottom: calc(var(--space-2xl) + 30px);
    width: 100%;
    padding-right: var(--frame-gutter);
  }

  .hero__tray {
    left: 0;
    right: 0;
    bottom: var(--space-l);
    justify-content: center;
  }

  /* Cinema mode steps the panel and the page down by --cinema-drop to
     reveal more of the trailer. On the desktop plate that works, because
     the panel overlaps a 16:9 stage with room beneath it. Here the panel
     sits at the foot of a portrait plate that clips, so 64px of travel
     pushes the buttons straight out of the bottom of the hero. There is
     also nothing to gain: the plate is already 3:4 and showing plenty. */
  .hero.is-cinema ~ *,
  .hero.is-cinema .hero__action,
  .hero.is-cinema .hero__tray { transform: none; }

  .hero__logo    { width: 180px; height: 60px; }
  .hero__tagline { width: 100%; font-size: var(--type-body-s-size); }

  .hero__meta {
    flex-wrap: wrap;
    white-space: normal;
    font-size: var(--type-body-s-size);
  }

  .hero .button-primary { width: auto; flex: 1 1 auto; min-width: 140px; }
  .hero__buttons { width: 100%; }

  .rail-branded__stage { height: 62vw; }
  .rail-branded__logo  { width: 200px; }
  .rail-branded__tagline { font-size: var(--type-body-m-size); }

  .rail__title    { font-size: var(--type-body-l-size); }
  .rail__subtitle { font-size: var(--type-body-s-size); }

  .card-top10__digit { width: 52px; height: 68px; margin-right: -8px; }

  /* The reference mobile card (142 wide) carries a 115x19 label with 4px
     of horizontal padding and 15px of text — about a 9-10px face. Ours is
     a 132 card, so 9px with 4px padding lands in the same place. */
  .card-badge { font-size: 9px; padding: 2px 4px; letter-spacing: 0.01em; }

  /* The detail modal already reflows at 1100 (see css/modal.css), but its
     grids were cut for a tablet. At ~294px of content, four portraits a row
     leaves 66px each — smaller than the faces need to read. */
  .modal { padding: 0; }
  .modal__panel { border-radius: 0; }
  .modal__hero-inner { left: var(--frame-gutter); max-width: calc(100% - 32px); }
  .modal__meta,
  .modal__body { padding-left: var(--frame-gutter); padding-right: var(--frame-gutter); }
  .modal__tabs { padding: 0 var(--frame-gutter); }
  .modal__grid   { grid-template-columns: repeat(2, 1fr); }
  .modal__people { grid-template-columns: repeat(3, 1fr); }

  /* Thumbnail and text side by side stops working once the thumbnail is
     over half the row; the episode rows stack instead. */
  .modal__episode { flex-direction: column; align-items: stretch; }
  .modal__episode-art { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  .footer { padding: var(--space-2xl) var(--frame-gutter) var(--space-4xl); }
  .footer__links { gap: var(--space-m) var(--space-xl); }
  .footer__link  { font-size: var(--type-body-s-size); }
}


/* ==========================================================================
   1441 and up — the design does not stop at the artboard
   --------------------------------------------------------------------------
   Desktop Extended grows the grid rather than just widening the gutters:
   1440 -> 1920 takes the poster card from 202 to 282, +80px over 480px of
   viewport. We take HALF that rate by decision, so a 1920 screen lands on
   242 rather than 282 — bigger artwork on a wide monitor without the
   layout reading differently from the approved desktop.

   Every value interpolates from its exact artboard number at 1440, so
   there is no step at the breakpoint, and each is capped at its 1920
   figure so an ultra-wide monitor does not keep inflating.

   Card height tracks width at 2:3 (0.125 = 0.0833 x 1.5); the others keep
   their ratio to the poster (242/202 = 1.198). The hero needs nothing here
   — it is already sized in vw and grows on its own.
   ========================================================================== */

@media (min-width: 1441px) {
  :root {
    --card-vertical-width:
      min(242px, calc(202px + (100vw - 1440px) * 0.08333));
    --card-vertical-height:
      min(363px, calc(303px + (100vw - 1440px) * 0.125));
    --card-horizontal-width:
      min(508px, calc(424px + (100vw - 1440px) * 0.175));
    --card-expanded-width:
      min(645px, calc(538px + (100vw - 1440px) * 0.22292));

    /* The branded rail's stage is a fixed 480 cut from the artboard; the
       reference takes it to 640 at 1920, so half rate is 560. */
    --hero-height:
      min(560px, calc(480px + (100vw - 1440px) * 0.16667));
  }

  /* The numeral frame is drawn to the poster it sits behind, so it has to
     travel with it or the overlap drifts. */
  .card-top10__digit {
    width:  min(108px, calc(90px + (100vw - 1440px) * 0.0375));
    height: min(140px, calc(117px + (100vw - 1440px) * 0.04792));
    /* max(), not min(): the overlap is negative, so min() would let it
       keep deepening past 1920 instead of holding at -17. */
    margin-right: max(-17px, calc(-14px + (100vw - 1440px) * -0.00625));
  }
}


/* ==========================================================================
   Coarse pointer — any size
   Hover previews are meaningless without a pointer that can hover, and the
   rail chevrons are a pointer affordance. js/trailer-card.js declines to
   arm on a coarse pointer; this hides what CSS owns.
   ========================================================================== */

@media (hover: none) {
  .rail__edge { display: none; }
  .trailer-card { display: none; }
}