/* ==========================================================================
   KineMed Aartselaar: publieke site, boeken en afspraaklink. Enkel klassen met p-, enkel tokens uit merk.css.
   Geen eigen kleuren, geen schaduw, geen verloop.
   Eén regel: een vak of kaart is altijd klikbaar. Gewone tekst staat nooit in een vak of tussen lijnen, meldingen uitgezonderd.
   De pagina is Papier; hoogstens één band in Zand-donker, voor praktische info; het slotblok is Den.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paginakop: de H1 draagt het. Op dienst- en pijlerpagina's staat één grote foto ernaast, op gsm eronder.
   Vanaf 60em krijgt de foto meer dan de helft van de breedte, zoals in de opening van de home.
   -------------------------------------------------------------------------- */
.p-kop { padding-block: var(--r-5); }
.p-kop .inleiding { margin-top: var(--r-3); }
.p-knopform { display: inline-flex; margin: 0; }

.p-kop--foto { display: grid; gap: var(--r-5); }
.p-kop--foto > * { min-width: 0; }
@media (min-width: 60em) {
  .p-kop--foto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--r-7); align-items: start; }
}

.p-praktisch { margin-top: var(--r-3); color: var(--tekst-2); }
.p-belregel { margin-top: var(--r-4); }

/* K2.09: een link alleen op zijn regel haalt de tikhoogte van 44 px. */
.p-losse-link { display: inline-flex; align-items: center; min-height: var(--tik); }

/* Lopende tekst: één kolom van hoogstens 40rem, links op dezelfde as als de kop. */
.p-tekst > * { max-width: var(--regel); }

/* De enige band in Zand-donker: meebrengen, voorschrift en tarieven. Twee kolommen als ze allebei passen. */
.p-band { margin-top: var(--r-5); padding-block: var(--r-6); }
.p-band__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--r-6) var(--r-7);
}
.p-band__raster > * { min-width: 0; }

/* Kernzin op manuele therapie: één grote regel */
.p-kernzin {
  max-width: none;
  margin: 0;
  padding-block: var(--r-4) var(--r-2);
  font-size: var(--t-h3);
  font-weight: var(--gewicht-kop);
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Tijdlijn: genummerde stappen. Gsm onder elkaar, computer naast elkaar aan één doorlopende lijn.
   -------------------------------------------------------------------------- */
.p-tijdlijn {
  counter-reset: p-stap;
  display: grid;
  gap: var(--r-5);
  margin: var(--r-5) 0 var(--r-4);
  padding: 0;
  list-style: none;
}
.p-tijdlijn > li {
  counter-increment: p-stap;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--r-3);
  max-width: none;
  margin: 0;
}
.p-tijdlijn > li::before {
  content: counter(p-stap);
  grid-row: 1 / span 2;
  font-size: var(--t-h3);
  font-weight: var(--gewicht-kop);
  line-height: 1.3;
  color: var(--link);
}
.p-tijdlijn h3 { margin: 0; font-size: var(--t-h3); line-height: 1.22; }
.p-tijdlijn p { margin: var(--r-1) 0 0; }
@media (min-width: 48em) {
  .p-tijdlijn { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--r-5); border-top: 2px solid var(--lijn); }
  .p-tijdlijn > li { display: block; padding-top: var(--r-4); }
  .p-tijdlijn > li::before { display: block; margin-bottom: var(--r-2); }
}

/* --------------------------------------------------------------------------
   Meebrengen: gewone lijst met bolletjes in de brede kant van het tweeluik
   -------------------------------------------------------------------------- */
.p-afvink { margin: 0 0 var(--r-4); }
/* K1.08: op gsm staat de tekening onder de lijst, op computer onder de kop, links van de lijst. */
.p-mee { row-gap: var(--r-4); }
@media (min-width: 48em) {
  .p-mee { grid-template-rows: auto 1fr; row-gap: var(--r-4); }
  .p-mee__lijst { grid-column: 2; grid-row: 1 / span 2; }
  .p-mee .p-tekening { grid-column: 1; grid-row: 2; }
}

