/* ============================================================
   Home — page styles
   ============================================================ */

/* Home hero: vult het resterende viewport na site-header en search-
   hero, zodat ALLEEN titel + prijs-plaque zichtbaar
   zijn in het eerste scherm. Alles daaronder (metric-tiles, kaart)
   valt bewust onder de fold — de gebruiker moet scrollen om er bij te
   komen. svh = small-viewport-height, houdt rekening met mobiele
   browser-UI (Safari adresbalk) zonder te veel ruimte weg te geven. */
.hero {
  padding-top: 0;
  padding-bottom: var(--space-4);
}

.hero.section {
  padding-block: var(--space-4);
  min-height: calc(100svh - 180px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .hero.section {
    padding-block: var(--space-5);
    min-height: calc(100svh - 200px);
  }
}

/* Stacked variant: dwingt één-koloms layout op alle viewports zodat
   de titel en het prijs-block onder elkaar staan i.p.v. naast elkaar.
   Overriden de default 2-koloms grid die op >=1024px aanstaat.
   Cap op ~960px zodat de hero-inhoud op brede schermen een comfortabele
   leesbreedte houdt — voorkomt dat de h1 of het prijs-cijfer zich
   over de volle 1280px container uitrekt. Gap bewust klein gehouden
   zodat titel + prijs samen in het eerste viewport passen. */
.hero-grid--stacked {
  grid-template-columns: 1fr !important;
  gap: clamp(var(--space-3), 2vw, var(--space-5));
}

.hero-grid--stacked > * {
  max-width: 100%;
  min-width: 0;
}

.hero-grid--stacked .display-hero,
.hero-grid--stacked .metric-hero,
.hero-grid--stacked .hero__metric-label,
.hero-grid--stacked .hero__metric-meta,
.hero-grid--stacked .hero__progress {
  max-width: 100%;
}

.hero__subtitle {
  margin-top: var(--space-4);
}

.hero__meta {
  margin-top: var(--space-4);
}

.hero__ctas {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* Center-variant: alle hero-children horizontaal gecenterd, tekst
   rustig uitgelijnd rond de middenas. Werkt samen met --stacked. */
.hero-grid--center {
  justify-items: center;
  text-align: center;
}

.hero-grid--center .display-hero {
  margin-inline: auto;
}

/* Home-hero specifiek: kleinere h1 zodat de aandacht op het prijs-
   cijfer blijft en titel+prijs samen in het eerste viewport passen.
   De globale .display-hero (56-136px) is bewust monumentaal voor
   pagina's waar de titel het hoofdanker is — hier is het ondersteunend. */
.hero .display-hero {
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1.05;
}

/* Prijs-plaque (optie A): ingekaderd tussen twee hairline-borders met
   royale padding, zodat het Vlaanderen-gemiddelde leest als een
   monumentaal statement — small-caps label boven, dominant cijfer in
   het midden, context-meta onderaan. */
.hero__metric--plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: clamp(var(--space-4), 3vw, var(--space-6));
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
  width: 100%;
  max-width: 720px;
}

.hero__metric--plaque .metric-hero {
  margin-block: var(--space-1);
}

/* Extra ademruimte boven en onder het prijs-cijfer binnen de hero-
   plaque, zodat het monumentale €XX visueel zwaarder weegt dan het
   kleine label en de meta-regel. Telt bovenop de flex-gap van de
   plaque zelf, dus netto ~space-5 wit op beide vlakken. */
.hero__metric--plaque .metric-hero--xl {
  margin-block: clamp(var(--space-4), 4vw, var(--space-6));
}

.hero__metric-label {
  margin: 0;
}

/* Meta-regel onder het cijfer ('267 geverifieerde prijzen · 122 gemeenten').
   Bewust subtiel — lichter, kleiner, ruimer letterend zodat hij leest als
   bron-noot en niet concurreert met het Vlaanderen-gemiddelde of de
   /per persoon-eenheid eronder. */
.hero__metric-meta {
  margin: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  opacity: 0.85;
}

.hero__metric-meta [data-stat] {
  font-family: var(--font-mono);
  color: var(--color-ink-soft);
}

/* Top-3 rassen onder de meta-regel. Wrapper bevat een header met
   label + info-tip (?) en daaronder de lijst zelf. Elk ras = naam
   links + gemiddelde p.p.-prijs rechts, mono-cijfer voor vergelijk-
   baarheid. Subtiel maar klikbaar — link naar de /vleessoort/-pagina
   met diepere stats. */
.hero__top-breeds-wrap {
  margin-top: var(--space-3);
  border-top: var(--border-hairline);
  padding-top: var(--space-2);
}

.hero__top-breeds-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.hero__top-breeds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero__top-breeds__item {
  margin: 0;
}

.hero__top-breeds__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 4px 0;
  text-decoration: none;
  color: var(--color-ink);
  font-size: var(--fs-sm);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-std), color var(--ease-std);
}

