/*
 * Raster, platen en beweging.
 *
 * Twee dingen sturen dit bestand.
 *
 * EEN LINKERLIJN. Alles op de pagina begint op dezelfde x: het logo, elke h1,
 * elke h2, elke alinea, de voet. In de vorige versie stond de h1 in de
 * fotoband 48px verder naar rechts dan alle koppen eronder, en op desktop
 * zelfs 48px verder dan een marge van 64px. Dat zag je meteen. De botplaat
 * loopt nu door tot de schermrand en zet zijn tekst met padding terug op de
 * lijn van de container, zodat de plaat wel bleedt maar de tekst niet schuift.
 *
 * RONDE VORMEN. Het logo is een cirkel met twee bogen die eruit stralen. De
 * pagina is opgebouwd uit dezelfde familie: platen met een grote radius die
 * over elkaar schuiven, cirkels, pillen en ondiepe bogen. Geen blobs, geen
 * willekeurige afronding: elke waarde komt uit de schaal in tokens.css.
 */

/* overflow-x: clip en niet hidden, want hidden breekt position: sticky. Nodig
 * omdat de bleed met 50vw rekent en 50vw de schuifbalk meetelt. */
body {
  overflow-x: clip;
}

.omhulsel {
  max-width: var(--maat-pagina);
  margin-inline: auto;
  padding-inline: var(--marge-buiten);
}

.raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--ruimte-5);
}

/* ---- Standaardritme in een kolom ------------------------------------------
 * Elk blok in een kolom krijgt lucht van zijn voorganger. Zonder dit plakte
 * alles wat geen .stroom of .stapel is tegen het blok erboven: gemeten 0
 * pixels op veertien plekken, waaronder elke "Bekijk ..."-link onder een
 * lijst. Zo'n link valt dan weg, want hij oogt als de laatste regel van het
 * blok erboven.
 *
 * Twee dingen zijn hier bewust:
 *
 * Een klasse in de selector, geen :where(). Met nul specificiteit verliest de
 * regel van `p { margin: 0 }` uit base.css, en dan doet hij niets.
 *
 * Bovenaan in het bestand, voor .stapel en .stroom. Die hebben dezelfde
 * specificiteit, dus de volgorde bepaalt wie wint, en zij horen te winnen:
 * dit is alleen de terugval voor wat helemaal niets had.
 */
.raster > * > * + *,
.plaat__binnen > * + * {
  margin-block-start: var(--ruimte-6);
}

/* Een kale tekstkolom naast een plaat begint even diep als die plaat.
 *
 * Een plaat zet zijn inhoud 2rem naar binnen. Staat er een kale kolom naast,
 * dan begint de ene kop 32 pixels hoger dan de andere, en dat is precies het
 * soort scheefstand dat je niet kan benoemen maar wel ziet. Een kolom die zelf
 * een plaat is heeft die inspringing al, en wordt overgeslagen. Dat gaat op de
 * eerste plek in de kolom: een dienstpagina heeft een kop en daaronder pas een
 * melding, en die kop hoort wel ingesprongen te worden.
 *
 * Alleen vanaf 48rem: daaronder staan de kolommen onder elkaar en valt er
 * niets uit te lijnen.
 */
@media (min-width: 48rem) {
  .raster:has(> * > .zijkaart) > *:not(:has(> :first-child.zijkaart)) {
    padding-block-start: var(--ruimte-6);
  }
}

/* De boog hoort bij de kop eronder en mag er niet van losgetrokken worden. */
.raster > * > .boog + *,
.plaat__binnen > .boog + * {
  margin-block-start: 0;
}

.raster > * > * + .boog,
.plaat__binnen > * + .boog {
  margin-block-start: var(--ruimte-8);
}

/* Op telefoon EEN kolom, niet twaalf met grid-column: 1 / -1 erop.
 *
 * Twaalf kolommen houden betekent elf tussenruimtes van 24px, samen 264px,
 * terwijl er op een scherm van 320px maar 272px over is na de marges. Het
 * raster wordt dan breder dan het venster en de pagina krijgt horizontale
 * scroll. Gemeten met tools/responsief.mjs: 338px in een venster van 320px. */
@media (max-width: 47.99rem) {
  .raster {
    grid-template-columns: 1fr;
  }
}

