/* ============================================================
   Ontdek Stadswandelingen — de tekst over de video.
   Laad dit ná styles.css en hero-video.css.
   styles.css blijft onaangeroerd.

   Drie ingrepen, los van elkaar te gebruiken:
     1. de hero krijgt een eigen hoogte   → de film krijgt ruimte
     2. de overlay wordt een verloop      → beeld scherper, tekst leesbaarder
     3. de introtekst verhuist naar onder → 116 tekens per regel is te veel
   ============================================================ */

/* ------------------------------------------------------------
   1. De hero had geen eigen hoogte.

   Gemeten op de live pagina: hero 500 px hoog, tekstblok 500 px.
   Op mobiel 672 om 672. De hero was dus exact zo hoog als de
   tekst — de film had nul ruimte voor zichzelf en diende alleen
   als behang achter een lap tekst.

   Met een eigen minimumhoogte staat de tekst in de film,
   in plaats van de film achter de tekst.
   ------------------------------------------------------------ */
.hero {
  min-height: min(76vh, 700px);
  display: flex;
  align-items: center;
}

.hero .content {
  width: 100%;
  padding-top: clamp(48px, 7vh, 84px);
  padding-bottom: clamp(64px, 10vh, 120px);
}

@media (max-width: 640px) {
  .hero { min-height: min(70vh, 540px); }
}

/* Landscape op een telefoon: 70vh is dan te weinig om in te lezen. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 420px; }
}

/* ------------------------------------------------------------
   2. De overlay was een effen kleur van 55%.

   Dat maakt tekst overal even leesbaar, maar dempt ook de hele
   film — ook op plekken waar geen letter staat. Een verloop doet
   het werk waar het nodig is: donker achter de tekst, open in het
   midden waar de gezichten en gevels zitten.

   De huisstijlkleur per stad blijft, alleen zachter: het verloop
   levert het contrast, de kleur alleen nog de herkenning.
   ------------------------------------------------------------ */
.hero .overlay {
  background-color: rgba(41, 35, 92, .34);
  background-image: linear-gradient(
    to bottom,
    rgba(6, 8, 20, .42) 0%,
    rgba(6, 8, 20, .16) 34%,
    rgba(6, 8, 20, .16) 62%,
    rgba(6, 8, 20, .52) 100%
  );
  transition: background-color .18s ease;
}

.hero.is-dordrecht .overlay { background-color: rgba( 41,  35,  92, .40); }
.hero.is-breda     .overlay { background-color: rgba(229,  33,  60, .38); }
.hero.is-gouda     .overlay { background-color: rgba(250, 182,  49, .34); }
.hero.is-gorinchem .overlay { background-color: rgba(  1, 158, 226, .38); }

/* De algemene film droeg het paars van Dordrecht (#29235C), omdat
   `is-general` geen eigen regel had en op de basiskleur terugviel.
   Het merkfilmpje stond dus in de huisstijl van één van de vier
   steden. Neutraal donkerblauw hoort daar beter. */
.hero.is-general .overlay { background-color: rgba(10, 16, 34, .34); }

/* Zodra iemand het geluid aanzet is de film het onderwerp:
   dan mag de tint bijna helemaal weg. */
.hero.is-sound-on .overlay {
  background-color: rgba(6, 8, 20, .18);
  background-image: linear-gradient(
    to bottom,
    rgba(6, 8, 20, .34) 0%,
    rgba(6, 8, 20, .06) 40%,
    rgba(6, 8, 20, .06) 60%,
    rgba(6, 8, 20, .40) 100%
  );
}

/* Een verloop over de hele hero weet niet waar de tekst staat.
   Deze schaduw wel: hij hangt aan het tekstblok zelf, dus hij
   klopt bij elke koplengte en op elk schermformaat. Buiten de
   tekst loopt hij naar nul, zodat de film daar open blijft. */
.hero .content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, 118%);
  height: min(520px, 165%);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(6, 8, 20, .66) 0%,
    rgba(6, 8, 20, .52) 38%,
    rgba(6, 8, 20, .22) 62%,
    rgba(6, 8, 20, 0)   78%
  );
}

