/* Vloerverwarming — what this page adds to ../../style.css, ../diensten.css and the badkamer page's
   ../badkamer-renovatie/dienst.css (all three linked before it, none of them edited for this page). Only the frames of
   its own pictures: each shape is chosen so that the picture's focus (data-focus, whatsapp/plaatsen/vloerverwarming.md)
   stands whole at every width, and ../../focus.js crops around it.
   2026-10-02 (template2-fotos): every place shows its picks. Where a place held one picture and now holds two or
   three, it takes the fold's form: the large picture, the thumbnails under it (../diensten.css shapes them), and
   the "+N" tile after the last one (../diensten.css); the bathroom keeps the badkamer page's slider with its second
   pair under it. A section stays one block. */

/* ==================================================== OPENING: n=110 at 4:5 (its focus, 0.05 0.1 0.9 0.85, stands whole
   between 0.68:1 and 0.88:1); the two thumbnails (n=419, 114) and the "+13" are upright, 3:4, from ../diensten.css */
.intro__groot img { aspect-ratio: 4 / 5; }
.intro__groot { --groot-vorm: calc(4 / 5); }   /* 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 · VLOER EGALISEREN: the card's column of work. n=109 leads in the
   badkamer frame's own shape (4:5, square from 960 down): it lies wide (1600×1200), and 4:5 shows its middle, the
   focus (0.28 0.15 0.58 0.8) whole. Under it three squares in one row: n=106, 108 and the "+10" (both foci stand
   whole square). From 960 down the four stand in one row, the lead larger; on a phone the lead over the three. */
.s-egaal .kaart__fotos { grid-area: strook; min-width: 0; }
.s-egaal .strook { grid-template-columns: minmax(0, 1fr); }
/* the operator, 2026-10-02: more of the series in view. The two squares and the "+10" became a row of thumbnails
   under the lead, the way the woonkamer has it; script.js fills the row and the tile counts what is left. */

/* ==================================================== 2 · WOONKAMER: the changed ground, the column that stays in view
   holds n=295 in 3:4 (it stands 9:16; its focus, 0 0.2 1 0.73, needs no wider than 0.77:1) with n=292, 290 and the
   "+9" 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. */
.s-woon .woon__fotos { position: sticky; top: 24px; align-self: start; }
.s-woon .plek__groot { aspect-ratio: 3 / 4; width: min(100%, max(360px, calc((100vh - 170px) * 3 / 4))); }
@media (max-width: 960px) {
  .s-woon .woon__fotos { position: static; max-width: 460px; }
  .s-woon .plek__groot { width: 100%; }
}

/* ==================================================== 3 · VLOERVERWARMING IN DE BADKAMER: the badkamer frame (7:8, 4:5 on
   a phone) keeps the focus of the Zaandam pair (n=100 / 114, 0.18 0.05 0.62 0.85) whole; both pictures are 3:4 with
   the same focus, so they are cut alike and stay lined up. Under it the badkamer page's second pair (.paar, from
   ../../style.css) with the "+11" after it. */

/* ==================================================== 4 · PVC-VLOER OF LAMINAAT: the light panel at its full width, the
   picture column holding n=327 square (its focus, 0 0.2 1 0.62, stands whole from 0.75:1 to 1.2:1; square keeps his
   shoe at the foot out) with n=196 and the "+4" under it */
.s-pvc .zolder { display: block; }
.s-pvc .plek__groot { aspect-ratio: 1 / 1; }

/* ==================================================== 5 · SLAAPKAMER: the heavy rule; n=293 lying 16:10 (its focus,
   0.05 0.05 0.88 0.9, stands whole between 1.56:1 and 1.97:1) in a column as wide as the framed list under it, so
   the two line up, with n=417 and the "+5" under it; from 860 down it stands above the lead */
.s-slaap .wc { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.s-slaap .wc__fotos { display: block; overflow: visible; margin-right: 0; padding-right: 0; }
.s-slaap .plek__groot { aspect-ratio: 16 / 10; }
@media (max-width: 860px) {
  .s-slaap .wc { grid-template-columns: minmax(0, 1fr); }
  .s-slaap .wc__fotos { max-width: 460px; }
}