/* ============================================================
   Vlaamse Restaurants — Design System : Base
   ------------------------------------------------------------
   Drie-wegs-combinatie: ons logo (burgundy/cream editorial)
                       + Dierendonck (tile-grid, sharp corners)
                       + De Bokke (warmth, whitespace, soft shadows)
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */

:root {
  /* Burgundy (primair accent, afgeleid uit logo, iets lichter) */
  --color-burgundy: #9A1E3A;
  --color-burgundy-dark: #7E0E2A;
  --color-burgundy-light: #B73854;

  /* Crème (achtergrond-familie, afgeleid uit logo) */
  --color-cream: #F5EEE0;
  --color-cream-warm: #EFE6D3;
  --color-cream-deep: #E6DCC6;

  /* Inkt (tekst, warmer dan zwart om bij crème te passen) */
  --color-ink: #1A1412;
  --color-ink-soft: #5C4F42;
  --color-ink-muted: #8C7D6E;

  /* Semantische accenten */
  --color-green: #3D5E2E;       /* goedkoop-indicator */
  --color-gold: #B8873D;        /* "beste prijs" badges */

  /* Typografie */
  --font-display: 'Playfair Display', 'EB Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Type-schaal (ratio 1.25, modulair) */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 20px;
  --fs-lg: 25px;
  --fs-xl: 32px;
  --fs-2xl: 48px;
  --fs-3xl: 72px;
  --fs-4xl: 112px;
  --fs-hero: 144px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 120px;

  /* Layout */
  --container-max: 1280px;
  --tile-gutter: 24px;
  --tile-gutter-mobile: 1px;
  --border-hairline: 1px solid var(--color-cream-deep);

  /* Drijvende elementen (enige uitzondering op "geen shadow"-regel) */
  --shadow-float: 0 1px 0 rgba(26, 20, 18, 0.08), 0 8px 24px rgba(26, 20, 18, 0.06);
  --shadow-focus: 0 0 0 3px rgba(126, 14, 42, 0.15);

  /* Transities */
  --ease-std: 180ms ease;
  --ease-slow: 280ms ease;
}

/* ---- Reset ------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Dierendonck-regel: alles vierkant tenzij expliciet overruled */
  border-radius: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* Safety-net: voorkom horizontale scroll op elk scherm. `clip` i.p.v.
     `hidden` zodat position:sticky op .site-header blijft werken (hidden
     op html/body maakt de root een scroll-context en breekt sticky).
     Intentionele horizontale scroll-elementen (gemeente-strip, insight-
     cards) hebben overflow-x: auto op zichzelf. */
  overflow-x: clip;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Zorg dat alles binnen de viewport past, ook als iets met lange
   strings of hardgecodeerde breedtes erin sluipt. */
img, video, iframe, svg, table, pre, code {
  max-width: 100%;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-burgundy);
  text-decoration: none;
  transition: color var(--ease-std);
}

a:hover {
  color: var(--color-burgundy-dark);
}

/* Externe-link indicator — elke link met target="_blank" krijgt een
   schuine pijltje ↗ na de tekst, behalve image-only links, search-result
   rows (eigen layout) en map/pin-controls waar het de UX breekt. */
a[target="_blank"]:not([data-no-external-arrow])::after {
  content: "\00A0\2197";
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85em;
  letter-spacing: 0;
  color: inherit;
  vertical-align: baseline;
}

/* Opt-outs voor target="_blank"-links waar we al een eigen icoon tonen
   (SVG-pijltje of pin), of een card-layout waar het pijltje storend
   zou zijn. Hogere specificity via 'a' prefix zodat we nooit verliezen
   van de globale rule. */
a.source-link[target="_blank"]::after,
a.restaurant-address[target="_blank"]::after,
a.press-strip__item[target="_blank"]::after,
a.ad-slot__link[target="_blank"]::after,
a.cms-lock-link[target="_blank"]::after {
  content: none;
}

ul,
ol {
  list-style: none;
}

/* ---- Uitzonderingen op border-radius: 0 ------------------- */

input[type="search"],
.search-bar,
.btn-tertiary {
  border-radius: 2px;
}

/* ---- Layout helpers --------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-6);
  }
}

.section {
  padding-block: var(--space-8);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-9);
  }
}

/* Compactere top voor de eerste section onder de site-header op detail-
   pagina's (breadcrumb mag niet ver onder de header zwemmen). Bottom-
   padding blijft staan zodat de hierarchie naar de volgende sectie toe
   intact is. Dubbele class voor specificity zodat page-specifieke
   .section-overrides (gemeente.css zet padding-block: var(--space-7))
   deze niet platwalsen. */
.section.section--tight-top {
  padding-top: var(--space-3);
}

@media (min-width: 768px) {
  .section.section--tight-top {
    padding-top: var(--space-4);
  }
}

.tile-grid {
  display: grid;
  gap: var(--tile-gutter-mobile);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .tile-grid {
    gap: var(--tile-gutter);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .tile-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

.metric-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-cream-deep);
  border: var(--border-hairline);
}

@media (min-width: 640px) {
  .metric-row {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Metric-layout: 2×2 tiles + 1 tall Grafix partner-ad ernaast.
   Op >=900px split in 2 kolommen (tiles | ad). Mobile stapelt. */
.metric-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-cream-deep);
  border: var(--border-hairline);
}

@media (min-width: 560px) {
  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .metric-layout {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4);
  }
}

.metric-ad {
  display: flex;
  min-width: 0;
}

.metric-ad > div {
  width: 100%;
}

.metric-ad .house-ad--sticky {
  max-width: 100%;
  height: 100%;
  margin: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-8);
  }
}

/* ---- Utility --------------------------------------------- */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.hidden      { display: none !important; }

/* Safety-net: het 'hidden' HTML-attribuut moet altijd verbergen, ook als
   een specifiekere class het element op display:block/flex/grid zet. */
[hidden] { display: none !important; }

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