/* Asbestverwijdering.be — dienstpagina's "Asbestverwijdering" en de drie
   methodes (hermetische zone, couveusezak, eenvoudige handelingen).
   Aanvulling op /site/site.css en /site/paginas.css; alleen wat deze vier
   pagina's extra nodig hebben. Alle maten zijn gemeten op het live origineel
   op 390 / 768 / 1000 / 1366 / 1920 px.                                    */

/* De paginakop-correcties (2px onderopvulling, 28px eerste kruimelregel,
   nowrap per kruimelitem en het 14x16-scheidingsicoon) staan sinds de
   afwerkingsronde in /site/paginas.css. */

/* =========================================================================
   2. Inhoudssectie
   ========================================================================= */

/* Divi schuift deze sectie op desktop 70px omlaag (position:relative;top:70px)
   en compenseert dat met 125px onderopvulling. In normale stroom komt dat neer
   op 70px boven en 55px onder; op tablet/telefoon vervalt de verschuiving. */
.dienstinhoud { padding-top: 70px; padding-bottom: 55px; }

/* De tekst/foto-rij loopt zonder tussenruimte door in de rij eronder. */
.rij.zonder-onder { padding-bottom: 0; }

/* Witregel onder de laatste alinea (in het origineel een lege alinea van 19,2px
   plus de normale 16px onderruimte van de alinea erboven). */
.tekstblok p.ruimte-onder:last-child { padding-bottom: 35.2px; }

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

/* =========================================================================
   3. Foto's
   ========================================================================= */

.beeld img { display: block; width: 100%; height: auto; }
/* Twee foto's op /hermetische-zone/ zijn in het origineel op hoogte begrensd;
   ze staan daardoor smaller en links uitgelijnd in hun kolom. */
.beeld.hoog-225 img { width: auto; max-height: 225px; }
.beeld.hoog-255 img { width: auto; max-height: 255px; }
/* Zwarte onderrand onder een foto (Divi-modulevulling). */
.beeld.rand-13 { padding-bottom: 13px; }
.beeld.rand-25 { padding-bottom: 25px; }
/* In het origineel op tablet én telefoon verborgen. */
@media (max-width: 980px) { .beeld.enkel-breed { display: none; } }

/* =========================================================================
   4. Rij met drie fotokolommen (Divi-tussenruimte 2 = 3% van de rijbreedte)
   ========================================================================= */

.fotokolommen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3%;
    align-items: start;
}
/* modulemarge = de helft van de tussenruimte = 1,5% van de rij = 4,79% van de kolom */
.fotokolom .beeld:not(:last-child) { margin-bottom: 4.79%; }

@media (max-width: 980px) {
    .fotokolommen { grid-template-columns: 1fr; gap: 30px; }
    .fotokolom .beeld:not(:last-child) { margin-bottom: 30px; }
}

/* =========================================================================
   5. Methodekaarten — drie zwarte kaarten op /diensten/asbestverwijdering/
   ========================================================================= */

.methodes-rij { margin-top: 50px; }

.methodes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
/* Zelfde kaarttaal als de dienstkaarten op /diensten/ (paginas.css §7):
   foto ín de kaart, ronde hoeken, schaduw, lift + fotozoom bij hover en
   een compacte gele knop — de knop hangt onderaan zodat de drie kaarten
   gelijk ogen, ook met titels van één of twee regels. */
.methodekaart {
    background: var(--inkt);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(3, 3, 3, .12);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column;
}
.methodekaart .beeld,
.methodekaart .beeld.los,
.methodekaart .beeld.rand-25 { margin: 0; padding: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.methodekaart .beeld img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .45s ease;
}
.methodekaart h2 {
    margin: 0;
    padding: 18px 16px 14px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--geel);
    text-align: center;
}
.methodekaart .knop-vol {
    width: fit-content; max-width: none;
    margin: auto auto 18px; padding: 8px 30px;
    font-size: 17px; line-height: 1.4; border-radius: 8px;
    transition: background-color .2s ease;
}
@media (hover: hover) {
    .methodekaart:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(3, 3, 3, .22); }
    .methodekaart:hover .beeld img { transform: scale(1.05); }
    .methodekaart .knop-vol:hover { background: var(--wit); color: var(--inkt); }
}
@media (prefers-reduced-motion: reduce) {
    .methodekaart, .methodekaart .beeld img, .methodekaart .knop-vol { transition: none !important; }
}

@media (max-width: 980px) {
    .methodes { grid-template-columns: 1fr; gap: 30px; }
}

/* =========================================================================
   6. Balkknop
   ========================================================================= */

/* .knop-balk (+ de variant .terug met de pijl naar links) staat sinds de
   afwerkingsronde in /site/paginas.css §4. */

/* Rij met extra lucht rond de terugknop (/couveusezak/). */
.knoprij-ruim { padding: 46px 0 0; min-height: 150px; }

/* =========================================================================
   7. Vragenblok met extra lucht erboven (/couveusezak/)
   ========================================================================= */

.vragen-los { padding: 25px 0; }
.vragen-los .vragenblok { margin-top: 148px; padding-top: 50px; }

/* =========================================================================
   8. Correcties op gedeelde onderdelen
   ========================================================================= */

/* Opsommingstekens, de focusring van .knop-pijl en het scheidingsicoon van het
   kruimelpad staan sinds de afwerkingsronde in /site/paginas.css. Hier blijft
   alleen de focus op de knoppen die deze pagina's zelf meebrengen. */
.methodekaart .knop-vol:focus-visible { outline: 3px solid var(--wit); outline-offset: 3px; }