/* Badkamer renovatie — what only this page needs (template2-fotos, 2026-10-02). Linked after dienst.css, which every
   service page links as its base and which stays as it is. Every place shows the operator's picks
   (whatsapp/plaatsen/badkamer.md) in the fold's form, as the vloerverwarming page has it: the large picture, a row of
   thumbnails under it (../diensten.css shapes them) and the "+N" tile after the last one; script.js fills the row with
   as many as fit and counts the rest on the tile. A section stays one block. Each frame is chosen so the picture's
   focus (data-focus) stands whole at every width, and ../../focus.js crops around it. */

/* ==================================================== A PLACE: the large picture with its thumbnails under it */
.plek__groot { display: block; }
.plek__duimen { margin-top: 14px; align-items: flex-end; }
@media (max-width: 560px) {
  .plek__duimen { margin-top: 10px; }
}

/* ==================================================== OPENING: n=116 in its own shape (dienst.css); under it n=62, 5,
   367 and the "+30", shaped by ../diensten.css. From 961 up the picture runs no wider than the desktop fold's cap
   (../diensten.css, 1320 / 1419 its shape), so the row under it stops where the picture stops. */
@media (width > 960px) {
  .intro__duimen { width: min(100%, calc(clamp(480px, 44vw, 600px) * 1320 / 1419)); }
}

/* ==================================================== 1 · LEIDINGWERK EN AFVOER: the card's column holds n=3 alone (4:5,
   square from 960 down; its focus, 0.1 0.05 0.85 0.7, stands whole in both) with n=507, 494 and the "+22" under it */
.s-leiding .kaart__fotos { grid-area: strook; min-width: 0; }
.s-leiding .strook { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) {
  .s-leiding .kaart__fotos { max-width: 460px; }
}

/* ==================================================== 2 · INLOOPDOUCHE: the four styles became one shower large (n=64,
   3:4: the whole picture, so its focus, 0.1 0 0.85 0.95, stands whole) with n=8, 365, 397 and the "+27" under it. The
   column stays in view while the words run, so on a low screen the picture narrows rather than its thumbnails
   dropping below the edge. */
.s-inloop .inloop__fotos { position: sticky; top: 24px; align-self: start; margin: 0; }
.s-inloop .plek__groot, .s-inloop .plek__duimen { width: min(100%, max(360px, calc((100vh - 170px) * 3 / 4))); }
.s-inloop .plek__groot { aspect-ratio: 3 / 4; }
@media (max-width: 960px) {
  .s-inloop .inloop__fotos { position: static; max-width: 460px; }
  .s-inloop .plek__groot, .s-inloop .plek__duimen { width: 100%; }
}

/* ==================================================== 3 · COMPLETE BADKAMERRENOVATIE: the slider stays (n=102 → 114, cut to
   line up); under it three pairs from the same door, each two thumbnails with Voor / Na and its place, then n=110 and
   the "+12". The column stays in view while the words run, so it has to fit the screen whole: on a low screen the
   slider narrows (its 7:8 and the 258 px under it, within the screen's height) rather than the pairs dropping below
   the edge. */
@media (width > 960px) {
  .compleet__ba { justify-self: end; width: min(100%, max(380px, calc((100vh - 300px) * 7 / 8))); }
}
.paren { margin-top: 16px; }
.paren__kop { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--lood-zacht); }
.paren__rij { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.paren__paar { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.paren .paar__duimen { gap: 4px; }
.paren .label--plain { font-size: 12px; }
.paren__meer { margin-top: 14px; }
.paren__meer .duim { box-shadow: 0 0 0 2px var(--kalk), 0 2px 8px rgba(38, 51, 58, .2); }
.paren__meer .duim:hover { box-shadow: 0 0 0 2px var(--dakpan), 0 4px 12px rgba(38, 51, 58, .24); }

/* ==================================================== 4 · ZOLDERBADKAMER: the light panel's column holds n=59 at 4:5 (its
   focus, 0.05 0.05 0.9 0.9, stands whole between 0.68:1 and 0.83:1) with n=67, 74, 382 and the "+24" under it */
.s-zolder .zolder { display: block; }
.s-zolder .plek__groot { aspect-ratio: 4 / 5; }

/* ==================================================== 5 · TOILET VERVANGEN: under the heavy rule, the lead beside one
   toilet large, n=456 square (its focus, 0.25 0.3 0.65 0.62, stands whole from 0.49:1 to 1.21:1) in a column as wide
   as the framed list under it, with n=376, 245 and the "+28" under it; from 860 down it stands above the lead */
.s-toilet .wc { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.s-toilet .wc__fotos { display: block; overflow: visible; margin-right: 0; padding-right: 0; }
.s-toilet .plek__groot { aspect-ratio: 1 / 1; }
@media (max-width: 860px) {
  .s-toilet .wc { grid-template-columns: minmax(0, 1fr); }
  .s-toilet .wc__fotos { max-width: 460px; }
}