/* =========================================================================
   VERSIE 2 · "Wat is er aan de hand?"
   Een andere compositie, geen andere kleurstelling (LESSONS regel 24). V1
   vertelt het verhaal van de verbouwing en is fotogedreven, met een zwarte
   balk, gecondenseerde kapitalen en een groot beeld naast de kop. V2 begint
   bij de reden dat iemand de telefoon pakt, namelijk dat er iets stuk is, en
   is daarom een register: geen foto boven de vouw, een genummerde
   symptomenlijst als hero, en per symptoom een antwoordblok.

   Deelt geen enkele letter met V1: Newsreader in plaats van Oswald en Inter.

   TOKENS, gemeten voordat een component ze gebruikte:
     ink    #161512  papier 17,33 · papier2 15,73 · card 18,26 · GEEL 11,42
     muted  #55564f  papier  7,04 · papier2  6,39 · card  7,42
     onInk  #f0eee7  ink    15,73 · slate   11,61
     dimInk #a9aaa1  ink     7,78 · slate    5,75
   Het geel blijft ook hier vulling en nooit letterkleur op licht: dat is een
   eigenschap van de kleur, niet van de compositie.
   ========================================================================= */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/newsreader-400.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../font/newsreader-600.woff2") format("woff2");
}

#version-v2 {
  --paper: #faf9f5;
  --paper-2: #f0eee7;
  --card: #ffffff;
  --ink: #161512;
  --muted: #55564f;
  --rule: #d8d5cb;
  --slate: #2e2f2b;
  --on-ink: #f0eee7;
  --dim-ink: #a9aaa1;
  --yellow: #dbd10d;   /* markering, draagt --ink */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --gut: clamp(18px, 4.4vw, 64px);
  --maxw: 1120px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
}

#version-v2 ::selection { background: var(--yellow); color: var(--ink); }

.v2-shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gut);
}

/* ---------- kop ---------------------------------------------------------
   Geen plakkende zwarte balk zoals V1. Een gewone koptekst op papier, die
   met de pagina meescrolt.
   ----------------------------------------------------------------------- */

.v2-head { border-bottom: 1px solid var(--rule); }

.v2-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
  padding-block: 22px;
}

.v2-wordmark { text-decoration: none; }

.v2-wordmark strong {
  display: block;
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.01em;
}

.v2-wordmark span { display: block; font-size: 14px; color: var(--muted); }

.v2-head__tel {
  margin-left: auto;
  font-weight: 600;
  font-size: 19px;
  text-decoration: none;
  border-bottom: 3px solid var(--yellow);
  padding-bottom: 2px;
}

/* ---------- hero, het register ------------------------------------------ */

.v2-open { padding-block: clamp(38px, 6vw, 74px) clamp(20px, 3vw, 34px); }

.v2-open__title {
  font-weight: 600;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.v2-open__lead {
  margin-top: 18px;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--muted);
  max-width: 58ch;
}

.v2-open__meta {
  margin-top: 22px;
  font-size: 15px;
  color: var(--muted);
  max-width: 60ch;
}

.v2-open__meta b { color: var(--ink); font-weight: 600; }

/* De index zelf. Rijen, geen kaarten: dit moet als register lezen. */
.v2-index { padding-bottom: clamp(30px, 5vw, 64px); }

.v2-index__list { border-top: 1px solid var(--rule); }

.v2-row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 14px 18px;
  align-items: baseline;
  padding: 18px 4px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.v2-row:hover { background: var(--card); }

