/*
 * Aanvulling op components.css uit het ontwerppakket.
 *
 * HIER STAAT ALLEEN WAT HET PAKKET NIET DEKT. De catalogus levert losse
 * componenten; een pagina heeft daarnaast een paar verbindingsstukken nodig
 * - de bewijstabel, de genummerde stappen, het gat in de contactgegevens.
 *
 * Alles hieronder gebruikt de tokens uit tokens.css. Er komt geen enkele
 * nieuwe kleur, radius of afstand bij: het ontwerp is gegeven en de opdracht
 * zegt uitdrukkelijk geen nieuwe esthetische richting te kiezen.
 */

/* ---------- Hero ---------- */

/* De hero draagt de H1 en hoeft bovenin niet zo veel lucht als een sectie
   midden op de pagina: de kop staat al onder een rand. */
.kp-hero {
  padding-block: 4rem 6rem;
}

/* De proof-rij is in de catalogus een div. Hier is het een lijst, want het
   zijn drie gelijkwaardige punten - dat hoort een schermlezer te weten. */
.kp-proof {
  list-style: none;
  padding-left: 0;
}
.kp-proof li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

/* Lijniconen, geen vlakken: ze staan naast tekst en moeten op 20 px nog
   leesbaar zijn. currentColor, zodat ze meekleuren met de tekst eromheen. */
.kp-icoon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: var(--kp-primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Genummerde stappen ---------- */

/*
 * De nummers komen uit de mockup en staan er niet als versiering: dit is de
 * volgorde waarin een klant het meemaakt - eerst een vrije tijd, dan de
 * bevestiging, dan de herinnering. Een eigen teller in plaats van de
 * browserstandaard, omdat 01 en 02 anders als 1. en 2. verschijnen.
 */
.kp-stappen {
  list-style: none;
  counter-reset: stap;
  margin: 2rem 0 0;
  padding: 0;
}
.kp-stappen li {
  counter-increment: stap;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--kp-border);
  font-weight: 600;
}
.kp-stappen li::before {
  content: counter(stap, decimal-leading-zero);
  font-family: var(--kp-font-heading);
  font-weight: 700;
  color: var(--kp-muted);
  font-variant-numeric: tabular-nums;
}
.kp-stappen li:last-child {
  border-bottom: 1px solid var(--kp-border);
}

/* ---------- Koppen en roosters binnen een sectie ---------- */

/* Een tweede kop verderop in dezelfde sectie heeft lucht boven zich nodig,
   anders plakt hij aan het blok ervoor. */
.kp-kop-midden {
  margin-top: 5rem;
}

/* Kaarten van ongelijke lengte horen bovenaan uitgelijnd te staan. De
   catalogus centreert (`align-items:center`), wat klopt voor tekst naast een
   beeld maar niet voor twee kaarten naast elkaar: dan zweeft de korte. */
.kp-grid-top {
  align-items: start;
}

/* ---------- Puntenlijsten in kaarten ---------- */

.kp-punten {
  margin: 0;
  padding-left: 1.125rem;
  font-size: 1rem;
  color: var(--kp-muted);
}
.kp-punten li {
  padding-block: 0.25rem;
}

/* ---------- De bewijstabel ---------- */

/* Een tabel is hier het juiste element en geen opmaakkeuze: het zijn paren
   van bewering en onderbouwing, en die hebben kopcellen nodig. */
.kp-tabel-houder {
  overflow-x: auto;
  margin-top: 2rem;
}
.kp-tabel {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 1rem;
  text-align: left;
}
.kp-tabel caption {
  text-align: left;
  color: var(--kp-muted);
  font-size: 0.875rem;
  padding-bottom: 1rem;
}
.kp-tabel th,
.kp-tabel td {
  border-top: 1px solid var(--kp-border);
  padding: 1rem 1.5rem 1rem 0;
  vertical-align: top;
}
.kp-tabel thead th {
  border-top: 0;
  border-bottom: 2px solid var(--kp-ink);
  padding-top: 0;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kp-tabel tbody th,
.kp-tabel tbody td:first-child {
  font-weight: 600;
  width: 34%;
}
.kp-tabel td:last-child {
  color: var(--kp-muted);
}
.kp-tabel code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
    monospace;
  font-size: 0.9em;
  background: var(--kp-surface);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  /* Een lange constraintnaam mag de tabel niet breder maken dan het scherm. */
  overflow-wrap: anywhere;
}

/* ---------- Vragen ---------- */

.kp-vragen {
  margin-top: 4rem;
  max-width: 44rem;
}
.kp-vragen .kp-details:last-child {
  border-bottom: 1px solid var(--kp-border);
}

