/* ===================================================================
   abaw.be, type-d.css: de markeerstift (D) op de leespagina's (22/9/26).
   Laadt na style.css op Voor thuis, Voor bedrijven en de vijf dienstpagina's
   ($pageCss = ['type-d']). De gedeelde D-regels (lagen van de streek, de kop,
   .beeld, .tag, .pijl-link, .goot) staan al in style.css; hier enkel wat de
   prototypes workspace/branding/ronde2/voor-thuis.html en beton-cire.html
   daarbovenop hebben. De twee prototypes delen de naam .kop-rij: die regels
   hangen daarom aan <main class="d-doelgroep"> of <main class="d-dienst">.
   Nieuw tegenover de prototypes, voor de copy: .blok-zin, .uitleg-tekst,
   .verwant-zin, de vragen (.faq) en de galerijplaatsen g-1 tot g-4 met een
   bredere plaats voor liggende beelden.
   =================================================================== */

/* ---------- Voor thuis en Voor bedrijven: de kop (voor-thuis.html) ---------- */
.d-doelgroep .kop-rij { display: grid; grid-template-columns: 6fr 6fr; column-gap: 4rem; align-items: end; padding-bottom: 5.75rem; border-bottom: 1px solid var(--color-border); }
.d-doelgroep .kop-pagina h1 .r2 { margin-top: .62em; }
.kop-zij { max-width: 33rem; justify-self: end; }
.kop-zij .lead { margin-bottom: 2.4rem; }
.inhoud { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; border-top: 1px solid var(--color-border); }
.inhoud li { border-bottom: 1px solid var(--color-border); }
.inhoud a { display: flex; align-items: baseline; gap: .8rem; padding: .95rem 0 .85rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: color var(--transition); }
.inhoud a span { color: var(--color-accent); font-size: .66rem; }
.inhoud a:hover { color: var(--color-accent); }

