/* Cv-ketel vervangen — what placing this page's own pictures needs, on top of ../../style.css, ../diensten.css and
   ../badkamer-renovatie/dienst.css (all three linked before it, none of them edited). No new colours, shapes or
   parts: every frame below is one of the badkamer page's, shaped for the picture it holds, so that the picture's
   focus (data-focus, whatsapp/plaatsen/cv.md) stands whole at every width; ../../focus.js crops around it.
   2026-10-02 (template2-fotos): every place shows its picks, in the vloerverwarming page's form: the large picture,
   the thumbnails under it (../diensten.css shapes them), and the "+N" tile after the last one (../../style.css);
   script.js fills each row as far as it reaches. A section stays one block.

   The pictures, as cut into ../../fotos/ (focus in fractions of the file as served):
   - n=1   cv-ketel-koperwerk-ijmuiden.jpg        1320×1757  0 0 1 0.72      (as it was)
   - n=482 intergas-combiketel-expansievat-2022   1200×1600  0.05 0.08 0.9 0.67 (the other firm's stickers blurred)
   - n=2   ketelruimte-zonneboiler-ijmuiden       942×1256   0 0 1 0.97      (the screenshot's black bars cut off)
   - n=163 cv-ketel-nefit-koperwerk               1200×1200  0.05 0 0.9 0.96 (the stained floor cut off)
   - n=159 cv-ketel-inbouwkast                    620×930    0 0 1 1         (router, cables and tools cut off)
   - n=353 designradiator-wastafel-2024           1200×1600  0.1 0.25 0.85 0.65
   - n=348 paneelradiator-verzinkte-leidingen-2024 1200×1600 0 0.1 0.75 0.85 */

/* ==================================================== OPENING: n=1 square or a hair wider (the full width and the top
   73%, so its focus stands whole and the floor stays out); the thumbnails (n=482, n=2) and the "+7" are upright,
   3:4, from ../diensten.css */
.intro__groot img { aspect-ratio: 1320 / 1280; }
.intro__groot { --groot-vorm: calc(1320 / 1280); }   /* the same shape as a number: the desktop fold's cap (../diensten.css) */

/* ==================================================== A PLACE: the large picture with its thumbnails under it, the
   fold's form (as on the vloerverwarming page) */
.plek { margin: 0; }
.plek__groot { display: block; }
.plek__duimen { margin-top: 14px; align-items: flex-end; }
@media (max-width: 560px) {
  .plek__duimen { margin-top: 10px; }
}

/* ==================================================== 1 · CV-LEKKAGE OPSPOREN: the card's column of work. n=163 square
   (as cut: the ketel and its pipes, the floor gone), under it the "+2" (n=353, 348) */
.s-leiding .kaart__fotos { grid-area: strook; min-width: 0; }
.strook--een { grid-template-columns: minmax(0, 1fr); }
.strook--een li .tegel { aspect-ratio: 1 / 1; }
@media (max-width: 960px) {
  .s-leiding .kaart__fotos { max-width: 340px; }
}

/* ==================================================== 2 · KETEL VERPLAATSEN: the changed ground, a column of 400px that
   stays in view while the words run. n=159 stands 2:3, the shape of its cut (the ketel and its pipes, between the
   router on the left and the tools on the floor), with the "+1" (n=403) under it. While it stays in view it has to fit
   the screen whole, thumbnail included, so on a low screen the picture narrows. */
.inloop--een { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.verplaatsen__fotos { position: sticky; top: 24px; align-self: start; }
.verplaatsen__fotos .plek__groot { aspect-ratio: 2 / 3; width: min(100%, max(300px, calc((100vh - 170px) * 2 / 3))); }
@media (max-width: 960px) {
  .inloop--een { grid-template-columns: minmax(0, 1fr); }
  .verplaatsen__fotos { position: static; max-width: 380px; }
  .verplaatsen__fotos .plek__groot { width: 100%; }
}

/* ==================================================== 3 · CV-KETEL VERVANGEN: in the column where the voor/na stands on
   the badkamer page, staying in view while the words run: n=482 square (its focus needs no taller than 0.67 of it;
   square leaves the stair rail below out), n=1 and the "+2" (n=163, n=2) under it */
.compleet__foto .plek__groot { aspect-ratio: 1 / 1; }
@media (max-width: 960px) {
  .compleet__foto { max-width: 470px; }
}

/* ==================================================== 4 · ZONNEBOILER AANSLUITEN: the light panel, n=2 as its one
   picture: as cut it stands 3:4, so the frame shows it whole (the zolder's 39:50 would cut into the focus) */
.schuinte--een { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.schuinte--een .zolder__lead .tegel { aspect-ratio: 3 / 4; }
@media (max-width: 960px) {
  .schuinte--een { grid-template-columns: minmax(0, 1fr); }
  .schuinte--een .zolder { max-width: 380px; }
}

/* ==================================================== 5 · THERMOSTAAT VERVANGEN: under the heavy rule. No thermostat yet,
   so the radiators: n=353 upright 3:4 (as the operator asked at the pick) in a column of 360px, the width of the badkamer
   page's framed list, with n=348 and the "+3" under it. A 3:4 picture beside a four-line lead would leave a hole
   under the lead, so the column runs down beside all of it and stays in view, and the lead, the prose and its framed
   list stand one under the other on the left (the phone's order). From 860 down the picture stands above the lead. */
.s-thermo .wc { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-areas: "lead fotos" "antw fotos"; }
.s-thermo .wc__fotos {
  display: block; position: sticky; top: 24px; align-self: start;
  overflow: visible; margin: 0; padding: 0;
}
.s-thermo .plek__groot { aspect-ratio: 3 / 4; width: min(100%, max(300px, calc((100vh - 170px) * 3 / 4))); }
.s-thermo .wc__antw { grid-template-columns: minmax(0, 1fr); grid-template-areas: "naad" "proza" "kader"; }
.s-thermo .wc__proza, .s-thermo .wc__kader { max-width: 620px; }
.s-thermo .wc__kader { margin-top: 22px; }
@media (max-width: 860px) {
  .s-thermo .wc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fotos" "lead" "antw"; }
  .s-thermo .wc__fotos { position: static; max-width: 380px; margin-bottom: clamp(22px, 3vw, 30px); }
  .s-thermo .plek__groot { width: 100%; }
}