/* ==========================================================================
   views.css — layout per pagina. Elke view heeft een eigen, asymmetrische
   opbouw: nooit hetzelfde gecentreerde kolommetje.
   ========================================================================== */

/* ============ VIEW 1 — intro met video en naampoort ============ */
.view-intro {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  transition: opacity 1.2s ease;
}
.view-intro.is-leaving { opacity: 0; pointer-events: none; }

.intro-media { position: absolute; inset: 0; z-index: 0; background: #2a2b1f; }
.intro-video,
.intro-media {
  width: 100%; height: 100%;
}
.intro-video { object-fit: cover; }
/* Poster als de video (op mobiel) verwijderd is */
.intro-media--poster {
  background-image: url("../media/hero-poster.webp");
  background-size: cover;
  background-position: center;
}
/* Sluier zodat de tekst leesbaar blijft op de video */
.intro-media-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(250, 246, 236, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(42, 43, 31, 0.30) 0%, rgba(42, 43, 31, 0.10) 35%, rgba(42, 43, 31, 0.55) 100%);
}

.intro-panel {
  position: relative;
  z-index: 3;
  width: min(760px, 100%);
  padding: clamp(2.6rem, 5vw, 4rem) clamp(2rem, 4.5vw, 3.4rem);
  text-align: center;
  /* Blijft even lang staan (opacity beïnvloedt de layout niet), maar is
     onzichtbaar tot main.js na 2 seconden .is-visible toevoegt — zo krijgt de
     bezoeker eerst even de video zelf te zien. */
  opacity: 0;
  transition: opacity 1.1s ease;
}
.intro-panel.is-visible { opacity: 1; }
.panel-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
}
.intro-panel-inner { position: relative; }

/* ============ Vaste-hoogte omwisseling: tekst ↔ naamveld ============
   Beide toestanden staan op dezelfde grid-cel gestapeld. Daardoor wordt de
   hoogte van .intro-stack altijd bepaald door de HOOGSTE van de twee, en
   verandert die hoogte niet wanneer je van toestand wisselt — het paneel (en
   dus de video erachter) springt niet meer. */
.intro-stack {
  display: grid;
  margin-top: 1.8rem;
}
.intro-stage {
  grid-area: 1 / 1;
  min-width: 0;
}
.intro-stage--story {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.intro-stage--namegate {
  margin-top: 0;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.intro-stack.is-namegate .intro-stage--story {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.intro-stack.is-namegate .intro-stage--namegate {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s ease 0.12s, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .intro-panel { transition: none; }
}

/* Op mobiel is de vaste-hoogte-truc hierboven juist een probleem: de
   verhaaltekst is lang genoeg om het paneel groot te maken, en na het
   wisselen naar het (korte) naamveld blijft het paneel dan even lang staan
   — met een leeg stuk kader eronder, tot op de video. Op een klein scherm
   valt dat veel sterker op dan op desktop, dus laten we het paneel hier
   gewoon krimpen: geen grid-stack meer, de onzichtbare toestand verdwijnt
   volledig (display:none) in plaats van enkel onzichtbaar te blijven staan.
   main.js scrollt na het wisselen terug naar boven, zodat je hoe dan ook op
   het naamveld uitkomt in plaats van op de lege ruimte eronder. */
@media (max-width: 860px) {
  .intro-stack { display: block; }
  .intro-stage { transition: none; }
  .intro-stage--story { display: block; }
  .intro-stage--namegate { display: none; margin-top: 2.6rem; }
  .intro-stack.is-namegate .intro-stage--story { display: none; }
  .intro-stack.is-namegate .intro-stage--namegate { display: block; }
  /* Ruimte ná het invoerveld — anders raakt de lijn bijna de onderkant van
     het paneel zodra er geen suggesties (meer) onder staan. */
  .name-input { margin-bottom: 1.6rem; }
}

.intro-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--olive);
  margin-top: 0.4rem;
}
.intro-panel .divider-squiggle { margin-left: auto; margin-right: auto; }

.intro-story {
  margin: 0 auto;
  max-width: 52ch;
  text-align: left;
  font-size: clamp(0.98rem, 0.4vw + 0.9rem, 1.08rem);
  line-height: 1.78;
  color: var(--ink-soft);
}
.intro-story > * + * { margin-top: 0.9em; }
.intro-story p:last-child {
  text-align: center;
  font-family: var(--font-script);
  font-size: 1.35rem;
  color: var(--coral);
  margin-top: 1.3em;
}

.intro-keyinfo {
  margin-top: 1.6rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.intro-cta-wrap { margin-top: 1.8rem; }

/* De aftelklok staat los, ónder het paneel, op de video */
.countdown { z-index: 3; }

@media (max-width: 700px) {
  .intro-panel { padding: 3rem 1.5rem; }
  .countdown { flex-wrap: wrap; row-gap: 1rem; }
  .countdown-sep { display: none; }
  .countdown-unit { min-width: 4.2rem; }
}

/* ============ De site na identificatie ============ */
.site { position: relative; opacity: 0; transition: opacity 1.4s ease; }
.site.is-in { opacity: 1; }

.site-head {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(1.6rem, 3vw, 2.6rem) var(--gutter) 0;
}
.site-mark { display: block; }
.site-mark-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.site-mark-sub {
  display: block;
  font-family: var(--font-script);
  font-size: 1rem;
  color: var(--coral);
  margin-top: -0.1rem;
}

/* Navigatie als bijschrift onder een tekening */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
  flex-wrap: wrap;
}
.site-nav a {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  padding-bottom: 0.3rem;
  transition: color 0.4s ease;
}
.site-nav a:hover { color: var(--coral); }
.site-nav a.is-active { color: var(--olive); }
.site-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M2,4 C22,1 40,5 62,3 C84,1 102,5 118,2' fill='none' stroke='%238B804C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.nav-orn { width: 34px; color: var(--sand); opacity: 0.6; }
.nav-orn svg { width: 100%; height: auto; }

@media (max-width: 720px) {
  .site-head { flex-direction: column; align-items: flex-start; }
  .nav-orn { width: 24px; }
  .site-nav { gap: 0.4rem; }
  .site-nav a { font-size: 0.98rem; }
}

.site-foot {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(2.4rem, 4vw, 3.4rem);
}
/* Pijnappeltak boven de voettekst — moet klein blijven */
.foot-scene {
  display: block;
  width: clamp(100px, 13vw, 160px);
  margin: 0 auto 1rem;
  opacity: 0.7;
}
.foot-scene img { width: 100%; height: auto; }
.site-foot .divider-squiggle { margin: 0 auto 1.4rem; }
.site-foot-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.5rem;
}
.site-foot #forget-me { margin-top: 1.6rem; }

