/* ============================================================
   Bitkring - landingssite op de apex (templates/apex/).
   Geladen NA core.min.css, klaslab.css en app.css, alleen op de apex.
   Uitsluitend framework-tokens; het sectieritme komt uit het framework
   (.hero, .section, .footer), dit bestand vult de klaslab-eigen patronen
   aan die klaslab.be ook gebruikt (troeven, split, vinkjes), met de
   klaslab-tokens. Skip-link, stappen en footer-indeling staan sinds
   css-framework 4.1.0 in de core.
   ============================================================ */

/* ─── Kopbalk: het merk iets groter dan in de app ─── */
.landing .nav-brand { font-size: var(--text-lg); }

/* ─── Hero ─── */
.landing .hero { padding-bottom: var(--space-3xl); }
/* De overline boven de hero-titel iets groter dan de frameworkmaat. */
.hero-copy .overline { font-size: var(--text-sm); margin-bottom: var(--space-md); }
.hero-copy { max-width: 46rem; }
.hero-copy .hero-title { margin-bottom: var(--space-lg); }
.hero-copy .hero-lead { margin-bottom: var(--space-xl); }
.hero-note {
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ─── Troeven op de merkband: doorschijnende kaartjes ─── */
.troef-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 641px) {
    .troef-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
    .troef-grid { grid-template-columns: repeat(4, 1fr); }
}
.troef {
    background: color-mix(in srgb, var(--color-surface-brand-text) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-surface-brand-text) 18%, transparent);
    border-radius: var(--radius-sm);
    padding: var(--space-xl);
}
.troef .material-icons {
    color: var(--color-surface-brand-link);
    border: 2px solid currentColor;
    border-radius: var(--radius-sm);
    padding: var(--space-xs);
    margin-bottom: var(--space-md);
}
.troef h3 { margin-bottom: var(--space-sm); font-size: var(--text-lg); }
.troef p { font-size: var(--text-sm); opacity: 0.85; margin-bottom: 0; }

/* ─── Video: een gewoon <video>-element, de apex draait zonder JavaScript ─── */
.promo-video {
    display: block;
    width: 100%;
    max-width: 60rem;
    height: auto;
    margin: 0 auto;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

/* ─── Split-sectie: tekst naast kaart ─── */
.split { display: grid; gap: var(--space-3xl); align-items: center; }
@media (min-width: 1025px) {
    .split { grid-template-columns: 1fr 1fr; }
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ─── Vinkjeslijst ─── */
.demo-vinkjes { list-style: none; padding: 0; margin: 0 0 var(--space-xl); }
.demo-vinkjes li {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    margin-bottom: var(--space-md);
}
.demo-vinkjes .material-icons { color: var(--color-success); font-size: 1.25rem; }
.demo-vinkjes code { font-family: var(--font-mono); font-size: 0.95em; }

/* ─── Tekstblok ─── */
.page-prose { max-width: 46rem; }
.page-prose h2 { margin-bottom: var(--space-md); }
.page-prose p { font-size: var(--text-lg); color: var(--color-text-secondary); }

/* ─── CTA-band ─── */
.cta-band .hero-actions { justify-content: center; }
.cta-band .section-header { margin-bottom: var(--space-xl); }

/* ─── Footer: raster, kolommen en merkband komen uit het framework (4.1.0) ─── */
.landing .footer { padding: var(--space-3xl) var(--space-lg) var(--space-xl); }