/* =========================================================================
   HOMEPAGE HERO — a column of copy beside one silent film.
   Loaded only by the homepage; every colour, space and type value comes from
   tokens.css. Two states, one switch:

     .hero            no JavaScript, or reduced motion. Poster stands, nothing
                      moves.
     .hero--js        the film runs beside the column and rewinds on its own.

   The switch is set once, inline, right after the markup, so the static layout
   never flashes before the script arrives.
   ========================================================================= */

/* THE HERO SITS IN THE SHELL'S OWN BOX (user decision, 7 Sep 2026: "hero sağa kaymış").
   It used to be full-bleed with only its LEFT edge on the shell gutter, so the film ran
   past the right edge of every other band on the page — measured at 1920 the hero was
   120px wider on the right than `main.page`, which reads as the whole section shifted.
   The earlier "the film reaches the edges" decision is deliberately reversed: alignment
   with the rest of the page is worth more than the bleed, and a band that is the only
   thing not centred looks like a mistake rather than a choice.
   The box is copied from layout.css `main.page` — same cap, same centring, same gutter —
   so the headline starts exactly where the section headings below it start. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
      align-items:stretch;
      max-width:var(--max-width);margin:0 auto;padding:0 var(--s6)}

/* The strip is welded to the hero, so it takes the same box — a full-bleed strip under a
   shell-width hero would just move the misalignment one band down. */
.hero-strip{max-width:var(--max-width);margin:0 auto;padding:0 var(--s6)}

/* aspect-ratio, NOT 100vh: a mobile browser bar that appears mid-scroll changes
   vh and makes the hero jump. The ratio also reserves the box before the poster
   decodes, which is what keeps CLS at 0. `width:100%` pins one axis so the ratio
   can only decide the other — measured on the old full-width stage, without it a
   clamped height ran the ratio backwards and shrank the width. */
.hero-stage{position:relative;overflow:hidden;background:#111;width:100%;
            aspect-ratio:3/2;max-height:78vh;min-height:460px}

.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.hero-poster img,.hero-video{object-fit:cover;object-position:center}
.hero-poster{display:block}
.hero-poster img{width:100%;height:100%}
/* The poster hands over only once the video is genuinely painting frames, so a
   stalled or refused play() leaves the picture on screen rather than a black box. */
.hero--js .hero-poster{transition:opacity .45s var(--ease-tint)}
.hero--js.is-playing .hero-poster{opacity:0}

/* ---- THE COLUMN --------------------------------------------------------- */
/* Left-aligned and vertically centred against the film. It PAINTS NOTHING: the
   page's own field (layout.css .bloom-field) shows through, so the column is
   part of the page rather than a card laid on it. Its left padding is the shell
   gutter; its right padding keeps the measure short of the film's edge. */
.hero-card{
  color:var(--ink);
  padding:var(--s8) var(--s8) var(--s8) 0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;gap:var(--s3)}
.hero-card-eyebrow{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
                   text-transform:uppercase;color:var(--muted);margin:0}
/* Measurable value -> mono. "sans narrates, mono measures" (PHASE M2). */
.hero-card-pill{font-family:var(--font-data);font-variant-numeric:tabular-nums;
                font-size:var(--fs-label);letter-spacing:var(--ls-medium);
                border:1px solid var(--ink);padding:var(--s2) var(--s4);margin:0}
/* LARGE FIRST. 72px at the top of the clamp is what the column carries at 1920; 15ch is what
   keeps the Polish headline on three lines instead of four; regular weight, not light — at this size light read
   as thin against the film beside it (measured on the live page, 6 Sep 2026). */
.hero-card-head{font-size:clamp(36px,4.6vw,72px);font-weight:var(--fw-normal);
                letter-spacing:var(--ls-heading);line-height:1.02;margin:var(--s3) 0 0;
                max-width:15ch;text-wrap:balance}
.hero-card-sub{font-size:clamp(16px,1.15vw,19px);color:var(--ink-soft);
               line-height:var(--lh-loose);max-width:46ch;margin:var(--s4) 0 0}