/* --------------------------------------------------------------------------
   Namen op de home: links in lopende tekst
   -------------------------------------------------------------------------- */
.p-namen {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--r-5);
  margin: var(--r-4) 0;
  padding: 0;
  list-style: none;
}
.p-namen > li { display: flex; align-items: center; min-height: var(--tik); max-width: none; margin: 0; }
.p-namen a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
}

/* --------------------------------------------------------------------------
   Team: raster met kaarten. De link op de naam maakt de hele kaart klikbaar.
   -------------------------------------------------------------------------- */
.p-lidraster { display: grid; gap: var(--r-4); margin: var(--r-4) 0 0; padding: 0; list-style: none; }
.p-lid {
  position: relative;
  display: flex;
  gap: var(--r-4);
  max-width: none;
  margin: 0;
  padding: var(--r-4);
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-den);
  border-radius: var(--hoek);
  scroll-margin-top: var(--r-4);
}
.p-lid:hover { background: var(--kleur-gips); border-color: var(--kleur-den); }
.p-lid__tekst { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.p-lid h2, .p-lid h3 { margin: 0; font-size: var(--t-h3); font-weight: var(--gewicht-kop); }
.p-lid p { margin: var(--r-1) 0 0; }
.p-lid:hover .p-lid__link { text-decoration-thickness: 3px; }
.p-lid__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--hoek); }
.p-lid__link:focus-visible { outline: none; }
.p-lid__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
/* K2.10: elke kaart toont de link op dezelfde manier: de titel in Den, onderlijnd. Lees meer is enkel een hint onderaan. */
.p-lid .p-lid__meer { margin-top: auto; padding-top: var(--r-3); color: var(--link); }
.p-lid__los { margin-top: var(--r-4); scroll-margin-top: var(--r-4); }
/* Portretvlak: bewust in Den, staande verhouding. Staat in de plaats van een portret zolang er geen foto met toestemming is. */
.p-lid__initialen {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 5rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--hoek);
  background: var(--kleur-den);
  color: var(--kleur-zand);
  font-size: var(--t-h2);
  font-weight: var(--gewicht-kop);
  letter-spacing: -0.015em;
}

/* Pagina van één teamlid: foto of initialen naast de naam */
.p-lidkop { display: grid; gap: var(--r-5); }
.p-lidkop > * { min-width: 0; }
.p-lidkop .p-lid__initialen { width: 8rem; font-size: var(--t-h1); }

@media (min-width: 48em) {
  .p-lidraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-lidkop { grid-template-columns: minmax(0, 15rem) minmax(0, var(--regel)); gap: var(--r-7); align-items: start; }
  .p-lidkop .p-lid__initialen { width: 100%; }
}
@media (min-width: 64em) {
  .p-lidraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* /aanmelden/: twee keuzes, dus twee kolommen op elke breedte. */
  .p-lidraster--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Adres: groot adres naast een feitenblad
   -------------------------------------------------------------------------- */
.p-adres { display: grid; gap: var(--r-6); }
.p-adres > * { min-width: 0; }
.p-adres__groot {
  margin-top: var(--r-4);
  font-size: var(--t-h3);
  line-height: 1.5;
}
.p-feiten { margin: 0; }
.p-feiten > div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--r-3);
  align-items: baseline;
}
.p-feiten dt { margin: 0; }
.p-feiten a { display: inline-flex; align-items: center; min-height: var(--tik); padding-block: 0; }
@media (min-width: 48em) {
  .p-adres { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--r-7); align-items: start; }
}

/* Slotblok over de volle breedte */
.p-slot .inleiding { margin-top: var(--r-3); }

/* Dienstenlijst: één kaart in Wit, de link op de naam maakt de hele rij klikbaar. Enkel wat klikbaar is, houdt lijnen. */
.p-dienstrij {
  max-width: var(--regel);
  margin: var(--r-4) 0 0;
  padding: 0;
  overflow: hidden;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-den);
  border-radius: var(--hoek);
  list-style: none;
}
.p-dienstrij > li {
  position: relative;
  max-width: none;
  margin: 0;
  padding: var(--r-2) var(--r-4);
}
.p-dienstrij > li + li { border-top: 1px solid var(--kleur-rand); }
.p-dienstrij > li:hover { background: var(--kleur-gips); }
.p-dienstrij p { margin-top: 0; }
.p-dienstlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tik);
  font-weight: var(--gewicht-nadruk);
  line-height: 1.2;
}
.p-dienstlink::after { content: ""; position: absolute; inset: 0; }
.p-dienstlink:focus-visible { outline: none; }
.p-dienstlink:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }  /* binnen de kaart: overflow knipt de rand anders af */

