/* Loodgieter — linked after ../../style.css, ../diensten.css and the badkamer page's ../badkamer-renovatie/dienst.css
   (all three linked before it, none of them edited). This file carries only what placing this page's own pictures
   needs: each frame's shape where its picture differs from the badkamer's, and a picture column reshaped where a
   section holds something else than the badkamer frame it takes. Every focus is the one in
   whatsapp/plaatsen/loodgieter.md; ../../focus.js crops around it.
   2026-10-02 (template2-fotos): every place shows its picks, in the vloerverwarming page's forms: the large picture,
   the thumbnails under it (../diensten.css shapes them) and the "+N" tile after the last one, whose hidden links
   (.meer__rest) open only in the viewer; script.js fills the row with as many as fit. A section stays one block. */

/* ==================================================== OPENING: n=62 (1200×1600, focus 0.04 0.36 0.92 0.6: the mirror's
   lower half, the two kranen running, the meubel). 5:4 shows the band from 0.36 to 0.96 of its height: the focus
   whole, and not the paper on the mirror (0.23–0.29). Same shape on a phone. The three thumbnails (n=74, 1, 191) and
   the "+18" are upright, 3:4, from ../diensten.css. */
.intro__groot img { aspect-ratio: 5 / 4; }
.intro__groot { --groot-vorm: calc(5 / 4); }   /* 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, in every section */
.plek__groot { display: block; }
.plek__duimen { margin-top: 14px; align-items: flex-end; }
@media (max-width: 560px) {
  .plek__duimen { margin-top: 10px; }
}

/* ==================================================== 1 · LEKKAGE and EXTRA · KEUKEN AANSLUITEN: the card, its column of
   work: one picture in the strook's own 4:5 (square from 960 down, as the badkamer page's lead), the thumbnails and
   the "+N" under it. n=306 (focus 0 0.25 1 0.7) and n=151 (0 0.15 1 0.75) stand whole in both shapes. */
.s-lekkage .kaart__fotos, .s-keuken .kaart__fotos { grid-area: strook; min-width: 0; }
.strook--een { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) {
  .s-lekkage .kaart__fotos, .s-keuken .kaart__fotos { max-width: 340px; }
}

/* ==================================================== 2 · KRAAN OF WASTAFEL: the changed ground, the column that stays in
   view holds n=119 in 3:4 (its focus, 0 0 1 0.95, is the whole picture) with n=236, 16, 372 and the "+18" under it.
   While it stays in view it has to fit the screen whole, thumbnails included, so on a low screen the picture
   narrows rather than its thumbnails dropping below the edge (as the vloerverwarming page's woonkamer). */
.s-kraan .kraan__fotos { position: sticky; top: 24px; align-self: start; }
.s-kraan .plek__groot { aspect-ratio: 3 / 4; width: min(100%, max(360px, calc((100vh - 170px) * 3 / 4))); }
@media (max-width: 960px) {
  .s-kraan .kraan__fotos { position: static; max-width: 460px; }
  .s-kraan .plek__groot { width: 100%; }
}

/* ==================================================== 3 · LEIDINGEN: in the column where the voor/na stands on the
   badkamer page, staying in view while the words run: n=373 at 4:5 (its focus, 0.2 0.05 0.75 0.85, stands whole
   between 0.56:1 and 0.88:1), n=156, 494 and the "+32" under it */
.compleet__foto .tegel { aspect-ratio: 4 / 5; }
@media (max-width: 960px) {
  .compleet__foto { max-width: 470px; }
}

/* ==================================================== 4 · DOUCHECOMBINATIE: the light panel at its full width, the
   picture column holding n=74 in 3:4 (its focus, 0.25 0.05 0.5 0.88, stands whole up to 0.85:1) with n=234, 395 and
   the "+18" under it */
.s-douche .zolder { display: block; }
.s-douche .plek__groot { aspect-ratio: 3 / 4; }
@media (max-width: 960px) {
  .s-douche .zolder { max-width: 460px; }
}

/* ==================================================== 5 · HANGTOILET: the heavy rule; n=245 square (its focus, 0.2 0.42
   0.6 0.58, stands whole between 0.45:1 and 1.29:1) in a column as wide as the framed list under it, so the two line
   up, with n=191 and the "+22" under it; from 860 down it stands above the lead */
.s-hangtoilet .wc { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.s-hangtoilet .wc__fotos { display: block; overflow: visible; margin-right: 0; padding-right: 0; }
.s-hangtoilet .plek__groot { aspect-ratio: 1 / 1; }
@media (max-width: 860px) {
  .s-hangtoilet .wc { grid-template-columns: minmax(0, 1fr); }
  .s-hangtoilet .wc__fotos { max-width: 460px; }
}