/* === g-hero-full — greenfield canonical, slot-contract form === */
/* Phase 0.1.f2 — rewritten per preset-architecture-v1.md §3.3 + §3.5.   */
/* Section CSS consumes only var(--g-hero-full-*) and var(--brand-*).    */
/* No --shell-*, no --paint-*, no currentColor fallbacks. Tone cascade   */
/* lives in Simple Theme emission (§4.2), not here.                      */

/* ── Base layout ── */
.ssla-g-hero-full {
  width: 100%;
  position: relative;
  overflow: hidden;
  /* v3.23.11 — explicit --ssla-bg-color (overlay) wins; else the tone-aware
     --g-hero-full-bg skeleton default; else transparent. */
  background-color: var(--ssla-bg-color, var(--g-hero-full-bg, transparent));
  color:      var(--g-hero-full-fg);
}
.ssla-g-hero-full-inner {
  text-align: var(--ssla-text-align, left); /* v3.18.32 f3.text-align */
  max-width: var(--g-hero-full-content-max-width);
  margin: 0 auto;
  padding: var(--g-hero-full-section-padding) 48px;
  position: relative;
  z-index: 1;
}

/* ── Fullbleed ── */
.alignfull .ssla-g-hero-full-inner {
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
}
.ssla-g-hero-full.alignfull .ssla-g-hero-full-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* v3.54.24 — the alignfull 60vh floor is now a FALLBACK, not an override.
   It lived on the INNER, so it out-floored the Height ladder on the OUTER: a
   full-bleed hero set to Compact (40vh) still rendered 60vh, because the inner
   it contains refused to go below that. Ungating the height rules alone would
   not have fixed Compact here. Applied only when the section carries no
   --height-* class at all, so a hero with an explicit height is sized purely by
   that ladder (one source of truth for vertical size) while a height-less
   alignfull hero keeps the band it has always had. */
.ssla-g-hero-full.alignfull:not([class*="--height-"]) .ssla-g-hero-full-inner {
  min-height: 60vh;
}

/* v3.24.49 — content-block POSITION follows the text_align lever, so the block
   sits at the LEFT / CENTER / RIGHT of the full section width (not just text-
   aligned inside a permanently-centered column). Glenn: "left side of screen
   left-justified, centre of screen centred, right side right-justified."
   Two layouts: the constrained inner is shifted by auto-margins; the fullbleed
   inner is a flex column, so its children are positioned by align-items. */
.ssla-g-hero-full[data-ssla-text-align="left"]   .ssla-g-hero-full-inner { margin-left: 0;    margin-right: auto; }
.ssla-g-hero-full[data-ssla-text-align="center"] .ssla-g-hero-full-inner { margin-left: auto; margin-right: auto; }
.ssla-g-hero-full[data-ssla-text-align="right"]  .ssla-g-hero-full-inner { margin-left: auto; margin-right: 0; }
.ssla-g-hero-full.alignfull[data-ssla-text-align="left"]   .ssla-g-hero-full-inner { align-items: flex-start; }
.ssla-g-hero-full.alignfull[data-ssla-text-align="center"] .ssla-g-hero-full-inner { align-items: center; }
.ssla-g-hero-full.alignfull[data-ssla-text-align="right"]  .ssla-g-hero-full-inner { align-items: flex-end; }

/* ── Typography ── */
.ssla-g-hero-full-eyebrow {
  color:           var(--g-hero-full-eyebrow);
  font-size:       var(--g-hero-full-eyebrow-size);
  letter-spacing:  var(--g-hero-full-eyebrow-letter);
  font-weight:     800;
  text-transform: var(--paint-eyebrow-case, uppercase);
  margin:          0 0 24px;
}
.ssla-g-hero-full-heading {
  font-family:    var(--g-hero-full-heading-family);
  font-size:      var(--g-hero-full-heading-size);
  font-weight:    var(--g-hero-full-heading-weight);
  letter-spacing: var(--g-hero-full-heading-letter);
  line-height:    1.05;
  margin:         0 0 24px;
  text-transform: var(--paint-heading-case-h1, none);
}
.ssla-g-hero-full-body {
  font-family: var(--g-hero-full-body-family);
  font-size:   var(--g-hero-full-body-size);
  line-height: var(--g-hero-full-body-line-height);
  max-width:   720px;
  margin:      0 0 40px;
}
.ssla-g-hero-full-body p { margin: 0 0 12px; }
.ssla-g-hero-full-body p:last-child { margin-bottom: 0; }

/* ── CTA ── */
/* v3.53.01 — actions is a flex row so a primary + optional secondary CTA sit
   side by side (wrap on narrow). */
