/* ==========================================================================
   pages-rest: pagina-specifieke aanvullingen (agent: pages-rest)
   Laadt alleen op: woonanalyse, klantreis, regio, faq, reviews, contact,
   blog, blog-post, juridisch en error. Wijzigt style.css NIET.
   Premium, rustig, warm. Fraunces + Mulish, rijker goud.
   ========================================================================== */

/* ---- Pagina-hero: full-bleed sfeerachtergrond met leesbare tekst ---- */
.pagina-hero {
  position: relative;
  min-height: min(56vh, 480px);
  display: flex;
  align-items: center;
  padding: clamp(56px, 9vw, 104px) 0;
  background-color: var(--bordeaux-donker);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Warme leesbaarheids-overlay: van links donker naar rechts open, zoals de home-hero. */
.pagina-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(54, 15, 25, 0.74) 0%, rgba(54, 15, 25, 0.52) 44%, rgba(54, 15, 25, 0.18) 100%),
    linear-gradient(0deg, rgba(54, 15, 25, 0.30) 0%, rgba(54, 15, 25, 0) 55%);
  z-index: 0;
}
/* Fijne gouden haarlijn onderaan als ornament. */
.pagina-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(195, 155, 52, 0) 0%, var(--goud) 30%, var(--goud-licht) 50%, var(--goud) 70%, rgba(195, 155, 52, 0) 100%);
  opacity: 0.85;
  z-index: 1;
}
.pagina-hero .wrap { position: relative; z-index: 1; }
.pagina-hero-inhoud { max-width: 680px; }
.pagina-hero .kicker { color: var(--goud-licht); margin-bottom: 16px; }
.pagina-hero h1 { color: var(--wit); }
.pagina-hero .intro-tekst { color: var(--oudroze-licht); margin: 20px 0 0; }
.pagina-hero .knop {
  margin-top: 30px;
  background: var(--cta-goud);
  color: var(--bordeaux-donker);
  box-shadow: var(--cta-goud-schaduw);
}
.pagina-hero .knop:hover { filter: brightness(1.05); color: var(--bordeaux-donker); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(138, 106, 34, 0.42); }

/* Gecentreerde variant (o.a. foutpagina). */
.pagina-hero-midden { text-align: center; }
.pagina-hero-midden .pagina-hero-inhoud { max-width: 640px; margin: 0 auto; }
.pagina-hero-midden .kicker { margin-bottom: 14px; }

/* Compacte variant (o.a. FAQ): geen sfeerfoto, kleinere kop, minder hoog.
   Effen bordeaux als achtergrond; de overlay-::before valt weg. */
.pagina-hero-compact {
  min-height: 0;
  padding: clamp(40px, 6vw, 72px) 0;
  background-image: none;
  background-color: var(--bordeaux);
}
.pagina-hero-compact::before { display: none; }
.pagina-hero-compact h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.pagina-hero-compact .intro-tekst {
  font-size: 1.05rem;
  margin-top: 14px;
  max-width: 640px;
}

/* ---- FAQ: twee kolommen op desktop ---- */
.faq-grid { display: grid; gap: 14px; }
@media (min-width: 860px) {
  .faq-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    align-items: start; /* items niet uitrekken; open item groeit alleen zelf */
  }
  .faq-grid .faq-item { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .pagina-hero { text-align: left; }
  .pagina-hero-midden { text-align: center; }
}

/* ---- Stappen-tijdlijn: gouden verfijning t.o.v. de basis ---- */
/* Alleen op mijn pagina's (klantreis, woonanalyse); overschrijft niets globaal. */
.stap::before {
  box-shadow: 0 0 0 4px rgba(195, 155, 52, 0.16);
}
.stap::after {
  background: linear-gradient(180deg, var(--goud) 0%, rgba(195, 155, 52, 0.18) 100%);
}

/* ---- Focus-states (gouden ring), zichtbaar en toegankelijk ---- */
.knop:focus-visible,
.knop-secundair:focus-visible,
.knop-groot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(195, 155, 52, 0.45);
}
.pagina-hero .knop:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 253, 251, 0.55);
}
a:focus-visible {
  outline: 2px solid var(--goud);
  outline-offset: 3px;
  border-radius: 4px;
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--goud);
  outline-offset: -2px;
}

/* ---- Woonanalyse: rustige accenten ---- */
.pijl-lijst { list-style: none; margin-top: 8px; }

/* ---- Reviews: nette gelijke hoogte ---- */
.review-kaart .review-tekst { flex-grow: 1; }

/* ---- Regio: kaart-onderschrift ademruimte ---- */
.regio-kaartbeeld { margin-top: 8px; }

