/**
 * Greenfield canonical: Hero — Stats
 * v3.18.48
 */

.ssla-section.ssla-g-hero-stats {
  background-color: var(--ssla-bg-color, transparent);
  color: var(--g-hero-stats-fg);
  padding: var(--g-hero-stats-section-padding);
}

/* v3.23.92 — Height option (parity with g-hero-full / g-hero-split). Each
   variant owns its own min-height so none is out-specified; all center the
   content column vertically. Standard = content height; tall = 80vh; full
   screen = 100vh. Wrapper class is projected by the bridge from the height
   variant value. Closes the "hero-stats has no tall / full-screen" gap. */
.ssla-g-hero-stats--height-standard,
.ssla-g-hero-stats--height-tall,
.ssla-g-hero-stats--height-fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ssla-g-hero-stats--height-tall       { min-height: 80vh; }
.ssla-g-hero-stats--height-fullscreen { min-height: 100vh; }
.ssla-g-hero-stats-inner {
  max-width: var(--g-hero-stats-content-max-width);
  margin: 0 auto;
  padding: var(--paint-section-padding, 80px) 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.ssla-g-hero-stats-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.ssla-g-hero-stats-eyebrow {
  font: 600 12px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-hero-stats-eyebrow);
}
.ssla-g-hero-stats-heading {
  font: 700 var(--g-hero-stats-heading-size, clamp(32px, 5vw, 56px))/1.1 var(--g-hero-stats-heading-family, var(--shell-hf, system-ui));
  font-weight: var(--paint-heading-weight, 700); /* v3.52.04 — painted ProSet heading weight reaches g- heading; 700 no-paint default */
  color: var(--g-hero-stats-heading);
  margin: 0;
}
.ssla-g-hero-stats-body {
  font: 400 var(--g-hero-stats-body-size, 18px)/1.55 var(--g-hero-stats-body-family, var(--shell-bf, system-ui));
  color: var(--g-hero-stats-body);
  margin: 0;
}
.ssla-g-hero-stats-cta {
  display: inline-block;
  padding: 12px 22px;
  font: 600 14px/1 var(--shell-bf, system-ui);
  text-decoration: none;
  /* v3.23.03 — dedicated button tokens with legible defaults (dark fill /
     white text) instead of reusing --g-hero-stats-heading/-bg, which resolved
     white-on-white on a preset-less surface. Preset --ssla-button-fill/-text
     still win. */
  background: var(--ssla-button-fill, var(--g-hero-stats-button-fill, #1a1a1a));
  color: var(--ssla-button-text, var(--g-hero-stats-button-text, #ffffff));
  border: 1px solid var(--ssla-button-fill, var(--g-hero-stats-button-fill, #1a1a1a));
  align-self: flex-start;
  margin-top: 8px;
}
.ssla-g-hero-stats-strip {
  display: grid;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.ssla-g-hero-stats-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ssla-g-hero-stats-value {
  font: 700 var(--g-hero-stats-value-size, clamp(32px, 4.5vw, 48px))/1 var(--g-hero-stats-heading-family, var(--shell-hf, system-ui));
  color: var(--g-hero-stats-value);
}
.ssla-g-hero-stats-label {
  font: 600 12px/1.3 var(--g-hero-stats-body-family, var(--shell-bf, system-ui));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-hero-stats-body);
  opacity: 0.8;
}

/* Count */
.ssla-g-hero-stats--count-three .ssla-g-hero-stats-strip { grid-template-columns: repeat(3, 1fr); }
.ssla-g-hero-stats--count-four .ssla-g-hero-stats-strip  { grid-template-columns: repeat(4, 1fr); }

/* Density */
.ssla-g-hero-stats--density-standard .ssla-g-hero-stats-eyebrow,
.ssla-g-hero-stats--density-standard .ssla-g-hero-stats-cta { display: none; }
/* density-rich: all visible */

/* v3.24.04 — Content alignment (text_align variant). Default left = the stock
 * align-self:flex-start CTA + left text. Center/right shift the text block, its
 * inline content, the CTA, and the stat cells. Mirrors g-hero-half/g-hero-split. */
.ssla-g-hero-stats--text-align-center .ssla-g-hero-stats-inner { align-items: center; }
.ssla-g-hero-stats--text-align-center .ssla-g-hero-stats-text  { text-align: center; align-items: center; margin-left: auto; margin-right: auto; }
.ssla-g-hero-stats--text-align-center .ssla-g-hero-stats-cta   { align-self: center; }
.ssla-g-hero-stats--text-align-center .ssla-g-hero-stats-cell  { text-align: center; }

.ssla-g-hero-stats--text-align-right .ssla-g-hero-stats-inner { align-items: flex-end; }
.ssla-g-hero-stats--text-align-right .ssla-g-hero-stats-text  { text-align: right; align-items: flex-end; margin-left: auto; }
.ssla-g-hero-stats--text-align-right .ssla-g-hero-stats-cta   { align-self: flex-end; }
.ssla-g-hero-stats--text-align-right .ssla-g-hero-stats-cell  { text-align: right; }

/* Skeleton */
.ssla-g-hero-stats {
  --g-hero-stats-fg:                 var(--brand-fg);
  --g-hero-stats-bg:                 var(--brand-bg);
  --g-hero-stats-eyebrow:            var(--brand-accent);
  --g-hero-stats-heading:            var(--brand-fg);
  --g-hero-stats-body:               var(--brand-fg);
  --g-hero-stats-value:              var(--brand-fg);
  /* v3.24.19 — CTA palette parity with g-cta: the button fill defaults to the
     preset accent (was an inline #1a1a1a fallback only, so a preset-painted
     hero CTA stayed generic dark instead of adopting the brand colour — TSP
     "Become a Member" rendered #1a1a1a while g-cta's was gold). */
  --g-hero-stats-button-fill:        var(--brand-accent);
  --g-hero-stats-button-text:        var(--brand-accent-fg, #ffffff); /* v3.41.09 — on-accent ink, not shell-relative */
  --g-hero-stats-heading-family:     var(--shell-hf, system-ui);
  --g-hero-stats-heading-size:       clamp(32px, 5vw, 56px);
  --g-hero-stats-body-family:        var(--shell-bf, system-ui);
  --g-hero-stats-body-size:          18px;
  --g-hero-stats-value-size:         clamp(32px, 4.5vw, 48px);
  --g-hero-stats-section-padding:    0;
  --g-hero-stats-content-max-width:  1200px;
}

/* Tone */
.ssla-g-hero-stats--tone-light {
  --g-hero-stats-fg:      #1a1a1a;
  --g-hero-stats-bg:      #ffffff;
  --g-hero-stats-heading: #1a1a1a;
  --g-hero-stats-body:    #4a4a4a;
  --g-hero-stats-value:   #1a1a1a;
}
.ssla-g-hero-stats--tone-light .ssla-g-hero-stats-strip { border-top-color: rgba(0,0,0,0.12); }
.ssla-g-hero-stats--tone-dark {
  --g-hero-stats-fg:      #f5f5f5;
  --g-hero-stats-bg:      #1a1a1a;
  --g-hero-stats-heading: #ffffff;
  --g-hero-stats-body:    #d0d0d0;
  --g-hero-stats-value:   #ffffff;
}
.ssla-g-hero-stats--tone-accent {
  --g-hero-stats-fg:      var(--preset-accent-fg, #1a1a1a);
  --g-hero-stats-bg:      var(--preset-accent, #1a1a1a);
  --g-hero-stats-heading: var(--preset-accent-fg, #1a1a1a);
  --g-hero-stats-body:    var(--preset-accent-fg, #1a1a1a);
  --g-hero-stats-value:   var(--preset-accent-fg, #1a1a1a);
}
.ssla-g-hero-stats--tone-accent .ssla-g-hero-stats-strip { border-top-color: rgba(0,0,0,0.12); }

/* v3.24.15 — bg-media tint parity with g-hero-full (Glenn 2026-06-26 walk).
   Over a background photo the section has NO solid fill; the tint is a ::before
   OVER the media (z0) and UNDER content (z2). An explicit --ssla-bg-color
   (user/overlay) wins; otherwise the tint falls back to the tone background
   (--g-hero-stats-bg: dark for tone-dark) so light text stays legible when the
   converter carries no tint of its own. Mirrors g-hero-full.css. */
.ssla-g-hero-stats[data-ssla-bg-media] { background-color: transparent; }
.ssla-g-hero-stats[data-ssla-bg-media]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--ssla-bg-color, var(--g-hero-stats-bg, #1a1a1a));
}
.ssla-g-hero-stats[data-ssla-bg-media] > .ssla-g-hero-stats-inner {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .ssla-g-hero-stats-inner { padding: 48px 16px 40px; gap: 32px; }
  .ssla-g-hero-stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .ssla-g-hero-stats-heading { font-size: clamp(28px, 7vw, 40px); }
  .ssla-g-hero-stats-value { font-size: clamp(28px, 7vw, 40px); }
}