.hero-card-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
/* One quiet line under the pair, the way the reference sets it: it states the one
   condition a visitor has to know before pressing either button. */
.hero-card-note{font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-normal);
                max-width:58ch;margin:var(--s5) 0 0}

/* ---- THE STRIP ---------------------------------------------------------- */
/* Welded to the hero: no gap above, one hairline between it and the film, and it
   runs to both viewport edges. Five equal cells parted by hairlines — a table of
   facts, which is why the cells are ruled rather than boxed. */
/* NO GROUND OF ITS OWN — and that is what makes the hover work. The band used to paint
   white, so a cell turning to glass had nothing behind it to refract and the effect was
   invisible (measured on screen). Transparent, the page's own field sits behind every
   cell, so the glass has something to bend; it also welds the band to the hero above,
   which paints nothing either. */
.hero-strip{display:grid;grid-template-columns:repeat(5,1fr);
            border-top:1px solid var(--hairline);
            border-bottom:1px solid var(--hairline)}
.hero-strip-cell{padding:var(--s5) var(--s4);text-align:center;border-left:1px solid var(--hairline);
                 transition:background var(--transition),backdrop-filter var(--ease-tint),
                            -webkit-backdrop-filter var(--ease-tint)}
/* THE CELL BECOMES GLASS UNDER THE POINTER (user decision, 7 Sep 2026), with the same
   refraction the buttons use — one token, one behaviour. NO MOTTLE: the buttons carry it
   because they are objects you press; a cell of a table is a surface, and a gradient
   inside five of them in a row would read as noise rather than as glass. */
.hero-strip-cell:hover{background:var(--glass-bg-clear);
                       backdrop-filter:var(--glass-refract);
                       -webkit-backdrop-filter:var(--glass-refract);
                       box-shadow:var(--glass-rim)}
.hero-strip-cell:first-child{border-left:0}
.hero-strip-cell b{display:block;font-size:var(--fs-label);font-weight:var(--fw-bold);
                   letter-spacing:var(--ls-label);text-transform:uppercase}
.hero-strip-cell span{display:block;font-size:var(--fs-small);color:var(--muted);margin-top:var(--s2)}
.hero-card-btn{margin:0}
@media(max-width:900px){
  /* Column first, film under it: the words are what a phone shows above the fold. */
  /* --s4 is what main.page uses below 900; the card no longer adds a gutter of its own
     or the text would sit 32px in while every other band sits at 16. */
  .hero,.hero-strip{padding:0 var(--s4)}
  .hero{grid-template-columns:1fr}
  .hero-card{padding:var(--s7) 0 var(--s6);align-items:flex-start}
  /* Two columns of facts on a phone; the fifth takes the full row rather than
     sitting alone beside a hole. */
  .hero-strip{grid-template-columns:1fr 1fr}
  .hero-strip-cell{padding:var(--s4) var(--s3);border-top:1px solid var(--hairline)}
  .hero-strip-cell:nth-child(odd){border-left:0}
  .hero-strip-cell:nth-child(-n+2){border-top:0}
  .hero-strip-cell:last-child{grid-column:1 / -1;border-left:0}
  .hero-card-head{max-width:none}
  .hero-stage{aspect-ratio:9/16;max-height:78vh;min-height:520px}
}

/* The phone tier (<=480px). Measured at 375x812: the hero alone was 1537px — 1.9
   screens of an 8.8-screen page — because the 900 block gives the film a 9/16 box
   with a 520px floor, which is 610px tall at 343px wide. A portrait film is right
   on a phone; a film that outlasts the fold is not. The card's own copy is left
   alone: shortening it is a content decision, not a CSS one. */
@media(max-width:480px){
  .hero-stage{aspect-ratio:4/5;min-height:0}
  .hero-card{padding:var(--s5) 0 var(--s5)}
  .hero-strip-cell{padding:var(--s3)}
}

/* The preference is honoured by NOT adding .hero--js at all (see the inline
   script in hero.blade.php), so the film never loads and the layout above
   stands as written. This block only silences what the static state can still
   animate. */
@media(prefers-reduced-motion:reduce){
  .hero-poster{transition:none}
}