/* ==========================================================================
   index — alleen voor deze pagina
   Wordt als laatste geladen, dus wat hier staat gaat voor.
   ========================================================================== */

/* De menubalk is ongeveer 110px hoog en blijft in beeld staan. Met 130px
   plakt een aangesprongen blok direct onder die balk. Deze twee blokken zijn
   menu-items, dus daar wil je lucht: met 190px staat de kicker een kleine
   80px onder de balk en valt het blok midden in beeld.                     */
#aanbod,#over-mij{scroll-margin-top:190px}
a.btn-primary:hover,a.btn-primary:focus-visible{transform:translateY(-3px);box-shadow:0 12px 32px rgba(115,97,171,.42)}
/* 4/5 in plaats van 3/4: de fotokolom werd daarmee ruim 40px korter, zodat
   het hele blok in beeld past als je er vanuit het menu naartoe springt. */
.over-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 42%;border-radius:36px}
/* Vlak dat tegen de foto aan zit: de foto laat zijn ronding onderaan los en het
   vlak neemt hem over, zodat de twee samen één element vormen. De zin is een
   vraag aan de lezer en krijgt zo gewicht, zonder een losse citaatband te
   worden. Contrast van de tekst op dit lila: 7,8.                          */
.over-foto--plak img{border-radius:36px 36px 0 0}
.foto-zin{margin:0;background:#e7e0f2;border-radius:0 0 36px 36px;padding:26px 30px;
  font-family:var(--font-serif);font-style:italic;font-size:var(--t-lead);line-height:1.45;
  color:var(--paars-donker);text-align:center;text-wrap:balance}
.foto-zin .accent{color:var(--salie)}
@media(max-width:900px){ .foto-zin{padding:20px 22px} }
@media(max-width:1150px){
}

@media(max-width:900px){
  :root{--lijn:24px}
  .btn{min-width:0;width:100%;min-height:66px;font-size:17px}
  .kolkop{white-space:normal}
  :root{--t-display:38px;--t-h2:26px;--t-lead:20px;--t-h3:19px;--t-body:16px;--sectie:76px}
  .site-header{padding:16px var(--lijn)}
  .hero-home{padding:44px var(--lijn) 52px}
  .foto-bijschrift{position:static;right:0;margin-top:20px}
  .hero-foto{max-width:320px;margin:36px auto 34px}
  .kop-fade{height:72px}
  .section{padding:0 var(--lijn) var(--sectie)}
  .cta{padding:56px var(--lijn) 48px}
  .section-prose{padding:var(--sectie) var(--lijn)}
  .welkom{grid-template-columns:1fr;gap:30px;padding:var(--sectie) var(--lijn)}
  .welkom-kol{padding:0}
  .welkom-links{border-right:none;border-bottom:1px solid rgba(74,58,104,.16);padding-bottom:30px}
  .kolkop{min-height:0}
  .card-grid.cols-2{grid-template-columns:1fr}
  .aanbod-kaart{grid-template-columns:1fr}
  .aanbod-foto img{aspect-ratio:16/9;min-height:0}
  .aanbod-tekst{padding:24px 24px 28px}
  .aanbod-inhoud{padding:30px 26px 34px}
  .band{margin:0 0 var(--sectie);padding:56px var(--lijn)}

  .over-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .over-foto{max-width:300px;margin:0 auto}

  .fit-card{padding:32px 26px}
  .site-footer{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding:24px var(--lijn)}
  .site-footer > :first-child,.site-footer > :last-child{justify-self:center}
}

/* ----- bijschrift onder de herofoto op smalle schermen -----
   Op breed scherm hangt het pilletje half over de onderrand van de foto: het
   staat absoluut met left:50% en wordt met translate(-50%) teruggeschoven over
   de helft van zijn eigen breedte. Onder 1250px werd het wel op static gezet,
   maar die verschuiving bleef staan; het pilletje schoof daardoor half het
   scherm uit. Hier wordt de verschuiving teruggedraaid en staat het bijschrift
   netjes gecentreerd onder de foto.                                        */
