/* ============================================================
   SHOP — HERO (rhinory/shop-hero-reel block).
   Ported verbatim from prototypes/13/shop-all.css:53-93 — the combined v13
   shop hero: a two-column .sa-hero-grid row (editorial copy left, cinematic
   photo reel right), the single dark element (.sa-hero-reel) sitting in an
   otherwise light /shop/ page. Block name kept as rhinory/shop-hero-reel
   even though it now renders copy + reel (was reel-only) — pre-existing
   saved content, renaming would orphan it. Brief
   docs/briefs/2026-08-18-shop-photo-reel-hero.md.

   SCOPING DISCIPLINE (mirrors wine-pdp.css / gift-card-pdp.css): tokens the
   ported rules read (--paper, --ink, --ink-2, --muted, --rule-2, --burgundy,
   --ff-display/--ff-body/--ff-label, --type-hero/--type-lede/--type-eyebrow)
   are declared once on the block's own wrapper class, `.sa-hero` (emitted
   by get_block_wrapper_attributes() in render.php), copied from
   prototypes/13/shop-all.css's `.shop-all` scope + v13-shared.css's
   `--type-*` tokens — not re-derived — and cascade down to `.sa-hero-reel`
   as a nested child, so nothing bleeds from/into the dark site chrome.
   `.eyebrow` collides with a global dark-chrome class in style.css, so it's
   renamed `.sa-hero-eyebrow` here — same rename discipline wine-pdp.css /
   gift-card-pdp.css already apply to `.eyebrow`/`.wrap`/`.section`.

   PAGE GUTTER: the prototype nests `.sa-hero-grid` inside `.sa-shop-wrap`
   (max-width:2100px; padding:0 44px; margin:0 auto — shop-all.css:38),
   which this block doesn't have a wrapper for (no template chrome renders
   around a page-content block). Folding those same numbers into
   `.sa-hero-grid`'s own padding/max-width reproduces the identical
   centred/gutter'd result and lines the hero up with `winery/product-
   catalog` below it, which reads `--winery-shop-max-width`/
   `--winery-shop-inline-gutter` at the same 2100px/44px (20px under
   960px) — copied here rather than var()-read across the theme/plugin
   boundary, same self-sufficiency reasoning as the token block above.
   ============================================================ */

.sa-hero{
	--paper: #FBF7EE;
	--ink: #2D2926;
	--ink-2: #4A443D;
	--muted: #4A443D; /* was #8A8177, under AA on paper (pre-lock audit, Shop) */
	--rule-2: rgba(45,41,38,0.20);
	--burgundy: #520000;
	--ff-display: "Cormorant Garamond", Georgia, serif;
	--ff-label: "Josefin Sans", system-ui, sans-serif;
	--ff-body: "Lora", Georgia, serif;
	--type-hero: clamp(46px,6vw,84px);
	--type-lede: 18px;
	--type-eyebrow: 11px;

	position: relative;
	background: var(--paper);
	border-bottom: 1px solid var(--rule-2);
	overflow: hidden;
}
/* VERTICAL SPACING — read off the RENDERED prototype, not off `.sa-hero-grid`'s
   own declaration. shop-all.css:55 writes `padding:72px 0 46px 0` on
   `.sa-hero-grid` (0,1,0), but the same element also carries `.sa-shop-wrap`,
   whose `.shop-all .sa-shop-wrap{ padding:0 44px }` (0,2,0) wins the whole
   shorthand — so what actually paints is a 44px gutter and ZERO vertical
   padding: the reel butts the nav above it and the hero's own bottom rule
   below. The theme has no `.sa-shop-wrap` ancestor to lose that shorthand to,
   so the rendered result is restated here directly. */
.sa-hero-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: stretch;
	max-width: 2100px;
	margin: 0 auto;
	padding: 0 44px;
}
.sa-hero-copy{ min-width: 0; align-self: start; }
@media (max-width:960px){
	.sa-hero-copy{ align-self: auto; }
}
/* breadcrumb — first thing in the copy column, its 14px top margin the only
   vertical offset the column gets now that the grid's own padding is zero. */
.sa-crumb{
	display: flex; flex-wrap: wrap; align-items: center; gap: 11px;
	margin-top: 14px; margin-bottom: 0;
	font-family: var(--ff-label); font-size: 12px; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
}
.sa-crumb a{ color: var(--ink-warm-2); }
.sa-crumb a:hover{ color: var(--burgundy); }
.sa-crumb .sep{ color: var(--rule-2); }
.sa-crumb .current{ color: var(--burgundy); }

.sa-hero-eyebrow{
	font-family: var(--ff-label); font-size: var(--type-eyebrow); font-weight: 600; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--burgundy); display: inline-flex; align-items: center; gap: 12px; margin: 0;
}
.sa-hero-eyebrow::before{ content: ""; width: 24px; height: 1px; background: var(--burgundy); }
/* SPLIT HEADER — the line break is authored in the copy (`<br>`), so the 16ch
   measure that used to force the wrap is gone: capping it would now break the
   line a SECOND time. The em is inline-block so `white-space:nowrap` binds to
   the whole burgundy beat rather than to the run it happens to start on. */