/* Vier maten, en niet meer.
 *
 * Er waren er zes, waaronder 7/12 voor tekst en 10/12 voor brede blokken.
 * Zulke maten leest niemand als een keuze: een blok dat vier vijfde van de
 * breedte pakt ziet eruit als een fout. Toegestane indelingen zijn nu alleen
 * vol, 1/2 plus 1/2, en 2/3 plus 1/3. tools/kolommen.mjs faalt op alles
 * daarbuiten.
 *
 * Lopende tekst staat in een halve kolom. Dat is hier gemeten 65 tekens per
 * regel; twee derde zou 88 zijn, en dat is te lang voor een site die onder
 * andere voor mensen met leesproblemen bedoeld is. */
@media (min-width: 48rem) {
  .kolom-vol {
    grid-column: 1 / -1;
  }

  .kolom-2-3 {
    grid-column: span 8;
  }

  .kolom-1-2 {
    grid-column: span 6;
  }

  .kolom-1-3 {
    grid-column: span 4;
  }
}

/* Gecentreerd. Alleen voor de afsluiting van een plaat: een losse link onder
 * een raster hoort bij het geheel en niet bij de laatste kolom. */
.gecentreerd {
  text-align: center;
}

.leesmaat {
  max-width: var(--maat-tekst);
}

/* ---- Secties als ronde platen -------------------------------------------
 * De pagina is een stapel platen. Een botplaat loopt van rand tot rand, heeft
 * een grote radius boven en onder, en schuift een stukje over de sectie
 * erboven. Dat geeft diepte zonder een enkele schaduw.
 */

.sectie {
  padding-block: var(--sectie-lucht);
}

.sectie--strak {
  padding-block: var(--ruimte-7);
}

.plaat {
  position: relative;
  background: var(--bot);
  border-radius: var(--radius-plaat);
  padding-block: var(--sectie-lucht);
  /* Schuift over de sectie erboven heen. */
  margin-block-start: calc(var(--ruimte-6) * -1);
}

.plaat--oker {
  background: var(--oker-zacht);
}

/* ---- De fotoband ---------------------------------------------------------
 * Het beeld loopt van rand tot rand met een ronde onderkant, zodat de foto
 * zelf al een vorm uit de logofamilie is en geen rechthoekige strook.
 */

.band {
  position: relative;
}

.band__beeld {
  width: 100%;
  /* Niet hoger dan 21rem. Hoger duwde de knop Maak een afspraak op een laptop
   * van 1440x900 onder de vouw, gemeten op 1051px. */
  height: clamp(12rem, 34vw, 21rem);
  object-fit: cover;
  border-end-start-radius: var(--radius-plaat);
  border-end-end-radius: var(--radius-plaat);
}

/* Een band halverwege de pagina is een losse ronde kaart, niet een strook van
 * rand tot rand. Dat houdt de stapel platen leesbaar. */
.band--los .band__beeld {
  height: clamp(10rem, 26vw, 17rem);
  border-radius: var(--radius-plaat);
}

/* ---- De botplaat onder de kop --------------------------------------------
 * De plaat loopt links voorbij de containermarge en is rechts afgerond, en
 * zet zijn tekst met evenveel padding terug op de containerlijn. Zo is de
 * plaat een vorm en blijft de tekst uitgelijnd met alles eronder.
 *
 * De vorige versie bleedde met calc(50vw - 50%) tot de schermrand. Dat brak op
 * brede schermen: die padding groeit mee met het venster, terwijl max-width de
 * padding meetelt, dus bleef er op 2000px nog maar een paar honderd pixels
 * voor de tekst over en brak de h1 op een woord per regel. De marge is nu
 * begrensd tot de buitenmarge, en de maximale breedte rekent die padding er
 * expliciet bij op, zodat de tekstbreedte bij elke vensterbreedte gelijk is.
 */

.band__plaat {
  position: relative;
  background: var(--bot);
  /* Ook hier links voorbij de marge en met dezelfde waarde als padding terug,
   * zodat de h1 op de telefoon op precies dezelfde x staat als het logo, de
   * koppen eronder en de voet. Zonder dit stond hij 24px verder naar rechts. */
  margin-inline-start: calc(var(--marge-buiten) * -1);
  margin-inline-end: calc(var(--marge-buiten) * -1);
  padding: var(--ruimte-6) var(--marge-buiten) var(--ruimte-7);
  /* Van rand tot rand op de telefoon, met alleen de onderkant afgerond: hij
   * sluit boven aan op de foto en is onder de afsluiting van het blok. */
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: var(--radius-plaat);
  border-end-end-radius: var(--radius-plaat);
}

