/* Hallmark · theme: Hum (playful) · article layer
 * Long-form druif/onderwerp-pagina's. Bouwt uitsluitend op tokens.css en
 * hergebruikt de landingscomponenten uit styles.css (.btn, .badge,
 * .feat-card--lead, .section--band, .mono-label, .hl, .tag-dot).
 * Geen losse kleuren; alles via var(--token).
 */

/* ============================================================
   Leesbreedte-shell (smaller dan de section-shell: proza leest prettig)
   ============================================================ */
.article__wrap {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Een artikel dat enkel uit proza bestaat (bv. een begrip) krijgt onderaan
   lucht voor de footer; druifpagina's regelen dat via hun examen/volgende-blok. */
article > .article__wrap:only-child { padding-bottom: var(--space-3xl); }

/* ============================================================
   Kop
   ============================================================ */
.article__head {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-xl);
}
.article__back {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.article__back:hover { color: var(--color-ink); border-bottom-color: var(--color-accent-2); }
.article__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin: var(--space-lg) 0 var(--space-sm);
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-2);
}
.article__title { font-size: var(--text-display-s); max-width: 16ch; }
.article__dek {
  margin-top: var(--space-md);
  color: var(--color-muted); font-size: var(--text-xl);
  max-width: 42ch; line-height: 1.4;
}

/* ============================================================
   In het kort - spec-kaart (echo van counter-tile / exam__aside)
   ============================================================ */
.spec {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px -20px var(--color-shadow-md);
  margin-bottom: var(--space-2xl);
}
.spec__k {
  display: block;
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2);
}
.spec__v {
  display: block; margin-top: 0.2rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

/* ============================================================
   Proza
   ============================================================ */
.prose { max-width: 42rem; }
.prose__lede {
  font-size: var(--text-xl); line-height: 1.5; color: var(--color-ink);
  margin-bottom: var(--space-lg);
}
.prose h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-2xl); margin-bottom: var(--space-sm);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--space-md); color: var(--color-ink); }
.prose a {
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-accent-2);
  transition: border-color var(--dur-short) var(--ease-out);
}
.prose a:hover { border-bottom-color: var(--color-ink); }

/* ============================================================
   Paneel - herbruikbaar blok met titel (aroma's, tafel, herkomst)
   ============================================================ */
.panel { margin-top: var(--space-2xl); }
.panel__title {
  font-size: var(--text-xl); margin-bottom: var(--space-2xs);
}
.panel__note { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-md); }

/* Chips (aroma's, gerechten) - echo van kbd/badge, neutraal */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.03em;
  padding: 0.45rem 0.8rem; border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  color: var(--color-ink-2);
}
/* Chip met een link (bv. druiven bij een regio) */
.chip a { color: var(--color-ink); border-bottom: 1px solid var(--color-accent-2); }
.chip a:hover { border-bottom-color: var(--color-ink); }

/* ============================================================
   Spectrum - één continuüm met eindpolen (droog↔zoet, koel↔warm)
   ============================================================ */
.spectrum {
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.spectrum__ends {
  display: flex; justify-content: space-between; gap: var(--space-sm);
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-2);
}
.spectrum__bar {
  height: 6px; margin: var(--space-2xs) 0 var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  border: var(--rule-hair) solid var(--color-rule-2);
}
.spectrum__ticks {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.spectrum__tick b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-base); letter-spacing: -0.01em;
}
.spectrum__tick span { display: block; margin-top: 0.15rem; color: var(--color-muted); font-size: var(--text-sm); }

/* ============================================================
   Herkomst-lijst (echo van latest-item)
   ============================================================ */
.regions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.region {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-md);
  align-items: baseline; padding: var(--space-md) var(--space-2xs);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.region:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.region__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.region__note { display: block; margin-top: 0.15rem; color: var(--color-muted); font-size: var(--text-sm); }
.region__country {
  flex: none; font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.06em; color: var(--color-ink-2); white-space: nowrap;
}

/* ============================================================
   Examen-noten (in de coral band; echo van exam__step)
   ============================================================ */
/* cream-ruimte tussen de laatste proza-panel en de examenband */
.article__wrap + .section--band { margin-top: var(--space-2xl); }

.exam-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.exam-notes li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: baseline;
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule-2);
}
.exam-notes b { font-family: var(--font-display); font-weight: 600; }
.exam-notes__mark {
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--color-accent-3); font-size: var(--text-xl); line-height: 1;
}
.exam-notes span:last-child { color: var(--color-muted); }
.exam-notes__hd { color: var(--color-ink); display: block; }

/* ============================================================
   Volgende druif (hergebruikt .feat-card--lead als anchor)
   ============================================================ */
.next { margin-block: var(--space-2xl) var(--space-3xl); }

/* ============================================================
   Categorie-overzicht (bv. /druiven) - grid van .feat-card links
   ============================================================ */
.overview-head { margin-top: var(--space-md); }
.overview-grid {
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.overview-card .feat-card__kicker { color: var(--color-accent-deep); opacity: 1; }
.overview-card--ink .feat-card__kicker { color: var(--color-ink-2); }
.overview-card--cyan .feat-card__kicker { color: var(--color-accent-2); }

/* ============================================================
   Breakpoints
   ============================================================ */
@media (min-width: 40rem) {
  .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spectrum__ticks { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}