/* g-hero — Hero category (full | split | stats). v3.41.0.
   Single skeleton; CSS repositions .ssla-g-hero-media per layout + gates the
   stats grid. Default (no class) = full. Squared UI (no border-radius). */

.ssla-g-hero {
  position: relative;
  color: var(--g-hero-fg, var(--shell-fg, #ffffff));
  background: var(--g-hero-bg, var(--shell-bg, #1a1a1a));
  overflow: hidden;
}
.ssla-g-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--g-hero-content-max-width, 1200px);
  margin: 0 auto;
  padding: var(--g-hero-section-padding, 96px 24px);
  display: flex;
  align-items: center;
}
.ssla-g-hero-content { max-width: 640px; }
.ssla-g-hero--text-align-center .ssla-g-hero-inner { justify-content: center; }
.ssla-g-hero--text-align-center .ssla-g-hero-content { text-align: center; }

/* Height */
.ssla-g-hero--height-tall .ssla-g-hero-inner     { min-height: 80vh; }
.ssla-g-hero--height-standard .ssla-g-hero-inner { min-height: 58vh; }
.ssla-g-hero--height-compact .ssla-g-hero-inner  { min-height: auto; }

/* Content */
.ssla-g-hero-eyebrow { display:block; font:700 12px/1.2 var(--g-hero-body-family,var(--shell-bf,system-ui)); letter-spacing:.12em; text-transform:uppercase; color:var(--g-hero-eyebrow,var(--brand-accent,#c9a227)); margin-bottom:16px; }
.ssla-g-hero-eyebrow:empty { display:none; }
.ssla-g-hero-heading { font:700 clamp(32px,5vw,56px)/1.05 var(--g-hero-heading-family,var(--shell-hf,system-ui)); color:var(--g-hero-heading,inherit); margin:0 0 20px; }
.ssla-g-hero-body { font:400 clamp(16px,1.6vw,19px)/1.55 var(--g-hero-body-family,var(--shell-bf,system-ui)); color:var(--g-hero-body,inherit); margin:0 0 28px; }
.ssla-g-hero-body:empty { display:none; }
.ssla-g-hero-cta { display:inline-block; padding:var(--g-hero-button-padding,14px 28px); background:var(--g-hero-button-fill,var(--brand-accent,#c9a227)); color:var(--ssla-button-text, var(--g-hero-button-text, #ffffff)); font-weight:700; text-decoration:none; }
.ssla-g-hero-cta:empty { display:none; }

/* Media element — hidden by default; each layout positions it */
.ssla-g-hero-media { display:none; }
.ssla-g-hero-media img, .ssla-g-hero-media video, .ssla-g-hero-media iframe { display:block; width:100%; height:100%; object-fit:cover; }

/* ── FULL (default): media as background + scrim, stats hidden ── */
/* v3.41.10 (PL006) — media is the absolute background; z-index:auto (not 0) so it
   does NOT create a low stacking context that traps the overlay MEDIA pill behind
   the content (z-index:1). Render is preserved: the scrim (::after z-index:0) and
   the content (z-index:1) still paint above the image; but the pill (z-index:60,
   appended inside this div) now escapes to the section context and is clickable in
   edit mode. Was z-index:0 → pill unreachable on Full heroes. */
.ssla-g-hero--layout-full .ssla-g-hero-media,
.ssla-g-hero:not([class*="--layout-"]) .ssla-g-hero-media { display:block; position:absolute; inset:0; z-index:auto; }
.ssla-g-hero--layout-full::after,
.ssla-g-hero:not([class*="--layout-"])::after { content:""; position:absolute; inset:0; z-index:0; background: var(--g-hero-scrim, linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.25))); }
.ssla-g-hero--layout-full .ssla-g-hero-stats,
.ssla-g-hero:not([class*="--layout-"]) .ssla-g-hero-stats { display:none; }

/* ── SPLIT: media beside content ──
   v3.41.07 — the SECTION is the 2-column track. In the single skeleton the media
   div is a SIBLING of .ssla-g-hero-inner (so FULL can use it as an absolute
   background); the old rule made .inner a 2-col grid, but the media wasn't inside
   .inner, so it dropped into normal flow and rendered full-width ABOVE the content
   instead of beside it. Making the section the grid puts media + inner in real
   side-by-side columns; `order` honours media_side. */
.ssla-g-hero--layout-split { background: var(--g-hero-bg, var(--shell-bg, #ffffff)); color: var(--g-hero-fg, var(--shell-fg, #1a1a1a)); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.ssla-g-hero--layout-split .ssla-g-hero-inner { order:1; max-width:none; margin:0; }
.ssla-g-hero--layout-split .ssla-g-hero-media { display:block; position:relative; order:2; min-height:340px; align-self:stretch; }
.ssla-g-hero--layout-split.ssla-g-hero--media-side-left .ssla-g-hero-media { order:0; }
.ssla-g-hero--layout-split .ssla-g-hero-stats { display:none; }
/* v3.41.08 — media_fit: cover (default) = full-bleed, media fills its half edge-to-
   edge (align-self:stretch + object-fit:cover, set above). contain = the image sits
   padded within its half at natural aspect (the legacy g-hero-split "constrained"
   look), centered rather than stretched. */
.ssla-g-hero--layout-split.ssla-g-hero--media-fit-contain .ssla-g-hero-media { align-self:center; min-height:0; padding:32px; }
.ssla-g-hero--layout-split.ssla-g-hero--media-fit-contain .ssla-g-hero-media img,
.ssla-g-hero--layout-split.ssla-g-hero--media-fit-contain .ssla-g-hero-media video { height:auto; max-height:100%; object-fit:contain; }

/* ── STATS: no media, metrics bar below content ── */
/* v3.41.10 (PL007) — Stats no longer discards an uploaded image. When media is
   present it renders as a scrimmed background behind the metrics (reusing the Full
   treatment); when absent, the empty media div stays hidden and the section shows
   its plain tone surface. Non-destructive either way — the media attr is preserved
   across layout round-trips. :has() gates on real media (img/video/iframe). */
.ssla-g-hero--layout-stats .ssla-g-hero-media { display:none; }
.ssla-g-hero--layout-stats .ssla-g-hero-media:has(img, video, iframe) { display:block; position:absolute; inset:0; z-index:auto; }
.ssla-g-hero--layout-stats:has(.ssla-g-hero-media img, .ssla-g-hero-media video, .ssla-g-hero-media iframe)::after { content:""; position:absolute; inset:0; z-index:0; background: var(--g-hero-scrim, linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,.25))); }
.ssla-g-hero--layout-stats .ssla-g-hero-inner { flex-direction:column; align-items:flex-start; }
.ssla-g-hero--layout-stats.ssla-g-hero--text-align-center .ssla-g-hero-inner { align-items:center; }
.ssla-g-hero-stats { display:grid; grid-template-columns:repeat(3,auto); gap:40px; margin-top:40px; }
.ssla-g-hero--count-four .ssla-g-hero-stats { grid-template-columns:repeat(4,auto); }
/* v3.41.10 (PL008) — show exactly the active count of stats. Extra items left over
   from a later count-decrease (4→3) HIDE non-destructively (data preserved), so the
   editor reflects the count change live — no page reload needed. Default = 3. */
.ssla-g-hero-stats > .ssla-g-hero-stat:nth-child(n+4) { display:none; }
.ssla-g-hero--count-four .ssla-g-hero-stats > .ssla-g-hero-stat:nth-child(4) { display:block; }
.ssla-g-hero-stat-value { font:700 40px/1 var(--g-hero-heading-family,var(--shell-hf,system-ui)); color:var(--g-hero-stat-value,var(--brand-accent,#c9a227)); }
.ssla-g-hero-stat-label { font:500 14px/1.3 var(--g-hero-body-family,var(--shell-bf,system-ui)); margin-top:6px; opacity:.85; }

/* Tone (full uses a light scrim on tone-light) */
/* v3.41.05 — tone-dark was MISSING, so the section's default tone (dark) and any
   explicit tone-dark left --g-hero-bg unset → it fell back to --shell-bg (the
   preset's light shell, e.g. #faf7f2). On SPLIT/STATS layouts (no media covering
   the surface) that rendered a light background under light text, and flipping
   tones just produced slightly different creams ("strange bg color changes" —
   Glenn 2026-07-05). Every tone must set --g-hero-bg explicitly. */
.ssla-g-hero--tone-dark  { --g-hero-bg:#1a1a1a; --g-hero-fg:#f5f5f5; }
.ssla-g-hero--tone-light { --g-hero-bg:#ffffff; --g-hero-fg:#1a1a1a; }
.ssla-g-hero--tone-light.ssla-g-hero--layout-full::after { --g-hero-scrim: linear-gradient(to right, rgba(255,255,255,.85), rgba(255,255,255,.4)); }
/* accent ("Preset") — pulls the preset accent surface (parity with g-proof); light surface → dark fg + light scrim so overlaid text stays readable on full */
.ssla-g-hero--tone-accent { --g-hero-bg: var(--preset-accent-surface, #f7f3ec); --g-hero-fg: var(--preset-accent-fg, #1a1a1a); }
.ssla-g-hero--tone-accent.ssla-g-hero--layout-full::after { --g-hero-scrim: linear-gradient(to right, rgba(255,255,255,.72), rgba(255,255,255,.3)); }

@media (max-width:720px) {
  .ssla-g-hero--layout-split { grid-template-columns:1fr; }
  .ssla-g-hero--layout-split .ssla-g-hero-media { min-height:260px; }
  .ssla-g-hero-stats { grid-template-columns:repeat(2,auto); }
}