/* ════════════════════════════════════════════════════
   components.css — Shared UI components
   Edit this file to change: buttons, section labels,
   section titles, tags, stat bar
════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────── */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--text);
  color:           #fff;
  padding:         18px 38px;
  border-radius:   100px;
  font-family:     'Geist', sans-serif;
  font-size:       12px;
  font-weight:     500;
  letter-spacing:  0.08em;
  text-decoration: none;
  transition:
    background 0.22s,
    transform  0.3s  var(--spring),
    box-shadow 0.3s;
  border:  none;
  cursor:  pointer;
}
.btn-primary:hover {
  background:  var(--sage);
  transform:   translateY(-2px);
  box-shadow:  0 8px 28px rgba(90, 148, 112, 0.38);
}

.btn-ghost {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  border:          1.5px solid var(--border);
  color:           var(--text-muted);
  padding:         18px 32px;
  border-radius:   100px;
  font-family:     'Geist', sans-serif;
  font-size:       12px;
  letter-spacing:  0.08em;
  text-decoration: none;
  transition:
    border-color 0.2s,
    color        0.2s,
    transform    0.3s var(--spring);
  background: transparent;
  cursor:     pointer;
}
.btn-ghost:hover {
  border-color: var(--sage);
  color:        var(--sage);
  transform:    translateY(-2px);
}

/* ── Section scaffolding ─────────────────────────── */
.section      { padding: 120px 52px; }
.section-alt  { background: var(--bg-warm); }
.section-sage { background: var(--bg-sage); }

.mw    { max-width: 1100px; margin: 0 auto; }
.mw-sm { max-width:  720px; }

/* Section eyebrow label */
.section-label {
  display:     inline-flex;
  align-items: center;
  gap:         10px;
  font-family:     'Geist', sans-serif;
  font-size:       10px;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  color:           var(--sage);
  margin-bottom:   22px;
}
.section-label::before {
  content: '';
  width:      24px;
  height:     1px;
  background: var(--sage);
}

/* Section headline */
.section-title {
  font-family:    'Fraunces', serif;
  font-size:      clamp(36px, 5.5vw, 66px);
  font-weight:    300;
  letter-spacing: -0.035em;
  line-height:    1.08;
  color:          var(--text);
}
.section-title em { font-style: italic; color: var(--sage); }

/* Section subtitle */
.section-sub {
  font-size:   18px;
  color:       var(--text-muted);
  line-height: 1.8;
  margin-top:  20px;
  font-weight: 300;
}

/* ── Tags / pills ────────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }

.tag {
  background:    var(--bg-warm);
  border:        1px solid var(--border);
  border-radius: 100px;
  padding:       7px 16px;
  font-size:     11px;
  color:         var(--text-muted);
  font-family:   'Geist', sans-serif;
  letter-spacing: 0.04em;
  transition:
    border-color 0.2s,
    color        0.2s,
    background   0.2s;
  cursor: default;
}
.tag:hover {
  border-color: var(--border-sage);
  color:        var(--sage);
  background:   var(--sage-3);
}

/* ── Stats bar ───────────────────────────────────── */
.stats-bar {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:    var(--surface);
}

.stat-item {
  padding:      38px 42px;
  border-right: 1px solid var(--border);
  transition:   background 0.3s;
  cursor:       default;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover      { background: var(--bg-sage); }

.stat-num {
  font-family:    'Fraunces', serif;
  font-size:      clamp(32px, 4.5vw, 54px);
  font-weight:    300;
  color:          var(--sage);
  letter-spacing: -0.04em;
  line-height:    1;
  margin-bottom:  6px;
}

.stat-label {
  font-size:      11px;
  color:          var(--text-light);
  font-family:    'Geist', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}