/* KMR Waldenburg (Kimera, commerciële licentie; staat niet in git, zie .gitignore).
   Alleen de gewichten die we gebruiken + Book en Bold. */
@font-face { font-family: "KMR Waldenburg"; src: url("assets/fonts/kmr-waldenburg-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "KMR Waldenburg"; src: url("assets/fonts/kmr-waldenburg-book.woff2") format("woff2"); font-weight: 375; font-style: normal; font-display: swap; }
@font-face { font-family: "KMR Waldenburg"; src: url("assets/fonts/kmr-waldenburg-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "KMR Waldenburg"; src: url("assets/fonts/kmr-waldenburg-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "KMR Waldenburg"; src: url("assets/fonts/kmr-waldenburg-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Klim testfont (alleen intern, staat niet in git): zie .gitignore */
@font-face {
  font-family: "Die Grotesk";
  src: url("assets/fonts/test-die-grotesk-vf-roman.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Die Grotesk";
  src: url("assets/fonts/test-die-grotesk-vf-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Space Mono (SIL Open Font License, zie assets/fonts/SpaceMono-OFL.txt) */
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

:root {
  --frame-gap: 24px; /* ruimte rond het frame én binnen het frame rond de header */
  --container: 1700px; /* inhoud (header, hero-tekst) wordt nooit breder dan dit */
  /* Zijruimte binnen de hero: --frame-gap, of meer zodra de inhoud --container bereikt */
  --inline-gap: max(var(--frame-gap), calc((100% - var(--container)) / 2));
  --radius: 8px;
  --color-text: #1a1a1a;
  --color-ink: #0f221e;
  --color-accent: #d2a781;
  --color-quaternary: #eae2d7;
  --color-secondary: #eae2d7; /* effen vlak achter het telefoonicoon */ /* warm lichte tint voor het glas van de header */
  --color-dark: #11140c;
  --color-card: #fff8ee; /* kaarten en carrouselknoppen */
  /* Fonts: wissel --font tussen deze twee om terug te gaan naar Die Grotesk
     (en zet dan ook de preload in index.html terug). */
  --font-die-grotesk: "Die Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-waldenburg: "KMR Waldenburg", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: var(--font-waldenburg);
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;
  --text-ui: 1.0625rem;
  --h1-size: clamp(calc(2.25rem + 10px), calc(6vw + 10px), calc(4.25rem + 10px));
  --text-body: 16px; /* broodtekst overal */
  --weight-body: 400; /* broodtekst */
  --nav-pad: 6px; /* ruimte binnen het menukader, rondom én tussen de items */
  --control-height: calc(40px + 2 * var(--nav-pad)); /* = hoogte menukader (items zijn 40px); knoppen en pijlvakjes even hoog */
  /* "Glas" zoals op vanpraet.be: warme tint met een flinke blur */
  --glass-bg: color-mix(in srgb, var(--color-quaternary) 60%, transparent);
  --glass-blur: blur(40px) saturate(150%);
}

body {
  margin: 0;
  font-family: var(--font);
  line-height: 1.5;
  color: var(--color-text);
  /* --bg-p (0 → 1, gezet in script.js bij scroll): donkergroen loopt over in de pastelkleur */
  background: color-mix(in srgb, var(--color-secondary) calc(var(--bg-p, 0) * 100%), var(--color-ink));
}

/* Knop: label in de accentkleur + los pijlvak in dezelfde effen kleur als het telefoonicoon.
   Hover: het pijlvak achter krimpt weg en verschijnt vooraan; het label schuift daardoor
   soepel naar rechts. De knop blijft even breed. */
.btn {
  --btn-ease: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-dark);
  text-decoration: none;
}

.btn__label,
.btn__icon {
  display: flex;
  align-items: center;
  height: var(--control-height);
  border-radius: 5px;
}

.btn__label {
  padding: 0 1.1rem;
  font-size: var(--text-ui);
  white-space: nowrap;
  background: var(--color-accent);
}

.btn__icon {
  flex-shrink: 0;
  justify-content: center;
  width: var(--control-height);
  margin-left: 6px;
  overflow: hidden;
  color: var(--color-ink);
  background: var(--color-secondary);
  transition: width var(--btn-ease), margin var(--btn-ease), transform var(--btn-ease), opacity var(--btn-ease);
}

.btn__icon svg {
  flex-shrink: 0;
}

/* Voorste pijl: standaard dichtgeklapt */
.btn__icon--front {
  width: 0;
  margin-left: 0;
  margin-right: 0;
  opacity: 0;
  transform: scale(0.4);
}

.btn:hover .btn__icon--front,
.btn:focus-visible .btn__icon--front {
  width: var(--control-height);
  margin-right: 6px;
  opacity: 1;
  transform: scale(1);
}

.btn:hover .btn__icon:not(.btn__icon--front),
.btn:focus-visible .btn__icon:not(.btn__icon--front) {
  width: 0;
  margin-left: 0;
  opacity: 0;
  transform: scale(0.4);
}

@media (prefers-reduced-motion: reduce) {
  .btn__icon {
    transition: none;
  }
}

/* Hero: video in een afgerond frame, header en content erover.
   --hero-p (0 → 1, gezet in script.js bij scroll): het frame groeit naar volle breedte
   en de afgeronde hoeken verdwijnen. */
.hero {
  --hero-gap: calc(var(--frame-gap) * (1 - var(--hero-p, 0)));
  /* boven 5px extra: optisch lijkt de ruimte boven anders kleiner dan opzij */
  --hero-gap-top: calc((var(--frame-gap) + 2px) * (1 - var(--hero-p, 0)));
  position: relative;
  height: calc(100svh - var(--hero-gap-top) - var(--hero-gap));
  min-height: 560px;
  margin: var(--hero-gap-top) var(--hero-gap) var(--hero-gap);
  /* clip i.p.v. hidden: anders kan de (te brede) video het frame laten scrollen bij focus */
  overflow: clip;
  border-radius: calc(var(--radius) * (1 - var(--hero-p, 0)));
  container-type: size;
  /* strijkt de stapjes van een scrollwiel glad */
  transition: margin 0.35s ease-out, height 0.35s ease-out, border-radius 0.35s ease-out;
  color: #fff;
  background: #1a1a1a;
}

/* Video vult de hero als "cover" (16:9), donkere laag erover voor leesbare tekst */
.hero__video {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}

.hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.2);
}

.hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  border: 0;
  transform: translate(-50%, -50%);
}

/* Content onderin, op dezelfde afstand van de rand als de header:
   tagline + titel + knop links, reviews rechts op de hoogte van de knop */
.hero__content {
  position: absolute;
  right: var(--inline-gap);
  bottom: var(--frame-gap);
  left: var(--inline-gap);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1.5rem;
  text-align: left;
}

.hero__tagline,
.hero h1 {
  grid-column: 1 / -1;
}

.hero__content .btn {
  justify-self: start;
}

/* Tagline: Space Mono in hoofdletters */
.hero__tagline,
.about__tagline {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.hero h1 {
  margin: 0 0 27px;
  font-size: var(--h1-size);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
}

/* Reviewbalk: zelfde glas als het menu in de header, iets kleiner en lager.
   De sterren staan in een effen vlakje, net als het telefoonicoon in het menu. */
.hero__rating {
  align-self: end; /* onderkant gelijk met de knop, dus ook 24px van de rand */
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0;
  padding: 5px 5px 5px 15px;
  font-size: calc(var(--text-ui) - 2px);
  line-height: 22px;
  color: var(--color-ink);
  border-radius: 5px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.hero__stars {
  padding: 3px 8px;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  border-radius: 3px;
  background: var(--color-secondary);
}

/* Smal: reviews onder de knop i.p.v. ernaast */
@media (max-width: 700px) {
  .hero__content {
    grid-template-columns: 1fr;
  }

  .hero__rating {
    justify-self: start;
    margin-top: 1.5rem;
  }
}

/* Header: los logo links, gekaderd menu in het midden, losse knop rechts.
   Het kader is "glas" (zie --glass-bg),
   altijd met donkere tekst. Binnen een .dark sectie (zoals de hero) wordt alleen het logo wit. */
.site-header {
  position: absolute;
  top: var(--frame-gap);
  right: var(--inline-gap);
  left: var(--inline-gap);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  color: var(--color-ink);
}

.site-header__logo {
  justify-self: start;
  display: block;
  color: inherit;
  transform: translateY(-4px);
}

.dark .site-header__logo {
  color: #fff;
}

.site-header__logo svg {
  display: block;
  width: auto;
  height: 18px;
}

.site-header__toggle,
.site-header__nav::before {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.site-header__toggle {
  border-radius: 5px;
}

/* Het glas van het menukader zit op een pseudo-element en niet op de nav zelf,
   zodat het bij het openen van het megamenu als één vlak naar beneden kan doorlopen. */
.site-header__nav {
  border-radius: 5px;
  isolation: isolate;
}

.site-header__nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 5px;
  transition: bottom var(--mega-ease);
}

.site-header__nav {
  padding: var(--nav-pad);
}

.site-header__nav ul {
  display: flex;
  gap: var(--nav-pad);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__nav a {
  display: block;
  padding: 7px 1rem 9px; /* tekst optisch 1px hoger */
  font-size: var(--text-ui);
  line-height: 24px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 3px;
  transition: background 0.2s;
}

.site-header__nav a:hover {
  background: var(--color-secondary);
}

.site-header__nav-appointment {
  display: none;
}

/* Megamenu onder Buitenverblijven (alleen desktop).
   Bij hover/focus verlengt het glas van het menukader zich naar beneden (::before groeit
   met --mega-h, de hoogte van de lijst, gezet in script.js) en schuift de lijst mee open.
   Zo blijft het één vlak zonder naad. */
.site-header__nav {
  --mega-ease: 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
}

.site-header__nav:has(.site-header__has-mega:hover, .site-header__has-mega:focus-within)::before {
  bottom: calc(-1 * var(--mega-h, 0px));
}

.mega {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--mega-ease), visibility 0s 0.4s;
}

.site-header__has-mega:hover .mega,
.site-header__has-mega:focus-within .mega {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--mega-ease), visibility 0s;
}

.site-header__nav .mega__list { /* specifieker dan .site-header__nav ul */
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nav-pad);
  margin: 0;
  /* boven: 6 (nav-padding) + 8 + 8 (item) = 22px, gelijk aan de zijkant */
  padding: 8px var(--nav-pad) 0;
  list-style: none;
}

/* Ruimte tussen de foto's = 8 + 6 + 8 = 22px; zijkanten en onderkant even groot */
.mega__list li:last-child {
  padding-bottom: calc(22px - 8px);
}

.site-header__nav .mega__item {
  display: flex;
  align-items: center;
  gap: 21px;
  padding: 8px calc(22px - var(--nav-pad));
  white-space: normal;
}

/* Geen hovervlak achter de rijen; de hover zit in het dimmen van de andere rijen */
.site-header__nav .mega__item:hover {
  background: none;
}

.mega__img {
  flex-shrink: 0;
  display: block;
  width: 140px;
  height: 110px;
  border-radius: 3px;
  object-fit: cover;
}

.mega__text {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mega__title {
  font-size: calc(var(--text-ui) + 4px);
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
}

.mega__desc {
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: 22px;
  text-wrap: balance;
}

/* Hover: het gekozen item blijft zoals het is, de rest (tekst en foto) zakt naar 40% */
.site-header__nav .mega__item {
  transition: opacity 0.3s ease;
}

.mega__list:has(.mega__item:hover, .mega__item:focus-visible) .mega__item:not(:hover, :focus-visible) {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav::before,
  .mega,
  .site-header__has-mega:hover .mega,
  .site-header__has-mega:focus-within .mega {
    transition: none;
  }
}

/* Telefoonknop: effen vlak met donker icoon, binnen het menukader naast Contact */
.site-header__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-ink);
  border-radius: 4px;
  background: var(--color-secondary);
  transition: background 0.2s;
}

/* gaat voor op de algemene .site-header__nav a regel */
.site-header__nav .site-header__phone {
  display: flex;
  padding: 0;
  border-radius: 4px;
}

.site-header__phone:hover,
.site-header__nav .site-header__phone:hover {
  background: var(--color-accent);
}

/* Op tablet/mobiel staat het menu in het uitklappaneel: daar een losse belknop naast de hamburger */
.site-header__phone--mobile {
  display: none;
}

/* Tekst in de headerknop optisch 1px hoger, gelijk met de menu-items */
.site-header .btn__label {
  padding-bottom: 2px;
}

.site-header__actions {
  justify-self: end;
  display: flex;
  gap: 8px;
}

/* Hamburger: alleen zichtbaar op tablet en mobiel */
.site-header__toggle {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.site-header__toggle span,
.site-header__toggle span::before,
.site-header__toggle span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s, background 0.2s;
}

.site-header__toggle span {
  top: 50%;
  margin-top: -1px;
}

.site-header__toggle span::before,
.site-header__toggle span::after {
  content: "";
  left: 0;
  margin-left: 0;
}

.site-header__toggle span::before {
  top: -6px;
}

.site-header__toggle span::after {
  top: 6px;
}

.site-header__toggle[aria-expanded="true"] span {
  background: transparent;
}

.site-header__toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-header__toggle {
    display: block;
  }

  .site-header__nav-phone {
    display: none;
  }

  .site-header__phone--mobile {
    display: flex;
    width: var(--control-height);
    height: var(--control-height);
    border-radius: 5px;
  }

  /* Menu klapt uit als frosted paneel onder de header */
  .site-header__nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    width: min(360px, 100%);
    padding: 0.5rem;
  }

  .site-header__nav.is-open {
    display: block;
  }

  /* Megamenu alleen op desktop; in het uitklappaneel blijft het een gewone link */
  .mega {
    display: none;
  }

  .site-header__nav ul {
    flex-direction: column;
  }

  .site-header__nav a {
    padding: 0.75rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  :root {
    --frame-gap: 16px;
  }

  .site-header__logo svg {
    height: 13px;
  }

  /* Te smal voor de knop in de header: afspraak staat dan in het menu */
  .site-header__appointment {
    display: none;
  }

  .site-header__nav {
    width: 100%;
  }

  .site-header__nav-appointment {
    display: block;
  }

  .site-header__nav-appointment a {
    margin-top: 0.5rem;
    color: var(--color-ink);
    background: var(--color-accent);
  }

  .site-header__nav-appointment a:hover {
    background: var(--color-accent);
  }
}

/* Blok onder de hero: staat op de pastel achtergrond */
/* Sectie onder de hero (opzet zoals vanpraet.be): 6 kolommen.
   Tekst over kolom 1-2, kolom 3 leeg, kleine foto in kolom 4 en grote foto over 5-6;
   de foto's staan met hun onderkant gelijk. */
.about {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--frame-gap);
  align-items: end;
  max-width: calc(var(--container) + 2 * var(--frame-gap));
  margin: 0 auto;
  padding: 160px var(--frame-gap) 120px;
  color: var(--color-ink);
}

.about__text {
  grid-column: 1 / 3;
  align-self: start;
}

.about h2 {
  margin: 0 0 calc(2.25rem + 5px);
  font-size: clamp(calc(2rem + 10px), calc(2.6vw + 10px), calc(3.25rem + 10px));
  font-weight: 300;
  line-height: 1.15;
}

.about p:not(.about__tagline) {
  margin: 0 0 1.5em;
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: 1.435;
  padding-right: 5%;
}

/* Ruimte tussen tagline en h2 */
.about .about__tagline {
  margin-bottom: 11px;
}

/* Optische uitlijning links: elke letter heeft eigen witruimte links in het font
   (gemeten: Space Mono 'A' 0.2px, Waldenburg 'E' 0.09em, broodtekst 'B' 1.4px).
   Tagline en h2 schuiven zo dat hun eerste letter gelijk staat met de broodtekst. */
.about .about__tagline {
  margin-left: 1.2px;
}

.about h2 {
  margin-left: calc(1.4px - 0.089em);
}

.about p:last-child {
  margin-bottom: 0;
}

.about__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Op de pastel achtergrond valt het lichte pijlvak weg: hier donker met witte pijl */
.about .btn__icon {
  color: #fff;
  background: var(--color-ink);
}

/* Knop boven de kleine foto: even breed als de foto */
.about__aside .btn {
  align-self: stretch;
}

.about__aside .btn__label {
  flex: 1;
}

.about__aside {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--frame-gap);
}