.hero__top-breeds__link:hover,
.hero__top-breeds__link:focus-visible {
  color: var(--color-burgundy);
  border-bottom-color: var(--color-burgundy);
}

.hero__top-breeds__name {
  font-weight: 500;
}

.hero__top-breeds__price {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-burgundy);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Progress-blok onder de plaque — gecenterd, zelfde max-width zodat de
   track visueel in lijn valt met het prijs-block. */
.hero-grid--center .hero__progress {
  align-self: center;
  max-width: 720px;
  width: 100%;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  align-items: center;
}

.hero-grid--center .hero__progress-head {
  justify-content: center;
  gap: var(--space-3);
}

.hero-grid--center .hero__progress-hint {
  text-align: center;
}

.hero__right-spread {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-cream-deep);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  line-height: 1.5;
}

.hero__right-spread strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  letter-spacing: 0;
}

/* Search section */
.search-wrap {
  max-width: 720px;
}

.search-wrap .h2 {
  margin-bottom: var(--space-2);
}

.search-wrap .search-bar {
  margin-top: var(--space-3);
}

.search-results {
  margin-top: var(--space-2);
  max-width: 640px;
  background: var(--color-cream-warm);
  border: var(--border-hairline);
}

.search-results li {
  border-top: var(--border-hairline);
}

.search-results li:first-child {
  border-top: none;
}

.search-results a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 20px;
  color: var(--color-ink);
  transition: background var(--ease-std);
}

.search-results a:hover {
  background: var(--color-cream-deep);
}