/* --------------------------------------------------------------------------
   Tekeningen: lijn in den, één punt. Oker op Papier en Wit (3,08:1), Den op Zand en Gips (oker haalt daar 2,74:1). Gsm onder de tekst, computer ernaast.
   -------------------------------------------------------------------------- */
.p-tekening {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  aspect-ratio: 4 / 3;
  color: var(--kleur-den);
}
.p-tekening polyline, .p-tekening rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 56;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.p-tekening .p-tekening__punt { fill: var(--kleur-oker); stroke: none; }
/* Op gips is het punt Den: die regel staat in merk.css, bij .op-gips. */

.p-met-tekening { display: grid; gap: var(--r-5); }
.p-met-tekening > * { min-width: 0; }
h2 + .p-tekening { margin-top: var(--r-4); }

/* Kop van een pagina die enkel tekst heeft: klein onder de knop op gsm, zodat het formulier niet ver wegzakt. */
.p-kop--tekening { display: grid; gap: var(--r-5); }
.p-kop--tekening > * { min-width: 0; }
.p-kop--tekening .p-tekening { max-width: 10rem; }

@media (min-width: 48em) {
  .p-kop--tekening { grid-template-columns: minmax(0, var(--regel)) minmax(0, 15rem); gap: var(--r-7); align-items: center; }
  .p-kop--tekening .p-tekening { max-width: none; }
  .p-met-tekening { grid-template-columns: minmax(0, var(--regel)) minmax(0, 15rem); gap: var(--r-7); align-items: center; }
}

@media (forced-colors: active) {
  .p-tekening polyline, .p-tekening rect { stroke: CanvasText; }
  .p-tekening .p-tekening__punt { fill: CanvasText; }
}

@media print {
  .p-tekening, .p-kopbeeld { display: none !important; }
}

/* --------------------------------------------------------------------------
   Stille schil: boeken en afspraaklink
   -------------------------------------------------------------------------- */
/* Op 360 px: logo 120 + Aanmelden 110 + belknop 153 + 2 x 8 = 399 px, inhoud 328 px. De belknop staat dus op rij 2, over de hele breedte. Vanaf 480 px op één rij. */
.kop .p-kop-bel { flex: 1 0 100%; min-height: var(--tik); padding-inline: var(--r-3); font-size: var(--t-klein); white-space: nowrap; }
@media (min-width: 30em) {
  .kop .p-kop-bel { flex: none; }
}
.p-stille-voet { padding-block: var(--r-4); }
.p-stille-voet p { max-width: none; font-size: var(--t-klein); }
.p-link-moment { margin-block: var(--r-4); }

/* Keuzes in de boeking: echte knoppen over de hele breedte */
.p-stapvraag { margin-top: var(--r-5); font-size: var(--t-h3); }
.p-keuzelijst { display: grid; gap: var(--r-2); margin: var(--r-3) 0 var(--r-4); padding: 0; list-style: none; }
.p-keuzelijst > li { max-width: none; margin: 0; }
.p-keuze { justify-content: space-between; text-align: left; flex-wrap: wrap; gap: 0 var(--r-3); }
.p-keuze__duur { font-weight: var(--gewicht-tekst); white-space: nowrap; }
.p-keuzekop { display: flex; flex-wrap: wrap; gap: 0 var(--r-3); margin-top: var(--r-5); font-size: var(--t-h3); align-items: baseline; }

/* Wat de patiënt koos */
.p-samenvatting { margin: var(--r-4) 0; }
.p-samenvatting > div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--r-3);
  padding-block: var(--r-1);
}
.p-samenvatting dt { margin: 0; }