/* Schilderen en stucen: only what placing this page's own pictures needs. Everything else (the head system, the
   section frames, the bands) comes from ../badkamer-renovatie/dienst.css and ../diensten.css, linked before this
   file and never edited. Every frame below is drawn for its picture: the focus of each (data-focus, from
   whatsapp/plaatsen/schilder-stuc.md) stands whole at every width, and ../../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), the "+N" tile after the last one (../../style.css); the
   wall keeps the slider, with its two other pairs and a row of thumbnails under it. A section stays one block. */

/* ==================================================== OPENING: n=126 (3:4, focus 0.05 0.1 0.92 0.82) in a 7:8 frame,
   which shows 86% of the picture's height and the whole focus; under it n=12 and 6 upright (3:4), n=279 lying (4:3) */
.intro__groot img { aspect-ratio: 7 / 8; }
.intro__groot { --groot-vorm: calc(7 / 8); }   /* 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, for the sections that now hold more than one picture */
.plek__groot { display: block; }
.plek__duimen { margin-top: 14px; align-items: flex-end; }
@media (max-width: 560px) {
  .plek__duimen { margin-top: 10px; }
}

/* ==================================================== 1 · PLAFOND STUCEN: the card's column of work. n=279 lies wide
   (1600×1200); the badkamer frame's own shape (4:5, square from 960 down) shows its middle, 60% and 75% of the width,
   and its focus (0.2 0.05 0.6 0.85) whole in both. Under it n=282 and 283 lying (4:3, whole) and the "+7". */
.s-plafond .kaart__fotos { grid-area: strook; min-width: 0; }
.s-plafond .strook { grid-template-columns: minmax(0, 1fr); }

/* ==================================================== 2 · BINNEN SCHILDEREN: the changed ground, the column that stays
   in view holds n=116 in its own shape (1320:1419) with n=406 under it as the last thumbnail */
.s-schilder .schilder__fotos { position: sticky; top: 24px; align-self: start; }
.s-schilder .plek__groot { aspect-ratio: 1320 / 1419; }
@media (max-width: 960px) {
  .s-schilder .schilder__fotos { position: static; max-width: 620px; }
}

/* ==================================================== 3 · WAND STUCEN: the badkamer frame (7:8, 4:5 on a phone) keeps
   the focus of the Weesp pair (0.05 0.02 0.88 0.84) whole; both pictures are 3:4 with the same focus, n=4 cut to line
   up with n=14, so they are cut alike and stay lined up. Under it the two Almere pairs as squares (the focus of each,
   0.62 and 0.58 wide, stands whole in a square of a 4:3 picture), a little apart; the caption beside them where it
   has room and under them where it has not. Then a row: n=19 and the "+11". */
.s-wand .paar { flex-wrap: wrap; row-gap: 8px; }
.s-wand .paar__cap { flex: 1 1 140px; }
.s-wand .paar__duimen li:nth-child(3) { margin-left: 6px; }
.s-wand .plek__duimen { margin-top: 12px; }
/* the column stays in view while the words run, so it has to fit the screen whole, both rows included: on a low
   screen the slider narrows rather than its thumbnails dropping below the edge (as the vloerverwarming woonkamer) */
@media (min-width: 961px) {
  .s-wand .compleet__ba { width: min(100%, max(360px, calc((100vh - 290px) * 7 / 8))); justify-self: end; }
}

/* ==================================================== 4 · SCHEUREN EN GATEN DICHTEN: the light panel at its full width,
   the picture column holding n=278 at 4:5 (it lies 4:3; 4:5 shows its middle 60% of the width, its focus 0.35 0.25
   0.5 0.5 whole) with n=281 lying (4:3, whole) and n=276 under it */
.s-scheuren .zolder { display: block; }
.s-scheuren .plek__groot { aspect-ratio: 4 / 5; }

/* ==================================================== 5 · DEUREN EN KOZIJNEN LAKKEN: no picture fits, so the frame
   stands at the wrap's width without one: the lead runs where the pictures would have stood */
.s-lak .wc { grid-template-areas: "lead lead" "antw antw"; }
@media (max-width: 860px) {
  .s-lak .wc { grid-template-areas: "lead" "antw"; }
}