/* The Story — the homepage sections promoted off the Home Page concept
 * (2026-08-21): the SynQ film with its caption, and the three-series compare.
 * Rendered by //site/_home_story.php.
 *
 * THE FLEET-PROOF SCENE SWITCHER LEFT ON 2026-08-27 (Hamza) — the home page is
 * to carry exactly one full-size banner, and the SYNQ hero is it. Its rules
 * (.hs-proof*, .hs-thumb*, .hs-h3) are not dead here, they MOVED: they are
 * css/fleet-banner.css now, renamed to a .fb-* prefix, serving
 * //site/_fleet_banner.php at /concepts/build-a-car-banner. Edit them there.
 *
 * Design system carried over from the concept: pure black canvas, Inter,
 * two-tone type (white = the point, dim = the setup), the single #ea3000
 * accent, pill vocabulary. Scoped under .hs-story so nothing leaks into the
 * rest of the homepage.
 */

.hs-story {
  --hs-bg: #000;
  --hs-ink: #fff;
  --hs-dim: #8a8f95;
  --hs-accent: #ea3000;
  --hs-line: rgba(255, 255, 255, .12);
  background: var(--hs-bg);
  color: var(--hs-ink);
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  overflow-x: clip;
}

/* ---------- shared vocabulary ---------- */

.hs-h2 {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 58px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--hs-ink);
}

/* .hs-h3 (the over-photo heading) went to css/fleet-banner.css as .fb-title on
   2026-08-27 — Fleet Proof was its only caller. */

.hs-dim { color: var(--hs-dim); }

.hs-pill {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border: 1px solid rgba(234, 48, 0, .55);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--hs-accent);
  background: rgba(234, 48, 0, .07);
}

.hs-btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.hs-btn:hover { transform: translateY(-1px); text-decoration: none; }
.hs-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  background: rgba(255, 255, 255, .04);
}
.hs-btn--ghost:hover { border-color: rgba(255, 255, 255, .7); color: #fff; }

/* scroll reveals — opacity/transform only, composited */
.hs-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.hs-reveal.is-in { opacity: 1; transform: none; }

/* ---------- the film ---------- */

/* ---------- the deck ----------
   Full-screen banners stack (2026-08-23, Hamza): each section in .hs-stack
   pins at the viewport top and the NEXT one slides up over it, so with the
   snap-assist a single flick pops the next banner into place — and popping
   back up reveals the pinned one beneath. Every deck section must be 100svh
   with an opaque background (it becomes the page while pinned). The last
   child gets no pin range inside the wrapper, which is correct — it slides
   over its predecessor, then carries normal scroll onward. */
.hs-stack > section { position: sticky; top: 0; }
/* Dwell spacer between deck sections: the previous banner stays pinned
   fullscreen while this empty runway passes — reading time without a
   scroll lock. ~1–2 wheel flicks worth.
   NO ELEMENT WEARS THIS TODAY. The deck is down to the film alone since Fleet
   Proof moved out (2026-08-27), and a hold with no following banner is just a
   black gap, so the div came out of _home_story.php. The rule stays as the
   deck's wiring: add a second banner, drop a <div class="hs-hold"> before it,
   and the dwell is back. */
.hs-hold { height: 75svh; }

/* One caption since 2026-08-23 — one screen, no pinned scroll runway.
   (Was 300vh when the three captions handed off while pinned.) */
.hs-film { position: relative; height: 100svh; }
.hs-film-sticky {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: #000; /* the frame the video loads into is black, never page-white */
}
.hs-film-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hs-film-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 40%);
}
.hs-film-cap {
  position: absolute;
  left: 6vw; bottom: 9vh;
  max-width: 560px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.hs-film-cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hs-film-line {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .85);
}
.hs-film-btn { margin-top: 20px; }

/* ---------- fleet proof — MOVED OUT 2026-08-27 ----------
   .hs-proof, .hs-proof-bg, .hs-proof-shade, .hs-proof-stage, .hs-proof-ui,
   .hs-proof-thumbs, .hs-thumb and .hs-proof-link now live in
   css/fleet-banner.css under a .fb-* prefix, with //site/_fleet_banner.php.
   Nothing on the homepage renders them any more. */

/* ---------- the closer ----------
   THE SERIES + THE SHELF as one viewport-fit section (2026-08-28, Hamza:
   "size it so that this whole section fits into one overall window") — the
   Trifecta up top, Popular right now at the bottom, framed as one screen the
   way the hero and the film each own theirs. min-height, NEVER height: a
   short window scrolls the overflow instead of clipping cards. The sizes
   below are a budget — at ~900px of viewport the whole stack runs ~850px;
   the max-height squeeze further down covers ~768px laptops. */