.search-results__gemeente {
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Histogram */
.histogram-layout {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  border: var(--border-hairline);
  background: var(--color-cream-deep);
  /* overflow:visible zodat de histogram-bubble (tooltip) bovenop
     kan komen — anders clipt de layout hem. De horizontale scroll-
     bescherming gebeurt via overflow-x:clip op html/body. */
  overflow: visible;
}

@media (min-width: 900px) {
  .histogram-layout {
    grid-template-columns: 5fr 7fr;
    gap: 1px;
  }
}

.histogram-panel {
  background: var(--color-cream-warm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  /* Geen overflow:hidden — anders wordt de bubble geclipt. */
  overflow: visible;
}

/* Mobile: minder padding zodat de inhoud niet vanuit de zijkanten
   knelt; histogram zelf krijgt horizontale scroll. */
@media (max-width: 640px) {
  .histogram-panel {
    padding: var(--space-4);
  }
}

/* Histogram-panel metric-hero gebruikt dezelfde schaal als de prijs
   op restaurant-detailpagina's — het Vlaanderen-gemiddelde is de
   ankerstat van de pagina en mag dus net zo dominant zijn. Mobile
   krijgt eenzelfde 18vw-boost als de restaurant-prijs. */
.histogram-panel .metric-hero {
  line-height: 0.95;
}

@media (max-width: 640px) {
  .histogram-panel .metric-hero {
    font-size: clamp(64px, 18vw, 104px);
  }
}

.metric-hero--small {
  font-size: clamp(56px, 8vw, 96px);
}

/* Extra-grote variant voor de hoofd-hero: dominant cijfer als ankerpunt
   voor de hele pagina. Min teruggeschroefd naar 72px zodat bedrag +
   inline /per-persoon-suffix samen op smalle viewports passen
   (€100,00 + suffix paste anders niet bij 96px min). */
.metric-hero--xl {
  font-size: clamp(72px, 17vw, 220px);
  letter-spacing: -0.04em;
}

.histogram {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 180px;
  margin-top: var(--space-3);
}

/* Op smalle schermen: laat de histogram horizontaal scrollen wanneer de
   bars niet passen. padding-bottom houdt de absolute labels in beeld.
   overflow-y:visible zodat de tooltip boven de histogram kan komen. */
@media (max-width: 640px) {
  .histogram {
    overflow-x: auto;
    overflow-y: visible;
    min-height: 340px;
    padding-top: 6px;
    padding-bottom: 32px;
    padding-inline: 12px;
    margin-inline: -12px;
    scrollbar-width: thin;
  }
  .histogram__bar {
    min-width: 44px !important;
  }
  .histogram__bar-label {
    font-size: 9px !important;
  }

  /* Mobile: alle histograms krijgen extra padding-top zodat de bars niet
     tegen de absolute count-labels plakken. Op mobile gebruiken we toch
     een fixed-tooltip dus geen aparte stacking-isolatie meer nodig. */
  .histogram {
    padding-top: 18px;
  }
}

.histogram__bar {
  flex: 1;
  background: var(--color-burgundy);
  min-width: 24px;
  position: relative;
  transition: background var(--ease-std);
  /* Bar is een <a> — pointer i.p.v. help, want klikken navigeert naar
     /restaurants/?prijs=... */
  cursor: pointer;
  outline: none;
  display: block;
  text-decoration: none;
  color: inherit;
}

.histogram__bar:hover,
.histogram__bar:focus-visible {
  background: var(--color-burgundy-dark);
}

.histogram__bar:focus-visible {
  box-shadow: 0 0 0 2px var(--color-burgundy), 0 0 0 4px var(--color-cream);
}

/* Popover met samenstelling van deze bucket. Verschijnt op hover,
   focus en klik (is-open class). Toggled ook bij keyboard. */
.histogram__bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateX(var(--histogram-bubble-shift, 0px)) translateY(4px);
  min-width: 220px;
  max-width: 280px;
  padding: var(--space-3);
  background: var(--color-ink);
  color: var(--color-cream);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  /* Boven sticky site-header (z:30) en andere overlays */
  z-index: 50;
  cursor: default;
}

/* Actieve bar: verhoog stacking context zodat bubble boven alles op
   de histogram-layout ligt, inclusief naburige bars met eigen bubbles. */
.histogram__bar:hover,
.histogram__bar:focus-visible,
.histogram__bar.is-open {
  z-index: 51;
}

.histogram__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-ink);
}

/* Transparante bridge onder de bubble die de 10px gap naar de bar-top
   overspant. Hovering hier = hovering bubble = hovering bar (parent),
   zodat de bubble openblijft terwijl de cursor naar binnen schuift. */
.histogram__bubble::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

.histogram__bar:hover .histogram__bubble,
.histogram__bar:focus-visible .histogram__bubble,
.histogram__bar.is-open .histogram__bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateX(var(--histogram-bubble-shift, 0px)) translateY(0);
  pointer-events: auto;
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
}

.histogram__bubble-head {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(245, 238, 224, 0.2);
}

.histogram__bubble-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.histogram__bubble-list li {
  font-size: var(--fs-xs);
}

/* Klikbare restaurant-regel in de bubble. Hele regel is één link,
   zodat de cursor-target groot blijft. Hover-tint geeft feedback. */
.histogram__bubble-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 4px 6px;
  margin: 0 -6px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.histogram__bubble-link:hover,
.histogram__bubble-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.histogram__bubble-name {
  font-weight: 500;
  color: var(--color-cream);
}

.histogram__bubble-meta {
  font-family: var(--font-mono);
  color: var(--color-cream-deep);
  opacity: 0.85;
  white-space: nowrap;
}

