/* ===================================================================
   Type A, de draad: Over Mathie /over-mathie/ (22/9/26).
   Letterlijk uit het goedgekeurde prototype workspace/branding/ronde2/over-mathie.html,
   enkel de regels die nog niet in style.css staan. Eén penseelstreek komt uit de ellips
   van het logo en naait de pagina aan elkaar. In het open zwart is ze de volle lime streek,
   waar ze onder een beeld schuift de dunne donkere draad. Ze ligt altijd achter de inhoud
   en loopt over geen tekst. De lagen: includes/penseel.php ($pageLijn = 'draad').
   Het script: assets/js/components/lijn-draad.js
   Waar style.css voor een andere pagina iets anders zet met dezelfde klasse (.foto zweeft,
   .werk van de offertepagina, .bewijs van de startpagina), zet dit bestand de waarde van
   het prototype terug. Afwijking: het citaat onder "Aan het werk" komt uit de copy.
   =================================================================== */

/* De twee lagen van het penseel, allebei achter de inhoud */
.draad-laag { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 0; overflow: hidden; pointer-events: none; }
.draad-laag svg { position: absolute; left: 0; top: 0; max-width: none; }
.draad-laag path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
main, .site-footer { position: relative; z-index: 2; }

/* Beelden zoals op de startpagina, maar ze zweven niet: rustige pagina, één effect */
.foto { animation: none; }

/* ----- Eerste scherm en Aan het werk: één raster, de video staat naast de naam ----- */
.boven { padding-top: 2rem; }
.boven .werk { padding-block: 0; }   /* .werk van de offertepagina in style.css */
.intro .label { margin-bottom: 2rem; }
.intro h1 { max-width: 4em; line-height: .86; }
.intro-tekst { margin-top: 2.4rem; max-width: 29em; font-size: clamp(1.125rem, .35vw + 1rem, 1.3125rem); line-height: 1.55; }
.intro .citaat { margin-top: 2rem; max-width: 29em; font-size: 1.125rem; line-height: 1.6; }
.werk-kop h2 { max-width: 4.5em; }
.werk-kop .citaat { margin-top: 1.4rem; max-width: 14em; font-size: 1.125rem; }

@media (min-width: 1024px) {
    .boven { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
    .werk { display: contents; }
    .intro { grid-column: 1 / 8; grid-row: 1; align-self: center; }
    .w-video { grid-column: 9 / 13; grid-row: 1; }
    .werk-kop { grid-column: 1 / 5; grid-row: 2; margin-top: 9rem; }
    .w-half { grid-column: 5 / 13; grid-row: 2; margin-top: 9rem; }
    .trap { grid-column: 1 / 13; grid-row: 3; margin-top: 10.5rem; display: flex; justify-content: space-between; align-items: flex-start; }
    .trap .foto { width: 27.5%; }
    .trap .foto:nth-child(2) { margin-top: 9%; }
    .trap .foto:nth-child(3) { margin-top: 18%; }
}

/* ----- Van afbraak tot afwerking: drie afgewerkte beelden op één rij ----- */
.afbraak { padding: var(--spacing-section) 0 10.5rem; }
.afbraak-kop h2 { max-width: 9em; margin-bottom: 1.6rem; }
.afbraak-kop p { max-width: 27em; color: var(--color-text-subtle); }
.afbraak-rij { margin-top: 4.5rem; }
.a-item figcaption { margin-top: 1.1rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .72rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; }
.a-item figcaption a { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--color-text-subtle); transition: color var(--transition); }
.a-item figcaption a:hover { color: var(--color-accent); }
.a-item figcaption svg { width: 18px; height: 11px; flex: none; color: var(--color-accent); }

@media (min-width: 1024px) {
    .afbraak-rij { display: flex; align-items: flex-start; column-gap: 6.5rem; width: min(1376px, 100% - 4rem); margin-inline: auto; }
    .a-item { flex: .75 1 0; min-width: 0; }
    .a-tv { flex-grow: 1.3333; }
}

/* ----- Bewijsrij: de draad gaat door de open middenkolom ----- */
/* style.css zet de bewijsrij van de startpagina (vier vakken met randen); hier de open rij van het prototype */
.bewijs { padding-top: 0; padding-bottom: var(--spacing-section-tight); }
.bewijs-rij { grid-template-columns: repeat(2, minmax(0, 1fr)) clamp(8rem, 13vw, 12rem) repeat(2, minmax(0, 1fr)); column-gap: 2rem; border-top: 0; border-bottom: 0; }
.bewijs-rij li { padding: 1.6rem 0 0; border-top: 1px solid var(--color-border); }
.bewijs-rij li + li { border-left: 0; }
.bewijs-rij li:nth-child(3) { grid-column: 4; }

/* ----- Kleiner dan desktop: alles onder elkaar, de beelden om beurt links en rechts ----- */
@media (max-width: 1023px) {
    .boven { padding-top: 2.5rem; }
    .werk-kop { margin-top: var(--spacing-section); }
    .werk .foto, .a-item { width: 78%; max-width: 30rem; }
    .werk .foto { margin-top: 2.25rem; }
    .w-video, .w-boven, .w-detail, .a-tv { margin-left: auto; }
    .afbraak { padding-bottom: var(--spacing-section); }
    .afbraak-rij { padding: var(--container-padding); margin-top: 3.25rem; }
    .a-item + .a-item { margin-top: 2.25rem; }
    .a-tv figcaption { text-align: right; }
    .bewijs-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
    .bewijs-rij li { padding: 1.6rem 0 0; }
    .bewijs-rij li:nth-child(3) { grid-column: auto; }
}
@media (max-width: 767px) {
    .intro .label { margin-bottom: 1.4rem; }
    .intro-tekst { margin-top: 1.6rem; }
    .intro .citaat { margin-top: 1.6rem; font-size: 1.0625rem; }
}