/* ==========================================================================
   Componenten — alles wat op meer dan één pagina terugkomt.
   ========================================================================== */

/* ---- de readout --------------------------------------------------------
   Het samenbindende element van de hele site: elk label, elke eyebrow, elk
   stukje metadata staat in gesperde mono-kapitalen. Eén regel, overal
   toegepast, doet meer voor de samenhang dan een dozijn losse componentstijlen
   — en het past bij het onderwerp, want maatvoering hoort in mono.         */
.readout {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-variant-ligatures: none;
  color: var(--ink-3);
}

.readout--accent { color: var(--accent); }
.readout--ink { color: var(--ink); }

/* Een readout met een streep ervoor: het lijkt op een maatvoeringspijl. */
.readout--marked {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.readout--marked::before {
  content: "";
  width: 1.9rem;
  height: 2px;
  flex: 0 0 auto;
  background: var(--accent);
}

/* ---- knoppen ------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: var(--rule) solid transparent;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  /* 500, niet 600: alleen 400 en 500 worden meegeleverd, dus 600 liet de
     browser een kunstmatige vetversie berekenen. 500 is ook het gewicht van
     de readout, waardoor het mono-systeem consistent blijft. */
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.button:active { transform: translateY(1px); }

.button--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.button--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.button--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}

.button--ghost:hover { border-color: var(--accent); color: var(--accent); }

.button__arrow { transition: transform var(--dur-base) var(--ease-out); }
.button:hover .button__arrow { transform: translateX(4px); }

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* ---- icon-knop (themawissel) -------------------------------------------- */

.icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border: var(--rule) solid var(--border);
  color: var(--ink-2);
  background: transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.icon-button:hover { border-color: var(--accent); color: var(--accent); }

.icon-button svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* ---- links in lopende tekst --------------------------------------------- */

.prose a,
.link {
  color: var(--accent);
  text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
}

.prose a:hover,
.link:hover { text-decoration-color: currentColor; }

.prose > * + * { margin-top: var(--space-s); }
.prose p { max-width: var(--measure); color: var(--ink-2); }

/* ---- kaart -------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--rule) solid var(--border);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.card__body { padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.card__title { font-size: var(--step-2); font-weight: 700; letter-spacing: var(--tracking-tight); }
.card__text { color: var(--ink-2); font-size: var(--step--1); }

/* ---- dienstkaart -------------------------------------------------------- */

.service {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l) 0;
  border-top: var(--rule) solid var(--border);
}

@media (min-width: 56rem) {
  .service {
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-xl);
    align-items: start;
  }
}

.service__code {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.service__title {
  font-size: var(--step-3);
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-2xs);
}

.service__lede { color: var(--ink-2); max-width: 42ch; }

.service__points {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}

.service__point {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.65rem;
  align-items: baseline;
  color: var(--ink-2);
  font-size: var(--step--1);
}

/* Het vinkje is een maatstreepje: een korte horizontale lijn, geen icoon. */
.service__point::before {
  content: "";
  width: 0.85rem;
  height: 2px;
  background: var(--accent);
  transform: translateY(-0.28em);
}

.service__figure { margin: 0; }

/* ---- figuur / foto ------------------------------------------------------ */

.figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--surface-2);
  border: var(--rule) solid var(--border);
}

.figure__img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--card-image-filter);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out);
}

.figure--fixed .figure__img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.figure--tall .figure__img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.figure__caption {
  padding: var(--space-s) var(--space-s) var(--space-m);
  color: var(--ink-2);
  font-size: var(--step--1);
  border-top: var(--rule) solid var(--border);
  background: var(--surface);
}

/* Zoom alleen bij een fijne aanwijzer — op touch blijft hover plakken. */
@media (pointer: fine) {
  .figure--zoom:hover .figure__img { transform: scale(1.03); filter: none; }
}

/* ---- galerij ------------------------------------------------------------
   Metselverband in plaats van een raster met vaste verhouding. Ruim de helft
   van de foto's staat rechtop; die in een 4:3-kader persen snijdt precies weg
   waar het om gaat — de aansluiting bij het plafond of de dagkant. Kolommen
   laten elke foto zijn eigen hoogte houden.

   De leesvolgorde volgt de DOM en dus de kolommen, wat voor een fotoreeks
   zonder verhaallijn de juiste volgorde is.                                 */
.gallery {
  columns: 1;
  column-gap: var(--space-m);
}

@media (min-width: 48rem) { .gallery { columns: 2; } }
@media (min-width: 75rem) { .gallery { columns: 3; } }

.gallery__item {
  break-inside: avoid;
  /* Chromium heeft de neiging een item alsnog te breken zonder deze regel. */
  page-break-inside: avoid;
  margin-bottom: var(--space-m);
}

.gallery__item .figure { width: 100%; }