.ssla-g-hero-full-actions { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ssla-g-hero-full-cta,
.ssla-g-hero-full-cta2 {
  display: inline-block;
  background:      var(--ssla-button-fill, var(--g-hero-full-cta-bg));
  color:           var(--ssla-button-text, var(--g-hero-full-cta-fg));
  padding:         var(--g-hero-full-button-padding);
  border-radius:   var(--g-hero-full-button-radius);
  font-weight:     800;
  font-size:       13px;
  letter-spacing:  2px;
  text-transform:  uppercase;
  text-decoration: none;
  transition:      transform .25s ease;
}
/* v3.53.01 — the optional secondary CTA is hidden until it carries a label. */
.ssla-g-hero-full-cta:empty,
.ssla-g-hero-full-cta2:empty { display: none; }

/* ── Media slot ──
   v3.23.14 (refactor, Glenn 2026-06-13): background-position media is no longer
   an absolutely-positioned child <div>. That approach kept collapsing to 0
   height under the shared tint rule (which forces direct children to
   position:relative) and intercepted clicks — patched repeatedly v3.23.08–.13.
   The bridge now promotes the section's `media` slot into the universal bg_media
   attrs, so the media renders as the SECTION ROOT's background: image →
   background-image via 0-shared.css `section[data-ssla-bg-media]`; video →
   injected <video class="ssla-bg-video"> at z0. There is NO child media element
   in background mode. The rules below cover the bg-color tint (background mode)
   and the in-flow child (inline mode). */

/* Glenn's tint model: when a background image/video is present the section has
   NO solid fill — the background COLOR becomes a tint overlay over the media at
   --section-tint-opacity (default 0.5). One color control, dual purpose. The
   tint is a ::before sitting OVER the root background/video (z0) but UNDER the
   content (z2). Keyed on data-ssla-bg-media (present only when an image/video is
   actually set) so "background mode, no image yet" keeps its normal solid bg. */
.ssla-g-hero-full[data-ssla-bg-media] { background-color: transparent; }
.ssla-g-hero-full[data-ssla-bg-media]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* v3.23.16 — the tint IS the background color, alpha included. The Background
     Color popover's OPACITY slider bakes alpha into --ssla-bg-color (#RRGGBBAA),
     so that single control drives the full 0–100% tint range (0% = image clear,
     100% = fully tinted). NO secondary opacity throttle: a hardcoded
     `opacity:0.5` here previously MULTIPLIED against the slider's alpha, capping
     the visible tint at ~50% even with the slider maxed (Glenn 2026-06-13: "can't
     max out the tint … that is user discretion"). One control, full range. */
  background-color: var(--ssla-bg-color, var(--g-hero-full-bg, #1a1a1a));
}
/* Content above both the root background/video (z0) and the tint ::before (z1). */
.ssla-g-hero-full[data-ssla-bg-media] > .ssla-g-hero-full-inner {
  position: relative;
  z-index: 2;
}

/* v3.23.14 — Height option. Each variant owns its own min-height so none is
   out-specified by a shared rule (the v3.23.11 bug: a global :has(media)
   min-height:60vh beat --height-tall/--fullscreen, so the control did nothing).
   Standard floors at 60vh ONLY when a bg image/video is present (so the band
   reads as a hero); otherwise content height. All three center vertically. */
.ssla-g-hero-full--height-compact,
.ssla-g-hero-full--height-standard,
.ssla-g-hero-full--height-tall,
.ssla-g-hero-full--height-fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* v3.54.24 — UNGATE height from [data-ssla-bg-media] (Glenn 2026-08-04: "the
   density height has regressed at least on this site / page and broken does not
   update").

   v3.24.36 had media-gated all four heights to stop a CONVERTED interior hero —
   named in that commit: simpliment /about/ — from reserving ~684px of bare white
   when its source image wasn't adopted. The intent was right; the mechanism was
   not. Gating the CSS did not just suppress an inherited height, it disabled the
   Height CONTROL outright: on any hero without background media all four options
   collapse to the same content height, so the operator clicks Compact / Tall /
   Full screen and the section never moves. Live proof (2026-08-04, simpliment.co
   /about/): the hero carries .ssla-g-hero-full--height-fullscreen and NO
   data-ssla-bg-media attribute — the page's only one is on the Cards section —
   so every height rule below was inert.

   Same class of defect as v3.54.21 ("tone suggestion no longer fights an
   explicit choice"): a heuristic meant to fix a bad DEFAULT was overriding an
   EXPLICIT operator choice. An explicit height is honored whether or not the
   hero has media — a label that says Full screen must produce a full screen.
   The accidental-inheritance case belongs in the migration defaults
   (class-ssla-section-migration-map.php already lands converted heroes on
   'standard'), not in a CSS gate that mutes a live control.

   Sibling heroes (g-hero-split, g-hero-stats) were NEVER media-gated — this
   section was the anomaly, so ungating restores fleet consistency rather than
   inventing a new behavior.

   ⚠ BLAST RADIUS, stated deliberately: 'standard' is the registry default, and
   it now floors at 60vh on heroes WITHOUT media too, where before those sized
   to content. Any image-less g-hero-full sitting on the default will get taller.
   That is the intended reading of the ladder — 40 / 60 / 80 / 100vh has to stay
   monotonic or the labels lie (media-gating only 'standard' would make an
   explicit Compact TALLER than Standard on the same section). */
.ssla-g-hero-full--height-compact { min-height: 40vh; }
.ssla-g-hero-full--height-standard { min-height: 60vh; }
.ssla-g-hero-full--height-tall { min-height: 80vh; }
.ssla-g-hero-full--height-fullscreen { min-height: 100vh; }

/* ── Structural variant: media_position — inline mode ──
   Only background mode was promoted to the section background; inline media
   stays an in-flow child <div> below the content column. */
.ssla-g-hero-full-media:empty { display: none; }
.ssla-g-hero-full--media-position-inline {
  display: flex;
  flex-direction: column;
}
.ssla-g-hero-full--media-position-inline > .ssla-g-hero-full-inner { order: 1; }
.ssla-g-hero-full--media-position-inline > .ssla-g-hero-full-media {
  order: 2;
  width: 100%;
  max-width: var(--g-hero-full-content-max-width);
  margin: 40px auto 0;
  padding: 0 48px;
}
.ssla-g-hero-full--media-position-inline > .ssla-g-hero-full-media img,
.ssla-g-hero-full--media-position-inline > .ssla-g-hero-full-media video,
.ssla-g-hero-full--media-position-inline > .ssla-g-hero-full-media iframe {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ── Structural variant: density (per §3.4) ── */
.ssla-g-hero-full--density-minimal .ssla-g-hero-full-eyebrow,
.ssla-g-hero-full--density-minimal .ssla-g-hero-full-body,
.ssla-g-hero-full--density-minimal .ssla-g-hero-full-actions,
.ssla-g-hero-full--density-minimal .ssla-g-hero-full-media { display: none; }
.ssla-g-hero-full--density-standard .ssla-g-hero-full-eyebrow,
.ssla-g-hero-full--density-standard .ssla-g-hero-full-actions,
.ssla-g-hero-full--density-standard .ssla-g-hero-full-media { display: none; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .ssla-g-hero-full-inner {
    padding: 60px 24px;
  }
}

/* ═══ Skeleton state per §3.5 ═══ */
/* Per-section slot defaults pointing to brand-level skeleton tokens.    */
/* Simple Theme emission overrides via cascade order (§4.2). When no     */
/* preset is active, these resolve via brand-level defaults in           */
/* 0-shared.css and the section renders muted-but-functional.            */
.ssla-section.ssla-g-hero-full {
  --g-hero-full-bg:               var(--brand-bg);
  --g-hero-full-fg:               var(--brand-fg);
  --g-hero-full-eyebrow:          var(--brand-accent);
  --g-hero-full-cta-bg:           var(--brand-accent);
  --g-hero-full-cta-fg:           var(--brand-bg);
  --g-hero-full-heading-family:   var(--brand-heading-family);
  --g-hero-full-heading-size:     var(--brand-h1-size-clamp);
  --g-hero-full-heading-weight:   var(--brand-heading-weight);
  --g-hero-full-heading-letter:   var(--brand-letter-spacing-h1);
  --g-hero-full-body-family:      var(--brand-body-family);
  --g-hero-full-body-size:        var(--brand-body-size);
  --g-hero-full-body-line-height: var(--brand-body-line-height);
  --g-hero-full-eyebrow-size:     var(--brand-eyebrow-size);
  --g-hero-full-eyebrow-letter:   var(--brand-letter-spacing-eyebrow);
  --g-hero-full-section-padding:  var(--paint-section-padding, var(--brand-section-padding, 80px));
  --g-hero-full-content-max-width:var(--brand-content-max-width);
  --g-hero-full-button-padding:   var(--brand-button-padding);
  --g-hero-full-button-radius:    var(--brand-button-radius);
}

/* v3.23.11 — tone-aware skeleton defaults so the Tone setting conforms even
   with no preset active (Glenn 2026-06-13: g-hero-full dark tone "does not
   conform"; only light contrasted). Pulls from the full --shell-* family
   (Simple Theme v1.23.x emits these from the 5 anchors). Dark = dark band +
   light text + accent eyebrow; Preset(accent) = brand-accent band + on-accent
   text. An explicit overlay bg_color / tint still wins (base bg rule reads
   --ssla-bg-color first). */
.ssla-section.ssla-g-hero-full.ssla-g-hero-full--tone-dark {
  --g-hero-full-bg:      var(--shell-bg-dark, var(--shell-surface-dark, #1a1a1a));
  --g-hero-full-fg:      var(--shell-text-on-dark, #f5f5f5);
  --g-hero-full-eyebrow: var(--shell-accent);
  --g-hero-full-cta-bg:  var(--shell-accent);
  --g-hero-full-cta-fg:  var(--shell-cta-t, #ffffff);
}
.ssla-section.ssla-g-hero-full.ssla-g-hero-full--tone-accent {
  --g-hero-full-bg:      var(--shell-accent);
  --g-hero-full-fg:      var(--shell-cta-t, #ffffff);
  --g-hero-full-eyebrow: var(--shell-cta-t, #ffffff);
  --g-hero-full-cta-bg:  var(--shell-cta-t, #ffffff);
  --g-hero-full-cta-fg:  var(--shell-accent);
}