/* ═══════════════════════════════════════════════════════════════
   ONS VERHAAL
   ═══════════════════════════════════════════════════════════════ */

.ly-s-hero { padding: clamp(56px, 8vw, 104px) 0; }
.ly-s-hero h1 { margin-bottom: 0; }

/* Staat er ook een hero-foto onder, dan hoeft de donkere sectie zelf geen
   ruimte eronder — dat doet de foto al. */
.ly-s-hero:has(.ly-s-hero-foto) { padding-bottom: 0; }

.ly-s-hero-foto {
    margin-top: clamp(40px, 6vw, 72px);
    max-height: 60vh;
    overflow: hidden;
}
.ly-s-hero-foto img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

/* Eén doorlopende, rustige achtergrond achter alle secties samen — geen
   afwisselend wit per sectie meer, dat zou de foto in stroken kappen. */
.ly-s-secties {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Zonder gekozen achtergrond blijft het gewoon de paginakleur */
.ly-s-secties-zonder-achtergrond { background: var(--ly-cream); }

.ly-s-sectie { padding: clamp(48px, 7vw, 88px) 0; }
.ly-s-sectie + .ly-s-sectie { border-top: 1px solid var(--ly-line); }

.ly-s-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.ly-s-geen-foto {
    grid-template-columns: 1fr;
    max-width: 780px;
}

/* Om en om spiegelen, zodat de pagina niet als een lijst leest */
.ly-s-omgekeerd .ly-s-beeld { order: -1; }

.ly-s-tekst h2 { margin-bottom: 0.7em; }
.ly-s-tekst .ly-rijk { font-size: 0.98rem; line-height: 1.78; }

.ly-s-beeld { border-radius: var(--ly-radius); overflow: hidden; }
.ly-s-beeld img {
    /* Geen vaste 4:3 meer: die sneed teamfoto's met een eigen
       beeldverhouding (bv. bijschrift onderin) af. */
    display: block;
    width: 100%;
    height: auto;
}

.ly-s-inhoud { padding: clamp(48px, 7vw, 80px) 0; }

@media (max-width: 900px) {
    .ly-s-inner { grid-template-columns: 1fr; gap: 28px; }
    .ly-s-omgekeerd .ly-s-beeld { order: 0; }
    .ly-s-beeld { order: -1; }
}