/* ------------------------------------------------------------
   Geluid aan = de film kijken. Dan hoort er geen tekst overheen.

   Het hele tekstblok vervaagt, inclusief de schaduw eronder (die
   zit ín .content, dus die gaat vanzelf mee). De geluidsknop blijft
   staan — dat is de enige knop waarmee je weer terug kunt.

   visibility maakt het niet alleen onzichtbaar maar haalt het ook
   uit de voorleesvolgorde en uit de tabvolgorde. Zonder dat blijft
   een schermlezer een kop voorlezen die niemand ziet.
   ------------------------------------------------------------ */
.hero .content {
  transition: opacity .45s ease, visibility 0s linear .45s;
}

.hero.is-sound-on .content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Terugkomen mag iets vlotter dan weggaan: de film is dan afgelopen
   of iemand heeft het geluid uitgezet, en dan wil je weer weten
   waar je bent. */
.hero:not(.is-sound-on) .content {
  transition: opacity .3s ease .1s, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .hero .content,
  .hero:not(.is-sound-on) .content { transition: none; }
}

/* ------------------------------------------------------------
   3. Hiërarchie. Dit was het eigenlijke probleem.

   De kop was een <h1> met een <span> erin, en die span had precies
   één regel CSS: display:block. Geen kleiner, geen lichter. Beide
   regels stonden dus op gewicht 950 en dezelfde grootte, met een
   lead van gewicht 850 eronder. Vier regels wit vet, allemaal even
   hard, met 10 px ertussen.

   Zo leest het als één zin die niet loopt:
   "Stadswandelingen die verrassen lokaal, persoonlijk en op maat".

   Drie niveaus die duidelijk van elkaar verschillen lossen dat op:
   een klein bovenregeltje, één kop, één lead die ademt.
   ------------------------------------------------------------ */
.hero .content { gap: 0; }

/* Bovenregel: de vier steden. Klein, gespatieerd, rustig. Wie de
   pagina scant weet meteen waar het over gaat, zonder dat het met
   de kop concurreert. */