@media (min-width: 48rem) {
  .band__plaat {
    /* Over de foto heen. */
    margin-block-start: calc(var(--ruimte-9) * -1);
    /* Naar links voorbij de containermarge, en met dezelfde waarde als padding
     * terug, zodat de tekst op de containerlijn blijft staan. */
    margin-inline-start: calc(var(--marge-buiten) * -1);
    padding-inline-start: var(--marge-buiten);
    padding-inline-end: var(--ruimte-8);
    padding-block: var(--ruimte-8);
    /* De padding zit hier expliciet bij opgeteld, zodat de tekst altijd 38rem
     * krijgt, ongeacht hoe breed het venster is. */
    max-width: calc(38rem + var(--marge-buiten) + var(--ruimte-8));
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
}

.band__plaat > * + * {
  margin-block-start: var(--ruimte-4);
}

/* ---- De tweede plaat naast de kopplaat -----------------------------------
 * Onder elkaar op een smal scherm, naast elkaar zodra er ruimte is. De grens
 * ligt op 64rem en niet op de 48rem van de kopplaat: bij 48rem is de kopplaat
 * al 38rem breed en houdt de tweede nog 8rem over, en daar past geen zin in.
 */
.band__platen > * + * {
  margin-block-start: var(--ruimte-5);
}

.band__naast {
  background: var(--oker-zacht);
  padding: var(--ruimte-6);
  border-radius: var(--radius-groot);
}

@media (min-width: 64rem) {
  .band__platen {
    display: flex;
    align-items: flex-end;
    gap: var(--ruimte-6);
  }

  .band__platen > * + * {
    margin-block-start: 0;
  }

  /* De kopplaat houdt zijn eigen maat, de tweede neemt wat overblijft. */
  .band__plaat {
    flex: 0 1 auto;
    /* De negatieve marge rechts komt uit de regel voor smalle schermen, waar
     * de plaat van rand tot rand loopt. Zolang hij alleen stond, viel dat
     * nergens op. Met een tweede plaat ernaast trok hij die 64px naar links en
     * schoven ze 32px over elkaar heen. Gemeten op 1440 en op 1024. */
    margin-inline-end: 0;
  }

  .band__naast {
    flex: 1 1 0;
    /* Spiegelbeeld van de kopplaat. Die loopt links voorbij de containermarge
     * en is rechts rond; deze loopt rechts voorbij en is links rond. Zo zijn
     * het twee helften van dezelfde vorm in plaats van een plaat met een kaart
     * ernaast. */
    margin-inline-end: calc(var(--marge-buiten) * -1);
    padding-inline-end: var(--marge-buiten);
    padding-block: var(--ruimte-7);
    border-start-start-radius: var(--radius-plaat);
    border-end-start-radius: var(--radius-plaat);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
}

.band__plaat h1 {
  max-width: 16ch;
}

.band__plaat .lead {
  max-width: 40ch;
}

/* ---- Rijen en stapels ---------------------------------------------------- */

.stapel > * + * {
  margin-block-start: var(--ruimte-4);
}

/* Een lijst met opsommingstekens heeft ruimte nodig voor dat teken. Base.css
 * zet de inspringing van elke lijst op nul, en dan tekent de browser de
 * bolletjes buiten de box: links van de tekst, uit de kolom, en in een
 * uitklapper zelfs buiten de plaat. Binnen .stroom gebeurt dit al, maar
 * .stapel-lijsten staan ook in zijkaarten en in accordeons. */
ul.stapel,
ol.stapel {
  padding-inline-start: var(--ruimte-5);
}

.stapel-ruim > * + * {
  margin-block-start: var(--ruimte-6);
}

.rij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
  align-items: center;
}

/* Portretten: gelijke breedte, begrensd door het kleinste beschikbare bestand.
 * Ongelijke formaten in een team van drie lezen als een rangorde die er niet
 * is. Zie DESIGN-SYSTEM.md sectie 4. */
.portretten {
  display: grid;
  gap: var(--ruimte-7) var(--ruimte-5);
  /* Twee naast elkaar op een telefoon. Een kolom liet de cirkels als smalle
   * schijfjes met honderd pixels lege ruimte ernaast staan, en drie mensen
   * onder elkaar lezen niet als een team.
   *
   * minmax(0, 1fr) en niet 1fr: 1fr heeft min-content als ondergrens, dus op
   * 320px duwde de langste naam de kolom naar 104px en liep het portret 9
   * pixels buiten zijn raster. Gemeten. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .portretten {
    grid-template-columns: repeat(3, minmax(0, var(--portret-groot)));
    justify-content: center;
    gap: var(--ruimte-7) var(--ruimte-6);
  }

  /* Evenveel kolommen als mensen. Met drie kolommen van 1fr en twee
   * logopedisten bleef de derde leeg: de portretten stonden links met 363
   * pixels gat ernaast, gemeten op 1440. Zelfde aanpak als .galerij met een
   * enkel beeld.
   *
   * auto-fit werkt hier niet: bij minmax met een vaste bovengrens telt de
   * browser het aantal kolommen met die bovengrens, niet met de ondergrens,
   * en dan stond alles tot 768px onder elkaar. Ook gemeten. */
  .portretten:not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, var(--portret-groot)));
  }

  .portretten:not(:has(> :nth-child(2))) {
    grid-template-columns: minmax(0, var(--portret-groot));
  }
}

