/* ───────────────────────────────────────────────────────────
   Nieuwsbrief-CTA (boekjeopen_render_news)
   Eén bron voor het .news-blok dat zowel op de voorpagina als op
   het agenda-archief gerenderd wordt. Eerder stond dit dubbel in
   sections-home.css én archive-agenda.css; de agenda-kopie was
   gedrift (inline-block i.p.v. inline-flex → icoon plakte aan de
   tekst, geen --alt-knop). Bewerk uitsluitend hier.
   ─────────────────────────────────────────────────────────── */

.news {
    margin: 64px 0 0;
    padding: 64px 56px;
    background: var(--plum);
    color: var(--paper);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.news h2 {
    font-family: var(--display);
    font-size: 42px;
    line-height: 1.05;
    margin: 0 0 12px;
}

.news h2 em { color: var(--lavender); }

.news p { margin: 0 0 8px; font-size: 17px; opacity: 0.85; max-width: 42ch; line-height: 1.5; }

.news .cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.news-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--terracotta);
    color: var(--paper);
    font-family: var(--serif);
    font-size: 17px;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    border: 1.5px solid var(--terracotta);
    transition: all 0.15s;
}

.news-btn:hover {
    background: var(--paper);
    color: var(--terracotta);
}

.news-btn--alt {
    background: var(--yellow);
    color: var(--plum);
    border-color: var(--yellow);
}

.news-btn--alt:hover {
    background: transparent;
    color: var(--yellow);
    border-color: var(--yellow);
}

.news-btn--soon {
    background: transparent;
    color: var(--paper);
    border-color: rgba(251, 246, 234, 0.4);
    font-style: italic;
    cursor: not-allowed;
}

.news-btn--soon:hover {
    background: transparent;
    color: var(--paper);
}

.news .via {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    opacity: 0.6;
}

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
    .news {
        /* minmax(0, 1fr) voorkomt dat min-content-items de track uitrekken */
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .news { padding: 32px 24px; }
}