/* =============================================================
   AULTER — utilities.css
   Reusable helpers: spacing · flex · grid · badges · reveals
   V3 DNA §6 · §5.4 · §9
   ============================================================= */

/* ── Section Padding ── */
.section-padding    { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
.section-padding-sm { padding-top: var(--space-lg);  padding-bottom: var(--space-lg); }
.section-padding-lg { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

/* ── Content Width — V3 §5.4: width 100%, overflow hidden, 24px padding ── */
.content-width {
  max-width:     1320px;
  width:         100%;
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  24px;
  padding-right: 24px;
  overflow:      hidden;  /* clip any child that attempts to escape */
}

/* ── Flex helpers ── */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: center; justify-content: flex-start; }
.flex-gap-sm  { gap: var(--space-sm); }
.flex-gap-md  { gap: var(--space-md); }
.flex-gap-lg  { gap: var(--space-lg); }

/* ── Responsive Grids ── */
.responsive-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.responsive-grid-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); }

/* ── Text ── */
.text-muted-custom { color: var(--muted); }
.text-accent       { color: var(--accent-light); }
.text-live         { color: var(--live); }
.text-upper        { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 600; }

/* ── Section label / title / desc — V3 §7.6 ── */
.section__label {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--accent-light);
  margin-bottom:  var(--space-sm);
  display:        block;
}
[data-theme="light"] .section__label { color: var(--accent); }

.section__title {
  font-size:      clamp(20px, 3vw, 28px);
  font-weight:    700;
  color:          var(--text);
  margin-bottom:  var(--space-sm);
  letter-spacing: -0.01em;
}

.section__subtitle {
  font-size:   15px;
  color:       var(--muted);
  line-height: 1.65;
  margin:      0;
}

/* ── Section divider ── */
.section-divider {
  width:         48px;
  height:        3px;
  background:    var(--accent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

/* ── Icon box — V3 §7.6: 44px, accent-subtle bg, accent-border border ── */
.icon-box {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-md);
  background:      var(--accent-subtle);
  border:          1px solid var(--accent-border);
  color:           var(--accent-light);
  flex-shrink:     0;
}

.icon-box--live {
  background:   var(--live-dim);
  border-color: rgba(0, 229, 160, 0.25);
  color:        var(--live);
}

/* ── Accent badge ── */
.badge-custom {
  display:          inline-flex;
  align-items:      flex-start;
  gap:              var(--space-xs);
  padding:          5px 12px;
  border-radius:    var(--radius-md);
  font-size:        11px;
  font-weight:      600;
  letter-spacing:   0.04em;
  background-color: var(--accent-subtle);
  color:            var(--accent-light);
  border:           1px solid var(--accent-border);
  /* Allow wrapping on mobile but cap width so it doesn't fill the row */
  white-space:      normal;
  max-width:        260px;
  line-height:      1.4;
}

.badge-live {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-xs);
  padding:          3px 10px;
  border-radius:    20px;
  font-size:        12px;
  font-weight:      700;
  letter-spacing:   0.06em;
  text-transform:   uppercase;
  background-color: var(--live-dim);
  color:            var(--live);
  border:           1px solid rgba(0, 229, 160, 0.25);
}

/* ── Status dot ── */
.status-dot {
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--accent-light);
}

.status-dot--live {
  background: var(--live);
  box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.3);
}

/* ── Background helpers ── */
.bg-surface   { background-color: var(--surface); }
.bg-surface-2 { background-color: var(--surface-2); }

/* ── Pill grid ── */
.pill-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

.pill-item {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-xs);
  padding:       8px 16px;
  border-radius: 20px;
  border:        1px solid var(--border-strong);
  background:    var(--surface-2);
  font-size:     13px;
  font-weight:   600;
  color:         var(--text);
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    color            var(--transition-fast);
}

.pill-item:hover {
  background-color: var(--accent-subtle);
  border-color:     var(--accent-border);
  color:            var(--accent-light);
}

.pill-item i { color: var(--muted); font-size: 14px; }
.pill-item:hover i { color: var(--accent-light); }

/* ── Scroll reveal — V3 §9 naming: .fade-in-up / .is-visible ── */
.fade-in-up {
  opacity:    0;
  transform:  translateY(18px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-in-up.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── sr-only ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Section subtitle constrained width variants ── */
.section__subtitle--narrow { max-width: 560px; }
.section__title--centred   { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ── Card full height ── */
.card--full-height { height: 100%; }

/* ── Mobile CTA button full width ── */
.btn--full { width: 100%; justify-content: center; }

/* ── Footer brand inline segments ── */
.footer__brand-prefix { color: var(--muted); font-size: 14px; font-weight: 500; }
.footer__brand-main   { color: var(--text); }
.footer__brand-accent { color: var(--accent-light); }