/* ---- Beweging bij het in beeld komen -------------------------------------
 * Op animation-timeline: view(), dus zonder JavaScript en zonder waarnemer.
 *
 * Dit staat binnen @supports. Kent de browser het niet, dan gebeurt er
 * niets en staat alles er gewoon. Inhoud wordt NOOIT op opacity 0 gezet in
 * afwachting van een script: dat is precies hoe een pagina leeg blijft als er
 * iets misgaat.
 *
 * De vertraging tussen elementen komt uit animation-range, niet uit een
 * teller in JavaScript.
 */

@keyframes opkomen {
  from {
    opacity: 0;
    transform: translateY(var(--opkomst));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes boog-tekenen {
  from {
    stroke-dashoffset: var(--booglengte);
  }

  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .onthul {
      animation: opkomen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    /* Volgt een stukje later, zodat een kop en zijn tekst niet als een blok
     * opkomen maar na elkaar. */
    .onthul--na {
      animation-range: entry 8% entry 65%;
    }

    .onthul--laat {
      animation-range: entry 16% entry 75%;
    }

    .boog-lijn {
      animation: boog-tekenen linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }
  }
}

/* Binnenkant van een plaat. De plaat zelf zit al in een .omhulsel, dus hier
 * geen tweede containermarge: dat zou de tekst van de linkerlijn afduwen. */
.plaat__binnen {
  padding-inline: var(--ruimte-5);
}

@media (min-width: 48rem) {
  .plaat__binnen {
    padding-inline: var(--ruimte-7);
  }
}

/* ---- Doorlopende tekst -----------------------------------------------------
 * Een kop krijgt lucht boven zich, alinea's een vast ritme. Zonder dit staat
 * een h2 even dicht op de alinea erboven als op de zijne eronder, en valt de
 * structuur weg.
 */

.stroom > * + * {
  margin-block-start: var(--ruimte-4);
}

.stroom > h2,
.stroom > .boog {
  margin-block-start: var(--ruimte-8);
}

/* Behalve als hij bovenaan staat. Die 4rem hoort tussen een kop en de tekst
 * erboven; op het eerste kind duwt hij de hele kolom omlaag en staat de kop 64
 * pixels lager dan de kop van de kolom ernaast. Gemeten op /over/. */
.stroom > :first-child {
  margin-block-start: 0;
}

.stroom > .boog + h2 {
  margin-block-start: 0;
}

.stroom > .galerij,
.stroom > .beeld-staand {
  margin-block-start: var(--ruimte-6);
}

.stroom p,
.stroom ul,
.stroom ol {
  max-width: var(--maat-tekst);
}

.stroom ul,
.stroom ol {
  padding-inline-start: var(--ruimte-5);
}

.stroom li + li {
  margin-block-start: var(--ruimte-2);
}

.stroom blockquote {
  /* margin-inline en niet margin: een blanco margin haalde ook de bovenmarge
   * weg die .stroom > * + * net had gezet, en dan plakte het citaat tegen de
   * alinea erboven. */
  margin-inline: 0;
  padding: var(--ruimte-5) var(--ruimte-6);
  background: var(--oker-zacht);
  border-radius: var(--radius-groot);
  font-size: var(--tekst-l);
  line-height: var(--regelhoogte-lead);
  max-width: var(--maat-tekst);
}

.stroom blockquote p {
  margin: 0;
}

/* ---- Dienstenlijst in twee kolommen --------------------------------------
 * In een brede plaat staat een lijst van zes in een kolom er verloren bij.
 */
@media (min-width: 62rem) {
  .dienstlijst--twee {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--ruimte-8);
  }

  /* De bovenlijn hoort bij de rij, niet bij het item: anders krijgt het eerste
   * item van de tweede kolom er geen. */
  .dienstlijst--twee li + li {
    border-block-start: 0;
  }

  .dienstlijst--twee li {
    border-block-end: var(--lijn);
  }

  .dienstlijst--twee li:nth-last-child(-n+2) {
    border-block-end: 0;
  }
}

/* ---- Afdrukken -----------------------------------------------------------
 * Bij het afdrukken is er geen scrollpositie, dus een animatie op
 * animation-timeline: view() blijft op zijn beginwaarde staan en dan komt de
 * halve pagina er niet op. Iemand die de tarieven wil meenemen naar de
 * huisarts, krijgt anders een vel met alleen de kop erop.
 *
 * Hier gaat alle beweging uit en staat alles gewoon zichtbaar.
 */
@media print {
  .onthul,
  .onthul--na,
  .onthul--laat,
  .boog-lijn {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }

  /* Geen platen, geen vlakken: dat kost alleen inkt. */
  .plaat,
  .zijkaart,
  .band__plaat {
    background: none;
    padding-inline: 0;
    margin-inline: 0;
  }

  .melding,
  .kop,
  .voet,
  .band__beeld {
    display: none;
  }

  /* Een link is op papier niets waard zonder de URL erbij. */
  .stroom a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--tekst-xs);
    word-break: break-all;
  }
}