/* Foto's: 4:5 min 40px hoogte. De wrapper is een container, zodat 100cqw
   de werkelijke breedte van de foto is. Het frame (met de afronding) blijft staan;
   de foto erin kan bewegen (parallax) zonder dat er een rand vrijkomt. */
.about__photo {
  --parallax-range: 30px; /* zoveel kan de foto maximaal op en neer binnen het frame */
  container-type: inline-size;
  width: 100%;
}

.about__frame {
  height: calc(100cqw * 1.25 - 40px);
  overflow: clip;
  border-radius: 5px; /* zelfde als het menukader */
}

/* Parallaxfoto is hoger dan het frame, zodat hij ±range kan schuiven */
.about__frame [data-parallax] {
  height: calc(100% + 2 * var(--parallax-range));
  /* -range = gecentreerd; geen negatieve margin (die zou het frame meetrekken) */
  translate: 0 calc(var(--parallax-y, 0px) - var(--parallax-range));
}

.about__photo--large {
  grid-column: 5 / 7;
}

/* Carrousel met buitenverblijven: zelfde pastel achtergrond, geen titel.
   Kaarten schuiven horizontaal (scroll-snap); pijlknoppen rechtsonder (script.js). */
/* De sectie is altijd schermbreed: links lijnt de carrousel uit met de rest van de
   inhoud (max --container), rechts loopt hij door tot de rand van het scherm. */