/* ---- Regio: verfijnde lijst van alle plaatsen in het werkgebied ---- */
.regio-plaatsen {
  max-width: 840px;
  margin: 20px auto 0;
  text-align: center;
  font-family: var(--font-kop);
  font-size: 0.98rem;
  line-height: 2.15;
  letter-spacing: 0.015em;
  color: var(--inkt);
}

/* ---- Blog-artikel: iets ruimere leesmaat ---- */
.artikel p { margin-bottom: 1.3em; }
.artikel h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); }

/* ---- Juridisch: prettige leesbreedte en tussenkoppen ---- */
.juridisch-inhoud { max-width: 68ch; }

/* ==========================================================================
   Klantreis: scroll-ervaring ("de reis"). Elke stap komt op het podium naar
   voren terwijl je scrolt. Twee lagen:
   1. Basis (zonder JS / prefers-reduced-motion): een rustige, volledig
      leesbare kolom met genummerde kaarten. Alles zichtbaar, geen beweging.
   2. Filmmodus (.reis--film, door /js/klantreis.js gezet): een vastgezet
      podium waarop de kaarten als een stapel liggen; de actieve stap staat
      scherp op de voorgrond, de vorige schuift strak naar rechts uit beeld en
      de volgende komt van achteren naar voren. Alles blijft scherp (geen blur).
   Beide lagen delen dezelfde markup en dezelfde bewerkbare content.
   ========================================================================== */

.reis {
  --reis-seg: 66vh;               /* scroll-lengte per stap in filmmodus */
  position: relative;
  background: linear-gradient(180deg, var(--offwhite) 0%, var(--zand) 100%);
  overflow: clip;
}
.reis-binnen { padding-block: clamp(72px, 11vw, 132px); }

/* Voortgangsrail en grote teller horen alleen bij de filmmodus. */
.reis-rail { display: none; }
.reis-teller { display: none; }

/* Kaarten: in de basis een leesbare verticale kolom. */
.reis-kaarten {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--maat-smal);
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4vw, 44px);
}
.reis-kaart {
  position: relative;
  background: var(--wit);
  border: 1px solid rgba(195, 155, 52, 0.24);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(38px, 5.2vw, 68px);
  box-shadow: var(--schaduw);
  overflow: hidden;
}
/* Groot, verfijnd volgnummer als watermerk. */
.reis-kaart-nr {
  position: absolute;
  top: clamp(6px, 1.6vw, 16px);
  right: clamp(14px, 3vw, 34px);
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: clamp(3.6rem, 9vw, 6.6rem);
  line-height: 1;
  color: var(--goud);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}
.reis-kaart-inhoud { position: relative; z-index: 1; }
.reis-kaart-kicker {
  display: block;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  color: var(--goud-diep);
  margin-bottom: 20px;
}
.reis-kaart h3 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.2;
  color: var(--inkt);
  margin: 0 0 0.7em;
  max-width: 22ch;
}
.reis-kaart-tekst { color: var(--inkt-zacht); max-width: 54ch; line-height: 1.8; }
.reis-kaart-tekst p { margin: 0 0 1.1em; }
.reis-kaart-tekst p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Filmmodus
   -------------------------------------------------------------------------- */

/* De sectie wordt lang genoeg om per stap een scrollsegment te bieden. */
.reis--film { min-height: calc((var(--reis-stappen) - 1) * var(--reis-seg) + 100svh); }
.reis--film .reis-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@supports not (height: 100svh) {
  .reis--film { min-height: calc((var(--reis-stappen) - 1) * var(--reis-seg) + 100vh); }
  .reis--film .reis-sticky { height: 100vh; }
}

