/* ═══════════════════════════════════════════════════════════════════
   BASIS — typografie, layoutprimitieven, knoppen, hulpklassen
   ═══════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  /* 400, niet 300: Jost is licht getekend en op crème werd 300 te dun om
     comfortabel te lezen. */
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-cream);
}

/* ── Koppen ──────────────────────────────────────────────────────── */

/* Gewicht 400, niet 300. Cormorant is een dun getekende letter; op 300 werd
   elke kop bleek en verloor de pagina zijn hiërarchie. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--t-lg); line-height: var(--lh-snug); }

/* Cursief in een kop = het accentwoord. Zet de toon van het hele merk. */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
}

/* ── Lopende tekst ───────────────────────────────────────────────── */

.lead {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--c-text-soft);
  font-weight: 400;
  max-width: 58ch;   /* kortere regels lezen rustiger dan de volle kolombreedte */
}

/* ── Overline: klein uppercase label boven een kop ───────────────── */

.overline {
  display: block;
  font-size: var(--t-overline);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-brass-ink);
}

/* Op donkere grond heeft messing meer helderheid nodig */
.on-dark .overline { color: var(--c-brass-bright); }

/* Dun streepje dat een overline visueel verankert */
.rule {
  width: 44px;
  height: 1px;
  background: var(--c-brass);
  border: 0;
}
.on-dark .rule { background: var(--c-brass-bright); }

/* ── Layout ──────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }

/* Kleurvlakken per sectie */
.on-dark {
  background: var(--c-ink);
  color: var(--c-text-inv);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--c-text-inv); }
.on-dark .lead { color: var(--c-text-inv-soft); }

.on-green { background: var(--c-green); color: var(--c-text-inv); }
.on-soft  { background: var(--c-cream-soft); }

/* ── Sectiekop ───────────────────────────────────────────────────── */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 720px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
/* Een maat kleiner dan voorheen. Sectiekoppen hoeven niet met de hero te
   concurreren; als alles even groot is, valt niets meer op. */
.section-head__title { font-size: var(--t-2xl); }
.section-head .lead { margin-top: var(--s-1); }

/* ── Knoppen ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 15px 32px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

/* Op een telefoon is 32px zijmarge plus ruime letterafstand te veel: dan
   breekt een label als "Plan een proeverij" middenin over twee regels. */
@media (max-width: 600px) {
  .btn {
    padding-inline: 20px;
    letter-spacing: 0.1em;
  }
}

.btn__arrow {
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Primair — donker vlak, voor de belangrijkste actie op lichte grond */
.btn--primary {
  background: var(--c-ink);
  color: var(--c-text-inv);
  border-color: var(--c-ink);
}
.btn--primary:hover { background: var(--c-green); border-color: var(--c-green); }

/* Messing — de meest nadrukkelijke actie, spaarzaam gebruiken */
.btn--brass {
  background: var(--c-brass);
  color: var(--c-ink);
  border-color: var(--c-brass);
}
.btn--brass:hover { background: var(--c-brass-bright); border-color: var(--c-brass-bright); }

/* Outline op lichte grond */
.btn--outline {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-cream-line);
}
.btn--outline:hover { border-color: var(--c-ink); background: transparent; }

/* Outline op donkere grond */
.btn--ghost {
  background: transparent;
  color: var(--c-text-inv);
  border-color: rgba(247, 243, 234, 0.28);
}
.btn--ghost:hover {
  border-color: rgba(247, 243, 234, 0.7);
  background: rgba(247, 243, 234, 0.06);
}

/* Tekstlink met onderlijn die bij hover doorloopt */
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left 100%;
  transition: background-size var(--dur-base) var(--ease-out);
}
.link-underline:hover { background-size: 100% 1px; }

/* ── Afbeeldingen ────────────────────────────────────────────────── */

.media {
  position: relative;
  overflow: hidden;
  background: var(--c-cream-soft);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vaste beeldverhoudingen — voorkomen dat de pagina verspringt bij laden */
.ratio-portrait  { aspect-ratio: 3 / 4; }
.ratio-square    { aspect-ratio: 1 / 1; }
.ratio-landscape { aspect-ratio: 4 / 3; }
.ratio-wide      { aspect-ratio: 16 / 9; }
.ratio-cinema    { aspect-ratio: 21 / 9; }

/* Trage inzoom bij hover — alleen op aanwijsapparaten */
@media (hover: hover) {
  .media--zoom img {
    transition: transform 1.2s var(--ease-out);
  }
  .media--zoom:hover img,
  a:hover .media--zoom img { transform: scale(1.045); }
}

/* ── Scroll-onthulling (aangestuurd door js/animations.js) ───────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Kinderen na elkaar laten verschijnen */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ── Hulpklassen ─────────────────────────────────────────────────── */

.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;
}

/* Sla-over-link voor toetsenbord- en schermlezergebruikers */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  z-index: calc(var(--z-nav) + 10);
  padding: 12px 20px;
  background: var(--c-ink);
  color: var(--c-text-inv);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); }