.showcase {
  padding: 40px 0 160px;
  color: var(--color-ink);
}

/* Carrousel: geen native scroll maar een eigen aansturing (script.js). De rij schuift
   met een transform die elk frame soepel naar zijn doel beweegt; zo blijft slepen,
   uitglijden, trackpad en de pijlknoppen allemaal vloeiend. */
.carousel {
  /* Linkerruimte: gelijk met de inhoud erboven, ook op schermen breder dan --container */
  --carousel-start: max(var(--frame-gap), calc((100cqw - var(--container)) / 2));
  container-type: inline-size;
  overflow: clip;
}

.carousel__track {
  position: relative;
  display: flex;
  gap: var(--frame-gap);
  margin: 0;
  padding: 0 var(--frame-gap) 0 var(--carousel-start);
  list-style: none;
  cursor: grab;
  touch-action: pan-y; /* verticaal scrollen van de pagina blijft op touch gewoon werken */
  will-change: transform;
}

.carousel__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Tijdens het slepen geen hover-effecten (zoom, pijl) op de kaarten */
.carousel__track.is-dragging .card__link {
  pointer-events: none;
}

/* Links en foto's niet als bestand/link laten "meeslepen", anders breekt de browser
   onze sleepbeweging af */
.carousel__track a,
.carousel__track img {
  -webkit-user-drag: none;
  user-select: none;
}

