/* =============================================================================
   kleurvlak.css — Atlas College V3, ronde 2: drie menu-experimenten op de
   gekozen Kleurvlak-intro. Laadt NA intro.css (tokens, pillen, menupaneel,
   intro-laag en proefbalk komen daaruit).
   Gedeeld door kleurvlak-a-pillen.html, kleurvlak-b-balk.html,
   kleurvlak-c-gesplitst.html.
   ========================================================================== */

:root {
  --blokken-overlap: 96px;
}

/* ------------------------------------------------------------ utilitybalk
   Ouderomgeving | Leerlingomgeving staan boven het menu, zodat de menurij
   zelf alleen Nieuwe leerlingen, Onze scholen, Zoeken en Contact draagt. */
.utilitybalk { display: flex; gap: 4px; align-items: center; pointer-events: auto; }
.utilitybalk a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  color: #fff; font: 600 .875rem/1 var(--font-body); text-decoration: none;
  border-radius: var(--r-rond);
  transition: background-color .2s;
}
.utilitybalk a:hover { background: rgb(255 255 255 / .16); }
.utilitybalk svg { width: 16px; height: 16px; flex: none; }

/* Header-basis voor alle drie: kolom met utility boven, menurij onder */
.sitekop { display: block; padding: 0; }
.sitekop__rij {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--goot);
}
.sitekop__rij > * { pointer-events: auto; }

/* ============================================================ A · PILLEN
   Doorlopende utilitystrook bovenaan, daaronder de ZZM-pillen. */
.sitekop--a .utilitybalk {
  justify-content: flex-end; padding: 4px var(--goot);
  background: rgb(0 30 60 / .55); backdrop-filter: blur(8px);
}
.sitekop--a .sitekop__rij { padding-top: 16px; }

/* ============================================================== B · BALK
   Eén witte zwevende balk; de utility hangt er als tab bovenop, rechts. */
.sitekop--b { padding: 16px var(--goot) 0; }
.kopbalk { position: relative; pointer-events: auto; }
.sitekop--b .utilitybalk {
  justify-content: flex-end; width: max-content; margin: 0 32px 0 auto;
  padding: 0 6px;
  background: var(--primary-800); border-radius: 16px 16px 0 0;
}
.sitekop--b .sitekop__rij {
  grid-template-columns: auto 1fr auto;
  padding: 8px 8px 8px 12px;
  background: #fff; border-radius: var(--r-rond);
  box-shadow: 0 1px 2px rgb(0 30 60 / .08), 0 16px 40px -16px rgb(0 30 60 / .45);
}
.sitekop--b .logo-tegel { height: 56px; padding: 0 12px; box-shadow: none; }
.sitekop--b .logo-tegel img { height: 42px; }
.sitekop--b .hoofdnav { justify-self: center; }
.sitekop--b .hoofdnav ul { gap: 4px; }
.sitekop--b .hoofdnav .pil { box-shadow: none; background: transparent; }
.sitekop--b .hoofdnav .pil:hover { background: var(--primary-100); }
.sitekop--b .kop-acties .pil { box-shadow: none; }
.sitekop--b .kop-acties .pil--zoek { background: var(--pagina); }
.sitekop--b .kop-acties .pil--zoek:hover { background: var(--primary-100); }

/* ========================================================= C · GESPLITST
   Logo los links; rechts een tweelaags cluster: utility boven, menu onder,
   als donkere glazen pillen op de foto. */
.sitekop--c .sitekop__rij {
  grid-template-columns: auto 1fr; align-items: start; padding-top: 20px;
}
.sitekop--c .logo-tegel { height: 72px; padding: 0 28px; }
.sitekop--c .logo-tegel img { height: 52px; }
.kopcluster { justify-self: end; display: grid; justify-items: end; gap: 8px; }
.sitekop--c .utilitybalk a {
  min-height: 36px; background: rgb(0 30 60 / .45); backdrop-filter: blur(8px);
}
.sitekop--c .utilitybalk a:hover { background: rgb(0 30 60 / .75); }
.kopcluster__rij { display: flex; gap: 8px; align-items: center; }
.sitekop--c .hoofdnav .pil,
.sitekop--c .kop-acties .pil--zoek {
  background: rgb(0 30 60 / .55); color: #fff; box-shadow: none;
  backdrop-filter: blur(10px);
  outline: 1px solid rgb(255 255 255 / .22); outline-offset: -1px;
}
.sitekop--c .hoofdnav .pil:hover,
.sitekop--c .kop-acties .pil--zoek:hover { background: var(--primary-800); }

