/* Homepage volgens het ontwerp */

/* Hero */
.hero { position: relative; min-height: clamp(28rem, 62vw, 56.25rem); display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* De video ligt over de poster en komt pas in beeld als hij echt speelt. Zo
   zie je nooit een zwart vlak terwijl hij nog laadt.
   Bewust geen z-index: die tilde de video ook boven het waas en de titels uit,
   waardoor de tekst onleesbaar werd. De volgorde in de HTML regelt het al:
   poster, video, waas, tekst. */
.hero__video { opacity: 0; transition: opacity .8s var(--soepel); }
.hero__video.is-zichtbaar { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
/* De hero is het eerste wat een bezoeker ziet en mag nooit op JavaScript
   wachten: hij staat er meteen, zonder animatie.
   De uitzoom die hier stond (scale 1.07 naar 1) is er op 2-9-2026 uitgehaald.
   Een geschaalde laag laat aan de randen een lichte naad zien, en op de
   binnenpagina-hero valt de foto buiten het kader omdat die geen overflow
   verbergt. Het viel meer op dan het opleverde. De beweging in de hero komt nu
   van de titels die inschuiven, dat is genoeg. */
.hero__waas {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(25,18,49,.5) 0%, rgba(25,18,49,.02) 30%,
    rgba(25,18,49,.12) 62%, rgba(25,18,49,.62) 84%, rgba(25,18,49,.96) 100%);
}
.hero__inhoud {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.125rem;
  text-align: center; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); width: 100%;
}
.hero__inhoud .kicker { letter-spacing: .28em; }
.hero__kop { margin: 0; color: var(--kleur-creme); }
.hero__tekst { color: var(--kleur-tekst-zacht); font-size: var(--tekst-intro); max-width: 35rem; margin: 0; }
.hero__inhoud .kicker, .hero__kop, .hero__tekst { text-shadow: 0 2px 16px rgba(10,6,24,.6), 0 1px 4px rgba(10,6,24,.55); }
.hero__inhoud .knop { margin-top: .5rem; }

/* Slogan */
.uitspraak .omhulsel { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; text-align: center; }
.uitspraak__ster { color: var(--kleur-goud); }
.uitspraak__tekst {
  font-family: var(--font-kop); font-style: italic; font-size: var(--tekst-blok);
  line-height: 1.35; color: var(--kleur-creme); max-width: 48rem; margin: 0;
  /* Het is een rijmpje van twee regels. Op een smal scherm past zo'n regel niet
     meer en brak hij midden in een zinsdeel af, tussen "weet" en "je". Met
     balance kiest de browser de komma als breekpunt, en houdt elke regel een
     afgerond stuk zin met het rijm aan het eind. p heeft standaard pretty, en
     dat kijkt alleen naar de laatste regel, dus dat hielp hier niet. */
  text-wrap: balance;
}

