/* /over-ons/ — eigen opmaak bovenop /site/site.css en /site/paginas.css.
   Alle maten zijn gemeten op https://asbestverwijdering.be/over-ons/ op
   390 / 768 / 1000 / 1366 / 1920 px.                                       */

/* -------------------------------------------------------------------------
   1. Paginakop met achtergrondfilm
   Het origineel zet in deze sectie een Divi-achtergrondvideo (DJI_0080) over
   de volle sectiebreedte; de sectie zelf is doorzichtig (grijze pagina-
   achtergrond). Wij gebruiken dezelfde .paginakop-maten (290/310/205px) en
   leggen de film eronder. De poster staat er meteen, de film wordt door
   /site/paginas/over-ons.js pas na 'load' (of bij de eerste aanraking)
   ingeladen — zoals site.js dat voor de home-hero doet.
   ------------------------------------------------------------------------- */

/* het origineel houdt 2px opvulling onder de sectie (zichtbaar op 390, waar
   de inhoud hoger is dan de minimumhoogte) */
.kop-film { padding-bottom: 2px; }
.kop-film-beeld {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--grijs);
    pointer-events: none;
}
/* De titel staat wit op bewegend beeld: een donkere verloopband bovenaan
   houdt hem leesbaar, ook op lichte frames van de dronefilm.
   (Verbetering: in het origineel is de titel wit op de kale grijze
   achtergrond zodra de video niet speelt en dan onleesbaar.) */
.kop-film::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(3, 3, 3, .5), rgba(3, 3, 3, .32) 55%, rgba(3, 3, 3, 0) 92%);
    pointer-events: none;
}
.kop-film > .baan { position: relative; }

/* -------------------------------------------------------------------------
   2. Badgebalk
   De marges van deze pagina (0/-67, 0/-35, 75/-23 en 30px tussenruimte op
   telefoon) staan sinds de afwerkingsronde als .badgebalk.over-ons in
   /site/paginas.css, net als de linkse uitlijning op tablet die de
   pfa-handtekening vrijhoudt.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   3. Inhoudssectie: tekstkolom 3/5 + beeldkolom 2/5
   ------------------------------------------------------------------------- */

/* De rij heeft in het origineel alleen opvulling boven; de sectie sluit af
   met 61px en trekt de voet 14px omhoog. */
.over-ons-rij { padding-bottom: 0; }
.over-ons-sectie { padding-bottom: 61px; margin-bottom: -14px; }

@media (max-width: 767px) {
    .over-ons-sectie { margin-bottom: 20px; }
}

/* De kop staat in het origineel in een aparte module met 10px extra ruimte
   onder de kopregel (module-marge -1px + 11px opvulling van het tekstblok). */
.over-ons-verhaal > h2 { padding-bottom: 20px; }
/* Het origineel sluit het tekstblok af met een lege alinea (19,2px) plus
   70px modulemarge; samen met de 16px onderrand van de laatste alinea is dat
   105,2px witruimte onder de tekst. Wij zetten die ruimte als marge neer
   in plaats van een lege alinea in de markup. */
.over-ons-verhaal { margin-bottom: 105.2px; }

/* Beeldkolom: modulemarge 7,493% van de kolombreedte, op tablet/telefoon 30px. */
.over-ons-zijkolom > * { margin-bottom: 7.493%; }
.over-ons-zijkolom > :last-child { margin-bottom: 0; }
.over-ons-zijkolom img { width: 100%; height: auto; display: block; }

@media (max-width: 980px) {
    .over-ons-zijkolom > * { margin-bottom: 30px; }
}

/* -------------------------------------------------------------------------
   4. Vragenblok in de smalle kolom
   Divi verkleint koppen in een 2/5-kolom: h2 32 → 23px.
   ------------------------------------------------------------------------- */

/* Staat sinds de afwerkingsronde als .vragenblok.smal in /site/paginas.css. */