/* ============================================
   KLASLAB.BE - site-laag boven core.min.css + taalmaatje-thema
   Alles via framework-tokens: dark mode flipt automatisch mee.
   Gescoped op body.marketing waar het gedrag van het thema wordt
   overschreven. Marketing-helpers zijn overgenomen uit taalmaatje
   (public/assets/marketing.css) zodat beide sites één vormentaal delen.
   ============================================ */

/* Het thema verlaagt --h1-font-size naar 2rem voor werkschermen;
   op de marketingsite mag de framework-marketingmaat terug. */
body.marketing {
  --h1-font-size: var(--text-4xl);
  --h2-font-size: var(--text-3xl);
}

/* Sticky footer zonder :has()-afhankelijkheid (core doet dit al via
   body:has(> .footer); deze fallback geeft hetzelfde resultaat overal). */
body.marketing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.marketing > main { flex: 1; }

/* ─── Skip-link (bestaat niet in core) ─── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-md);
  z-index: 400;
  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); }

/* ─── Woordmerk (templates/partials/logo.php) ───
   Em-gebaseerd zodat nav en footer één partial delen. De koepel staat in inkt
   en niet in het blauw van taalmaatje: Klaslab hoort terug te treden naast de
   productmerken (besluit 23). Het blokje is het blauw; op donker wordt het
   geel, want geel op wit is als vlakje te bleek. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.brand-mark {
  height: 1.5em;
  width: auto;
  flex-shrink: 0;
  --logo-fill: var(--color-primary-dark);
  --logo-spark: light-dark(var(--color-primary), var(--color-secondary));
}
.brand-name {
  font-family: var(--font-accent);
  font-weight: 600;
}

/* ─── Hero: tekst + statuskaart ─── */
body.marketing .hero { padding-bottom: var(--space-3xl); }
.hero-split {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}
@media (min-width: 1025px) {
  .hero-split { grid-template-columns: 7fr 5fr; }
}
.hero-kicker,
.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 .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 als indexkaartjes ─── */
.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-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--text-3xl);
  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 merk-band: doorschijnende papierkaartjes ─── */
.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 {
  display: block;
  background: rgba(253, 252, 242, 0.07);
  border: 1px solid rgba(253, 252, 242, 0.18);
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.troef:hover {
  background: rgba(253, 252, 242, 0.12);
  border-color: rgba(253, 252, 242, 0.35);
  color: inherit;
}
.troef .material-icons {
  color: var(--color-secondary);
  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: var(--space-sm); }
.troef-meer {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-secondary);
}

/* ─── Split-secties (tekst naast beeld) ─── */
.split {
  display: grid;
  gap: var(--space-3xl);
  align-items: center;
}
@media (min-width: 1025px) {
  .split { grid-template-columns: 1fr 1fr; }
}

/* ─── Tekstpagina's (didactiek, over, privacyverklaring) ─── */
.page-prose { max-width: 46rem; }
.page-prose h2 { margin-top: var(--space-3xl); margin-bottom: var(--space-md); }
.page-prose h2:first-child { margin-top: 0; }
.page-prose h3 { margin-top: var(--space-2xl); margin-bottom: var(--space-sm); }
.page-prose ul { padding-left: 1.2em; margin-bottom: var(--space-lg); }
.page-prose li { margin-bottom: var(--space-sm); }

/* ─── Vinkjeslijsten ─── */
.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; }

/* ─── Footer-indeling ─── */
body.marketing .footer {
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  /* De border-gradient-top-utility schildert zijn eigen binnenachtergrond
     (default --color-surface = papier) en wiste zo de inktband; deze
     variabele zet de band terug zonder het gradientlijntje te verliezen. */
  --border-gradient-bg: var(--color-surface-brand);
}
.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); }
/* De voettekst staat op de donkere merk-band: daar wordt het kader crème en
   het blokje geel, net als op de favicon. Zonder deze regel zou het kader het
   inkt van --color-primary-dark houden en onzichtbaar zijn. */
.footer-brand .brand-mark {
  --logo-fill: var(--color-surface-brand-text);
  --logo-spark: var(--color-secondary);
}
.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-legal { opacity: 0.7; font-size: var(--text-xs); }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-2xl);
  justify-content: space-between;
  border-top: 1px solid rgba(253, 252, 242, 0.18);
  padding-top: var(--space-lg);
  font-size: var(--text-xs);
  opacity: 0.75;
}
.footer-meta p { margin-bottom: 0; }

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

/* ============================================
   KLASLAB-EIGEN COMPONENTEN
   ============================================ */

/* Het stapnummer/-icoon verliest anders van .step p (hogere specificiteit) */
.step .step-nr {
  color: var(--color-primary);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
}

/* Troeven zijn hier geen links: geen hover-verandering op een div */
.troef:not(a):hover {
  background: rgba(253, 252, 242, 0.07);
  border-color: rgba(253, 252, 242, 0.18);
}

/* ─── Productkaarten (home): .card met omkaderd icoon links en statusbadge rechts ─── */
.product-grid {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 641px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
.product-card {
  display: flex;
  flex-direction: column;
}
.product-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.product-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
}
/* Badge in de flow, niet absoluut: lange namen mogen op mobiel gewoon wikkelen */
.product-card-head .badge { flex-shrink: 0; }
.product-icon {
  color: var(--color-primary);
  border: 2px solid currentColor;
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
}
.product-card h3 { margin-bottom: 0; }
.product-audience {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.product-card p:not(.product-audience) {
  flex: 1;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: 0;
}
.product-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* ─── Statuskaart in de hero ("Stand van het lab"): indexkaartje met gekleurde tab ─── */
.lab-card {
  border-top: 2px solid var(--color-primary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.lab-card-title {
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.lab-status {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}
.lab-status li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-accent);
  font-weight: 600;
}
.lab-card-link {
  font-weight: 600;
  font-size: var(--text-sm);
}

/* ─── Toolblokken (/tools): kicker, kop, badge, tekst en een eerlijk statusblokje ─── */
.tool-block h2 { margin-bottom: var(--space-sm); }
.tool-block .badge { margin-bottom: var(--space-lg); }
.tool-status {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-left: 3px solid var(--color-secondary);
  padding-left: var(--space-md);
}
.demo-vinkjes .is-planned .material-icons { color: var(--color-text-muted); }

/* ─── Stappen in 2x2 (over) ─── */
@media (min-width: 641px) {
  .step-grid-2 { grid-template-columns: repeat(2, 1fr); }
}