/* =============================================================
   AANBOD-VERHALEND.CSS — Verhalend concept-template
   Mobile-first: basisregels gelden voor mobiel, alles voor desktop
   komt pas binnen @media (min-width: 900px) als toevoeging.
   ============================================================= */

.vh-preview-banner {
    background: #a32508;
    color: #faf7f2;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 10px 16px;
}

/* ── Tagline ──────────────────────────────────────────────── */
.vh-tagline {
    background: #2c4a52;
    padding: 32px 20px;
    text-align: center;
}
.vh-tagline-tekst {
    font-family: var(--display-font, Georgia, serif);
    font-style: italic;
    font-size: clamp(1.1rem, 3.5vw, 1.5rem);
    color: #e8c9a0;
    max-width: 680px;
    margin: 0 auto;
}

/* ── Scheiding ────────────────────────────────────────────── */
.vh-scheiding {
    height: 3px;
    background: linear-gradient(to right, #a32508, #e8c9a0, #2c4a52);
}

/* ── Generieke band (secties 1-5, 7) ─────────────────────────
   Achtergrondkleur komt als expliciete modifier-klasse vanuit de
   PHP mee (vh-band-licht/-zacht/-donker) — geen positie-afhankelijke
   afwisseling (nth-of-type), omdat dat zou botsen met de vaste
   donkere achtergrond van de CTA-secties 6 en 8. */
.vh-band { padding: 40px 20px 48px; }
.vh-band-licht  { background: #faf7f2; }
.vh-band-zacht  { background: #f5ede4; }
.vh-band-donker { background: #2c4a52; }

.vh-band-inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.vh-band-inner-vol { max-width: 900px; }

.vh-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
    color: #a32508;
}
.vh-band-donker .vh-label { color: #e8c9a0; }

.vh-titel {
    font-family: var(--display-font, Georgia, serif);
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 300;
    color: #2c4a52;
    line-height: 1.3;
    margin-bottom: 14px;
}
.vh-band-donker .vh-titel { color: #faf7f2; }

.vh-tekst p,
.vh-tekst-enkel {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #3a3a3a;
    margin: 0 0 14px;
}
.vh-tekst p:last-child,
.vh-tekst-enkel:last-child { margin-bottom: 0; }
.vh-band-donker .vh-tekst p,
.vh-band-donker .vh-tekst-enkel { color: #c8dde2; }

.vh-knop {
    display: inline-block;
    background: #a32508;
    color: #faf7f2;
    font-size: 1rem;
    font-weight: 700;
    padding: 15px 28px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 12px;
    transition: background 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.vh-knop:hover {
    background: #8a1f06;
    transform: translateY(-1px);
    text-decoration: none;
    color: #faf7f2;
}
.vh-band-donker .vh-knop {
    background: #e8c9a0;
    color: #2c4a52;
}
.vh-band-donker .vh-knop:hover { background: #dcb989; color: #2c4a52; }

/* ── Foto ─────────────────────────────────────────────────── */
/* Fotografisch normale beeldverhouding (4:3) als standaard — dat
   voorkomt vreemde bijsnijdingen (object-fit:cover knipt altijd bij
   tot de doos-verhouding, dus een doos die te breed/laag is t.o.v.
   de brontekst gaat onherroepelijk fout, ongeacht welke foto erin
   staat). Variatie komt via de modifier-klassen hieronder, die de
   verhouding zelf net iets aanpassen — niet via een losse hoogte die
   niets met de breedte te maken heeft. */
.vh-band-foto-kolom { line-height: 0; }
.vh-band-foto {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

/* ── Sectie 6 — Luister of Groei, twee kolommen ─────────────── */
.vh-band-keuze { background: #2c4a52; }
.vh-keuze-rij {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 20px;
}
.vh-keuze-kolom {
    background: rgba(250,247,242,0.05);
    border: 1px solid rgba(232,201,160,0.2);
    border-radius: 14px;
    padding: 24px;
}
.vh-keuze-naam {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e8c9a0;
    letter-spacing: 0.3px;
    margin: 16px 0 2px;
}
.vh-keuze-titel {
    font-family: var(--display-font, Georgia, serif);
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    font-weight: 400;
    color: #faf7f2;
    margin: 4px 0 10px;
}
.vh-keuze-tekst {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #c8dde2;
    margin: 0 0 16px;
}
.vh-keuze-kolom .vh-band-foto {
    aspect-ratio: 3 / 2;
}
.vh-keuze-lijst {
    margin: 0;
    padding-left: 20px;
}
.vh-keuze-lijst li {
    margin-bottom: 8px;
    padding-left: 4px;
}
.vh-keuze-lijst li::marker {
    color: #e8c9a0;
}
.vh-keuze-lijst li:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════
   DESKTOP (900px+) — alles hieronder is TOEVOEGING, mobiel blijft leidend
   ══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
    .vh-band { padding: 80px 48px; }
    .vh-band-inner,
    .vh-band-inner-vol { max-width: 1400px; }

    /* Gelijke koloms (1fr:1fr) i.p.v. een smalle foto-derde — dat is de
       kern van "groter": de foto krijgt evenveel ruimte als de tekst,
       in plaats van een klein blokje ernaast. */
    .vh-band-met-foto .vh-band-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: center;
    }
    /* Fotografisch normale verhouding (4:3) i.p.v. de vaste mobiele
       260px-hoogte — geldt uitsluitend op desktop, mobiel blijft
       ongewijzigd. Variatie per sectie via vh-foto-vierkant/-staand. */
    .vh-band-met-foto .vh-band-foto {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .vh-foto-vierkant .vh-band-foto { aspect-ratio: 1 / 1; }
    .vh-foto-staand   .vh-band-foto { aspect-ratio: 3 / 4; }

    /* Afwisseling: foto links i.p.v. rechts */
    .vh-band-foto-links .vh-band-tekst-kolom { order: 2; }
    .vh-band-foto-links .vh-band-foto-kolom  { order: 1; }

    .vh-keuze-rij {
        flex-direction: row;
        gap: 40px;
    }
    .vh-keuze-kolom { flex: 1; }
    .vh-keuze-kolom .vh-band-foto { height: auto; }
}

/* ── Desktop tekst varianten — zelfde patroon als homepage/aanbod ── */
.tekst-uitgebreid { display: none; }
@media (min-width: 1280px) {
    .tekst-kort       { display: none; }
    .tekst-uitgebreid { display: block; }
}

/* ── FAQ accordion — zelfde opzet als de investeringspagina (inv-faq) ── */
.vh-faq { background: #faf7f2; padding: 64px 24px; }
.vh-faq-inner { max-width: 720px; margin: 0 auto; }
.vh-faq-titel { font-family: var(--display-font); font-weight: 400; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--donkerblauw, #2c4a52); margin-bottom: 32px; }
.vh-faq-lijst { display: flex; flex-direction: column; gap: 12px; }
.vh-faq-item { border: 1px solid #EDE8E0; border-radius: 10px; background: white; overflow: hidden; }
.vh-faq-vraag { padding: 18px 20px; font-weight: 600; font-size: 0.95rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--donkerblauw, #2c4a52); }
.vh-faq-vraag::-webkit-details-marker { display: none; }
.vh-faq-vraag::after { content: "+"; font-size: 1.3rem; font-weight: 300; color: var(--hoofdkleur, #a32508); flex-shrink: 0; }
details[open] .vh-faq-vraag::after { content: "−"; }
.vh-faq-antwoord { padding: 0 20px 18px; font-size: 0.9rem; line-height: 1.7; color: #555; }