.histogram__bubble-more {
  font-style: italic;
  color: var(--color-cream-deep);
  opacity: 0.75;
  margin-top: 4px;
}

/* Bottom-CTA in de bubble — visuele bevestiging dat klikken op de bar
   naar de gefilterde restaurants-pagina gaat. Niet zelf klikbaar (de
   hele bar is al een link), gewoon een hint. */
.histogram__bubble-cta {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-cream-deep);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-cream);
  text-align: center;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

@media (max-width: 640px) {
  /* Op mobile zwemt de bubble bovenaan het viewport (position:fixed)
     zodat hij ALTIJD zichtbaar is ongeacht in welke section de
     histogram staat — anders verdwijnt de info onder volgende secties
     of wordt hij geclipt door insight-card-padding. Pijltjes en bridge
     uitschakelen want de bubble hangt niet meer aan de bar. */
  .histogram__bubble {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    bottom: auto;
    left: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: min(46vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-4px);
    z-index: 120;
  }

  .histogram__bubble-link {
    align-items: flex-start;
    gap: var(--space-2);
  }

  .histogram__bubble-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .histogram__bubble::after,
  .histogram__bubble::before {
    content: none;
  }

  .histogram__bar:hover .histogram__bubble,
  .histogram__bar:focus-visible .histogram__bubble,
  .histogram__bar.is-open .histogram__bubble {
    transform: translateY(0);
  }
}

.histogram__bar-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-ink-soft);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.histogram__bar-count {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-ink);
}

/* Section header (h2 + action) */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

/* Restaurant tiles (homepage "in de kijker") */
.restaurant-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.restaurant-tile__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--color-burgundy);
  letter-spacing: -0.01em;
}

.restaurant-tile__meta {
  color: var(--color-ink-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Loading state */
[data-stat]:empty::before,
[data-stat="—"]::before {
  content: '—';
  color: var(--color-ink-muted);
}

/* Section spacing */
.section {
  padding-block: var(--space-7);
}

/* ============================================================
   Persstrook — scrollbare lijst onderaan home
   ============================================================ */

.press-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.press-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-cream-warm);
  border: var(--border-hairline);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color 0.15s ease;
}

a.press-strip__item:hover {
  border-color: var(--color-burgundy);
}

.press-strip__logo {
  max-height: 28px;
  width: auto;
  object-fit: contain;
  align-self: flex-start;
  filter: grayscale(1);
  opacity: 0.85;
}

.press-strip__outlet {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.press-strip__quote {
  margin: 0;
  font-style: italic;
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.press-strip__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: auto;
}

/* ============================================================
   Hero progress — 'Gemeenten geïndexeerd'-bar
   ============================================================ */

.hero__progress {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero__progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.hero__progress-count {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}

.hero__progress-count strong { color: var(--color-burgundy); }
.hero__progress-count .muted { color: var(--color-ink-muted); font-size: var(--fs-sm); }

.hero__progress-track {
  position: relative;
  height: 6px;
  background: var(--color-cream-deep);
}

.hero__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--color-burgundy);
  transition: width 600ms ease-out;
}

.hero__progress-hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
  letter-spacing: 0.02em;
}

/* ============================================================
   Inzichten — cards-grid met zes mogelijke blokken
   ============================================================ */

.insights {
  padding-block: var(--space-7);
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (min-width: 768px) {
  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .insight-card--wide {
    grid-column: span 2;
  }
}

.insight-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-cream-warm);
  border: var(--border-hairline);
  min-width: 0;
}

.insight-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.insight-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

.insight-card__svg {
  width: 100%;
  height: 160px;
  display: block;
}

/* Side-note onder de histogram / chart binnen een insight-card.
   Visueel ondergeschikt: kleiner, doffer, meer ruimte boven zodat
   hij niet tegen de getallen van de grafiek plakt. Italic geeft het
   karakter van een marginalia i.p.v. body-tekst. */
.insight-card__hint {
  margin: var(--space-4) 0 0 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-cream-deep, rgba(0, 0, 0, 0.08));
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-ink-muted);
  letter-spacing: 0.01em;
  max-width: 56ch;
}