.hs-closer {
  box-sizing: border-box;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5vh 6vw;
}
/* One-window headings: hs-h2's full clamp (58px cap) belongs to sections that
   own a whole screen alone; sharing one screen, the two headings step down. */
.hs-closer .hs-h2 { font-size: clamp(26px, 3vw, 42px); }

/* ---------- the series ---------- */

.hs-series {
  /* Side/vertical padding lives on .hs-closer since 2026-08-28. (Was 7vh 6vw
     8vh as its own section — the 2026-08-23 thinning note lives on in git.) */
  padding: 0;
  text-align: center;
}
.hs-series-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* 1000, not 1240 — the card photo is the closer's tallest single item, and
     column width IS its height (4/3 files, full-bleed). */
  max-width: 1000px;
  margin: clamp(16px, 3vh, 28px) auto 0;
}
.hs-series-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 18px;
  border: 1px solid var(--hs-line);
  border-radius: 14px;
  background: #060606;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.hs-series-card:hover { border-color: var(--hs-accent); transform: translateY(-3px); text-decoration: none; }
.hs-series-mark { height: 22px; width: auto; opacity: .85; }
.hs-series-img {
  width: 100%; height: auto; margin: 10px 0 4px;
  /* The card files are 1200x900. Reserving the box keeps the lazy load from
     collapsing the card (and the closer's one-window budget) before paint. */
  aspect-ratio: 4 / 3; object-fit: cover;
}
.hs-series-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.hs-series-line { font-size: 13px; color: var(--hs-dim); }

/* ---------- the shelf ----------
   Six bestseller cards under the Trifecta (2026-08-28) — the returning buyer's
   shortcut row. Same card vocabulary as the series above (hairline border,
   #060606 face, accent border + lift on hover), one size down. The photos are
   the Solid Black nav files with the rest→glow cross-fade the header tiles and
   /products cards run: the shelf sits quiet until a product is touched. */

.hs-shelf {
  /* Side/vertical padding lives on .hs-closer; this margin is the whole gap
     between the Trifecta cards and the shelf heading. */
  padding: 0;
  margin-top: clamp(28px, 6vh, 56px);
  text-align: center;
}
.hs-shelf-sub { margin: 8px 0 0; font-size: 15px; color: var(--hs-dim); }
.hs-shelf-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  max-width: 1240px;
  margin: clamp(14px, 2.5vh, 24px) auto 0;
}
.hs-shelf-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 10px 16px;
  border: 1px solid var(--hs-line);
  border-radius: 14px;
  background: #060606;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.hs-shelf-card:hover { border-color: var(--hs-accent); transform: translateY(-3px); text-decoration: none; }
.hs-shelf-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;  /* the black-bg files' own shape, full-bleed */
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.hs-shelf-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hs-shelf-img--glow { opacity: 0; transition: opacity .25s ease; }
.hs-shelf-card:hover .hs-shelf-img--glow { opacity: 1; }
/* Touch screens cannot hover — show the lit state statically, the same call
   BlackBgPhoto's other surfaces make. */
@media (hover: none) { .hs-shelf-img--glow { opacity: 1; } }
.hs-shelf-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #fff; }
/* Accent, not dim (2026-08-28, Hamza): prices read red across the site — the
   /products band cards and the header window both color theirs — so the shelf
   matches, on the homepage's own red rather than a third shade. */
.hs-shelf-price { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500; color: var(--hs-accent); }

/* ---------- short windows ----------
   ~768px-tall laptops: same one-window promise, everything a notch smaller.
   Width-gated to desktop — stacked layouts opt out of the fit below. */

@media (min-width: 761px) and (max-height: 820px) {
  .hs-closer { padding: 4vh 6vw; }
  .hs-closer .hs-h2 { font-size: clamp(24px, 2.5vw, 34px); }
  .hs-series-grid { max-width: 840px; }
  .hs-shelf-grid { max-width: 1080px; }
  .hs-shelf { margin-top: clamp(20px, 4vh, 36px); }
}

/* ---------- small screens ---------- */

@media (max-width: 1100px) {
  .hs-shelf-grid { grid-template-columns: repeat(3, 1fr); }
  /* Two shelf rows can't share a screen with the Trifecta — let it flow. */
  .hs-closer { min-height: 0; padding: 6vh 6vw 7vh; }
}

@media (max-width: 760px) {
  .hs-series-grid { grid-template-columns: 1fr; }
  .hs-film-cap { left: 6vw; right: 6vw; }
  .hs-shelf-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hs-reveal { opacity: 1; transform: none; transition: none; }
  .hs-film-cap { transition: none; }
  .hs-shelf-img--glow { transition: none; }
}