/* ==========================================================================
   clym-sectoren.css — aanvulling op clym.css voor /sectoren/-pagina's
   Gebruikt clym.css design-tokens (--navy, --goud, --achtergrond, --lichtblauw,
   --ink, --wit). Geen eigen fallback-tokens, geen wijziging aan clym.css.
   ========================================================================== */

/* Sector-rol-kaart: subtiel anders dan probleem-kaart */
.sec-rol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.sec-rol {
  background: var(--lichtblauw);
  border-radius: 6px;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--goud);
}

.sec-rol strong {
  display: block;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.3rem;
}

.sec-rol p {
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.97rem;
  color: var(--ink);
  line-height: 1.45;
}

/* Witte-vlek-callout */
.sec-callout {
  background: var(--wit);
  border: 1px solid var(--goud);
  border-left: 4px solid var(--goud);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  border-radius: 4px;
}

.sec-callout p {
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  font-style: italic;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.5;
}

/* Hub: sector-grid (12 cards) */
.sec-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.sec-hub-card {
  display: block;
  background: var(--wit);
  border: 1px solid rgba(27, 58, 107, 0.10);
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.sec-hub-card:hover,
.sec-hub-card:focus-visible {
  border-color: var(--goud);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(27, 58, 107, 0.08);
  outline: none;
}

.sec-hub-card h3 {
  margin: 0 0 0.35rem 0;
  font-family: "Nunito Sans", sans-serif;
  color: var(--navy);
  font-size: 1.1rem;
}

.sec-hub-card p {
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.4;
}

/* Accent-variant: gebruikt voor MKB-card op sectoren/index.html
   zodat hij visueel apart staat van de 11 reguliere sector-kaarten. */
.sec-hub-card--accent {
  background: var(--lichtblauw);
}

/* Sector-iconen: eigen class i.p.v. .m-icoon zodat page-bg-override
   (die .m-icoon op kleurrijke sector-bodies wit forceert) hier niet ingrijpt.
   Sector-cards staan op witte/lichtblauwe achtergrond: navy icon. */
.sec-icoon {
  width: 56px;
  height: 56px;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.sec-icoon svg {
  width: 56px;
  height: 56px;
  display: block;
}
.sectie-kop.gecentreerd .sec-icoon {
  margin: 0 auto 20px;
}
/* Op navy-sectie alsnog wit (Modules-stijl) */
.sectie-navy .sec-icoon,
.sectie-navy .sec-icoon svg {
  color: #fff;
}
/* Compacter binnen hub-cards */
.sec-hub-card .sec-icoon {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
}
.sec-hub-card .sec-icoon svg {
  width: 40px;
  height: 40px;
}

/* Brood-kruimels */
.sec-breadcrumb {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.92rem;
  color: rgba(26, 26, 46, 0.6);
}

.sec-breadcrumb a {
  color: var(--navy);
  text-decoration: none;
}

.sec-breadcrumb a:hover {
  text-decoration: underline;
}

/* Rollen-kop onder Wat ClyM */
.sec-rollen-kop {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-family: "Nunito Sans", sans-serif;
  color: var(--navy);
}

/* MKB-specifieke blokken — komt uit zip-mkb.html inline-style */
.sec-mkb-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.sec-mkb-feit {
  background: var(--wit);
  border: 1px solid rgba(27, 58, 107, 0.1);
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
}
.sec-mkb-feit__nummer {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--goud);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.sec-mkb-feit__label {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.35;
}
.sec-mkb-uitkomsten {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.sec-mkb-uitkomsten li {
  padding: 0.75rem 0 0.75rem 1.75rem;
  border-bottom: 1px solid rgba(27, 58, 107, 0.08);
  position: relative;
  font-family: "Source Sans 3", sans-serif;
}
.sec-mkb-uitkomsten li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0.75rem;
  color: var(--goud);
  font-weight: 700;
}
.sec-mkb-uitkomsten li:last-child {
  border-bottom: none;
}

/* CTA-knop in sectie-navy: ervoor zorgen dat hij zichtbaar blijft op donker */
.sectie-navy .btn-primair {
  background: var(--goud);
  color: var(--ink);
}
.sectie-navy .btn-primair:hover {
  filter: brightness(1.05);
}

/* Mobiel */
@media (max-width: 640px) {
  .sec-rol-grid { gap: 0.75rem; }
  .sec-mkb-feiten { gap: 0.75rem; }
}

/* ──────────────────────────────────────────────────────────────
   Pagina-achtergrond voor /sectoren/-pagina's
   Hetzelfde patroon als .page-bg-modules / .page-bg-pakketten in clym.css:
   navy-overlay + Unsplash-foto, .page-bg-regels uit clym.css worden actief
   via class="page-bg page-bg-sectoren" op <body>.
   ────────────────────────────────────────────────────────────── */
.page-bg-sectoren {
  background-image:
    linear-gradient(rgba(27,58,107,0.60), rgba(27,58,107,0.60)),
    url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1920&q=80&fit=crop');
}

/* ──────────────────────────────────────────────────────────────
   Tekstkleur-overrides binnen .page-bg-sectoren
   clym.css zet alle tekst op odd-secties wit (color: var(--wit) +
   .page-bg section:nth-of-type(odd) p → wit). Die regel heeft
   specificity (0,2,2) — wint van een gewone .sec-rol p override.
   Daarom !important hier, gericht op kaart-elementen.
   ────────────────────────────────────────────────────────────── */
.page-bg .sec-rol,
.page-bg .sec-rol p,
.page-bg .sec-rol span,
.page-bg .sec-callout,
.page-bg .sec-callout p,
.page-bg .sec-mkb-feit,
.page-bg .sec-mkb-feit__label,
.page-bg .sec-hub-card,
.page-bg .sec-hub-card p,
.page-bg .sec-mkb-uitkomsten li,
.page-bg .probleem-kaart,
.page-bg .probleem-kaart p {
  color: var(--ink) !important;
}
.page-bg .sec-rol strong,
.page-bg .sec-hub-card h3,
.page-bg .probleem-kaart h3 {
  color: var(--navy) !important;
}
.page-bg .sec-mkb-feit__nummer {
  color: var(--goud) !important;
}

/* Disclaimer onder kerncijfers: subtiele tekst op witte overlay */
.page-bg .tekst-muted.tekst-klein {
  color: var(--muted, rgba(26,26,46,0.6)) !important;
}

/* ──────────────────────────────────────────────────────────────
   .sec-tekstbox — semi-opaque inhoud-overlay voor transparante
   secties (odd nth-of-type op .page-bg). Patroon overgenomen van
   FAQ-sectie in clym.css. Headings blijven buiten de box (wit
   op page-bg-overlay), de inhoudelijke tekst zit erin.
   ────────────────────────────────────────────────────────────── */
.sec-tekstbox {
  background: rgba(248, 247, 244, 0.92);
  border-radius: 8px;
  padding: 1.75rem 2rem;
  margin-top: 1rem;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.page-bg .sec-tekstbox p,
.page-bg .sec-tekstbox li,
.page-bg .sec-tekstbox h3 {
  color: var(--ink) !important;
}
.page-bg .sec-tekstbox h3 {
  color: var(--navy) !important;
}
.page-bg .sec-tekstbox .tekst-muted {
  color: var(--muted, rgba(26,26,46,0.6)) !important;
}