/* Case study hero (Figma Haven "MacBook Pro 16 - 29"): a row of ten phone screens at the top, running off both edges of the window, then the eyebrow (business name), the H1,
   Role / Date and two columns of intro copy. The hero is 95% of the window tall (see the end of this file).
   <header class="case-header case-header--gradient case-header--hero">
     <div class="hero-image" role="img" aria-label="…" data-hero-dither><figure class="hero-image__item"><img src="…" alt="" width="438" height="950"></figure> … ×10</div>
     <div class="case-header__intro" data-hero-text>
       <p class="case-header__eyebrow t-subtitle">HAVEN</p>                        (optional: the business name; dark grey #3f3f3f by default, or --case-eyebrow from the theme)
       <h1 class="case-header__title t-h1">…</h1>
     </div>
     <div class="hero-intro" data-hero-text>
       <div class="lockup__meta-stack">…Role / Date…</div>
       <div class="hero-intro__cols"><p class="t-subtitle">…</p><p class="t-body">…</p></div>                      a column is a <p>, or a <div class="hero-intro__col"> of <p>s (10px apart)
     </div>
   </header>
   The screens are 194 x 420 each, 10px apart, centred, so the row is wider than the window and is clipped by it. The pictures carry their own rounded corners (transparent PNG, 438 x 950).
   data-hero-text: these blocks rise and fade in (after the screens start to form). Without JS, or with reduced motion, everything just shows.
   Spacing: 88px above the screens (clear of the logo), 60px between the blocks, 30px from the eyebrow to the title, 60px under the intro. */
.case-header--hero { min-height: 0; display: block; padding: 88px 0 60px; overflow-x: clip; }
.case-header--hero .case-header__intro { padding: 60px var(--gutter) 60px; gap: 15px; }   /* 15px from the eyebrow to the title (was 30) */
.case-header--hero .case-header__title { max-width: 1219px; }
.case-header__eyebrow { margin: 0; color: var(--case-eyebrow, var(--color-case-dark)); text-box: trim-both cap alphabetic; }

.hero-intro { width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; }
.hero-intro .lockup__meta-stack > .lockup__meta + .lockup__meta { margin-top: -5px; }
.hero-intro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 30px; align-items: start; }
.hero-intro__cols > p, .hero-intro__col > p { margin: 0; color: var(--color-ink); }   /* body copy, not a headline */
.hero-intro__cols > p { text-box: trim-both cap alphabetic; }
.hero-intro__col { text-box: trim-both cap alphabetic; }   /* trimmed as one piece, so the 10px between paragraphs is the real gap */
.hero-intro__col > p:not(:last-child) { margin-bottom: 10px; }

/* the screens: 194 x 420 each, 10px apart; the row is centred and wider than the window at desktop sizes, so it bleeds off both edges */
.hero-image { display: flex; justify-content: center; gap: 10px; width: 100%; margin: 0 auto; will-change: transform; }
.hero-image__item { flex: 0 0 194px; margin: 0; aspect-ratio: 194 / 420; }
.hero-image__item > img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }

/* Single dithered hero image (.hero-image--dither, js/hero-image.js): one picture, centred, as big as the space allows (never cropped: object-fit: contain). The dither is a canvas laid exactly over
   the picture; the dots switch on, the picture rises a little, then the full-colour picture sweeps in from the middle outwards. The header modifier trims the top padding (the logo is clear of a centred picture).
   <header class="case-header case-header--gradient case-header--hero case-header--hero-single">
     <div class="hero-image hero-image--dither"><img src="…" alt="…" width="2001" height="1266"></div> … */
.case-header--hero-single { padding-top: 0; }   /* the hero image starts at the very top of the stage */
/* The container is ALWAYS --hero-image-height (500px) tall on computers, on every case study; the picture inside fills that height (contain, transparent margins trimmed, so it only gets narrower if the window is too narrow for it). */
.hero-image--dither { position: relative; display: block; width: 100%; will-change: transform; overflow: clip; }   /* (the script places the picture so its trimmed part fits the box; the transparent rest is clipped) */
.hero-image--dither > img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; }
.hero-image__dither { position: absolute; z-index: 2; pointer-events: none; image-rendering: pixelated; }
html.hero-pre .hero-image--dither { visibility: hidden; }   /* until js/hero-image.js has drawn the first dither frame (so the colour picture never flashes) */