/* -------------------------------------------------- header: smal scherm */
@media (max-width: 1080px) {
  .utilitybalk { display: none; }
  .sitekop__rij, .sitekop--b .sitekop__rij, .sitekop--c .sitekop__rij {
    grid-template-columns: auto 1fr; padding-top: 16px;
  }
  .sitekop--b { padding: 0; }
  .sitekop--b .sitekop__rij { margin: 12px 12px 0; padding: 6px 6px 6px 8px; }
  .sitekop--b .logo-tegel { height: 44px; }
  .sitekop--b .logo-tegel img { height: 32px; }
  .sitekop--c .logo-tegel { height: 48px; padding: 0 16px; }
  .sitekop--c .logo-tegel img { height: 34px; }
  .kopcluster { align-self: center; }
}

/* ============================================================== DE VOUW
   Hero + drie blokken passen samen in één scherm: de hero vult wat
   overblijft, de blokken schuiven er met een overlap overheen. */
.vouw {
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
}

.hero2 {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: 420px;
  padding: 160px var(--goot) calc(var(--blokken-overlap) + 40px);
  color: #fff;
}
.hero2__media { position: absolute; inset: 0; z-index: -2; background: var(--primary-800); }
.hero2__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.hero2::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 30 60 / .55) 0%, rgb(0 30 60 / 0) 26%),
    linear-gradient(8deg, rgb(0 30 60 / .92) 0%, rgb(0 30 60 / .7) 30%, rgb(0 30 60 / 0) 62%),
    linear-gradient(90deg, rgb(0 30 60 / .45) 0%, rgb(0 30 60 / 0) 55%);
}

.hero2__kop { max-width: 1368px; width: 100%; margin: 0 auto; }
.hero2__eyebrow { margin: 0 0 12px; font: 600 1.125rem/1.4 var(--font-body); color: #fff; }
.hero2 h1 {
  margin: 0; max-width: 17ch;
  font: 800 clamp(3rem, 1.4rem + 4.6vw, 6rem)/.95 var(--font-kop);
  text-wrap: balance;
}
@media (max-height: 820px) and (min-width: 761px) {
  .hero2 h1 { font-size: clamp(3rem, 9vh, 5rem); }
}

/* ------------------------------------------------------------- blokken */
.blokken {
  position: relative; z-index: 2;
  margin-top: calc(var(--blokken-overlap) * -1);
  padding: 0 var(--goot) 24px;
}
.blokken__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-width: 1368px; margin: 0 auto;
}
/* BLOCK/AUDIENCE PANEL — exact naar Figma (Atlas 7094:660, De Dijk 7130:2458):
   padding 32 · gap 32 · radius 16 · min. hoogte 284 · eyebrow 14/24 600 ·
   kop Bricolage 800 36/44 · tekst 18/28 · link 18/28 600 onderstreept + FA-pijl, gap 16 ·
   achtergrondicoon FA Solid 360px, 5% zwart, −14,52°. Kleuren per variant via --blok-*. */
