/* ==========================================================================
   EliteBlocc — Stats Band Component
   File: assets/css/components/ebc-stats-band.css
   Version: 1.0

   PURPOSE
   The horizontal row of key proof numbers (buildings, U-values, fire
   ratings, documents, etc.) used at the base of hero sections and as
   standalone trust strips across all major pages.

   Each page uses a different page-specific class name for its stats band
   (eb-home-stats, eb-ph-hero__stats, eb-th-stats-band, eb-sus-stats-band).
   This file provides the shared visual language — the number typestyle,
   label typestyle, and emerald accent treatment. Page-specific layout
   (column counts, grid behaviour, border treatment) remains in page CSS.

   NEW PAGES — use the canonical class:
   <div class="ebc-stats-band" role="list" aria-label="Key statistics">
     <div class="ebc-stats-band__item" role="listitem">
       <span class="ebc-stats-band__num">90k+</span>
       <span class="ebc-stats-band__label">Buildings worldwide</span>
     </div>
   </div>

   THEMING via CSS custom properties:
   --ebc-sb-num-color     number colour (default: #fff)
   --ebc-sb-label-color   label colour (default: muted)
   --ebc-sb-border        divider colour between items
   ========================================================================== */

/* ── Canonical class — for new pages ── */

.ebc-stats-band {
  display:               grid;
  grid-template-columns: repeat(var(--ebc-sb-cols, 4), 1fr);
  gap:                   var(--ebc-sb-gap, 16px);
  padding:               clamp(20px, 3vw, 28px) clamp(1rem, 4vw, 2.5rem);
  background:            var(--ebc-sb-bg, rgba(6, 78, 59, 0.06));
  border-top:            1px solid var(--ebc-sb-border, rgba(16, 185, 129, 0.18));
  border-bottom:         1px solid var(--ebc-sb-border, rgba(16, 185, 129, 0.18));
}

.ebc-stats-band__item {
  display:    flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap:        4px;
  padding:    clamp(12px, 2vw, 18px) 6px;
}

/* ── Shared number style — used across all stat band variants ── */

.ebc-stats-band__num,
.eb-home-stats__num,
.eb-ph-hstat__n,
.eb-th-stat__n,
.eb-sus-stat__n {
  font-family:    var(--eb-font-heading, 'Orbitron', monospace);
  font-size:      clamp(1.5rem, 3vw, 2rem);
  font-weight:    900;
  color:          var(--ebc-sb-num-color, #fff);
  line-height:    1;
  display:        block;
}

/* ── Gold em accent — <em> inside the number ── */

.ebc-stats-band__num em,
.eb-home-stats__num em,
.eb-ph-hstat__n em,
.eb-th-stat__n em,
.eb-sus-stat__n em {
  font-style: normal;
  color:      var(--eb-color-gold, #f59e0b);
}

/* ── Shared label style ── */

.ebc-stats-band__label,
.eb-home-stats__label,
.eb-ph-hstat__l,
.eb-th-stat__l,
.eb-sus-stat__l {
  font-family:    monospace;
  font-size:      0.62rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ebc-sb-label-color, rgba(210, 230, 220, 0.6));
  line-height:    1.4;
  display:        block;
}

/* ── Responsive — canonical class ── */

@media (max-width: 768px) {
  .ebc-stats-band {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .ebc-stats-band {
    grid-template-columns: 1fr 1fr;
  }
}