/* entrance for the text: hidden until js/hero-dither.js takes over (it sets opacity / transform itself from the timeline, so the scrubber can drive it) */
html.hero-pre [data-hero-text] { opacity: 0; }

/* the dither layer: a canvas inside the hero (so it scrolls with the page) with one canvas pixel per dither cell, scaled up with hard edges (js/hero-dither.js) */
.hero-dither { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; image-rendering: pixelated; }
/* progressive blur fixed to the bottom of the window (8 backdrop-blur layers, built by the script; no colour fill) */
.hero-blur { position: fixed; left: 0; right: 0; bottom: 0; z-index: 52; pointer-events: none; display: none; }

/* Computer screens: the hero is (at least) 95% of the window tall, so the top 5% of the next section peeks in. js/hero-fit.js works out how tall the row of screens can be (the window's 95%
   less the text blocks), between 260px and their full 420px, and sets --hero-image-h; so on a shorter window the screens shrink a little (the width follows, the shape stays). Without the script
   they are the full 420px. On a window too short for that, the hero just grows to fit. */
@media (min-width: 901px) {
  .case-header--hero { min-height: 100vh; min-height: 100svh; padding-bottom: 40px; }   /* the header fills the whole stage (100% of the window), or is taller if its copy needs more room */
  .case-header.case-header--hero .explore--anchored { left: 50%; bottom: auto; top: calc(100vh - 104px); top: calc(100svh - 104px); }   /* centred, 60px up from the bottom of the FIRST SCREEN (as on the landing page), even when the header is taller than the window */
  .hero-image { height: var(--hero-image-h, 420px); }
  .hero-image--dither { height: var(--hero-image-height); }   /* fixed, the same on every case study (token in tokens.css); js/hero-fit.js leaves it alone */
  .hero-image__item { flex: none; height: 100%; width: auto; aspect-ratio: 194 / 420; }
}

@media (max-width: 900px) {
  .case-header--hero { padding: 88px 0 40px; }
  .case-header--hero .case-header__intro { padding-top: 20px; padding-bottom: 40px; }   /* phones: 20px above the eyebrow (was 40) */
  .hero-intro__cols { grid-template-columns: 1fr; gap: 20px; }
  .hero-image {   /* a sideways-scrolling strip on phones (no dither there) */
    justify-content: flex-start; width: 100%; padding: 0 var(--bleed-edge); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    cursor: grab; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent;
  }
  .hero-image::-webkit-scrollbar { display: none; }
  .hero-image__item { flex: 0 0 194px; scroll-snap-align: start; }
  .case-header--hero-single { padding-top: 88px; }
  .hero-image--dither { height: auto; padding: 0 var(--gutter); overflow: visible; cursor: auto; }
  .hero-image--dither > img { height: auto; }
  .hero-image__dither { display: none; }
  .hero-image.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
  .hero-dither, .hero-blur { display: none; }
}


/* Explore cue in the hero: appears once the title and copy have risen in (after the entrance), not before. */
html.hero-pre .explore--hero { visibility: hidden; }
.explore.explore--hero { animation-delay: 2.2s; }   /* (two classes, so it beats the delay in explore.css) */
@media (max-width: 900px) { .explore--hero { display: none; } }
html.hero-scrolled .explore--hero { opacity: 0 !important; pointer-events: none; visibility: hidden; transition: opacity .25s ease-out, visibility 0s .25s; }   /* gone as soon as you leave the top (!important: it beats the entrance animation's fill) */
.explore--hero.explore--clash { opacity: 0 !important; visibility: hidden; pointer-events: none; }   /* hidden when it would sit on the intro copy (js/hero-image.js) */

/* Phones and tablets (<= 900px): the picture sits directly under the phone bar (57px tall, see site-bar.css), no gap: the artwork bleeds off the top of its own file, so it meets the bar's line. */
@media (max-width: 900px) { .case-header--hero-single { padding-top: 57px; } }