.hero__eyebrow {
  margin: 0 0 clamp(14px, 1.6vh, 22px);
  font-size: clamp(11px, .68rem + .12vw, 13px);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .88;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* Vier stadsnamen met ruime spatiëring raken op een telefoon net
   de schermranden. Iets krapper zetten geeft ze weer lucht. */
@media (max-width: 430px) {
  .hero__eyebrow { font-size: 10px; letter-spacing: .11em; }
}

/* De kop mag nu één ding zijn. Iets ruimer opgezet dan eerst,
   want hij hoeft de ruimte niet meer te delen. */
.hero h1 {
  margin: 0;
  font-size: clamp(30px, 2.2rem + 1.5vw, 54px);
  line-height: 1.04;
  max-width: 26ch;

  /* Laat de browser de regels even lang maken in plaats van de
     laatste regel vol te gooien. Zonder dit breekt de kop op
     "... iemand die / er woont" en hangt er een losse flard onder.
     Browsers die het niet kennen negeren het gewoon. */
  text-wrap: balance;
}

/* De lead was gewicht 850 — bijna net zo zwaar als de kop. Op 500
   leest hij als toelichting in plaats van als tweede kop. */
.hero .lead {
  margin: clamp(16px, 2vh, 24px) 0 0;
  font-weight: 500;
}

/* ------------------------------------------------------------
   4. Regellengte en schaduw.

   De lead stond op 80ch, de alinea's op 92ch — gemeten kwam dat
   op 116 tekens per regel uit. Comfortabel lezen houdt op rond
   de 75, en gecentreerd nog eerder, omdat het oog bij elke
   nieuwe regel het begin moet zoeken.

   De alinea's zijn verplaatst (zie 4). Wat blijft staan, staat
   nu op een breedte die klopt.
   ------------------------------------------------------------ */
.hero .lead {
  max-width: 44ch;
  font-size: clamp(15px, .9rem + .35vw, 19px);
  line-height: 1.5;
  text-wrap: balance;
}

/* De oude schaduw stond 18 px omlaag met 44 px onscherpte: dat is
   een gloed onder de letters, geen leesbaarheidsschaduw. Een korte,
   strakke schaduw houdt de letterranden hard tegen bewegend beeld. */
.hero h1,
.hero .lead {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 8px 28px rgba(0, 0, 0, .40);
}

/* ------------------------------------------------------------
   5. De verplaatste introtekst, nu onder "Waarom ...?"
   ------------------------------------------------------------ */
/* ============================================================
   De sectie "Waarom Ontdek Stadswandelingen?"

   Die was opgemaakt op mobiele maten en schaalde nooit mee: kop
   van 22 px, kaartjes met 16 px binnenruimte, tekst van 14 px.
   Op een breed scherm werd dat kleine letter in veel leegte.
   Alles hieronder schaalt nu mee met het schermformaat.
   ============================================================ */

/* ------------------------------------------------------------
   Kop van de sectie
   ------------------------------------------------------------ */
.panel {
  padding: clamp(18px, 2.4vw, 34px) clamp(18px, 2vw, 28px) clamp(16px, 2vw, 24px);
}

.panel h2 {
  margin: 0 0 clamp(14px, 2vw, 24px);
  font-size: clamp(24px, 1.1rem + 1.6vw, 40px);
  line-height: 1.1;
}

.below {
  padding-bottom: clamp(64px, 9vw, 120px);
}

/* ------------------------------------------------------------
   Introtekst — breder en groter.

   Stond op 585 px. Nu 780 px, met grotere letter erbij: alleen
   het blok oprekken maakt de regels langer zonder dat het ruimer
   oogt. Samen met de letter meegroeien houdt het aantal tekens
   per regel gelijk en voelt het wél royaler.
   ------------------------------------------------------------ */
.od-intro {
  max-width: min(780px, 100%);
  margin: 0 auto clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
}

.od-intro p {
  margin: 0 0 1.1rem;
  font-size: clamp(1rem, .94rem + .32vw, 1.18rem);
  line-height: 1.75;
  color: rgba(15, 23, 42, .74);
}

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

/* Eerste alinea als echte inleiding: groter, donkerder, korter
   gehouden zodat hij als één blok leest. */
.od-intro p:first-child {
  /* Bijna de volle breedte: op 30ch brak deze alinea in vijf korte
     regels terwijl de tekst eronder breder liep — dan staat de
     inleiding smaller dan de toelichting en klopt de rangorde niet. */
  max-width: min(660px, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  font-size: clamp(1.14rem, 1rem + .6vw, 1.45rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: rgba(15, 23, 42, .95);
  text-wrap: balance;
}

/* ------------------------------------------------------------
   De vier kaartjes
   ------------------------------------------------------------ */
.why {
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: 0;
}

.whycard {
  padding: clamp(18px, 2.2vw, 32px) clamp(18px, 2vw, 30px) clamp(16px, 2vw, 28px);
  border-radius: 20px;
  border-color: rgba(15, 23, 42, .07);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .04);
  transition: transform .22s ease, box-shadow .22s ease;
}

@media (hover: hover) {
  .whycard:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 34px rgba(15, 23, 42, .08);
  }
}

.whycard h3 {
  margin: 0 0 clamp(8px, 1vw, 12px);
  font-size: clamp(17px, .95rem + .4vw, 21px);
  line-height: 1.25;
}

.whycard p {
  font-size: clamp(14.5px, .88rem + .22vw, 16px);
  line-height: 1.75;
  color: rgba(15, 23, 42, .72);
}

/* De zachte gloed bovenin het kaartje was op de oude, krappe maat
   gemaakt. Met meer binnenruimte mag hij iets breder uitwaaieren. */
.whycard::before {
  height: 130px;
  background: radial-gradient(320px 150px at 16% 50%, rgba(47, 122, 114, .10), transparent 70%);
}

/* ------------------------------------------------------------
   6. Botsing onderin de hero.

   De tegelsectie trekt zichzelf met een negatieve marge over de
   hero heen, en de kop "Kies je stad" landt daardoor precies op
   de geluidsknop. Op mobiel liggen ze volledig over elkaar.
   De knop schuift omhoog, boven die zone.
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .hero__sound { bottom: 76px; }
}

@media (max-width: 640px) {
  .hero__sound { bottom: 82px; }
}