/* ==================================================================
   vrouwelijkepersonaltrainers.nl — stijlblad "Portret"
   Redactioneel: brede marges, dunne lijnen, ronde uitsneden,
   koppen in een lichte schreefletter, lopende tekst schreefloos.
   Klassevoorvoegsel: p-
   ================================================================== */

:root{
  --inkt:#1b1b3a;
  --inkt-diep:#111129;
  --framboos:#a8215a;
  --framboos-licht:#f0879f;
  --papier:#fbf7f4;
  --papier-warm:#f3ece6;
  --potlood:#565170;
  --lijn:#ddd2cc;
  --wit:#ffffff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:#242235;
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:17px;line-height:1.75;
}

/* --- typografie --- */
h1,h2,h3,h4{
  font-family:"Book Antiqua","Palatino Linotype",Palatino,"URW Palladio L",serif;
  font-weight:400;color:var(--inkt);margin:0 0 .55em;
  line-height:1.22;letter-spacing:-.01em;
}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.55rem,2.9vw,2.25rem)}
h3{font-size:1.22rem;line-height:1.35}
h4{font-size:1.02rem}
p{margin:0 0 1.1em}
a{color:var(--framboos)}
a:hover{color:var(--inkt)}
img{display:block;max-width:100%;height:auto}
em{font-style:italic}

.p-kader{width:min(1120px,100% - 44px);margin-inline:auto}
.p-smal{width:min(680px,100% - 44px);margin-inline:auto}

