/* === 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 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 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:  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;
}
.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.x — Compact: a slim banner floor (~40vh), gated on media like the other
   heights so an image-less compact hero sizes to its content. Smaller than
   Standard's 60vh — for a listing/product masthead where the reader wants the
   detail below the fold, not a full band of chrome. */
.ssla-g-hero-full--height-compact[data-ssla-bg-media] { min-height: 40vh; }
.ssla-g-hero-full--height-standard[data-ssla-bg-media] { min-height: 60vh; }
/* v3.24.36 — media-gate tall + fullscreen too. The comment above says no-media
   heroes get "content height", but only --height-standard was actually gated on
   [data-ssla-bg-media]; --height-tall (80vh) and --height-fullscreen (100vh)
   floored UNCONDITIONALLY, so a converted interior hero whose image wasn't
   adopted (live: simpliment /about/ = --height-tall, ~684px of bare white)
   reserved a vast empty band. Gate them on media like standard, so an image-less
   hero of any height sizes to its content (the inner's section-padding still
   gives breathing room). Heroes WITH media keep their tall/fullscreen band. */
.ssla-g-hero-full--height-tall[data-ssla-bg-media] { min-height: 80vh; }
.ssla-g-hero-full--height-fullscreen[data-ssla-bg-media] { 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);
}