/* ---------- De blokken, één per soort werk: voor en na, de ellips rond het na-beeld ---------- */
.blokken { padding-block: 8rem var(--spacing-section); }
.blok { display: grid; grid-template-columns: 5fr 1.7fr 6fr; grid-template-rows: auto 1fr; grid-template-areas: "tekst goot na" "voor goot na"; max-width: 1180px; margin-inline: auto; scroll-margin-top: 4rem; }
.blok + .blok { margin-top: 10rem; }
.blok--links { grid-template-columns: 6fr 1.7fr 5fr; grid-template-areas: "na goot tekst" "na goot voor"; }
.blok--liggend { grid-template-columns: 4.4fr 1.5fr 7fr; }
.blok--liggend.blok--links { grid-template-columns: 7fr 1.5fr 4.4fr; }
.blok-tekst { grid-area: tekst; position: relative; z-index: 4; }
.blok .goot { grid-area: goot; }
.blok-na { grid-area: na; align-self: start; }
.blok-voor { grid-area: voor; align-self: end; width: 60%; margin-top: 3.5rem; }
.blok--links .blok-voor { justify-self: end; }
.blok--liggend .blok-voor { width: 74%; }
.blok-nr { margin-bottom: 1.1rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .8rem; letter-spacing: .1em; color: var(--color-accent); }
.blok-tekst h2 { margin-bottom: 1.4rem; font-size: clamp(2.2rem, 1.9vw + 1.2rem, 3.5rem); }
.blok-tekst .citaat { max-width: 25em; font-size: 1.0625rem; line-height: 1.55; }
.blok-tekst .citaat + .citaat { margin-top: .6rem; }
.projecten-label { margin: 2.25rem 0 1rem; font-family: var(--font-label); font-stretch: 125%; font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-subtle); }
.projectlinks { list-style: none; display: grid; gap: 1.1rem; justify-items: start; }
/* een gewone zin in een blok, met een link naar een dienst (Voor bedrijven) */
.blok-zin { max-width: 25em; font-size: 1.0625rem; line-height: 1.55; color: var(--color-text-subtle); }
.citaat + .blok-zin { margin-top: 1rem; }
.blok-zin a { color: var(--color-text); text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.blok-zin a:hover { color: var(--color-accent); }

/* ---------- De verwijzing naar de andere doelgroep ---------- */
.verwijzing { padding-block: 1rem calc(var(--spacing-section) - 1rem); }
.verwijzing-tekst { max-width: 36rem; padding-top: 3rem; border-top: 1px solid var(--color-border); }
.verwijzing-zin { margin-bottom: 2rem; font-size: clamp(1.25rem, .6vw + 1.05rem, 1.5rem); line-height: 1.45; }

@media (max-width: 1399px) {
    .kop-pagina h1 .markeer { margin-left: 2.1rem; }   /* smalle marge: ruimte voor de ellips aan de linkerkant */
}
@media (min-width: 768px) and (max-width: 1399px) {
    .d-woord-lang .kop-pagina h1 .markeer { margin-left: 4.2rem; }   /* BEDRIJVEN is langer dan THUIS: de ellips is breder */
}
@media (max-width: 1279px) {
    .blok-na.beeld--liggend .tag { padding-bottom: 1.6rem; }   /* boven een liggende foto loopt de ellips hoger */
}
@media (max-width: 767px) {
    .d-doelgroep .kop-rij { grid-template-columns: 1fr; row-gap: 4.5rem; padding-bottom: 3.5rem; }
    .kop-zij { justify-self: start; }
    .d-doelgroep .kop-pagina h1 .r2 { margin-top: .5em; }
    .kop-pagina h1 .markeer { margin-left: 2.1rem; }
    .inhoud { column-gap: 1.25rem; }
    .inhoud a { gap: .55rem; font-size: .64rem; }
    .blokken { padding-top: 4.5rem; }
    .blok, .blok--links, .blok--liggend, .blok--liggend.blok--links { display: flex; flex-direction: column; }
    .blok + .blok { margin-top: 6.5rem; }
    .blok-tekst { order: 1; }
    .blok-voor, .blok--links .blok-voor, .blok--liggend .blok-voor { order: 2; width: 58%; margin-top: 3.25rem; align-self: flex-start; }
    .blok-na { order: 3; width: 80%; align-self: flex-end; margin: 2.75rem .75rem 0 0; }
    .blok .blok-voor .tag { left: 0; right: auto; }
    .blok .blok-na .tag { left: auto; right: 0; }
    .projecten-label { margin-top: 1.75rem; }
    .verwijzing-tekst { padding-top: 2.5rem; }
}

/* ---------- Dienst: de kop, met het kop-beeld (beton-cire.html) ---------- */
.d-dienst .kop-rij { display: grid; grid-template-columns: 5fr 7fr; column-gap: 4.5rem; align-items: end; }
.kop-tekst .citaat { margin-top: 2.25rem; font-size: 1.3rem; line-height: 1.45; }
.kop-tekst .lead { margin-top: 1.1rem; max-width: 25em; }
.kop-beeld { margin-top: 1.75rem; }
.kop-beeld img { aspect-ratio: 4 / 3; }
/* een lange kop over twee regels: kleiner, zodat elke regel op één lijn blijft */
.kop-pagina h1.kop-lang { font-size: clamp(2.6rem, 3.2vw + 1rem, 4rem); }

/* ---------- De uitleg ---------- */
.uitleg { padding-block: 9rem 2rem; }
.uitleg-rij { display: grid; grid-template-columns: 4fr 6fr 2fr; column-gap: 2rem; align-items: start; }
.uitleg-rij .label { padding-top: 1.1rem; }
.uitleg .gat { max-width: 34em; }
.uitleg-tekst h2 { margin-bottom: 1.4rem; font-size: clamp(2.2rem, 1.9vw + 1.2rem, 3.5rem); }
.uitleg-tekst p { max-width: 34em; color: var(--color-text-subtle); }
.uitleg-tekst p + p { margin-top: var(--spacing-paragraph); }
.uitleg-tekst .gat { margin-top: 1.75rem; }
/* een link in de lopende tekst: wit met een lime onderlijn, zoals in de leestekst */
.kop-tekst .lead a, .uitleg-tekst a { color: var(--color-text); text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.kop-tekst .lead a:hover, .uitleg-tekst a:hover { color: var(--color-accent); }

/* ---------- Galerij: vier plaatsen zoals in het prototype, op g-1 het afgewerkte beeld ---------- */
.galerij { padding-block: 9rem var(--spacing-section); }
.galerij-raster { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; row-gap: 9rem; }
.g-1 { grid-column: 1 / 6; grid-row: 1; align-self: end; }
.g-2 { grid-column: 8 / 11; grid-row: 1; align-self: end; }
.g-3 { grid-column: 2 / 5; grid-row: 2; align-self: start; }
.g-4 { grid-column: 8 / 12; grid-row: 2; align-self: start; margin-top: 7rem; }
.beeld video, .beeld .video-poster { aspect-ratio: 9 / 16; }
/* een liggend beeld krijgt een bredere plaats in dezelfde rij */
.g-2.beeld--liggend, .g-4.beeld--liggend { grid-column: 7 / 12; }
.g-3.beeld--liggend { grid-column: 2 / 7; }
/* een lang label boven het beeld met de ellips staat hoger, zodat de buitenste ronde het niet raakt */
.beeld .tag--hoog { padding-bottom: 2.6rem; }

/* ---------- Verwant project ---------- */
.verwant { padding-block: 2rem var(--spacing-section); }
.verwant-rij { display: grid; grid-template-columns: 4.5fr 1.5fr 6fr; align-items: center; padding-top: 4rem; border-top: 1px solid var(--color-border); }
.verwant-tekst .label { margin-bottom: 1.25rem; }
.verwant-tekst h2 { margin-bottom: 1.4rem; font-size: clamp(2.2rem, 1.9vw + 1.2rem, 3.5rem); }
.verwant-zin { max-width: 26em; margin-bottom: 2rem; font-size: 1.0625rem; line-height: 1.55; color: var(--color-text-subtle); }
.verwant-beeld { grid-column: 3; }
.verwant-beeld img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
.verwant .goot { grid-column: 2; grid-row: 1; align-self: stretch; }

/* ---------- Veelgestelde vragen: de rij van de uitleg, met de draad in de rechterkolom ---------- */
.faq { padding-bottom: var(--spacing-section); }
.faq-rij { display: grid; grid-template-columns: 4fr 6fr 2fr; column-gap: 2rem; align-items: start; padding-top: 4rem; border-top: 1px solid var(--color-border); }
.faq-label { padding-top: .35rem; line-height: 1.3; }
.faq-item + .faq-item { margin-top: 2.6rem; }
.faq-item h3 { margin-bottom: .8rem; font-size: clamp(1.4rem, .6vw + 1.1rem, 1.7rem); line-height: 1.05; }
.faq-item p { max-width: 34em; color: var(--color-text-subtle); }
.faq-item a { color: var(--color-text); text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.faq-item a:hover { color: var(--color-accent); }

@media (max-width: 1023px) {
    .d-dienst .kop-rij { grid-template-columns: 1fr; }
    .uitleg-rij, .faq-rij { grid-template-columns: 1fr 2fr; }
    .uitleg-tekst, .faq-lijst { margin-right: 3rem; }   /* op tablet loopt de draad langs de rechterkant */
    .verwant-rij { grid-template-columns: 1fr 3rem 1fr; }
    .verwant-tekst { padding-right: 1.25rem; }   /* de langere tekst blijft uit de goot, waar de draad loopt */
}
@media (max-width: 767px) {
    .kop-tekst .citaat { margin-top: 1.75rem; font-size: 1.15rem; }
    .kop-beeld { margin-top: 3.25rem; }
    .uitleg { padding-block: 5.5rem 1rem; }
    .uitleg-rij, .faq-rij { grid-template-columns: 1fr; row-gap: 1.25rem; }
    .uitleg-rij .label { padding-top: 0; }
    .uitleg-tekst, .faq-lijst { margin-right: 0; }
    .galerij { padding-block: 6rem var(--spacing-section); }
    .galerij-raster { display: flex; flex-direction: column; }
    .g-1 { width: 80%; align-self: flex-end; margin-right: .75rem; }
    .g-1 .tag { left: auto; right: 0; }
    .g-2 { width: 58%; margin-top: 4.5rem; align-self: flex-start; }
    .g-3 { width: 62%; align-self: flex-end; margin-top: 4.5rem; }
    .g-3 .tag { left: auto; right: 0; }
    .g-4 { width: 58%; margin-top: 4.5rem; }
    .galerij-raster .beeld--liggend { width: 80%; }
    .verwant-rij { display: flex; flex-direction: column; align-items: stretch; padding-top: 3rem; }
    .verwant-tekst { padding-right: 0; }
    .verwant-beeld { margin-top: 3rem; }
    .faq-rij { padding-top: 3rem; }
    .faq-label { padding-top: 0; }
}