/* ---- markering / kerncijfers -------------------------------------------- */

.marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr));
  gap: var(--rule);
  background: var(--border);
  border: var(--rule) solid var(--border);
}

/* In een smallere kolom (naast de hero-foto) zou auto-fit soms 3 kolommen
   proberen te persen voor 4 items — een 3+1 restrij. Vast op 2 kolommen
   houdt het een nette 2×2, ongeacht de beschikbare breedte. */
.marks--compact {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-l);
}

.mark {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-m) var(--space-s);
  background: var(--bg);
}

.mark__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.mark__label { color: var(--ink-3); font-size: var(--step--2); line-height: 1.35; }

/* ---- stap (werkwijze) --------------------------------------------------- */

.step {
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-m);
  border-top: 2px solid var(--ink);
}

.step__number {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.step__title { font-size: var(--step-1); font-weight: 700; letter-spacing: var(--tracking-tight); }
.step__body { color: var(--ink-2); font-size: var(--step--1); }

/* ---- certificaat -------------------------------------------------------- */

.cert {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--surface);
  border: var(--rule) solid var(--border);
}

.cert--company { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-soft); }

/* Het "logo" van een certificering is hier een gezet merkteken in plaats van
   een gedownload plaatje: de code in zware display-letters binnen een kader.
   Dat is eerlijker dan het beeldmerk van een instantie kopiëren, en het houdt
   `img-src` vrij van externe origins. */
.cert__badge {
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: 92%;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
  line-height: 1;
}

.cert--company .cert__badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.cert__head { display: flex; align-items: center; gap: var(--space-s); }
.cert__name { font-size: var(--step-1); font-weight: 700; letter-spacing: var(--tracking-tight); }
.cert__kind { color: var(--ink-3); margin-top: 0.2rem; }
.cert__body { color: var(--ink-2); font-size: var(--step--1); }

.cert-note {
  margin-top: var(--space-m);
  padding-left: var(--space-s);
  border-left: 2px solid var(--border-strong);
  color: var(--ink-3);
  font-size: var(--step--1);
  max-width: var(--measure);
}

/* ---- chip --------------------------------------------------------------- */

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.75rem;
  border: var(--rule) solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ---- materiaalregel ----------------------------------------------------- */

.brand {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-s) 0;
  border-top: var(--rule) solid var(--border);
}

.brand__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; }
.brand__note { color: var(--ink-3); font-size: var(--step--1); }

/* ---- contactregel ------------------------------------------------------- */

.detail-list { display: grid; gap: 0; }

.detail {
  display: grid;
  gap: 0.15rem var(--space-m);
  padding: var(--space-s) 0;
  border-top: var(--rule) solid var(--border);
}

@media (min-width: 34rem) {
  .detail { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
}

.detail__value { font-size: var(--step-1); }
.detail__value a { color: var(--ink); text-decoration-color: var(--border-strong); }
.detail__value a:hover { color: var(--accent); }

/* ---- Instagram-kaart ---------------------------------------------------- */

.social-card {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
  background: var(--surface);
  border: var(--rule) solid var(--border);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out);
}

.social-card:hover { border-color: var(--accent); }

.social-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border: var(--rule) solid var(--border-strong);
  color: var(--ink);
}

.social-card:hover .social-card__icon { border-color: var(--accent); color: var(--accent); }

.social-card__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Blok, niet inline: als spans lopen handle en toelichting op één regel in
   elkaar over ("@mtk_afbouw Werk in uitvoering..."). */
.social-card__handle { display: block; font-size: var(--step-1); font-weight: 700; color: var(--ink); }
.social-card__note { display: block; color: var(--ink-3); font-size: var(--step--1); }

/* ---- scroll-reveal ------------------------------------------------------
   Let op: `.no-js [data-reveal]` in base.css zet dit terug naar zichtbaar als
   er geen JavaScript draait of als de modulegraaf niet opstart. Die regel is
   dragend — zonder deze regel is de pagina in dat geval leeg.              */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Bij een zachte navigatie staat de inhoud er al — dan geen overgang, maar
   een directe wissel naar zichtbaar. */
[data-reveal].is-instant { transition: none; }

/* ---- woordsplitsing in de headline -------------------------------------- */

/* De padding geeft stokken en staarten (g, j, p, y) de ruimte die
   overflow:hidden ze anders afsnijdt; de gelijke negatieve marge houdt de
   regelval en woordafstand precies gelijk. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: 0.10em 0.2em;
  padding-inline: 0.12em;
  margin-block: -0.10em -0.2em;
  margin-inline: -0.12em;
}

.split-word__inner {
  display: inline-block;
  transform: translateY(130%);
  transition: transform 820ms var(--ease-out) var(--word-delay, 0ms);
}

[data-split].is-revealed .split-word__inner { transform: translateY(0); }