/* ============ VIEW 2 — ingelogde home ============ */
.home-hero {
  position: relative;
  padding-top: clamp(2.4rem, 5vw, 4rem);
}
.home-welcome {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
}
.home-welcome em {
  font-family: var(--font-script);
  font-style: normal;
  color: var(--coral);
  font-size: 0.92em;
}
.home-intro {
  margin-top: 1.4rem;
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 0.5vw + 0.92rem, 1.18rem);
}

/* Wash achter de begroeting, iets naar links geschoven */
.home-hero-wash {
  position: absolute;
  top: -8%; left: -16%;
  width: 62%; height: 130%;
  z-index: -1;
}
.home-hero-wash use { fill: rgba(206, 190, 116, 0.18); }

/* De aquareltekening van het domein, rechts van de begroeting.
   De randen lossen op in het papier met een zacht ovaal masker, zodat het geen
   uitgesneden rechthoek is maar een tekening die in de pagina opgaat. */
.home-scene {
  position: absolute;
  top: -4%; right: -11%;
  width: clamp(320px, 48vw, 740px);
  pointer-events: none;
  z-index: -1;
}
.home-scene img {
  width: 100%;
  height: auto;
  /* Drie maskers over elkaar:
     1. een ovaal dat naar alle kanten uitdooft — het middelpunt zit bewust
        rechts van het midden, zodat de titel links over een al bijna
        doorzichtig deel van de tekening valt;
     2. een verloop dat de linkerkant extra laat wegvallen achter de tekst;
     3. een verloop dat de onderkant in het papier laat oplossen. */
  -webkit-mask-image:
    radial-gradient(ellipse 66% 62% at 60% 48%, #000 30%, rgba(0,0,0,0.7) 58%, rgba(0,0,0,0.24) 78%, transparent 94%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 16%, #000 38%),
    linear-gradient(180deg, #000 58%, rgba(0,0,0,0.45) 84%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(ellipse 66% 62% at 60% 48%, #000 30%, rgba(0,0,0,0.7) 58%, rgba(0,0,0,0.24) 78%, transparent 94%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 16%, #000 38%),
    linear-gradient(180deg, #000 58%, rgba(0,0,0,0.45) 84%, transparent 100%);
  mask-composite: intersect, intersect;
  /* Multiply laat het crèmewit van het papier samensmelten met de achtergrond */
  mix-blend-mode: multiply;
  opacity: 0.95;
}

@media (max-width: 900px) {
  /* Op mobiel staat de tekst niet meer over de foto heen (ze staan onder
     elkaar), dus de waterverfvlek erachter heeft geen functie meer — erger
     nog, haar hoogte (130% van .home-hero) rekt uit zodra de hero door de
     gestapelde foto veel hoger wordt, en dat oogt als een vervormde bol. */
  .home-hero-wash { display: none; }

  .home-scene {
    position: relative;
    right: auto; top: auto;
    width: 100%;
    margin: 1.2rem 0 0;
    opacity: 0.9;
  }
  .home-scene img {
    /* Op mobiel toon je gewoon de foto, zonder het ovale uitfaad-masker: dat
       masker is afgesteld op de brede desktop-overlap met de tekst en snijdt
       hier zomaar stukken van de foto weg zonder reden. */
    mask-image: none;
    -webkit-mask-image: none;
    mix-blend-mode: normal;
  }
}

/* Botanische band, vult de onderkant van de pagina.
   Echte aquarel-tekeningen (PNG) — zie media/forest-art/web/. */
.band-botanic {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.4rem, 5vw, 4rem);
  padding-top: 1rem;
  opacity: 0.6;
  pointer-events: none;
}
.band-item img { display: block; width: 100%; height: auto; }
.band-item--1 { width: clamp(40px, 5vw, 64px); }
.band-item--2 { width: clamp(52px, 6.6vw, 88px); }
.band-item--3 { width: clamp(38px, 4.8vw, 62px); }
.band-item--4 { width: clamp(34px, 4.4vw, 58px); }
.band-item--5 { width: clamp(40px, 5.4vw, 70px); }
@media (max-width: 700px) {
  .band-item--3, .band-item--4 { display: none; }
}

.tickets-head { margin-top: clamp(2.6rem, 5vw, 4rem); }
.tickets-note {
  max-width: 44ch;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 0.6rem;
}

.join-block {
  text-align: center;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
}
.join-changed { margin-top: 1rem; }

/* ============ VIEW 3 — planning ============ */
.planning-head { position: relative; }
.planning-head .home-hero-wash { width: 54%; }

/* ============ VIEW 4 — praktisch ============
   Twee kolommen met een lichte inktlijn ertussen. De blokken vloeien in
   elkaars verlengde door, zodat er geen gaten ontstaan bij ongelijke lengtes. */
.praktisch-grid {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  column-count: 2;
  column-gap: clamp(2.6rem, 6vw, 5rem);
  column-rule: 1px solid rgba(74, 66, 53, 0.13);
}

.praktisch-block {
  position: relative;
  /* Een blok mag nooit halverwege over twee kolommen gebroken worden */
  break-inside: avoid;
  page-break-inside: avoid;
  /* Ruimte tussen de blokken zelf, én tussen icoon+titel en de tekst eronder —
     voordien plakte dit allemaal op elkaar. */
  margin: 0 0 clamp(2.6rem, 5vw, 4rem);
}
.praktisch-block:last-child { margin-bottom: 0; }
.praktisch-block .block-title { margin-bottom: 0.9rem; }
.praktisch-block .prose { padding-left: calc(clamp(30px, 3.4vw, 40px) + 0.75rem); }
.praktisch-block .prose > * + * { margin-top: 0.9em; }

/* De kaart onderaan wél over de volle breedte */
.map-section { margin-top: clamp(2.4rem, 5vw, 3.6rem); }

@media (max-width: 860px) {
  .praktisch-grid { column-count: 1; column-rule: none; }
}

.stay-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.2rem;
  margin-top: 0.9rem;
}
.stay-links a {
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  color: var(--olive);
  transition: color 0.35s ease, transform 0.35s ease;
}
.stay-links a:hover { color: var(--coral); transform: translateX(3px); }

.contact-list {
  margin-top: 1.1rem;
  padding-left: calc(clamp(30px, 3.4vw, 40px) + 0.75rem);
}
.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  align-items: baseline;
  padding: 0.4rem 0;
}
.contact-name { font-family: var(--font-display); font-size: 1.16rem; color: var(--ink); }
.contact-num  { font-variant-numeric: tabular-nums; color: var(--olive); }
.contact-role { font-style: italic; font-size: 0.9rem; color: var(--ink-faint); }

