/*
 * Over Selma — alleen wat écht nieuw is. De componentenlaag (nav, knoppen,
 * .eyebrow, .display, .contact, footer, centrering op --content-max) komt uit
 * /css/style.css.
 *
 * Opbouw sinds 07-09 (feedback Selma): schermbreed beeld, haar verhaal
 * gecentreerd, drie kleine sfeerbeelden, pakketten, contact.
 */

/* Actief nav-item */
.nav-link.actief { border-color: var(--pink); }

/* ---------- Schermbreed beeld ---------- */
/* Geen tekst eroverheen, dus ook geen waas: de foto blijft heel te zien. De
   vaste navbalk dekt de bovenrand af, net als bij de hero op de homepage. */
.after-film .over-hero{ padding: 0; max-width: none; }
/* De navbalk is fixed en legt zich over de bovenkant van de hero. Bij de oude staande
   foto gaf dat niets: die was veel hoger dan zijn kader, dus object-position koos een
   band uit het midden en haar hoofd zat ruim onder de balk. Haar nieuwe foto is liggend
   en veel minder hoog, waardoor de balk haar kruin afsneed; op 390 liep hij zelfs tot
   over haar ogen (gemeten 24-10: balk 108px op 1440 en 94px op 390).

   Daarom begint het beeld onder de balk in plaats van eronderdoor te lopen. --nav-h
   wordt onderaan over-selma/index.html gemeten met een ResizeObserver, net als op de
   homepage; 108px is de gemeten hoogte op 1440 als terugval. De ruimte erboven krijgt
   de kleur van de balk, zodat het een balk blijft en geen streep wordt. */
.after-film .over-hero{ padding-top: var(--nav-h, 108px); background: var(--bar); }
.after-film .over-hero__img{
  display: block; width: 100%;
  height: min(72vh, 620px); object-fit: cover; object-position: center 20%;
}

/* ---------- Haar verhaal, gecentreerd ---------- */
.after-film .over-verhaal{ background: var(--cream); }
.after-film .over-verhaal__inner{ max-width: var(--content-max); margin: 0 auto; text-align: center; }
.after-film .over-verhaal__inner .eyebrow{ justify-content: center; }
/* De kop is 32 tekens en moet van Selma op een regel staan; op 20ch viel het woord
   "in" als enige op regel twee. Op smalle schermen breekt hij alsnog, dat kan niet anders. */
.after-film .over-verhaal__titel{ font-size: clamp(1.9rem,4.4vw,3rem); color: var(--green-dark); margin: 0 auto 1.6rem; max-width: 34ch; text-wrap: balance; }
.after-film .over-verhaal__inner p{ font-size: 1.1rem; color: var(--muted); margin: 0 auto 1.1rem; max-width: 68ch; }
.after-film .over-verhaal__inner .over-verhaal__accent{
  font-family: var(--font-serif); font-weight: 600; color: var(--green-dark);
  font-size: clamp(1.2rem,2.2vw,1.5rem); line-height: 1.45; max-width: 34ch; margin-block: 1.8rem;
}
.after-film .over-verhaal__inner .over-verhaal__slot{
  font-family: var(--font-serif); font-weight: 600; color: var(--green-dark);
  font-size: clamp(1.3rem,2.4vw,1.6rem); line-height: 1.4; max-width: 34ch; margin-top: 1.8rem;
}

/* ---------- Sfeerbeelden: max 3 ---------- */
.after-film .over-galerij{ background: var(--paper); }
.after-film .over-galerij__grid{ max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.8rem,2vw,1.4rem); }
.after-film .over-galerij__grid img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; display: block; }

/* ---------- Naar de pakketten (prominent) ---------- */
.after-film .over-pakketten{ background: var(--beige); }
.after-film .over-pakketten__inner{
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(2rem,5vw,4.5rem); max-width: var(--content-max); margin: 0 auto;
}
.after-film .over-pakketten__beeld{ margin: 0; }
.after-film .over-pakketten__beeld img{ width: 100%; height: clamp(320px,38vw,480px); object-fit: cover; border-radius: 14px; display: block; }
.after-film .over-pakketten__tekst .eyebrow{ justify-content: flex-start; }
.after-film .over-pakketten__tekst .display{ font-size: clamp(1.7rem,3.6vw,2.4rem); margin-bottom: 1rem; }
.after-film .over-pakketten__tekst p{ color: var(--muted); margin-bottom: 1.6rem; }

/* Afsluitregel in het contactblok */
.after-film .over-sign{ font-family: var(--font-serif); font-weight: 600; color: var(--pink); font-size: 1.1rem; margin-top: 1.6rem; }

/* ---------- Smal ---------- */
@media (max-width: 900px){
  .after-film .over-pakketten__inner{ grid-template-columns: 1fr; text-align: center; }
  .after-film .over-pakketten__beeld{ order: -1; }
  .after-film .over-pakketten__beeld img{ height: clamp(300px,64vw,440px); }
  .after-film .over-pakketten__tekst .eyebrow{ justify-content: center; }
}
@media (max-width: 700px){
  /* Een liggende foto die op 72vh wordt bijgesneden houdt op een telefoon
     nauwelijks beeld over; daarom lager. */
  .after-film .over-hero__img{ height: min(52vh, 380px); }
}
@media (max-width: 560px){
  .after-film .over-galerij__grid{ grid-template-columns: 1fr; }
  .after-film .contact-actions .btn{ display: flex; width: 100%; }
}