/* GEMCAP · home hero. Approved in principle on 2026-10-03 (hero rounds 1-7, DECISOES; record page
   06-brand/hero-review.html, frozen). This file is now the source; the Astro home ports it as is.
   The photo numbers come from tools/img/hero_export.py (06-brand/hero/web/hero-images.js) and are written once as a
   static rule on the page:  .hero { --zone; --ar; --tl; --tt; --tr; --tb }  (no script before the LCP image).

   Phones and portrait screens: a vertical photo of the same rig almost the full screen high; the text in the sky above
   the truck (white), the truck in the lower part. The photo is pinned to the bottom and scales with the width; the hero
   reserves a "truck zone" (--zone x width) under the text, so the text never reaches the truck.
   Wide screens (768px+, landscape): the A photo full bleed under the nav; the text in a white block on the left, aligned
   with the logo, centred on the truck's height and at least as tall (capped) - block and truck read as two balanced
   masses; the photo slides so the truck sits midway between the nav and the strip of the next section, and so the
   trailer's tail ends inside the screen. Needs tokens.css, base.css, components.css (buttons) and nav.css (--topbar-h). */

.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; color: #fff; background: var(--hero-bg-m);
  grid-template-rows: auto minmax(calc(var(--zone, 0.76) * 100vw + var(--space-6)), 1fr);
  min-height: calc(100svh - 56px); }      /* a sliver of the next section shows under the photo */
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: -1; }
.hero picture img { object-fit: cover; object-position: 50% 100%; filter: var(--hero-filter); }
/* the dark theme has its own night photo (HeroPicture.astro); this still layer (token --hero-veil, none in the light theme)
   only fades its top under the nav and its foot into the page. Never animated. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-veil); pointer-events: none; }
.hero .content { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px + var(--topbar-h) + var(--space-6)); }
.hero h1 { max-width: none; font-size: var(--text-display); line-height: var(--leading-display); margin-bottom: var(--space-3); }
.hero .lead { max-width: none; font-size: var(--text-lead); line-height: var(--leading-lead); text-wrap: balance; margin-bottom: var(--space-5); }
.hero h1, .hero .lead { text-shadow: 0 1px 2px rgb(7 22 52 / 0.3); }
.hero .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); max-width: 420px; }
.hero .btn { padding-inline: var(--space-3); }
.hero .btn-2 { --btn-bg: #fff; --btn-fg: var(--navy-base); --btn-line: #fff; --btn-wash: #E8F0FD; --btn-press: #D3E2FB; }   /* on the photo: white in both themes */
.hero :focus-visible { outline-color: #fff; }
.hero .dispatch { display: none; }

@media (min-width: 768px) and (min-aspect-ratio: 5/4) {
  /* sizes are in cqw (the hero's own width), not vw: vw includes a classic scrollbar (~15px on Windows) that the hero and
     the nav do not span, which put the block ~8px right of the logo line. The custom properties carry the unit as text, so it
     resolves where a child reads it (container = .hero); .hero itself reads only --hh, which has no cqw. */
  .hero {
    container-type: inline-size;   /* desktop only: on phones it cost ~170 ms of TBT (Lighthouse mobile, 2026-10-04) and phones have no classic scrollbar */
   
    --hh: clamp(520px, calc(100svh - 56px), 900px);   /* a strip of the trust band stays on screen (any screen >= 576px tall) */
    --iw: max(100cqw, calc(var(--hh) * var(--ar)));            /* the photo as rendered (object-fit: cover) */
    --ih: calc(var(--iw) / var(--ar));
    /* the truck (and the block on it) centred between the nav's bottom and the strip, as far as the photo's spare
       height allows: the photo's top edge sits at --oy (0 >= --oy >= hero - photo height) */
    --nav-b: calc(var(--nav-top, 16px) + var(--nav-h, 60px));
    --oy: clamp(calc(var(--hh) - var(--ih)), calc((var(--nav-b) + var(--hh)) / 2 - (var(--tt) + var(--tb)) / 2 * var(--ih)), 0px);
    --t-mid: calc(var(--oy) + (var(--tt) + var(--tb)) / 2 * var(--ih));
    --band: calc((var(--tb) - var(--tt)) * var(--ih));         /* the truck's height on screen */
    --cont-l: max(var(--gutter), (100cqw - var(--container)) / 2);
    /* sideways: when the photo is wider than the screen (it fills by height), slide it so the trailer's tail ends 16px
       inside the right edge - never so far that the truck's nose would enter the block's minimum width */
    --gap: 4cqw;
    --card-min: 340px;
    --ox: clamp(calc(100cqw - var(--iw)), max(calc(100cqw - 16px - var(--tr) * var(--iw)), calc(var(--cont-l) + var(--card-min) + var(--gap) - var(--tl) * var(--iw))), 0px);
    --nose: calc(var(--ox) + var(--tl) * var(--iw));
    /* the block ends a gap before the truck's nose (and never past 45% of the width) */
    --card-w: max(var(--card-min), min(calc(45cqw - var(--cont-l)), calc(var(--nose) - var(--gap) - var(--cont-l))));
    --pad: clamp(24px, 2.4cqw, 40px);
    --inner: calc(var(--card-w) - 2 * var(--pad));
    display: block; min-height: var(--hh); color: var(--color-ink); background: var(--hero-bg-a);
  }
  .hero picture img { object-position: var(--ox) var(--oy); }
  .hero .content { position: absolute; left: var(--cont-l); top: var(--t-mid); transform: translateY(-50%);
    width: var(--card-w); min-height: min(var(--band), 560px); margin: 0; padding: var(--pad);
    display: flex; flex-direction: column; justify-content: center;
    background: var(--color-card); border-radius: var(--radius-2xl); box-shadow: var(--shadow-2); }
  /* headline grows with the truck: 3 lines while the truck is short, 4 when it is tall (big screens) */
  .hero h1 { font-size: min(60px, calc(var(--inner) / 7.6), max(calc(var(--inner) / 10.4), calc(var(--band) * 0.1))); margin-bottom: var(--space-4); }
  .hero h1, .hero .lead { text-shadow: none; }
  .hero .lead { margin-bottom: var(--space-6); }
  .hero .btn-row { display: flex; flex-wrap: wrap; max-width: none; }
  .hero .btn { padding-inline: var(--space-6); }
  .hero .btn-2 { --btn-bg: var(--color-card); --btn-fg: var(--color-blue); --btn-line: var(--color-blue); --btn-wash: var(--color-tint-blue); --btn-press: var(--color-tint-blue-press); --wash-in: 0px; }
  .hero :focus-visible { outline-color: var(--color-focus); }
  .hero .dispatch { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-weight: 700; color: var(--color-ink); text-decoration: none; }
}

/* arrival (feedback 2026-10-05: more motion). The photo is the LCP: it is painted at once and only settles (scale +
   translate, compositor only); the headline only rises (no fade, so it is never held back as a paint), the lead, the
   buttons and the dispatch line rise and fade in after it. Individual transform properties, so the desktop block's own
   translateY(-50%) is untouched. */
@media (prefers-reduced-motion: no-preference) {
  .hero picture img { animation: hero-photo 1800ms var(--ease-out) both; }
  .hero h1 { animation: hero-rise 760ms var(--ease-out) both; }
  .hero .lead, .hero .btn-row, .hero .dispatch { animation: hero-rise 760ms var(--ease-out) both, hero-fade 600ms ease both; }
  .hero .lead { animation-delay: 90ms; }
  .hero .btn-row { animation-delay: 170ms; }
  .hero .dispatch { animation-delay: 240ms; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) and (min-aspect-ratio: 5/4) {
  .hero .content { animation: hero-card 820ms var(--ease-out) both; }
}
@keyframes hero-photo { from { scale: 1.06; translate: 1.5% 0; } }
@keyframes hero-rise { from { translate: 0 18px; } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-card { from { scale: 0.97; } }