/* Cursuspagina's (Pro, Basis, Ramen tinten, 1-op-1): vast sjabloon bovenop site.css. Alleen compositie en ritme;
   alle componenten zelf komen uit site.css. */

/* ---------- Hero: belofte links, prijsblok rechts ---------- */
.cg-hero-grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 460px);gap:clamp(40px, 6vw, 104px);align-items:end}
.cg-hero h1{margin-top:20px;max-width:16ch}
.cg-hero .lead{max-width:46ch}
.cg-labels{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.js .cg-labels{animation:fadeUp 1s var(--ease) .16s both}
.js .cg-hero [data-prijsblok]{animation:fadeUp 1.1s var(--ease) .42s both}

/* ---------- Sectieritme ---------- */
.cg-eerste{padding-top:clamp(64px, 7vw, 112px)}
.cg .head{align-items:flex-end}
.cg-lead{margin-top:14px;max-width:56ch;font-size:1.0625rem;line-height:1.65;color:var(--ink-2)}
.cg-band{background:var(--panel);padding-block:clamp(72px, 8vw, 128px);margin-bottom:clamp(80px, 9vw, 140px)}
.cg-band .wa-scherm{background:oklch(0.95 0.014 85)}
.cg-sub{font-size:1.375rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.cg-noot{margin-top:28px;max-width:62ch;color:var(--ink-2)}
.cg-noot a,.cg-tekst a{text-underline-offset:3px;font-weight:600;color:var(--ink)}

/* ---------- Programma: kop blijft staan terwijl de dag langs scrolt ---------- */
.cg-prog{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(40px, 6vw, 104px);align-items:start}
.cg-prog-kop{position:sticky;top:calc(var(--header-h) + 84px)}
.cg-concept{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.cg-foto{margin-top:36px;aspect-ratio:4/3}
.cg-prog .timeline li:not(.dag) > div{min-width:0}
.cg-prog .timeline li.cg-pauze h3{font-weight:600;color:var(--ink-2)}
.cg-prog .timeline a{text-underline-offset:3px;font-weight:600;color:var(--ink)}

/* ---------- Finishes: één kleur in vijf finishes, zodat alleen het verschil in glans overblijft ---------- */
.cg-fin{display:grid;grid-template-columns:1fr auto;grid-template-areas:"van tot" "rij rij";row-gap:14px}
.cg-fin-as{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cg-fin-as--van{grid-area:van}
.cg-fin-as--tot{grid-area:tot;color:var(--red)}
.cg-fin-rij{grid-area:rij;position:relative;list-style:none;margin:0;padding:24px 0 0;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:clamp(14px, 2vw, 28px)}
.cg-fin-rij::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg, var(--sage-deep), var(--olive) 50%, var(--red))}
.cg-fin-item{display:flex;flex-direction:column}
.cg-fin-item h3{margin-top:18px;font-size:1.125rem;font-weight:800;letter-spacing:-.01em}
.cg-fin-niveau{margin-top:2px;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cg-fin-item:is([data-niveau="4"], [data-niveau="5"]) .cg-fin-niveau{color:var(--red)}
.cg-fin-status{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.9375rem;font-weight:700;line-height:1.35}
.cg-fin-status::before{content:"";flex:none;width:10px;height:10px;background:var(--olive)}
.cg-fin-item:not([data-in="ja"]) .cg-fin-status{color:var(--ink-2);font-weight:600}
.cg-fin-item:not([data-in="ja"]) .cg-fin-status::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--olive-line)}
.cg-fin-zin{margin-top:8px;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.cg-fin ~ .cg-noot{margin-top:clamp(28px, 3vw, 40px)}
.cg-fin ~ .bron{margin-top:10px}

/* De stalen zijn getekend, geen foto: licht valt overal van linksboven, zodat de vijf naast elkaar vergelijkbaar blijven. */
.cg-staal{display:block;aspect-ratio:1;background:linear-gradient(180deg, oklch(0.49 0.06 135), oklch(0.4 0.055 135));box-shadow:inset 0 0 0 1px oklch(0.25 0.01 120 / .14);-webkit-print-color-adjust:exact;print-color-adjust:exact}
[data-finish="glans"] .cg-staal{background:
  linear-gradient(118deg, transparent 0 34%, oklch(0.99 0.005 120 / .62) 34.5% 37%, transparent 37.5% 42%, oklch(0.99 0.005 120 / .24) 42.5% 49%, transparent 49.5%),
  radial-gradient(110% 70% at 15% 0%, oklch(0.62 0.08 135), transparent 65%),
  linear-gradient(180deg, oklch(0.5 0.075 135), oklch(0.32 0.06 135))}
[data-finish="satin"] .cg-staal{background:
  linear-gradient(118deg, transparent 18%, oklch(0.99 0.005 120 / .2) 42%, transparent 66%),
  linear-gradient(180deg, oklch(0.49 0.065 135), oklch(0.38 0.055 135))}
[data-finish="mat"] .cg-staal{background:linear-gradient(180deg, oklch(0.47 0.05 135), oklch(0.43 0.048 135))}
[data-finish="metallic"] .cg-staal{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .95 0 0 0 0 .88 0 0 0 8 -5.6'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
  linear-gradient(118deg, transparent 20%, oklch(0.99 0.005 120 / .3) 44%, transparent 64%),
  linear-gradient(180deg, oklch(0.52 0.07 135), oklch(0.34 0.06 135))}
[data-finish="chroom"] .cg-staal{background:linear-gradient(172deg,
  oklch(0.96 0.015 130) 0%, oklch(0.74 0.07 135) 26%, oklch(0.24 0.03 135) 47%, oklch(0.58 0.08 135) 53%,
  oklch(0.92 0.03 130) 70%, oklch(0.5 0.07 135) 86%, oklch(0.3 0.04 135) 100%)}

/* ---------- Cursus of YouTube: eerlijke vergelijking, de werkplaatskolom draagt het gewicht ---------- */
.cg-yt-tabel{font-size:1rem;line-height:1.55;table-layout:fixed}
.cg-yt-tabel thead th:first-child{width:22%}
.cg-yt-tabel tbody th,.cg-yt-tabel td{padding-block:20px}
.cg-yt-tabel td:nth-of-type(1){color:var(--ink-2)}
.cg-yt-tabel td:nth-of-type(2),.cg-yt-tabel thead th:last-child{padding-inline:22px;background:var(--sage-tint)}
.cg-yt-tabel td:nth-of-type(2){font-weight:600}
.cg-yt-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(28px, 3vw, 40px)}
.cg-yt-voet .cg-noot{margin-top:0;max-width:52ch}
.cg-yt-btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.cg-yt-link{font-weight:700;color:var(--ink);text-underline-offset:4px}

/* ---------- Meekrijgen: drie lijsten naast elkaar ---------- */
.cg-mee{display:grid;grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);gap:clamp(32px, 4vw, 64px)}
.cg-mee > div{border-top:1px solid var(--ink);padding-top:26px}
.cg-mee .cg-sub{margin-bottom:22px}
.cg-pak{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cg-pak li{position:relative;padding-left:32px;line-height:1.55}
.cg-pak li::before{content:"";position:absolute;left:4px;top:.45em;width:11px;height:11px;background:var(--olive)}

/* ---------- Nazorg ---------- */
.cg-nazorg-extra{margin-top:clamp(48px, 6vw, 80px);padding-top:28px;border-top:1px solid var(--line)}
.cg-nazorg-extra .eyebrow{color:var(--olive);font-weight:800}
.cg-nazorg-extra p:not(.eyebrow){margin-top:8px;max-width:58ch;font-size:1.0625rem;font-weight:600;line-height:1.55}
.cg-nazorg-c{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(32px, 5vw, 80px);align-items:center}
.cg-nazorg-c .cg-tekst .h2 + p{margin-top:24px}
.cg-nazorg-c .cg-tekst > p{max-width:50ch;font-size:1.0625rem;line-height:1.6}
.cg-nazorg-c .cg-tekst > p + p{margin-top:16px;color:var(--ink-2)}
.cg-nazorg-c .cg-tekst [data-regel]{font-size:clamp(1.25rem, 1.9vw, 1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.35}

/* ---------- Doorstroom (Basis naar Pro) ---------- */
.cg-door{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 400px);gap:clamp(40px, 6vw, 104px);align-items:center;margin-top:clamp(64px, 7vw, 104px);padding-top:clamp(40px, 5vw, 64px);border-top:1px solid var(--line)}
.cg-door .sub-h{margin-bottom:0;max-width:18ch}
.cg-door .cg-lead{max-width:46ch}
.cg-door .btn{margin-top:28px}

/* ---------- Vragen ---------- */
.cg-vragen{display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:clamp(40px, 6vw, 104px);align-items:start}
.cg-vragen-kop{position:sticky;top:calc(var(--header-h) + 84px)}
.cg-vragen-kop .btn{margin-top:28px}
.cg-vragen .faq details > :not(summary){max-width:62ch;color:var(--ink-2)}
.cg-vragen .faq details > p:last-child{padding-bottom:22px}
.cg-vragen .faq details > p + p{margin-top:10px}
.cg-vragen .faq a{color:var(--ink);font-weight:600;text-underline-offset:3px}

/* ---------- Andere cursussen ---------- */
@media (min-width: 1181px){.cg-andere .cards{grid-template-columns:repeat(3, 1fr)}}
.cg-andere .more a{font-weight:700;text-underline-offset:4px}

@media (max-width: 900px){
  .cg-hero-grid,.cg-prog,.cg-door,.cg-vragen,.cg-nazorg-c{grid-template-columns:1fr}
  .cg-prog-kop,.cg-vragen-kop{position:static}
  .cg-foto{aspect-ratio:16/9}
  .cg-mee{grid-template-columns:1fr 1fr}
  .cg-mee > div:first-child{grid-column:1 / -1}
  .cg-door-kaart{max-width:420px}
}
@media (max-width: 760px){
  .cg-fin{grid-template-columns:1fr;grid-template-areas:"van" "rij" "tot"}
  .cg-fin-rij{grid-template-columns:1fr;gap:22px;padding:0 0 0 22px}
  .cg-fin-rij::before{inset:0 auto 0 0;width:3px;height:auto;background:linear-gradient(180deg, var(--sage-deep), var(--olive) 50%, var(--red))}
  .cg-fin-item{display:grid;grid-template-columns:84px minmax(0, 1fr);column-gap:18px;align-content:start}
  .cg-fin-item > *{grid-column:2}
  .cg-fin-item .cg-staal{grid-column:1;grid-row:1 / span 4;align-self:start;aspect-ratio:4/5}
  .cg-fin-item h3{margin-top:0}
  .cg-fin-status{margin-top:8px}
  .cg-mee{grid-template-columns:1fr}
  .cg-yt-tabel{table-layout:auto}
  .cg-yt-tabel tr{padding-block:18px}
  .cg-yt-tabel tbody th{padding-block:0 8px}
  .cg-yt-tabel td{padding-block:4px}
  .cg-yt-tabel td:nth-of-type(2){margin-top:10px;padding:12px 16px}
  /* Drie volle kaarten onder elkaar kosten een kwart van de pagina; als veegrij blijft de volgende kaart in beeld als hint. */
  .cg-andere .cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80%, 320px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) 12px;scrollbar-width:none}
  .cg-andere .cards::-webkit-scrollbar{display:none}
  .cg-andere .cards > *{scroll-snap-align:start}
  /* Op de telefoon staat de tijdlijn direct onder de kop; de sfeerfoto kost hier een heel scherm scrollen. */
  .cg-foto{display:none}
}