/* ---------- Een gat in de inhoud ---------- */

/*
 * Dit blok hoort op te vallen, want het is een rem op publicatie en geen
 * ontwerpelement. Kobalt gestippeld: duidelijk niet af, en duidelijk geen
 * foutmelding.
 */
.kp-gat {
  margin-top: 4rem;
  border: 2px dashed var(--kp-primary);
  border-radius: var(--kp-radius-card);
  padding: 1.5rem;
  background: var(--kp-white);
}
.kp-gat-kop {
  font-family: var(--kp-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kp-primary);
  margin-bottom: 0.75rem;
}
.kp-gat p:last-child {
  margin: 0;
  color: var(--kp-muted);
  font-size: 1rem;
}

/* ---------- Voet ---------- */

/* De voet staat op inktzwart; de secundaire knop is daar wit-op-wit en de
   rand valt weg. Hij krijgt daarom zijn eigen rand terug. */
.kp-footer .kp-button-secondary {
  border-color: var(--kp-border);
}
.kp-footer p {
  color: #d7dae2;
}
.kp-footer small {
  color: #a8adba;
  max-width: 60ch;
}

/* ---------- Smaller dan 768 ---------- */

@media (max-width: 767px) {
  .kp-hero {
    padding-block: 2.5rem 3.5rem;
  }
  .kp-kop-midden {
    margin-top: 3rem;
  }
  .kp-vragen,
  .kp-gat {
    margin-top: 2.5rem;
  }
  /* De tabel blijft leesbaar door te schuiven in zijn eigen houder; de
     pagina zelf schuift niet mee. */
  .kp-tabel {
    min-width: 28rem;
  }
  .kp-tabel th,
  .kp-tabel td {
    padding-right: 1rem;
  }
}

/* ---------- Aanraakdoel van het woordmerk ---------- */

/*
 * Het woordmerk is een link naar de bovenkant van de pagina en werd daarmee
 * een aanraakdoel van 32 px hoog - onder de 44 px uit de acceptatielijst.
 * De lettergrootte blijft wat hij was; alleen het raakvlak groeit, zodat
 * het ontwerp niet verandert en de duim wel raak heeft.
 */
.kp-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ---------- Regelval van koppen ---------- */

/*
 * De H1 loopt op elke desktopbreedte over drie regels: "Minder voor de
 * agenda." past bij 64 px niet in een halve container van 648 px, terwijl de
 * mockup twee regels toont. De maat uit tokens.css blijft leidend - die staat
 * in de rangorde boven de mockup - maar zonder hulp valt de derde regel als
 * een los woord onderaan.
 *
 * `text-wrap: balance` verdeelt de regels gelijkmatig. Browsers die het niet
 * kennen negeren het en houden het huidige gedrag; er gaat dus niets stuk.
 */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* ======================================================================
   Rondleidingspagina
   ====================================================================== */

/* Een leeskolom is smaller dan de volle container: lopende tekst leest niet
   prettig over 1280 px. */
.kp-leeskolom {
  max-width: 44rem;
}

.kp-terug {
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.kp-terug:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.kp-rondleiding {
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.kp-scherm {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* 16:10 ligt vast VOORDAT er een afbeelding in zit, zodat de pagina niet
   verspringt zodra de schermafdrukken erin gaan. */
.kp-scherm-beeld {
  aspect-ratio: 16 / 10;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.kp-scherm-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Zodra er een echte afdruk in zit hoort er een rand omheen: een lichte
   schermafdruk op een witte pagina heeft anders geen begrenzing. */
.kp-scherm:not(:has(.kp-gat)) .kp-scherm-beeld {
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-card);
  background: var(--kp-white);
}
.kp-pad {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
    monospace;
  font-size: 0.875rem;
  color: var(--kp-muted);
  margin: 0;
}

.kp-scherm-naam {
  font-family: var(--kp-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Het nummer staat ALLEEN op de boekingsstappen, want alleen die zijn een
   volgorde. De beheerschermen hebben er geen, en dat is geen vergissing. */
.kp-stap {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--kp-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Twee schermen dragen het verhaal: de vrije tijden en de weekagenda. */
.kp-nadruk figcaption {
  border-left: 3px solid var(--kp-primary);
  padding-left: 1.125rem;
}
.kp-scherm figcaption p:last-child {
  margin-bottom: 0;
}

.kp-telefoons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.kp-telefoon {
  aspect-ratio: 9 / 19;
  flex: 1 1 15rem;
  max-width: 17rem;
}

@media (max-width: 767px) {
  .kp-rondleiding {
    gap: 2.5rem;
  }
}