.card {
  /* 2,5 kaart in beeld: 100cqw min linkerpadding en twee tussenruimtes, gedeeld door 2,5 */
  /* Kaartbreedte blijft gebaseerd op de inhoudsbreedte (max --container), niet op het hele scherm */
  flex: 0 0 max(280px, calc((min(100cqw, var(--container) + 2 * var(--frame-gap)) - 3 * var(--frame-gap)) / 2.5));
  display: flex;
}

.card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: clip;
  border-radius: 5px;
  color: inherit;
  text-decoration: none;
  background: var(--color-card);
}

/* Fotoframe: bij hover zoomt alleen de foto erin, het frame blijft even groot */
.card__media {
  display: block;
  flex-shrink: 0; /* in de flexkolom nooit laten krimpen: alle foto's even hoog */
  overflow: clip;
}

.card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card__link:hover .card__img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: calc(clamp(28px, 3.5vw, 56px) - 8px) calc(clamp(24px, 3.5vw, 56px) - 8px) calc(clamp(24px, 3vw, 44px) - 8px);
}

.card__tagline {
  margin-bottom: 11px;
  font-family: var(--font-mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.card__title {
  margin-bottom: 14px;
  font-size: clamp(calc(1.625rem + 5px), calc(1.6vw + 0.5rem + 5px), calc(2.125rem + 5px));
  font-weight: 300;
  line-height: 1.15;
}

.card__text {
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: 1.435;
  margin-bottom: 36px;
}

/* "Lees meer" met ons pijlvak (geen rand, geen lijnen) rechtsonder */
.card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: auto;
}

.card__more {
  font-size: var(--text-ui);
}

.card__arrow,
.carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  border-radius: 4px;
  background: var(--color-ink);
  transition: background 0.2s;
}

