/* ============================================================
   Het gesprek-blok op /contact/ — [phrona_gesprek]

   WAAROM EEN LOS BESTAND
   Zelfde reden als prijzen.css: CSS in de paginainhoud wordt door WordPress
   gestript bij opslaan voor accounts zonder `unfiltered_html`. Als los bestand
   is het schoner, cachebaar, en het scheelt kilobytes in de database.

   DE MAAT
   Dit blok staat binnen `.wrap--narrow` (760px). Het beeld is 16:9, dus op
   760px is het 427px hoog — hoog genoeg om iets te laten zien, laag genoeg om
   de knop niet onder de vouw te duwen. Op mobiel (390px) is het beeld 219px.

   WAT HET NIET DOET
   Geen schaduw-truc met een donkere overlay over het beeld, geen tekst over de
   foto. De illustratie is licht en rustig; tekst eroverheen zou hem tot
   achtergrond verlagen en de leesbaarheid afhankelijk maken van de exacte
   beeldvulling.
   ============================================================ */

.gesprek {
  margin-block: clamp(32px, 4.4vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-2);
  overflow: hidden;
}

/* ---------------------------- beeld ---------------------------- */

.gesprek__beeld {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--beige);
}
.gesprek__beeld picture,
.gesprek__beeld img {
  display: block;
  width: 100%;
  height: 100%;
}
.gesprek__beeld img {
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------------------------- tekst ---------------------------- */

.gesprek__body {
  padding: clamp(22px, 3.2vw, 36px);
}
/* `.entry-content > * + *` zet 1.2em marge tussen blokken. Binnen deze kaart
   willen we onze eigen ritmes, dus de body-kinderen beginnen op nul en de
   afstanden komen uit de regels hierboven. */
.gesprek__body > * { margin-top: 0; }
.gesprek__body > .eyebrow { margin-bottom: 0.5em; }

/* De titel is een h2, en `.entry-content h2` zet `margin-top: 2.2em` plus een
   groter font. Dat erfde hij: 73,9 px lege ruimte boven de kop, midden in een
   kaart die zelf al padding heeft. Deze kaart is een component, geen lopende
   tekst, dus hij zet zijn eigen maten -- met de selector op de kaart zodat hij
   niet van de omgeving afhankelijk is. */
.gesprek .gesprek__titel {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

.gesprek .gesprek__tekst {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--body);
  margin: 0 0 1.15em;
  max-width: 46ch;
}

/* --------------------------- punten --------------------------- */

.gesprek .gesprek__punten {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
  display: grid;
  gap: 0.55em;
}
.gesprek__punten li {
  position: relative;
  padding-left: 1.55em;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--body);
}

/* Een vinkje als CSS-vorm en niet als SVG: het is decoratie, het staat in elke
   regel, en een los SVG-bestand per punt is drie keer zoveel markup voor
   hetzelfde beeld. De kleur komt uit de token, niet uit een vaste hex. */
.gesprek__punten li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.52em;
  width: 0.5em;
  height: 0.28em;
  border-left: 1.6px solid var(--green-soft);
  border-bottom: 1.6px solid var(--green-soft);
  transform: rotate(-45deg);
}

/* --------------------------- actie ---------------------------- */

.gesprek__actie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* De knop en de regel eronder horen bij elkaar: 1,2rem knijpt dat samen tot
     één CTA-groep in plaats van twee losse elementen naast elkaar. */
  gap: 0.7rem 1.2rem;
}

.gesprek__klein {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

/* -------------------------- responsief ------------------------ */

@media (max-width: 640px) {
  .gesprek { border-radius: var(--r-md); }
  .gesprek__actie { flex-direction: column; align-items: stretch; }
  .gesprek__actie .btn { width: 100%; justify-content: center; }
  /* "Plan een gesprek van dertig minuten" past op 350px niet op één regel en
     brak in tweeën, waardoor de knop 68px hoog werd: een lap tekst met een pijl
     ernaast. Iets kleiner lettertype houdt hem op één regel zonder de
     raakbaarheid te verliezen (de knop blijft ruim boven 44px). */
  .gesprek__actie .btn { font-size: 0.92rem; padding-inline: 1.1em; }
  .gesprek__klein { text-align: center; }
}

/* De afbeelding laadt lazy. Zonder deze reserve houdt de kaart geen hoogte
   vast en springt de knop weg zodra het beeld binnenkomt — precies op het
   moment dat iemand wil klikken. `aspect-ratio` op de container doet dat werk
   al, dus dit is alleen een vangnet voor browsers zonder ondersteuning. */
@supports not (aspect-ratio: 16 / 9) {
  .gesprek__beeld { height: 0; padding-bottom: 56.25%; }
  .gesprek__beeld img { position: absolute; inset: 0; }
}