/* alngsd-components.css — Alongside component patterns
   Requires: alngsd-ds.css
   Sources: alongside-typography-v3.html, Alongside-fusion-palette.html */

/* ──────────────────────────────────────────────────────────────
   Section structure
────────────────────────────────────────────────────────────── */
.section { margin-bottom: var(--space-2xl); }

.section-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--space-md);
  /* border-bottom: var(--hairline) solid var(--border-cool); */
  margin-bottom: var(--space-md);
}

.divider {
  height: var(--hairline);
  background: var(--border-cool);
  margin: var(--space-2xl) 0;
}

/* ──────────────────────────────────────────────────────────────
   Offer page card
────────────────────────────────────────────────────────────── */
.offer-page {
  background: var(--surface-cool);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-16);
  padding: var(--space-2xl);
}

.offer-page .t-label     { color: var(--accent); display: block; margin-bottom: var(--space-sm); }
.offer-page .t-h1        { margin-bottom: var(--space-lg); }
.offer-page .t-body      { margin-bottom: var(--space-md); max-width: var(--prose-md); }
.offer-page .t-callout   { margin-bottom: var(--space-md); max-width: var(--prose-md); }
.offer-page .section-break { margin-top: var(--space-xl); margin-bottom: var(--space-md); }
.offer-page .subsection  { margin-top: var(--space-lg); margin-bottom: var(--space-md); }
.offer-page .cta-row     { margin-top: var(--space-xl); display: flex; gap: var(--space-md); align-items: center; }

/* ──────────────────────────────────────────────────────────────
   Reading block + prose
────────────────────────────────────────────────────────────── */
.reading-block {
  background: var(--surface-cool);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-16);
  padding: var(--space-2xl);
  max-width: var(--prose-lg);
}

.prose > * + *         { margin-top: var(--space-md); }
.prose > .t-display    { margin-bottom: var(--space-xl); }
.prose > .t-h1         { margin-bottom: var(--space-lg); }
.prose > .t-h2         { margin-top: var(--space-xl);  margin-bottom: var(--space-lg); }
.prose > .t-h3         { margin-top: var(--space-lg);  margin-bottom: var(--space-md); }
.prose > .t-headline   { margin-top: var(--space-xl);  margin-bottom: var(--space-md); }

/* ──────────────────────────────────────────────────────────────
   Score display
────────────────────────────────────────────────────────────── */
.score-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.score-num {
  font-family: var(--font-serif);
  font-size: var(--size-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--accent);
}

.score-denom {
  font-size: var(--size-subhead);
  color: var(--text-muted);
}

/* ──────────────────────────────────────────────────────────────
   Mono table
────────────────────────────────────────────────────────────── */
.mono-table {
  background: var(--surface-cool);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-12);
  overflow: hidden;
}

.mono-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--hairline) solid var(--border-cool);
}

.mono-row:last-child { border-bottom: none; }

.mono-key { font-family: var(--font-mono); font-size: var(--size-mono); color: var(--text-muted); }
.mono-val { font-family: var(--font-mono); font-size: var(--size-mono); color: var(--accent); }

/* ──────────────────────────────────────────────────────────────
   Cards
────────────────────────────────────────────────────────────── */
.card-grid,
.component-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.card-full { grid-column: span 2; }

.card {
  background: var(--surface-cool);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-14);
  padding: var(--space-lg) var(--space-xl);
}

.card.warm {
  background: var(--surface-warm);
  border-color: var(--border-warm);
}

.card .t-label   { color: var(--accent); display: block; margin-bottom: var(--space-sm); }
.card .t-h2      { margin-bottom: var(--space-md); }
.card .t-callout { margin-bottom: var(--space-xl); }
.card .t-body    { margin-bottom: var(--space-xl); max-width: var(--prose-sm); }

/* ──────────────────────────────────────────────────────────────
   Footnote / note card
────────────────────────────────────────────────────────────── */
.footnote {
  background: var(--surface-cool);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-10);
  padding: var(--space-lg) var(--space-xl);
  margin-top: var(--space-2xl);
}

.footnote .t-label { color: var(--text-muted); display: block; margin-bottom: var(--space-md); }

