/* Asbestverwijdering.be — opmaak van de drie losse dienstpagina's:
   /diensten/afbraak-en-sloopwerken/, /diensten/chroom-6/ en
   /diensten/bodemsaneringen/. Aanvulling op /site/site.css en
   /site/paginas.css. Alle maten zijn gemeten op het live origineel op
   390 / 768 / 1000 / 1366 / 1920 px.                                     */

/* =========================================================================
   1. Inhoudssectie
   ========================================================================= */

/* Het origineel schuift deze sectie met position:relative;top:70px naar
   beneden en geeft haar 125px onderopvulling. Netto blijft er 70px lucht
   boven en 55px onder over; op tablet/telefoon vervalt de verschuiving. */
.dienstinhoud { padding-top: 70px; padding-bottom: 55px; }

/* De rij "tekst + foto" heeft in het origineel geen onderopvulling; de
   fotostrook eronder brengt haar eigen opvulling mee. */
.dienstinhoud .tekstrij { padding-bottom: 0; }

@media (max-width: 980px) {
    .dienstinhoud { padding-top: 0; padding-bottom: 125px; }
}

/* =========================================================================
   2. Beeld naast de tekst (2/5-kolom)
   ========================================================================= */

.dienstbeeld { display: block; width: 100%; height: auto; }
/* Kleine bronbestanden schaalt het origineel niet op (bodemsaneringen). */
.dienstbeeld.eigen-maat { width: 360px; max-width: 100%; }

/* =========================================================================
   3. Fotostrook — drie foto's naast elkaar onder de tekst
   ========================================================================= */

.fotostrook { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
/* Twee gemeten kolomverdelingen uit het origineel: */
.fotostrook.ruim { column-gap: 5.5%; }   /* kolommen 29,667% — afbraak, chroom-6 */
.fotostrook.dicht { column-gap: 3%; }    /* kolommen 31,333% — bodemsaneringen  */

.fotostrook img { display: block; width: 100%; height: auto; }

/* Het origineel legt op sommige foto's een minimumhoogte, waardoor ze op
   390, 1000, 1366 en 1920 px verticaal uitgerekt worden. Wij houden exact
   dezelfde hoogte aan, maar snijden de foto bij in plaats van hem te
   vervormen (verbetering t.o.v. het origineel). */
.fotostrook .minhoogte-190 { min-height: 190px; object-fit: cover; }
.fotostrook .minhoogte-234 { min-height: 233.6px; object-fit: cover; }
/* Staande foto die het origineel op 226px hoogte afkapt (chroom-6). */
.fotostrook .maxhoogte-226 { width: auto; max-width: 100%; max-height: 226px; }

@media (max-width: 980px) {
    .fotostrook { grid-template-columns: 1fr; row-gap: 30px; }
    /* Chroom-6 heeft in het origineel een lege derde kolom; die laat op
       tablet/telefoon 30px ruimte achter onder de laatste foto. */
    .fotostrook.lege-plek { padding-bottom: 30px; }
}

/* De knop "Terug naar alle diensten" is de gedeelde .knop-balk uit
   /site/paginas.css §4. */

/* =========================================================================
   5. Gedeelde onderdelen
   ========================================================================= */

/* De variant .vragenblok.strak (afbraak-en-sloopwerken en chroom-6) en de twee
   paginakop-maten (2px onderopvulling, 28px eerste kruimelregel) staan sinds
   de afwerkingsronde in /site/paginas.css. De klasse .dienstkop blijft op de
   pagina's staan voor hun eigen achtergrondpositie. */

/* =========================================================================
   6. Witruimte onder het tekstblok (/diensten/bodemsaneringen/)
   ========================================================================= */

/* Het origineel sluit dit tekstblok af met een lege alinea van 19,2px; wij
   zetten die ruimte als marge neer in plaats van dode markup: 19,2px voor de
   lege regel plus de 16px onderrand die de alinea ervoor daardoor verliest. */
.tekstblok.ruimte-onder { margin-bottom: 35.2px; }