/* Beeldkaarten */
.beeldkaart {
  display: flex; flex-direction: column; height: 100%; background: var(--kleur-paneel);
  border: 1px solid var(--kleur-rand); border-radius: var(--radius-kaart); overflow: hidden;
  color: inherit; box-shadow: var(--schaduw-rust);
  transition: transform .45s var(--soepel), box-shadow .45s ease;
}
.beeldkaart__beeld { position: relative; display: block; line-height: 0; overflow: hidden; }
.beeldkaart__foto, .beeldkaart__hover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.beeldkaart.is-hoog .beeldkaart__beeld { aspect-ratio: 4 / 3; }
.beeldkaart.is-blok .beeldkaart__beeld { aspect-ratio: 16 / 10; }
.beeldkaart__hover { opacity: 0; transition: opacity .45s ease; }
.beeldkaart__voet { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem; flex-grow: 1; }
.beeldkaart.is-blok .beeldkaart__voet { align-items: flex-start; padding: 1.625rem 1.75rem 1.875rem; }
.beeldkaart__tekst { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.beeldkaart__titel { font-family: var(--font-kop); font-size: var(--tekst-kaart); color: var(--kleur-creme); line-height: 1.15; }
.beeldkaart__sub, .beeldkaart__uitleg { color: var(--kleur-tekst); font-size: .9375rem; line-height: 1.6; }
.beeldkaart__link { display: inline-flex; align-items: center; gap: .5rem; color: var(--kleur-goud); font-weight: 700; font-size: .9375rem; margin-top: .5rem; }
.beeldkaart__pijl {
  flex-shrink: 0; margin-left: 1rem; width: 44px; height: 44px; border-radius: var(--radius-pil);
  border: 1px solid var(--kleur-goud); color: var(--kleur-goud);
  display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) {
  .beeldkaart:hover { transform: translateY(-6px); box-shadow: var(--schaduw-hover); }
  .beeldkaart:hover .beeldkaart__foto { transform: scale(1.06); }
  .beeldkaart__foto { transition: transform .6s var(--soepel); }
  .beeldkaart:hover .beeldkaart__hover { opacity: 1; }
  .beeldkaart:hover .beeldkaart__pijl { background: var(--kleur-goud); color: var(--kleur-op-goud); }
}

/* Hit-tegel */
.hit__binnen { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
.hit__beeld { position: relative; display: block; border: 1.5px solid var(--kleur-goud); border-radius: 24px; overflow: hidden; line-height: 0; }
.hit__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hit__beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(25,18,49,.75) 100%); }
.hit__speel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 92px; height: 92px; border-radius: var(--radius-pil); background: var(--kleur-goud);
  color: var(--kleur-op-goud); display: grid; place-items: center; box-shadow: 0 14px 40px rgba(0,0,0,.45);
  transition: transform .3s var(--soepel);
}
.hit__beeld:hover .hit__speel { transform: translate(-50%, -50%) scale(1.08); }
.hit__label { position: absolute; left: 1.5rem; bottom: 1.375rem; z-index: 2; display: inline-flex; align-items: center; gap: .625rem; color: var(--kleur-creme); font-size: .875rem; font-weight: 700; letter-spacing: .06em; }
.hit__tekst { display: flex; flex-direction: column; gap: 1.125rem; }
.hit__tekst h2 { margin: 0; }
.hit__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1.125rem; margin-top: .5rem; }
.chip { display: inline-flex; align-items: center; border: 1px solid var(--kleur-rand); color: var(--kleur-tekst); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .5625rem 1rem; border-radius: var(--radius-pil); }
@media (max-width: 900px) { .hit__binnen { grid-template-columns: 1fr; gap: 2rem; } }

/* Slot */
.slot .omhulsel { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.slot h2 { margin: 0; font-size: var(--tekst-sectie); }
.slot p { color: var(--kleur-tekst); max-width: 32rem; margin: 0; }
.slot .knop { margin-top: .625rem; }

/* De wikkel om kicker en kop doet op desktop niets: de kinderen blijven daar
   gewoon losse items in de flexkolom van .hero__inhoud. */
.hero__titel { display: contents; }

/* Tekstblok over wie wij zijn, onder de hit en boven de slotoproep. Een smalle
   leeskolom, want een regel van 46 rem leest prettiger dan de volle breedte. */
.overons__inhoud { display: flex; flex-direction: column; gap: 1.5rem; }
/* Links uitgelijnd, net als de lopende tekst op de landingspagina's. Gecentreerd
   over drie alinea's geeft losse slotregels, en dat leest rommelig. */
.overons__tekst { max-width: 44rem; margin-inline: auto; text-align: left; }
.overons__tekst p { margin: 0 0 1rem; line-height: 1.75; }
.overons__tekst p:last-child { margin-bottom: 0; }
.overons__tekst a { color: var(--kleur-goud); text-decoration: underline; text-underline-offset: .18em; }
.overons__tekst a:hover { text-decoration-thickness: 2px; }