.v2-row__n {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.v2-row__t {
  min-width: 0;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.v2-row__go { font-size: 15px; color: var(--muted); white-space: nowrap; }

/* ---------- antwoordblokken ---------------------------------------------- */

.v2-answers { background: var(--paper-2); padding-block: clamp(40px, 6vw, 80px); }

.v2-answer { padding-block: clamp(26px, 3.4vw, 40px); border-bottom: 1px solid var(--rule); }
.v2-answer:last-of-type { border-bottom: 0; }

.v2-answer__grid {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 14px 18px;
  align-items: start;
}

.v2-answer__n {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding-top: 8px;
}

.v2-answer__body { min-width: 0; }

.v2-h2 {
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.v2-answer__body p { margin-top: 12px; color: var(--muted); max-width: 62ch; }
.v2-answer__body p b { color: var(--ink); font-weight: 600; }

.v2-answer__tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

.v2-tag {
  padding: 5px 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  font-size: 14.5px;
  color: var(--ink);
}

/* ---------- riool, het idee keert terug als diagnosetabel ----------------- */

/* table-layout: fixed, want met de automatische lay-out bepaalt de langste
   celinhoud de min-content breedte en liep de tabel op 320 px twaalf pixels
   buiten beeld. Vast betekent dat de kolommen de opgegeven breedte krijgen en
   de tekst er binnen afbreekt. */
.v2-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 18px;
}

.v2-table th,
.v2-table td { overflow-wrap: break-word; }

.v2-table thead th:first-child { width: 44%; }

.v2-table caption {
  text-align: left;
  font-size: 15px;
  color: var(--muted);
  padding-bottom: 10px;
}

.v2-table th,
.v2-table td {
  text-align: left;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: 16px;
}

.v2-table thead th {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
}

.v2-table tbody th { font-weight: 600; }
.v2-table td { color: var(--muted); }

/* ---------- wie het doet -------------------------------------------------- */

.v2-who { padding-block: clamp(44px, 6vw, 84px); }

.v2-who__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.v2-who__figure { min-width: 0; }
.v2-who__figure img { width: 100%; height: auto; }
.v2-who__figure figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }

.v2-who__copy { min-width: 0; }

.v2-pull {
  margin: 20px 0;
  font-size: clamp(21px, 2.6vw, 29px);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-left: 6px solid var(--yellow);
  padding-left: 20px;
}

.v2-facts { margin-top: 24px; border-top: 1px solid var(--rule); }

.v2-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
}

.v2-facts dt { color: var(--muted); }
.v2-facts dd { font-weight: 600; text-align: right; }

/* ---------- ketel --------------------------------------------------------- */

.v2-boiler { background: var(--slate); color: var(--on-ink); padding-block: clamp(40px, 5.5vw, 76px); }

.v2-boiler__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.v2-boiler p { margin-top: 14px; color: var(--dim-ink); max-width: 54ch; }

.v2-boiler__specs { min-width: 0; }
.v2-boiler__specs dl { border-top: 1px solid rgba(240, 238, 231, 0.24); }

.v2-boiler__specs div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(240, 238, 231, 0.24);
  font-size: 15.5px;
}

.v2-boiler__specs dt { color: var(--dim-ink); }
.v2-boiler__specs dd { font-weight: 600; text-align: right; }

/* ---------- contact ------------------------------------------------------- */

.v2-contact { padding-block: clamp(44px, 6vw, 84px); }

.v2-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.v2-bigtel {
  display: inline-block;
  margin-top: 16px;
  font-weight: 600;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 5px solid var(--yellow);
}

.v2-contact address { font-style: normal; margin-top: 16px; font-size: 16.5px; }
.v2-contact address p + p { margin-top: 12px; }
.v2-contact address a { font-weight: 600; }
.v2-reg { font-size: 14.5px; color: var(--muted); }

.v2-area { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }

.v2-area span {
  padding: 5px 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  font-size: 15px;
}

/* ---------- voet ---------------------------------------------------------- */

.v2-foot { border-top: 1px solid var(--rule); padding-block: 26px; }

.v2-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--muted);
}

.v2-foot a { color: var(--ink); font-weight: 600; }

/* ---------- breekpunten --------------------------------------------------- */

@media (max-width: 560px) {
  .v2-row { grid-template-columns: 40px 1fr; }
  .v2-row__go { grid-column: 2; font-size: 14px; }
  .v2-answer__grid { grid-template-columns: 40px minmax(0, 1fr); }
  .v2-head__tel { margin-left: 0; }
  .v2-table thead th:first-child { width: 40%; }
  .v2-table th, .v2-table td { font-size: 15px; padding-right: 10px; }
}