/* ---- Tweeluik ------------------------------------------------------------
 * Tekst links, iets zinnigs rechts. Bestaat omdat zeven secties maar 47 tot 57
 * procent van de containerbreedte gebruikten en de rechterhelft leeg lieten.
 * Gemeten met tools/responsief.mjs.
 *
 * De oplossing is niet de tekst breder maken: boven de 68 tekens per regel
 * leest het slechter. De ruimte wordt gevuld met iets dat er hoort te staan,
 * zoals een inhoudsopgave bij een lang document of een portret bij een bio.
 */

.tweeluik {
  display: grid;
  gap: var(--ruimte-6);
  align-items: start;
}

@media (min-width: 52rem) {
  .tweeluik {
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: var(--ruimte-8);
  }

  /* Portret links, tekst rechts: voor de bios, waar het gezicht bij de tekst
   * hoort te staan. De naam staat onder het portret en is de kop van dat
   * stuk, dus het portret hoort links en niet rechts: anders begint de tekst
   * zonder zichtbare kop erboven. */
  .tweeluik--portret {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

/* Drie bios onder elkaar liepen in elkaar over: de laatste alinea van de een
 * raakte de eerste van de ander en alleen het portret links verried dat er
 * iemand anders aan het woord was. Een lijn en lucht ertussen. */
.bio + .bio {
  margin-block-start: var(--ruimte-7);
  padding-block-start: var(--ruimte-7);
  border-block-start: var(--lijn);
}

/* Twee kolommen accordeons in een brede plaat. Een rij van zes uitklappers in
 * een halve kolom laat de andere helft leeg. */
@media (min-width: 52rem) {
  .vragen--twee {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ruimte-3) var(--ruimte-5);
    align-items: start;
  }

  .vragen--twee .vraag + .vraag {
    margin-block-start: 0;
  }
}

/* ---- Inhoudsopgave bij een lang document --------------------------------- */

.inhoudsopgave {
  background: var(--bot);
  border-radius: var(--radius-groot);
  padding: var(--ruimte-5);
}

@media (min-width: 52rem) {
  .inhoudsopgave {
    position: sticky;
    top: var(--ruimte-5);
  }
}

.inhoudsopgave h2 {
  font-size: var(--tekst-s);
  font-weight: var(--gewicht-vet);
  color: var(--klei);
  margin-block-end: var(--ruimte-3);
}

.inhoudsopgave ol {
  list-style: none;
  counter-reset: punt;
}

.inhoudsopgave li {
  counter-increment: punt;
}

.inhoudsopgave li + li {
  margin-block-start: var(--ruimte-1);
}

/* 2.75rem is 44 pixels: het kleinste raakvlak dat een vinger betrouwbaar
 * raakt. Met alleen padding kwam de rij op 42 uit. Gemeten met
 * tools/responsief.mjs op vijftien breedtes. */
.inhoudsopgave a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--radius-midden);
  font-size: var(--tekst-s);
  color: var(--ink);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .inhoudsopgave a:hover {
    background: var(--wit);
  }
}