/* ============ VIEW 5 — FAQ ============ */
.faq-list { margin-top: clamp(2.4rem, 5vw, 4rem); }
.faq-item {
  max-width: 60ch;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
}
/* Om en om iets ingesprongen, zodat het geen lijstje wordt */
.faq-item:nth-child(odd)  { margin-left: 0; }
.faq-item:nth-child(even) { margin-left: auto; margin-right: 0; }
.faq-q {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--olive);
}
.faq-a {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
.faq-item .divider-sprig { margin: clamp(1.2rem, 2.4vw, 1.8rem) 0 0; }

/* ============ VIEW 6 — RSVP ============ */
.join-view { position: relative; }
.join-back { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

/* Melding over de overnachtingsbijdrage, enkel voor het weekendticket —
   vóór de eerste vraag, geen kader of lijn, gewoon rustig meer gewicht via
   de kleur op de kernzin. */
/* De bijdrage-stap (enkel weekendticket) — gewone, goed leesbare tekst,
   bewust niet gedempt/cursief zoals .step-hint: dit is geen bijzaak. */
.rsvp-notice-text {
  max-width: 44ch;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink);
}
.join-done { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; }
.join-done-msg {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============ Zachte overgang tussen views ============ */
.view-fade { animation: viewIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view-fade { animation: none; }
}