/* Zachte, warme gloed achter het podium voor diepte. */
.reis--film .reis-sticky::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 82%);
  height: min(760px, 82%);
  transform: translate(-30%, -50%);
  background: radial-gradient(circle, rgba(195, 155, 52, 0.16) 0%, rgba(195, 155, 52, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

.reis--film .reis-binnen {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 0;
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: stretch;
}

.reis--film .reis-podium { position: relative; min-width: 0; }

/* Grote, rustige teller die meeloopt met de actieve stap. */
.reis--film .reis-teller {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.reis-teller-kicker {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.74rem;
  color: var(--goud-diep);
  align-self: center;
}
.reis-teller-nu {
  font-family: var(--font-kop);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  color: var(--bordeaux);
}
.reis-teller-op {
  font-family: var(--font-kop);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--inkt-zacht);
}

/* De kaarten stapelen in één rastercel; de container krijgt de hoogte van de
   grootste kaart. Filmstaten regelen zicht en positie. */
.reis--film .reis-kaarten {
  display: grid;
  gap: 0;
  max-width: 640px;
  margin: 0;
}
.reis--film .reis-kaart {
  grid-area: 1 / 1;
  transform-origin: center center;
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 760ms cubic-bezier(0.33, 0.98, 0.42, 1);
  will-change: transform, opacity;
}
.reis--film .reis-kaart-kicker { display: none; }   /* teller neemt dit over */

/* Actief: scherp, gecentreerd, op de voorgrond. */
.reis--film .reis-kaart.is-nu {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  box-shadow: var(--schaduw-zwaar);
  z-index: 5;
}
/* Wachtend, subtiel achter de actieve kaart (komt straks naar voren). */
.reis--film .reis-kaart.is-volgend {
  opacity: 0.24;
  transform: translate3d(0, 26px, 0) scale(0.94);
  z-index: 3;
}
.reis--film .reis-kaart.is-straks {
  opacity: 0.1;
  transform: translate3d(0, 46px, 0) scale(0.89);
  z-index: 2;
}
.reis--film .reis-kaart.is-toekomst {
  opacity: 0;
  transform: translate3d(0, 62px, 0) scale(0.85);
  z-index: 1;
}
/* Weg: schuift strak naar rechts uit beeld, over de actieve kaart heen.
   Blijft zichtbaar tijdens het glijden; fade pas aan het einde (geen dissolve). */
.reis--film .reis-kaart.is-weg {
  opacity: 0;
  transform: translate3d(120%, 0, 0) rotate(2deg) scale(0.98);
  z-index: 6;
  transition:
    transform 720ms cubic-bezier(0.5, 0, 0.2, 1),
    opacity 260ms ease 430ms;
}
.reis--film .reis-kaart.is-verleden {
  opacity: 0;
  transform: translate3d(132%, 0, 0) scale(0.96);
  z-index: 0;
}

/* De verticale voortgangsrail (alleen desktop-filmmodus). */
.reis--film .reis-rail {
  display: block;
  position: relative;
  align-self: stretch;
}
.reis-rail-lijn {
  position: absolute;
  left: 17px;
  top: 17px;
  bottom: 17px;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(195, 155, 52, 0.28);
  z-index: 0;
}
.reis-rail-voortgang {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--goud) 0%, var(--bordeaux) 100%);
  transition: height 260ms linear;
}
.reis-rail-punten {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.reis-rail-punt { display: flex; align-items: center; gap: 16px; }
.reis-rail-stip {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-kop);
  font-size: 0.82rem;
  color: var(--inkt-zacht);
  background: var(--wit);
  border: 1px solid rgba(195, 155, 52, 0.45);
  transition: background 500ms ease, border-color 500ms ease, color 500ms ease, transform 500ms ease, box-shadow 500ms ease;
}
.reis-rail-label {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--inkt-zacht);
  max-width: 190px;
  transition: color 500ms ease, font-weight 500ms ease;
}
.reis-rail-punt.is-gedaan .reis-rail-stip {
  background: var(--goud);
  border-color: var(--goud);
  color: var(--wit);
}
.reis-rail-punt.is-nu .reis-rail-stip {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  color: var(--wit);
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(109, 26, 45, 0.12);
}
.reis-rail-punt.is-nu .reis-rail-label { color: var(--inkt); font-weight: 600; }

/* Kleiner scherm: geen zijrail, wel de teller; kaarten vullen de breedte. */
@media (max-width: 900px) {
  .reis { --reis-seg: 56vh; }
  .reis--film .reis-binnen { grid-template-columns: minmax(0, 1fr); }
  .reis--film .reis-rail { display: none; }
  .reis--film .reis-kaarten { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .reis-kaart { padding: clamp(24px, 6vw, 34px); }
  .reis-kaart h3 { max-width: none; }
}

/* Respecteer de bewegingsvoorkeur: geen filmmodus, kalme leesbare kolom.
   (js/klantreis.js zet .reis--film hier sowieso niet, dit is de vangnet-regel.) */
@media (prefers-reduced-motion: reduce) {
  .reis--film { min-height: 0; }
  .reis--film .reis-sticky { position: static; height: auto; display: block; }
  .reis--film .reis-binnen { display: block; padding-block: clamp(56px, 9vw, 104px); }
  .reis--film .reis-rail, .reis--film .reis-teller { display: none; }
  .reis--film .reis-kaarten {
    display: flex; flex-direction: column; gap: clamp(18px, 3vw, 30px);
    max-width: var(--maat-smal); margin-inline: auto;
  }
  .reis--film .reis-kaart {
    opacity: 1 !important; transform: none !important; filter: none !important;
    box-shadow: var(--schaduw); transition: none;
  }
  .reis--film .reis-kaart-kicker { display: block; }
}