.insight-card__intro {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 58ch;
}

/* Histogram binnen een insight-card krijgt een iets lagere vaste
   hoogte zodat hij niet de hele card opslokt. */
.insight-histogram {
  min-height: 220px;
  margin-top: var(--space-2);
}

@media (max-width: 640px) {
  .insights {
    padding-block: var(--space-6);
  }

  .insight-card {
    padding: var(--space-4);
  }

  .insight-card__title {
    overflow-wrap: anywhere;
  }

  .insight-card__intro,
  .insight-card__hint {
    max-width: none;
  }

  .insight-histogram {
    min-height: 380px;
  }
}

/* Line chart styling (via attr-selectors) */
.insight-chart__axis { stroke: var(--color-cream-deep); stroke-width: 1; }
.insight-chart__line { stroke: var(--color-burgundy); stroke-width: 2; fill: none; }
.insight-chart__area { fill: var(--color-burgundy); opacity: 0.08; }
.insight-chart__dot  { fill: var(--color-burgundy); }
.insight-chart__label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--color-ink-muted);
}

/* Provincie bars */
.insight-bars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.insight-bar {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
}

@media (max-width: 640px) {
  .insight-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-2);
  }
}

/* Klikbare variant (anchor): hele rij wordt een link naar de gefilterde
   restaurants-pagina. Hover-feedback via subtiele burgundy-tint op het
   kolomvak zodat het als klikbaar oogt. */
.insight-bar--link {
  color: inherit;
  text-decoration: none;
  padding: 6px 4px;
  margin: -6px -4px;
  transition: background var(--ease-std);
  cursor: pointer;
}

.insight-bar--link:hover,
.insight-bar--link:focus-visible {
  background: var(--color-cream-warm);
}

.insight-bar--link:focus-visible {
  outline: 2px solid var(--color-burgundy);
  outline-offset: 2px;
}

.insight-bar__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  grid-row: 1;
  grid-column: 1;
}

.insight-bar__track {
  position: relative;
  height: 8px;
  background: var(--color-cream-deep);
  grid-row: 1;
  grid-column: 2;
}

.insight-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--color-burgundy);
  transition: width 500ms ease-out;
}

.insight-bar__value {
  grid-row: 1;
  grid-column: 3;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-burgundy);
}

.insight-bar__meta {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
  letter-spacing: 0.02em;
}

/* Bronverdeling */
.insight-sources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.insight-source {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-top: var(--border-hairline);
}
.insight-source:first-child { border-top: none; }

@media (max-width: 640px) {
  .insight-source {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--space-2);
  }
}

.insight-source__name {
  font-weight: 500;
}
.insight-source__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}
.insight-source__avg {
  font-family: var(--font-display);
  color: var(--color-burgundy);
}

/* Gemeente-spread */
.insight-spread {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.insight-spread__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-top: var(--border-hairline);
}
.insight-spread__row:first-child { border-top: none; }

@media (max-width: 640px) {
  .insight-spread__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--space-2);
  }
}

.insight-spread__gemeente {
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: none;
}
.insight-spread__gemeente:hover { color: var(--color-burgundy); }

.insight-spread__range {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}

.insight-spread__delta {
  font-family: var(--font-display);
  color: var(--color-burgundy);
}

/* Recente prijswijzigingen */
.insight-changes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.insight-change {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-top: var(--border-hairline);
}
.insight-change:first-child { border-top: none; }

@media (max-width: 640px) {
  .insight-change {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--space-2);
  }
}

.insight-change__name {
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: none;
}
.insight-change__name:hover { color: var(--color-burgundy); }

.insight-change__gemeente {
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}

.insight-change__prices {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}

