/* Asbestverwijdering.be — projectdetailpagina's (/projecten/<slug>/).
   Opgefrist ontwerp "1C — één constant beeldkader" (design-handoff):
   kop met licht kruimelpad + methodebadge, 16:10 zwart passe-partout met
   gele feitenstrook, tekst + aanpak in twee kolommen, gele reviewband,
   meer-projecten-kaarten (kaarttaal uit paginas.css §8), CTA in de baan
   en vorige/volgende. Maten uit de handoff; aanvulling op paginas.css.  */

/* =========================================================================
   1. Kop: kruimelpad + titel links, methodebadge rechts
   ========================================================================= */

.projectkop {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 30px; flex-wrap: wrap;
    padding-bottom: 0;
}
.projectkop-tekst { display: flex; flex-direction: column; gap: 10px; flex: 1 1 420px; min-width: 0; }

/* Het kruimelpad is de sitebrede chip (site.css); in deze kop zonder de
   40px-fotokopmarge en met wat lucht naar de titel. */
.projectkop .kruimelpad { margin: 0 0 16px; }

.projectkop h1 {
    margin: 0;
    font-size: 42px; line-height: 1.05; font-weight: 800; letter-spacing: -.01em;
    text-wrap: balance;
    max-width: 20ch; /* vangt lange titels: 1-2 gebalanceerde regels */
}
.methodebadge {
    background: var(--inkt); color: var(--geel);
    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 14px;
    white-space: nowrap;
}

/* =========================================================================
   2. Beeldkader (16:10 passe-partout) + gele feitenstrook
   ========================================================================= */

.projectbeeldrij { padding-top: 20px; padding-bottom: 0; }
.projectbeeld {
    margin: 0;
    aspect-ratio: 16 / 10;
    background: var(--inkt);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
/* de foto wordt nooit gecropt: staand, liggend of vierkant, het kader
   blijft even groot en de paginahoogte varieert niet per project */
.projectbeeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* De 2px-kieren tussen de cellen komen uit de strookachtergrond (geel
   gemengd met 15% inkt) — dat werkt in elke kolomverdeling, ook gestapeld. */
.feitenstrook {
    display: grid;
    grid-template-columns: repeat(var(--feiten, 4), minmax(0, 1fr));
    gap: 2px;
    background: #d2c418;
}
.feit { padding: 16px 18px; background: var(--geel); }
.feit-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: rgba(3, 3, 3, .65); }
.feit-waarde { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.25; }

/* =========================================================================
   3. "Wat we deden" + aanpak in twee kolommen
   ========================================================================= */

.projectinhoud {
    padding-top: 32px; padding-bottom: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px; align-items: start;
}
.projecttekst { display: flex; flex-direction: column; gap: 12px; }
.projecttekst h2 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; }
.projecttekst p { margin: 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.projecttekst .resultaatregel { font-size: 15px; line-height: 1.5; color: #333; }
.projecttekst .regioregel { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #555; }
.projecttekst strong { font-weight: 700; }

.aanpak { display: flex; flex-direction: column; gap: 10px; }
.aanpak-kop { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7a7a7a; }
.aanpak-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aanpak-stap {
    background: var(--wit);
    padding: 12px 16px;
    display: flex; gap: 12px; align-items: center;
    font-size: 15px; font-weight: 400; line-height: 1.4;
}
.aanpak-nummer {
    flex: 0 0 26px; height: 26px;
    background: var(--inkt); color: var(--geel);
    font-size: 13px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}

/* =========================================================================
   4. Gele reviewband (vervangt de witte recensierij)
   ========================================================================= */

.reviewband { margin-top: 32px; background: var(--geel); padding: 36px 0; }
.reviewband-inhoud { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.reviewband-kop { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.reviewband blockquote {
    margin: 0; max-width: 34ch;
    font-size: 30px; line-height: 1.3; font-weight: 500;
    text-wrap: pretty;
}
.reviewband-naam { font-size: 14px; font-weight: 700; }

/* =========================================================================
   5. Staart: meer projecten, CTA in de baan, vorige/volgende
   ========================================================================= */

.projectstaart { padding-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.meer-kop { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 800; }
.meerprojecten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* .projectkaart (paginas.css §8) geeft de zwarte kaart, 12px hoeken,
   schaduw en de lift bij hover; hier alleen de duimnagel + titel */
.meerkaart { text-decoration: none; }
.meerkaart:hover { text-decoration: none; }
.meerkaart-beeld { display: block; aspect-ratio: 16 / 10; background: #cfcfcf; overflow: hidden; }
.meerkaart-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meerkaart h3 { margin: 14px 16px 16px; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--wit); }

/* CTA: het vragenblok, maar als rij in de baan (kop links, knop rechts) */
.vragenblok.in-rij {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 30px 40px;
    text-align: left;
}
.vragenblok.in-rij h2 { margin: 0; padding: 0; }

.projectnav {
    display: flex; justify-content: space-between; gap: 20px;
    border-top: 2px solid #cfcfcf;
    padding-top: 16px;
    font-size: 14px; font-weight: 800;
}
.projectnav a { text-decoration: none; }
.projectnav a:hover { text-decoration: underline; text-decoration-color: var(--geel); }
.projectnav-volgend { text-align: right; }

/* =========================================================================
   6. Toetsenbordfocus en responsief
   ========================================================================= */

.projectkop .kruimelpad a:focus-visible,
.projectnav a:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; }
.meerkaart:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }

@media (max-width: 980px) {
    .projectinhoud { grid-template-columns: 1fr; }
    .feitenstrook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .meerprojecten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .projectkop h1 { font-size: clamp(28px, 7vw, 42px); max-width: 100%; }
    /* staande foto's blijven leesbaar op telefoon */
    .projectbeeld { aspect-ratio: 4 / 3; }
    .feitenstrook { grid-template-columns: 1fr; }
    .reviewband blockquote { font-size: 22px; }
    .meerprojecten { grid-template-columns: 1fr; }
    .vragenblok.in-rij { padding: 30px 24px; }
}