@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("../fonts/fa6-solid-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: block;
}
.blok {
  --blok-kop: #fff; --blok-tekst: #fff; --blok-link: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  min-height: 284px; padding: 32px;
  border-radius: 16px;
}
.blok__icoon {
  position: absolute; z-index: -1; top: 117px; left: calc(100% - 155px);
  width: 135.674px; height: 175.124px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.blok__icoon span {
  display: block; width: 100px; height: 155px;
  font: 900 360px/76px "Font Awesome 6 Free"; color: rgb(0 0 0 / .05);
  transform: rotate(-14.52deg);
  transition: transform .6s var(--ease-out);
}
.blok:hover .blok__icoon span { transform: rotate(-8deg) translate(-6px, -6px); }
.blok__inhoud { flex: 1 0 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
/* Figma zet het paneel op een vaste 284px; de inhoud mag dan tot tegen de link lopen
   (zoals in Figma blok 1). Pas vanaf 1500px, waar de tekst net als in Figma (1600) past
   — smaller groeit het blok mee zodat tekst nooit over de link valt. */
@media (min-width: 1500px) {
  .blok { height: 284px; min-height: 0; }
  .blok__inhoud { flex: 1 1 0; min-height: 0; }
}
.blok__kop { display: flex; flex-direction: column; gap: 16px; color: var(--blok-kop); }
.blok__label { margin: 0; font: 600 14px/24px var(--font-body); }
.blok h2 { margin: 0; font: 800 36px/44px var(--font-kop); }
.blok__tekst { margin: 0; font: 400 18px/28px var(--font-body); color: var(--blok-tekst); }
.blok__link {
  display: inline-flex; align-items: center; gap: 16px;
  font: 600 18px/28px var(--font-body); color: var(--blok-link);
  text-decoration: none;
}
.blok__link-tekst { text-decoration: underline; text-decoration-thickness: 1px; }
.blok__pijl { font: 900 18px/28px "Font Awesome 6 Free"; transition: transform .25s var(--ease-out); }
.blok:hover .blok__pijl { transform: translateX(4px); }
/* Het hele blok is klikbaar via de link; de link blijft de zichtbare CTA */
.blok__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.blok__link:focus-visible { outline: none; }
.blok:has(.blok__link:focus-visible) { outline: 3px solid var(--rood); outline-offset: 3px; }

/* Atlas College */
.blok--copernicus { background: #56227d; }
.blok--triade { background: #4da32f; --blok-kop: #001e3c; --blok-tekst: #2c3135; --blok-link: #2c3135; }
.blok--newton { background: #f49600; --blok-kop: #001e3c; --blok-tekst: #2c3135; --blok-link: #2c3135; }

/* -------------------------------------------------- tablet en mobiel */
@media (max-width: 1080px) {
  .blokken__grid { grid-template-columns: 1fr 1fr; }
  .blok:last-child { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 760px) {
  :root { --blokken-overlap: 56px; }
  /* Mobiel: blokken gestapeld, het eerste begint boven de vouw */
  .vouw { display: block; min-height: 0; }
  .hero2 { min-height: 0; height: 68svh; padding-top: 120px; }
  .hero2 h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
  .hero2__eyebrow { font-size: 1rem; }
  .blokken { padding-bottom: 96px; }
  .blokken__grid { grid-template-columns: 1fr; }
  .blok, .blok:last-child { min-height: 0; padding: 24px; gap: 24px; }
  .blok h2 { font-size: 28px; line-height: 36px; }
}

/* ===================================================== MOBIEL MENU: LIJST
   Zoekveld bovenaan, hoofditems als witte tekstlinks (min. 48px tikvlak),
   inloglinks als rode rijen met pijl. */
.menupaneel--lijst {
  justify-content: flex-start; gap: 24px;
  padding: 104px 16px 40px; overflow-y: auto;
  background: var(--primary-800);
}
.menupaneel__zoek {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 20px;
  border-radius: var(--r-rond); background: #fff;
  color: #4f5961; font: 400 18px/1.2 var(--font-body); text-decoration: none;
}
.menupaneel__zoek svg { width: 20px; height: 20px; flex: none; color: var(--kop); }
.menupaneel--lijst .menupaneel__groot { display: grid; gap: 4px; }
.menupaneel--lijst .menupaneel__groot a {
  display: flex; align-items: center;
  min-height: 48px; padding: 0 4px;
  color: #fff; font: 600 24px/1.3 var(--font-body); text-decoration: none;
  transition: color .2s;
}
.menupaneel--lijst .menupaneel__groot a:hover { color: var(--primary-100); }
/* Font Awesome-pijl, dezelfde als in de blokken */
.menupaneel__pijl { flex: none; font: 900 18px/1 "Font Awesome 6 Free"; color: var(--kop); }
.menupaneel--lijst .menupaneel__klein { display: grid; gap: 8px; }
.menupaneel__kop { margin: 0 0 4px 4px; color: var(--primary-100); font: 600 14px/24px var(--font-body); }
.menupaneel--lijst .menupaneel__klein a {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 24px;
  border-radius: var(--r-rond); background: var(--rood);
  color: #fff; font: 600 18px/1.3 var(--font-body); text-decoration: none;
  transition: background-color .2s;
}
.menupaneel--lijst .menupaneel__klein a:hover { background: var(--rood-hover); }
.menupaneel--lijst .menupaneel__klein a svg { width: 20px; height: 20px; flex: none; }
.menupaneel--lijst .menupaneel__klein a .menupaneel__extern { margin-left: auto; }
.menupaneel--lijst .menupaneel__klein .menupaneel__pijl { color: #fff; }

/* Begintoestand vóór de intro-animatie (zonder JS alles direct zichtbaar) */
.js .utilitybalk > *, .js .hero2__kop > *, .js .blok { opacity: 0; }

/* Proefbalk op desktop verticaal aan de rechterrand, zodat hij de blokken niet afdekt */
@media (min-width: 761px) {
  .proefbalk {
    left: auto; right: 12px; top: 50%; bottom: auto;
    transform: translateY(-50%);
    flex-direction: column; align-items: stretch; border-radius: 24px;
  }
  .proefbalk .proefbalk__sep { width: auto; height: 1px; margin: 4px 0; }
}

/* Vervolgsectie onder de vouw, alleen zodat de pagina kan scrollen */
.daarna { padding: 96px var(--goot) 160px; }
.daarna__binnen { max-width: 1368px; margin: 0 auto; }
.daarna__label { margin: 0 0 8px; font: 600 .875rem/1.5 var(--font-body); color: var(--primary-500); }
.daarna h2 { margin: 0 0 12px; color: var(--kop); font: 800 clamp(2rem, 1.4rem + 1.8vw, 3rem)/1.08 var(--font-kop); }
.daarna p { margin: 0; max-width: 60ch; }