.sa-hero h1{
	font-family: var(--ff-display); font-weight: 500; font-size: var(--type-hero);
	line-height: 0.98; letter-spacing: -0.01em; color: var(--ink); margin: 26px 0 0 0; text-wrap: pretty; max-width: none;
}
.sa-hero h1 em{ font-style: italic; font-weight: 500; color: var(--burgundy); white-space: nowrap; display: inline-block; }
.sa-hero-sub{
	font-family: var(--ff-body); font-size: var(--type-lede); line-height: 1.64; max-width: 60ch;
	color: var(--ink-2); margin: 24px 0 0 0;
}

/* cinematic reel — the dark 11-shop-catalog film strip restated as the one dark
   element in the light hero: a cross-fading ken-burns stage + a clickable
   thumbnail reel, parallax-linked on scroll. */
.sa-hero-reel{ min-width: 0; display: flex; flex-direction: column; gap: 10px; }
@media (min-width:961px){
	.sa-hero-reel{ display: grid; grid-template-columns: 1fr 76px; grid-template-rows: 1fr; gap: 10px; align-items: stretch; height: 100%; }
}
.sa-reel-stage{ position: relative; aspect-ratio: 4/3.05; overflow: hidden; background: #1A1512; border: 1px solid var(--rule-2); box-shadow: 0 34px 74px -36px rgba(45,41,38,.5); }
@media (min-width:961px){
	.sa-reel-stage{ aspect-ratio: auto; order: 0; height: auto; min-height: 0; }
}
.sa-reel-shot{ position: absolute; inset: -6% -4%; background-size: cover; background-position: center; opacity: 0; filter: saturate(.94) contrast(1.04); transform: scale(var(--reel-kb,1.06)); transition: opacity 1.6s ease-in-out; will-change: transform,opacity; }
.sa-reel-shot.is-active{ opacity: 1; }
.sa-reel-stage::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(20,16,14,0) 42%,rgba(20,16,14,.6) 100%),radial-gradient(78% 60% at 50% 26%,rgba(20,16,14,0),rgba(20,16,14,.34)); }
.sa-reel-cap{ position: absolute; left: 17px; right: 64px; bottom: 15px; z-index: 2; margin: 0; font-family: var(--ff-label); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #F1E4CE; transition: opacity .35s ease; text-wrap: pretty; }
.sa-reel-strip{ display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
@media (min-width:961px){
	.sa-reel-strip{ order: 1; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 8px; }
	.sa-reel-frame{ aspect-ratio: auto; }
}
.sa-reel-frame{ position: relative; aspect-ratio: 1/1; border: 0; padding: 0; cursor: pointer; background-size: cover; background-position: center; background-color: #2a231d; filter: saturate(.8) brightness(.66); border-radius: 1px; transition: filter .5s ease, box-shadow .35s ease, transform .35s ease; }
.sa-reel-frame:hover{ filter: saturate(.95) brightness(.86); }
.sa-reel-frame.is-active{ filter: saturate(1.02) brightness(1); box-shadow: 0 0 0 2px var(--burgundy); transform: translateY(-2px); z-index: 2; }
@media (prefers-reduced-motion:reduce){
	.sa-reel-shot{ transform: none !important; transition: opacity .3s; }
}

@media (max-width:960px){
	.sa-hero-grid{ grid-template-columns: 1fr; gap: 34px; padding: 0 20px; }
	.sa-hero-reel{ order: -1; }
}

/* ---- 2026-11-03 a11y + motion pass (prototype 11): no scroll parallax (the
   Ken Burns drift stays); the slideshow's pause/play, clear of the caption. ---- */
.sa-reel-toggle{ position: absolute; right: 12px; bottom: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,16,14,.42); border: 1px solid rgba(241,228,206,.34); color: #F1E4CE; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .12s ease; }
.sa-reel-toggle svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sa-reel-toggle .i-play{ display: none; }
.sa-reel-toggle.is-paused .i-pause{ display: none; }
.sa-reel-toggle.is-paused .i-play{ display: block; }
.sa-reel-toggle:hover{ border-color: #E8C9A0; color: #E8C9A0; background: rgba(185,119,39,.14); }
.sa-reel-toggle:active{ transform: scale(.94); }
.sa-reel-toggle:focus-visible, .sa-reel-frame:focus-visible{ outline: 2px solid #E8C9A0; outline-offset: 2px; }
/* fade-up reveals, added by view.js (never on wine cards) */
.sa-rv{ opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms); }
.sa-rv.is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .sa-rv{ opacity: 1; transform: none; transition: none; } }