/* ──────────────────────────────────────────────────────────────
   Nav
────────────────────────────────────────────────────────────── */
.nav {
  background: var(--surface-cool);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-12);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.nav-logo {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  font-weight: 400;
  letter-spacing: var(--track-h3);
  color: var(--text-primary);
}

.nav-links {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  flex-wrap: wrap;
}

.nav-link {
  font-size: var(--size-caption);
  color: var(--text-muted);
  text-decoration: none;
}

.nav-link.active { color: var(--text-primary); }

/* ──────────────────────────────────────────────────────────────
   Hero
────────────────────────────────────────────────────────────── */
.hero {
  background: var(--bg);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-14);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--hairline);
  background: linear-gradient(90deg, transparent, var(--accent-muted), transparent);
  opacity: 0.4;
}

.hero-eyebrow {
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.hero-headline {
  font-family: var(--font-serif);
  font-size: var(--size-h1);
  font-weight: 400;
  letter-spacing: var(--track-h1);
  line-height: var(--lh-h1);
  color: var(--text-primary);
  max-width: var(--prose-sm);
  margin: 0 auto var(--space-md);
}

.hero-sub {
  font-size: var(--size-callout);
  color: var(--text-body);
  line-height: var(--lh-body);
  max-width: var(--prose-xs);
  margin: 0 auto var(--space-lg);
}

.hero-cta-row {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────
   Offer cards (compact — for offers listing)
────────────────────────────────────────────────────────────── */
.offer-card {
  background: var(--surface-cool);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-12);
  padding: var(--space-lg);
}

.offer-card.warm {
  background: var(--surface-warm);
  border-color: var(--border-warm);
}

.offer-eyebrow {
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.offer-title {
  font-family: var(--font-serif);
  font-size: var(--size-headline);
  font-weight: 400;
  letter-spacing: var(--track-h3);
  line-height: var(--lh-headline);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.offer-body {
  font-size: var(--size-caption);
  color: var(--text-body);
  line-height: var(--lh-callout);
  margin-bottom: var(--space-md);
}

.offer-body.warm-text { color: var(--text-warm-body); }

/* ──────────────────────────────────────────────────────────────
   Result card (ALIVE Mirror)
────────────────────────────────────────────────────────────── */
.result-card {
  background: var(--surface-cool);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-12);
  overflow: hidden;
}

.result-top {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: var(--hairline) solid var(--border-cool);
}

.result-score-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.result-score-num {
  font-family: var(--font-serif);
  font-size: var(--size-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--accent);
}

.result-score-denom {
  font-size: var(--size-body);
  color: var(--text-muted);
}

.result-title {
  font-family: var(--font-serif);
  font-size: var(--size-headline);
  font-weight: 400;
  letter-spacing: var(--track-h3);
  line-height: var(--lh-h3);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.result-body {
  font-size: var(--size-caption);
  color: var(--text-body);
  line-height: var(--lh-callout);
  max-width: var(--prose-xs);
}

.result-bottom {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────
   Progress bars (ALIVE dimensions)
────────────────────────────────────────────────────────────── */
.progress-section {
  background: var(--surface-cool);
  border: var(--hairline) solid var(--border-cool);
  border-radius: var(--radius-12);
  padding: var(--space-lg);
}

.progress-item { margin-bottom: var(--space-md); }
.progress-item:last-child { margin-bottom: 0; }

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.progress-label {
  font-size: var(--size-caption);
  color: var(--text-body);
}

.progress-val {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  color: var(--accent);
}

.progress-track {
  height: var(--bar-h);
  background: var(--border-cool);
  border-radius: calc(var(--bar-h) / 2);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: calc(var(--bar-h) / 2);
}

.progress-fill.dim {
  background: var(--accent-muted);
  opacity: 0.5;
}

/* ──────────────────────────────────────────────────────────────
   Mobile responsive
────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .card-grid,
  .component-grid  { grid-template-columns: 1fr; }
  .card-full       { grid-column: span 1; }

  .offer-page,
  .reading-block   { padding: var(--space-xl) var(--space-md); }

  .hero            { padding: var(--space-xl) var(--space-md); }

  .nav             { gap: var(--space-sm); }
  .nav-links       { gap: var(--space-md); }
}