/* --- kopregel --- */
.p-balk{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:50}
.p-balk__binnen{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:15px 0;flex-wrap:wrap}
.p-merk{
  font-family:"Book Antiqua","Palatino Linotype",serif;font-size:1.16rem;
  color:var(--inkt);text-decoration:none;display:flex;align-items:baseline;gap:9px;
}
.p-merk i{
  font-style:normal;width:26px;height:26px;border-radius:50%;
  background:var(--framboos);display:inline-block;position:relative;top:5px;
}
.p-menu{display:flex;gap:4px;flex-wrap:wrap}
.p-menu a{
  color:var(--potlood);text-decoration:none;font-size:.88rem;padding:7px 12px;
  border-radius:20px;
}
.p-menu a:hover{background:var(--papier-warm);color:var(--inkt)}
.p-menu a[aria-current]{background:var(--inkt);color:#fff}

/* --- opening --- */
.p-opening{padding:64px 0 20px}
.p-opening__raster{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.p-etiket{
  display:inline-block;font-size:.73rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--framboos);border-bottom:1px solid var(--framboos-licht);
  padding-bottom:4px;margin-bottom:18px;font-weight:600;
}
.p-opening p.p-inleiding{font-size:1.1rem;color:#3a3750;max-width:46ch}

/* ronde uitsnede — nergens anders in de reeks gebruikt */
.p-rond{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--papier-warm)}
.p-rond img{width:100%;height:100%;object-fit:cover}
.p-rond--film video{width:100%;height:100%;object-fit:cover;display:block}
.p-ring{position:relative}
.p-ring::before{
  content:"";position:absolute;inset:-16px;border:1px solid var(--lijn);border-radius:50%;
}
.p-ring::after{
  content:"";position:absolute;inset:-16px;border-radius:50%;
  border:1px solid transparent;border-top-color:var(--framboos);
  transform:rotate(28deg);
}
.p-onderschrift{font-size:.84rem;color:var(--potlood);margin-top:26px;text-align:center}

/* --- knoppen --- */
.p-knop{
  display:inline-block;text-decoration:none;font-size:.92rem;font-weight:600;
  padding:13px 26px;border-radius:26px;border:1px solid var(--inkt);
  background:var(--inkt);color:#fff;transition:background .16s,color .16s,border-color .16s;
}
.p-knop:hover{background:var(--inkt-diep);border-color:var(--inkt-diep);color:#fff}
.p-knop--leeg{background:transparent;color:var(--inkt);border-color:var(--lijn)}
.p-knop--leeg:hover{background:var(--papier-warm);color:var(--inkt);border-color:var(--potlood)}
.p-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* --- secties --- */
.p-vlak{padding:62px 0}
.p-vlak--warm{background:var(--papier-warm)}
.p-vlak--inkt{background:var(--inkt);color:#d9d5e8}
.p-vlak--inkt h2,.p-vlak--inkt h3{color:#fff}
.p-vlak--inkt a{color:var(--framboos-licht)}
/* kaarten met witte ondergrond binnen een donkere sectie houden hun eigen kleuren */
.p-vlak--inkt .p-partij h3{color:var(--inkt)}
.p-vlak--inkt .p-partij a.p-knop{color:#fff}

.p-kop{max-width:60ch;margin-bottom:38px}
.p-kop p{color:var(--potlood);margin-bottom:0}
.p-vlak--inkt .p-kop p{color:#b7b1cc}

/* dunne scheidingsregel met cijfer */
.p-regel{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.p-regel span{
  font-family:"Book Antiqua","Palatino Linotype",serif;font-size:.95rem;color:var(--framboos);
}
.p-regel hr{flex:1;border:0;border-top:1px solid var(--lijn);margin:0}
.p-vlak--inkt .p-regel hr{border-top-color:rgba(255,255,255,.18)}

/* --- portretten (kern van deze site) --- */
.p-portretten{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.p-portret{text-align:center}
.p-portret .p-rond{width:172px;margin:0 auto 20px}
.p-portret h3{margin-bottom:.3em}
.p-portret p{font-size:.95rem;color:var(--potlood);margin:0}
.p-portret__rol{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--framboos);font-weight:600;margin-bottom:.5em;
}

/* --- stappen als genummerde lijst met lijn --- */
.p-stappen{list-style:none;margin:0;padding:0;counter-reset:stap}
.p-stappen li{
  counter-increment:stap;position:relative;padding:0 0 30px 62px;
  border-left:1px solid var(--lijn);margin-left:20px;
}
.p-stappen li:last-child{border-left-color:transparent;padding-bottom:0}
.p-stappen li::before{
  content:counter(stap);position:absolute;left:-20px;top:-4px;
  width:40px;height:40px;border-radius:50%;background:var(--wit);
  border:1px solid var(--lijn);color:var(--inkt);
  font-family:"Book Antiqua","Palatino Linotype",serif;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
}
.p-stappen h3{margin-bottom:.25em}
.p-stappen p{margin:0;color:var(--potlood)}

/* --- aanbieders, gelijkwaardig --- */
.p-drie{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.p-partij{
  background:var(--wit);border:1px solid var(--lijn);border-radius:18px;
  padding:28px 26px 30px;display:flex;flex-direction:column;
}
.p-partij__merkstreep{height:3px;width:46px;border-radius:2px;margin-bottom:18px}
.p-partij h3{margin-bottom:.35em}
.p-partij ul{list-style:none;margin:0 0 22px;padding:0}
.p-partij li{position:relative;padding-left:22px;font-size:.94rem;margin-bottom:9px;color:#413e55}
.p-partij li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--framboos);
}
.p-partij .p-knop{margin-top:auto;align-self:flex-start;font-size:.85rem;padding:11px 22px}

/* --- vraag en antwoord --- */
.p-vragen{max-width:760px}
.p-vraag{border-bottom:1px solid var(--lijn);padding:20px 0}
.p-vraag h3{margin-bottom:.4em}
.p-vraag p{margin:0;color:var(--potlood)}

/* --- verhalen --- */
.p-stukken{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.p-stuk{background:var(--wit);border:1px solid var(--lijn);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.p-stuk img{aspect-ratio:3/2;object-fit:cover;width:100%}
.p-stuk__tekst{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.p-stuk h3{font-size:1.08rem;margin-bottom:.35em}
.p-stuk h3 a{color:var(--inkt);text-decoration:none}
.p-stuk h3 a:hover{color:var(--framboos)}
.p-stuk p{font-size:.93rem;color:var(--potlood);margin:0 0 16px}
.p-stuk__meer{margin-top:auto;font-size:.86rem;font-weight:600;text-decoration:none}

/* --- artikelpagina --- */
.p-artikelkop{padding:56px 0 30px;border-bottom:1px solid var(--lijn)}
.p-artikel{padding:36px 0 60px}
.p-artikel h2{margin-top:1.6em}
.p-artikel ul,.p-artikel ol{padding-left:1.25em;color:#3a3750}
.p-artikel li{margin-bottom:.5em}
.p-uitgelicht{
  border-left:2px solid var(--framboos);background:var(--papier-warm);
  padding:20px 24px;margin:1.8em 0;border-radius:0 14px 14px 0;
}
.p-uitgelicht p:last-child{margin-bottom:0}

/* --- afsluiting --- */
.p-slot{background:var(--inkt);color:#d9d5e8;padding:58px 0;text-align:center}
.p-slot h2{color:#fff}
.p-slot p{max-width:48ch;margin:0 auto 8px;color:#bdb7d1}
.p-slot .p-knop{background:var(--framboos);border-color:var(--framboos)}
.p-slot .p-knop:hover{background:#8d1a4b;border-color:#8d1a4b}

/* --- voetregel --- */
.p-voet{background:var(--papier-warm);border-top:1px solid var(--lijn);padding:44px 0 22px;font-size:.9rem;color:var(--potlood)}
.p-voet h4{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--inkt);margin-bottom:.9em}
.p-voet a{color:var(--potlood);text-decoration:none}
.p-voet a:hover{color:var(--framboos)}
.p-voet__kolommen{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:36px;margin-bottom:26px}
.p-voet__streep{border-top:1px solid var(--lijn);padding-top:16px;font-size:.82rem;color:#635e78}

@media(max-width:900px){
  .p-opening__raster{grid-template-columns:1fr;gap:36px}
  .p-portretten,.p-drie,.p-stukken,.p-voet__kolommen{grid-template-columns:1fr}
  .p-opening{padding-top:40px}
  .p-vlak{padding:46px 0}
}