.carousel__btn {
  color: var(--color-ink);
  background: var(--color-card);
}

.card__arrow {
  width: 40px;
  height: 40px;
}

/* Ons pijltje: schuin omhoog, bij hover recht naar rechts (zoals de knoppen) */
.card__arrow svg {
  transform: rotate(-45deg);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.card__link:hover .card__arrow svg {
  transform: none;
}

.card__link:hover .card__arrow {
  background: var(--color-accent);
}

.carousel__nav {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: var(--frame-gap);
  padding: 0 var(--frame-gap) 0 var(--carousel-start);
}

.carousel__btn {
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: 0;
  cursor: pointer;
}

.carousel__btn--prev svg {
  transform: rotate(180deg);
}

.carousel__btn:hover:not(:disabled) {
  background: var(--color-accent);
}

.carousel__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 700px) {
  .card {
    flex-basis: 85%;
  }
}

/* Scroll-animaties (zie script.js): elementen met data-reveal komen omhoog en faden in
   zodra ze in beeld komen; foto's zoomen daarbij licht uit. Alleen met JS en zonder
   reduced motion, anders staat alles gewoon direct goed. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 0.9s ease var(--reveal-delay, 0s),
      transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
  }

  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Carrouselkaarten: duidelijk één voor één (0,2s na elkaar, zie index.html) */
  .js [data-reveal="card"] {
    transform: translateY(70px);
    transition:
      opacity 1s ease var(--reveal-delay, 0s),
      transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
  }

  .js [data-reveal="photo"] {
    overflow: clip;
    border-radius: 5px;
    transform: translateY(80px);
  }

  /* Losse 'scale' (niet transform), zodat het niet botst met de parallax ('translate') */
  .js [data-reveal="photo"] img {
    scale: 1.12;
    transition: scale 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
  }

  .js [data-reveal="photo"].is-revealed img {
    scale: 1;
  }

  [data-parallax] {
    will-change: translate;
  }
}

@media (max-width: 1100px) {
  .about {
    grid-template-columns: 1fr 2fr;
    row-gap: 3rem;
  }

  .about__text {
    grid-column: 1 / -1;
    max-width: 640px;
  }

  .about__aside {
    grid-column: 1;
  }

  .about__photo--large {
    grid-column: 2;
  }
}