.insight-change__delta {
  font-family: var(--font-display);
  font-weight: 500;
}
.insight-change__delta.is-up   { color: var(--color-burgundy); }
.insight-change__delta.is-down { color: var(--color-green, #3d6f3b); }

@media (max-width: 640px) {
  .insight-bar__name {
    grid-row: 1;
    grid-column: 1;
  }

  .insight-bar__track {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .insight-bar__value {
    grid-row: 1;
    grid-column: 2;
    white-space: nowrap;
  }

  .insight-bar__meta {
    grid-row: 3;
    grid-column: 1 / -1;
  }

  .insight-source__name,
  .insight-spread__gemeente,
  .insight-change__name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .insight-source__avg {
    grid-column: 1 / -1;
  }

  .insight-spread__range,
  .insight-change__gemeente,
  .insight-change__prices {
    grid-column: 1;
  }

  .insight-spread__delta,
  .insight-change__delta {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    white-space: nowrap;
  }
}

/* ============================================================
   Search-hero — prominente zoekbalk bovenaan, boven de hero
   ============================================================ */

.search-hero {
  padding-block: var(--space-4) var(--space-2);
}

.search-hero .search-bar--hero {
  max-width: 560px;
  margin-inline: auto;
  margin-block: 0;
  padding: 14px 20px;
}

.search-hero .search-bar--hero .search-bar__input {
  font-size: var(--fs-base);
}

.search-hero .search-bar--hero .search-bar__icon {
  width: 18px;
  height: 18px;
}

/* ============================================================
   Metric-breakdown — mediaan/spreiding/meest-voorkomend als
   rustige lijst onder het Vlaanderen-gemiddelde
   ============================================================ */

.metric-breakdown {
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--border-hairline);
}

.metric-breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: var(--border-hairline);
}

.metric-breakdown dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0;
}

.metric-breakdown dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
}

/* ============================================================
   Gemeente-focus — alfabetisch overzicht bij klik op pill
   ============================================================ */

/* Staat binnen dezelfde container-section als de kaart, dus erft de
   breedte van map-wrap. Alleen verticale marge, geen eigen container-
   padding (zou anders smaller tonen dan de kaart erboven). */
.gemeente-focus {
  margin-block: var(--space-4);
}

.gemeente-focus .section-header {
  margin-bottom: var(--space-4);
}

.gemeente-focus__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: var(--border-hairline);
  background: var(--color-cream-warm);
}

@media (min-width: 640px) {
  .gemeente-focus__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .gemeente-focus__list { grid-template-columns: repeat(3, 1fr); }
}

.gemeente-focus__item {
  border-top: var(--border-hairline);
}
.gemeente-focus__item:first-child { border-top: none; }

@media (min-width: 640px) {
  .gemeente-focus__item:nth-child(-n+2) { border-top: none; }
}
@media (min-width: 960px) {
  .gemeente-focus__item:nth-child(-n+3) { border-top: none; }
}

.gemeente-focus__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  font-size: var(--fs-sm);
}

.gemeente-focus__link:hover,
.gemeente-focus__link:focus {
  background: var(--color-cream);
  color: var(--color-burgundy);
}

.gemeente-focus__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---- Filter + toon-meer -----------------------------------*/

.gemeente-focus__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  margin-bottom: var(--space-3);
  background: var(--color-cream-warm);
  border: var(--border-hairline);
  max-width: 360px;
}

.gemeente-focus__search svg {
  width: 14px;
  height: 14px;
  color: var(--color-ink-muted);
  flex-shrink: 0;
}

.gemeente-focus__search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

.gemeente-focus__search input::placeholder {
  color: var(--color-ink-muted);
}

.gemeente-focus__more {
  display: block;
  margin: var(--space-3) auto 0;
  padding: 10px 24px;
  background: transparent;
  border: var(--border-hairline);
  color: var(--color-burgundy);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Expliciete hidden-override: display:block hierboven overrulet
   anders de browser-default [hidden]{display:none}. */
.gemeente-focus__more[hidden] {
  display: none;
}

.gemeente-focus__more:hover,
.gemeente-focus__more:focus {
  background: var(--color-burgundy);
  color: var(--color-cream);
  border-color: var(--color-burgundy);
}

.gemeente-focus__item--empty {
  padding: var(--space-4);
  color: var(--color-ink-muted);
  font-style: italic;
  grid-column: 1 / -1;
}

.gemeente-focus__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--color-burgundy);
  flex-shrink: 0;
}