/* ============================================================
   Bitblad - landingssite op de apex (templates/apex/).
   Geladen NA fonts.css, core.min.css, bitblad.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 en bitkring ook gebruiken (stappen, troeven, split,
   vinkjes, footer-indeling), met de bitblad-tokens.
   ============================================================ */

/* ─── Skip-link (bestaat niet in core) ─── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-md);
    z-index: var(--z-tooltip);
    background: var(--color-surface-raised);
    color: var(--color-text);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-md); }

/* ─── Kopbalk: het merk iets groter dan in de app ─── */
.landing .nav-brand { font-size: var(--text-lg); }
.landing .nav-links .btn-icon { min-width: 44px; min-height: 44px; }

/* ─── Hero ─── */
.landing .hero { padding-bottom: var(--space-3xl); }
.kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    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);
}

/* ─── "Zo werkt het": drie genummerde stappen ─── */
.step-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 641px) {
    .step-grid { grid-template-columns: repeat(3, 1fr); }
}
.step {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-primary);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: var(--space-xl);
}
.step-nr {
    font-weight: 700;
    font-size: var(--text-3xl);
    font-family: var(--font-mono);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-md);
}
.step h3 { margin-bottom: var(--space-sm); }
.step p { color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: 0; }

/* ─── 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);
}
/* Op de donkere merkband is pruim te donker; het blad krijgt daar de lichte
   pruimtint uit de secondary-ramp, zoals het merk in de voettekst. */
.troef .material-icons {
    color: var(--color-secondary-300);
    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; }

/* ─── 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-indeling ─── */
.landing .footer {
    padding: var(--space-3xl) var(--space-lg) var(--space-xl);
    /* De border-gradient-top-utility schildert zijn eigen binnenachtergrond en
       zou de merkband wissen; deze variabele zet de band terug. */
    --border-gradient-bg: var(--color-surface-brand);
    /* Het merk op de donkere band: creme lijnen, licht pruim blad. */
    --logo-fill: var(--color-surface-brand-text);
    --logo-spark: var(--color-secondary-300);
}
.footer-grid { display: grid; gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
@media (min-width: 641px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-brand .brand-name { color: var(--color-surface-brand-text); }
.footer-tagline { margin-top: var(--space-md); opacity: 0.8; }
.footer-col { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-xs);
    opacity: 0.7;
    margin-bottom: var(--space-xs);
}
.footer-note { opacity: 0.75; font-size: var(--text-xs); margin: 0; }
.footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-2xl);
    justify-content: space-between;
    border-top: 1px solid color-mix(in srgb, var(--color-surface-brand-text) 18%, transparent);
    padding-top: var(--space-lg);
    font-size: var(--text-xs);
    opacity: 0.75;
}
.footer-meta p { margin-bottom: 0; }