/* Op elke schermbreedte hangt het bijschrift half over de onderrand van de
   foto, net als op een breed scherm. Het staat absoluut binnen het fotokader,
   dat op smalle schermen relatief is geplaatst, en wordt over de helft van zijn
   eigen breedte teruggeschoven zodat het midden op de foto uitkomt. De tekst
   mag afbreken, anders zou het pilletje breder worden dan het scherm.
   De foto krijgt er onderaan wat lucht bij voor het overhangende deel.     */
@media(max-width:1250px){
  .foto-bijschrift{position:absolute;left:50%;right:auto;bottom:0;top:auto;
    transform:translate(-50%,50%);display:block;width:max-content;max-width:88%;
    margin:0;text-align:center;white-space:normal}
}
@media(max-width:900px){
  .hero-foto{margin-bottom:52px}
}

/* ----- op mobiel dichter op elkaar -----
   Tussen de citaatband en de herkenningslijst zat 56px onderin de band plus
   56px erboven in het welkomblok: samen ruim 110px op een schermbreedte van
   nog geen 400. Op mobiel is dat nu 16 plus 14, samen 30.                  */
@media(max-width:900px){
  .band--eerste{padding-bottom:16px}
  .band--eerste + .welkom{padding-top:14px}
}

/* ----- de kop van het Over mij-blok op mobiel -----
   "Hi daar! Mijn naam is Tara" met het sterretje erachter is ongeveer 16 keer
   de letterhoogte breed. Op 26px past dat niet op een telefoon en viel de naam
   op een tweede regel. De kop schaalt nu mee met de schermbreedte: op een
   scherm van 360px wordt hij 18px, op 390px 20px, en vanaf 510px is hij weer
   de gewone 26. De ondergrens van 15,5px is er voor de smalste toestellen van
   320px, waar 17px nog net te breed was.                                                            */
@media(max-width:900px){
  .over-kop{font-size:clamp(15.5px,5.1vw,26px)}
}

/* ----- slotzin onder de herkenningslijst -----
   Zelfde letter als de lijst erboven, met een streepje ertussen zodat het een
   afsluiting is en geen achtste bullet.                                     */
.herken-slot{margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(74,58,104,.16);
  font-size:var(--t-body);line-height:1.8;color:var(--ink-soft)}

/* ----- de twee kaarten onder "Ben jij bereid om de diepte in te gaan?" -----
   De slotzin stond in de rechterkaart hoger dan in de linker, omdat de lijst
   erboven korter is. Door de lijst de vrije ruimte te laten opvullen zakt de
   slotzin in beide kaarten naar dezelfde hoogte.                            */
.fit-card{display:flex;flex-direction:column}
.fit-card ul{flex:1}
.fit-card .fit-note{margin-top:24px}

/* ----- de twee aanbodkaarten -----
   Beide kaarten tonen dezelfde foto als de bijbehorende subpagina. De staande
   foto van de zithoek krijgt dezelfde uitsnede als daar (42%), de liggende foto
   van de ruimte staat op het midden.

   De hoogte van een kaart werd bepaald door de foto: een liggende foto gaf een
   lage kaart, een staande foto een hoge. Twee kaarten onder elkaar werden
   daardoor ongelijk. De foto staat nu absoluut in zijn vak, en telt dus niet
   mee voor de hoogte; die komt van de tekst ernaast. Beide kaarten zijn
   daarmee even hoog en de foto vult zijn vak, ongeacht de verhouding van het
   bestand. De ondergrens van 210px voorkomt dat de fotokolom een streepje
   wordt als de tekst kort is.                                              */
.aanbod-kaart{min-height:210px}
.aanbod-foto{position:relative}
.aanbod-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;min-height:0}
.aanbod-kaart:first-child .aanbod-foto img{object-position:50% 42%}
.aanbod-kaart--roze .aanbod-foto img{object-position:50% 50%}

/* Onder elkaar op een smal scherm kan de foto niet meer stretchen, dus krijgt
   het vak zelf een liggende verhouding mee.                                */
@media(max-width:900px){
  .aanbod-kaart{min-height:0}
  .aanbod-foto{aspect-ratio:16/9}
}