/* EP Vergelijken – Styles (shadcn-inspired tokens + liquid glass) */
:root{
  /* Brand */
  --brand: #21944B; /* donkergroen */
  --brand-2: #59EE91; /* lichtgroen */
  --fg: #1E1E1E; /* donkergrijs */
  --bg: #F5F7FA; /* lichtgrijs */
  --white: #FFFFFF;
  --blue: #3BAFDA; /* zachtblauw */
  --highlight: #FFD166; /* warm geel */

  /* UI tokens */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  --border: rgba(255,255,255,.35);
  --glass: rgba(255,255,255,.65);
  --glass-strong: rgba(255,255,255,.8);
  --text-muted: rgba(30,30,30,.7);
  --container: 1200px;
  --header-h: 120px; /* compacter na verkleinen logo */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{width:min(var(--container), 92vw); margin-inline:auto}

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:.5rem .75rem; background:#000; color:#fff; border-radius:8px; z-index:9999}

/* Header */
.site-header{
  position: sticky; top:0; left:0; right:0; height:var(--header-h);
  display:flex; align-items:center; z-index:20;
  background: transparent; /* laat globale achtergrond doorlopen */
  border-bottom: none;
  transition: background .2s ease, backdrop-filter .2s ease, border-color .2s ease;
}
.site-header.is-glass{
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
/* Logo sizing: scope per regio voor scherpe SVG's */
.site-header .brand img{height:48px; width:auto}
.site-footer .brand img{height:48px; width:auto}
/* Mobile nav toggle (hidden by default; shown on small screens) */
.nav-toggle{
  display:none;
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color: var(--fg);
  border-radius:8px;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
}
.nav-toggle .icon{pointer-events:none}
@media (min-width: 1200px){
  :root{ --header-h: 132px; }
  .site-header .brand img{height:120px}
  .site-footer .brand img{height:120px}
}
.primary-nav ul{list-style:none; display:flex; gap:24px; margin:0; padding:0}
.primary-nav a{opacity:.9}
.primary-nav a[aria-disabled="true"]{opacity:.6; cursor:not-allowed}
.nav-cta .btn{white-space:nowrap}

/* --- Mobile navigation layout --- */
@media (max-width: 900px){
  .site-header{ height:auto }
  .nav{ flex-wrap: wrap }
  .nav-toggle{ display:inline-flex }
  .primary-nav, .nav-cta{ display:none; width:100% }
  .site-header.nav-open .primary-nav,
  .site-header.nav-open .nav-cta{ display:block }
  .primary-nav ul{ flex-direction: column; gap:14px; padding-top:8px }
  .nav-cta{ padding-top:8px }
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:44px; padding:0 18px; border-radius:999px; font-weight:600; transition:all .2s ease; border:1px solid transparent; -webkit-appearance:none; appearance:none; font: inherit; line-height:1; cursor:pointer}
.btn-primary{background: var(--brand); color: #fff; box-shadow: var(--shadow-sm)}
.btn-primary:hover{background: #19743B}
.btn-outline{background: transparent; color: var(--fg); border-color: rgba(0,0,0,.15)}
.btn-outline:hover{background: rgba(0,0,0,.06)}

/* Hero */
.hero{position:relative; min-height:calc(100svh - var(--header-h)); display:grid; place-items:center; overflow:hidden}
.hero-bg{
  position:fixed; inset:-10% -10% -10% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(800px 400px at 10% 15%, rgba(33,148,75,.35), transparent 60%),
    radial-gradient(600px 300px at 90% 20%, rgba(89,238,145,.25), transparent 60%),
    radial-gradient(500px 400px at 70% 80%, rgba(59,175,218,.25), transparent 60%),
    linear-gradient(180deg, #EAF6EF 0%, #F5F7FA 40%, #FFFFFF 100%);
  filter:saturate(1.05);
}
.hero::after{
  content:""; position:absolute; inset:0; backdrop-filter: blur(0px);
  pointer-events:none; z-index:0;
}
.hero-inner{position:relative; padding:calc(var(--header-h) + 32px) 0 64px; z-index:1}

.hero-copy{max-width:760px}
.hero h1{
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height:1.1; margin:0 0 12px;
  letter-spacing:-.01em;
}
.hero .sub{margin:0 0 24px; font-size: clamp(1rem, 2.2vw, 1.125rem); color: var(--text-muted)}

/* Split hero layout */
.hero-split .hero-inner{padding-top: 16px; padding-bottom: 48px}
.hero-grid{display:grid; gap:28px; align-items:center}
@media (min-width: 900px){
  .hero-grid{grid-template-columns: 1.05fr 0.95fr; gap:48px}
}
.hero-text .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.hero-media img{width:100%; height:auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.5)}

/* Compare section */
.section-compare{padding:72px 0 96px; background: transparent; position:relative; z-index:1}
.section-compare h2{font-size: clamp(1.75rem, 4vw, 2.25rem); line-height:1.15; margin:0 0 10px}
/* Wider and centered compare content */
.section-compare .hero-copy{max-width: min(var(--container), 92vw); margin: 0 auto; text-align: center}
.section-compare .hero-card{max-width: 960px; margin: 0 auto}
.section-compare .trust{justify-content:center}
.hero-card.has-form-error .trust{
  margin-top: 18px; /* default was ~6px; add space when error is shown */
}
 
/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:50}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.35)}
.modal-content{position:relative; width:min(580px, 92vw); border-radius: var(--radius-lg); padding:18px; transform: translateY(-6px); opacity:.98}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 6px 10px}
.modal-header h3{margin:0; font-size:1.125rem}
.modal-close{appearance:none; border:none; background:transparent; font-size:1.5rem; line-height:1; cursor:pointer; padding:4px 8px}
.modal-body{padding:0 6px 6px; color: var(--fg)}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; padding:12px 6px 4px}

/* Footer */
.site-footer{position:relative; z-index:1; padding:56px 0 0; color: var(--fg)}
.footer-grid{display:grid; gap:28px}
.footer-brand .footer-desc{margin-top:8px; color: var(--text-muted); max-width: 520px}
.footer-col h3{margin:0 0 10px; font-size:.95rem}
.footer-col ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer-col a{opacity:.9}
.footer-col a:hover{opacity:1}
.footer-col a[aria-disabled="true"]{opacity:.55; cursor:not-allowed}

.footer-bottom{margin-top:32px; border-top:1px solid var(--border); background: transparent}
.footer-bottom-row{display:flex; justify-content:center; align-items:center; gap:12px; padding:14px 0; text-align:center}
.footer-bottom .small{font-size:.85rem; color: var(--text-muted)}

@media (min-width: 900px){
  .footer-grid{grid-template-columns: 1.6fr 1fr 1fr 1fr}
}

/* Glass card */
.glass-card{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.hero-card{padding:18px; display:flex; flex-direction:column; gap:16px}

/* Segmented control */
.segmented{display:flex; background: rgba(255,255,255,.45); border:1px solid var(--border); border-radius:999px; padding:4px; gap:4px}
.segmented-item{flex:1; border:none; background:transparent; height:40px; border-radius:999px; font-weight:600; cursor:pointer; color: var(--fg)}
.segmented-item.is-active{background: var(--brand); color:#fff; box-shadow: var(--shadow-sm);}
.segmented-item.is-active:hover{background: #19743B}
.segmented-item:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}

/* Form */
.compare-form{display:grid; grid-template-columns: 1fr; gap:12px; align-items:end}
.field{display:flex; flex-direction:column; gap:6px}
.field-label{font-size:.85rem; color:var(--text-muted)}
.field.no-label{gap:0; position:relative}
/* Ensure hidden attribute truly hides sections in all browsers */
.compare-form [hidden]{display:none !important}

/* Text input inside compare form (exam field) */
.compare-form .input-icon{position:relative; display:block}
.compare-form .input-icon .icon-search{position:absolute; left:14px; top:50%; transform: translateY(-50%); color: var(--text-muted); pointer-events:none}
.compare-form .input-icon input[type="text"]{
  height:60px; width:100%; border-radius:12px; border:1px solid var(--border); padding:0 14px 0 44px; font-size:1.05rem; background: #F5F7FA;
  outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.compare-form .input-icon input[type="text"]::placeholder{color: rgba(0,0,0,.45)}
.compare-form .input-icon input[type="text"]:focus{border-color: rgba(33,148,75,.5); background:#fff}
/* Invalid state */
.compare-form .input-icon input.is-invalid{
  border-color: #D93025 !important;
  box-shadow: 0 0 0 1px rgba(217,48,37,.15), inset 0 1px 0 rgba(255,255,255,.3);
  background:#fff;
}
/* Inline error text */
.compare-form .field-error{
  position:absolute;
  left:44px; /* align with input text after search icon */
  top: calc(100% + 4px);
  margin:0;
  color:#D93025;
  font-size:.9rem;
  pointer-events:none;
}
input[type="search"]{
  height:52px; border-radius:12px; border:1px solid var(--border); padding:0 14px; font-size:1rem; background: var(--glass-strong);
  outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
input[type="search"]::placeholder{color: rgba(0,0,0,.45)}
input[type="search"]:focus{border-color: rgba(33,148,75,.5); background:#fff}

.form-actions .btn{height:60px; padding:0 22px}

/* Mobile: make CTA full width under the field */
@media (max-width: 767px){
  .form-actions .btn{width:100%}
}

/* Autocomplete dropdown (woonplaats) */
.autocomplete-list{
  position:absolute;
  top: calc(100% + 6px);
  left:0; right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: var(--shadow);
  list-style:none; margin:0; padding:6px; max-height:240px; overflow:auto;
  z-index: 2000; /* above Leaflet map panes */
}
.autocomplete-list li{
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
.autocomplete-list li:hover, .autocomplete-list li[aria-selected="true"]{
  background: rgba(0,0,0,.06);
}

/* Disabled button state */
.btn[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Disable map interactions when suggestions are open */
#loc-map.map-disabled{
  pointer-events: none;
}

/* Map legend (Leaflet control) */
.map-legend{
  background: #fff;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 8px 10px;
  font-size: .9rem;
  line-height: 1.2;
}
.map-legend-row{display:flex; align-items:center; gap:8px; margin:4px 0}
.map-legend .swatch{
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c, #666);
  border: 2px solid var(--c, #666);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.map-legend .pin{width:14px; height:auto; display:inline-block}

/* Ensure map container can host overlay */
#loc-map{ position: relative }

/* Loading overlay (shared for results + map) */
.loading-overlay{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 5000;
  pointer-events: all;
}
.loading-overlay .loader-block{ display:flex; flex-direction:column; align-items:center; gap:10px }
.loading-overlay .loader-text{ color: var(--text-muted); font-weight:600 }
.loader-cap svg{ width:72px; height:72px }
.loader-cap .draw{
  stroke: var(--brand);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: capDraw 1.4s ease-in-out infinite;
}
@keyframes capDraw{
  0%{ stroke-dashoffset: 100 }
  60%{ stroke-dashoffset: 0 }
  100%{ stroke-dashoffset: 0 }
}

/* Trust */
.trust{display:flex; gap:18px; list-style:none; padding:0; margin:6px 4px 0; flex-wrap:wrap; color: var(--text-muted)}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:middle}
.dot-green{background: var(--brand)}

/* Badges */
.awards{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:999px; font-weight:600; border:1px solid rgba(0,0,0,.06); background:#fff; box-shadow: var(--shadow-sm)}
.badge-highlight{background: var(--highlight); border-color: rgba(0,0,0,.08)}

/* Responsive */
.hide-sm{display:none}
@media (min-width: 768px){
  .hide-sm{display:block}
  .hero-card{padding:22px}
  .compare-form{grid-template-columns: 1fr auto}
}
@media (min-width: 1024px){
  .hero-inner{padding-top: calc(var(--header-h) + 64px)}
  .compare-form{grid-template-columns: 1fr auto}
}

/* Accessibility and motion */
@media (prefers-reduced-motion: no-preference){
  .hero-bg{animation: floatBg 16s ease-in-out infinite alternate}
}
@keyframes floatBg{from{transform: translateY(-1%)} to{transform: translateY(1%)}}

/* Compare form: examens fields grid */
.fields-examens{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px}

/* Results page layout */
.results-layout{display:grid; grid-template-columns: 1fr; gap:18px; align-items:start}

/* Global filters (works in header or results layout) */
.global-filters{margin-top:8px; display:grid; gap:6px; grid-template-columns:max-content 1fr; align-items:center; max-width:520px}
.global-filters label{font-weight:600}
.global-filters select{min-width:260px}

/* Result cards */
.result-card{padding:16px; margin-bottom:14px; display:flex; flex-direction:column; height:100%}
.result-card .card-header{display:grid; grid-template-columns:56px 1fr; align-items:start; gap:12px; margin-bottom:8px}
.result-card .card-header{min-height:120px}
.result-card .card-title{margin:0; font-size:1.1rem}
.result-card .card-link{font-weight:600; color: var(--brand)}
.result-card .card-meta{color: var(--text-muted); font-size:.9rem; margin-bottom:8px}
.result-card .prices{display:grid; gap:6px; margin:10px 0}
.result-card .price-row{
  display:flex; flex-direction:column; gap:6px; padding:10px 12px;
  background: rgba(255,255,255,.6); border:1px solid var(--border); border-radius:10px
}
.result-card .price-row .p-name{ font-weight:700; line-height:1.35 }
.result-card .price-row .p-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  padding:6px 8px; border-radius:8px; background: rgba(255,255,255,.7);
}
.result-card .price-row .p-amt{ font-weight:600 }
.result-card .price-row .p-notes{ font-style:italic; color: var(--text-muted); margin-left:0; font-weight:400 }
.result-card .p-notes{color: var(--text-muted); font-weight:500; margin-left:6px; font-size:.9em}
.result-card .list-block{margin-top:10px}
.result-card .list-block h3{margin:0 0 6px; font-size:.95rem}
.result-card .list-block ul{margin:0; padding-left:18px}
.result-card .list-block.warn h3{color:#9b1c1c}
.result-card .notes{
  color: var(--text-muted);
  margin-top:10px;
  font-style: italic;
  /* zachtere, kaart-matching achtergrond voor betere integratie */
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.5));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 10px 12px;
  /* Gelijke hoogte en nette afkapping op 3 regels */
  line-height: 1.4;
  height: calc(3 * 1.4em + 20px); /* 3 regels + 10px top/bottom padding */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* standard prop for wider compatibility */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* subtiele tint die aansluit bij podiumkleur, met voldoende contrast voor leesbaarheid */
.result-card.podium-1 .notes{
  background: linear-gradient(180deg, rgba(255,223,128,.22), rgba(255,223,128,.10));
  border-color: rgba(255,209,102,.45);
}
.result-card.podium-2 .notes{
  background: linear-gradient(180deg, rgba(224,224,224,.24), rgba(240,240,240,.12));
  border-color: rgba(192,192,192,.4);
}
.result-card.podium-3 .notes{
  background: linear-gradient(180deg, rgba(205,127,50,.18), rgba(205,127,50,.08));
  border-color: rgba(205,127,50,.35);
}

/* Podium styling for top 3 providers */
.result-card.podium-1{
  border:2px solid #FFD166;
  background:
    linear-gradient(180deg, rgba(255,209,102,.25), rgba(255,209,102,.12) 60%, rgba(255,255,255,.4)),
    var(--glass);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 18px 34px rgba(255, 209, 102, .32), 0 6px 16px rgba(0,0,0,.08);
}
.result-card.podium-2{
  border:2px solid #C0C0C0;
  background:
    linear-gradient(180deg, rgba(224,224,224,.25), rgba(224,224,224,.12) 60%, rgba(255,255,255,.4)),
    var(--glass);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 14px 28px rgba(192, 192, 192, .28), 0 6px 16px rgba(0,0,0,.08);
}
.result-card.podium-3{
  border:2px solid #CD7F32;
  background:
    linear-gradient(180deg, rgba(205,127,50,.25), rgba(205,127,50,.12) 60%, rgba(255,255,255,.4)),
    var(--glass);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 14px 28px rgba(205, 127, 50, .28), 0 6px 16px rgba(0,0,0,.08);
}

@media (min-width: 1240px){
  /* Arrange as 2-1-3 on wide screens and lift #1 clearly */
  #results .result-card.podium-1{order:2; transform: translateY(-36px); padding-bottom: 48px}
  #results .result-card.podium-2{order:1; transform: translateY(12px)}
  #results .result-card.podium-3{order:3; transform: translateY(12px)}
}

/* Gold shimmer + sparkles for #1 (scoped to banner only) */
.result-card .podium-banner-1 .gold-sheen{
  position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255, 236, 179, 0.6) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  animation: sheenMove 4s linear infinite;
  mix-blend-mode: screen;
  z-index:1;
}
@keyframes sheenMove{
  0%{ transform: translateX(-120%) }
  100%{ transform: translateX(120%) }
}

.result-card .podium-banner-1 .gold-sparkles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius: inherit; mix-blend-mode: screen; z-index:1; }
.result-card .podium-banner-1 .gold-sparkles .sparkle{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,223,128,0.8) 45%, rgba(255,223,128,0) 70%);
  filter: blur(.2px);
  animation: twinkle 2.4s ease-in-out infinite alternate;
}
@keyframes twinkle{
  0%{ opacity:.2; transform: scale(0.7) translateY(0) }
  100%{ opacity:1; transform: scale(1.05) translateY(-2px) }
}

/* Card title with rating */
.card-title-wrap{display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap}
.card-title-wrap .card-title{margin:0}

/* Card header structure (brand/logo + title + meta) */
/* Use a padded brand container so different logo aspect ratios fit without cropping */
.result-card .brand{width:56px; height:56px; border-radius:12px; background: rgba(0,0,0,.06); border:1px solid var(--border); box-shadow: var(--shadow-sm); display:grid; place-items:center; overflow:hidden; padding:6px}
.result-card .brand-logo{width:100%; height:100%; object-fit:contain; background:transparent; border:0; box-shadow:none; align-self:start; filter: drop-shadow(0 0 0.25px rgba(0,0,0,.35))}
.result-card .card-head-main{display:flex; flex-direction:column; gap:6px}
.result-card .card-title-row{display:flex; align-items:center; gap:8px}
.result-card .meta-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* Card actions pinned to bottom of card */
.result-card .card-actions{margin-top:auto; padding-top:12px; display:flex; gap:8px; flex-wrap:wrap}

/* Star rating */
.rating{display:inline-flex; align-items:center; gap:8px; padding:4px 8px; border-radius:999px; background: rgba(255,255,255,.6); border:1px solid var(--border)}
.rating .value{font-weight:700; font-variant-numeric: tabular-nums}
.stars{position:relative; display:inline-block; line-height:1; font-size:1rem}
.stars-bg{color: rgba(0,0,0,.15)}
.stars-fill{position:absolute; left:0; top:0; white-space:nowrap; overflow:hidden; color:#F5B301}

/* Rank badges */
.rank-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-weight:700; border:1px solid var(--border); background:#fff}
.rank-badge .rank-num{font-variant-numeric: tabular-nums}
.rank-1{background: var(--highlight); border-color: rgba(0,0,0,.06)}
.rank-2{background: rgba(0,0,0,.05)}
.rank-3{background: rgba(0,0,0,.05)}

/* Side-by-side card grid for examens */
#results{display:grid; grid-template-columns: 1fr; gap:14px; align-items: stretch; position: relative}
@media (min-width: 900px){
  #results{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (min-width: 1240px){
  #results{grid-template-columns: repeat(3, minmax(0, 1fr))}
}
.result-card{margin:0; position:relative; overflow:hidden}
.result-card.podium{padding-top:60px} /* nudge up: extra ruimte voor hogere banner */

/* Full-width podium banner inside the card */
.result-card .podium-banner{
  position:absolute; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  inset:-2px -2px auto -2px; /* laat de banner 2px onder de kaartborder doorlopen */
  height:48px; /* aangepast voor perfecte aansluiting met -2px inset */
  padding:8px 12px;
  /* Zelfde afronding als kaart op de bovenkant */
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color:#1b1b1b; font-weight:700; letter-spacing:.2px;
  text-transform: none;
  overflow:hidden; /* effecten binnen de banner houden */
}
.result-card .podium-banner .medal{font-size:1.1rem; line-height:1}

/* Banner colorways */
.result-card .podium-banner-1{
  background: linear-gradient(135deg, #D4AF37 0%, #FFD700 40%, #FFE680 70%, #D4AF37 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(212,175,55,.35);
}
.result-card .podium-banner-2{
  background: linear-gradient(135deg, #B0B0B0 0%, #D9D9D9 45%, #F0F0F0 70%, #BFBFBF 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 12px rgba(176,176,176,.3);
}
.result-card .podium-banner-3{
  background: linear-gradient(135deg, #A97142 0%, #CD7F32 40%, #E6A86D 70%, #A97142 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(205,127,50,.28);
}

/* --- Exameninstituten feature layout --- */
#instituten-list{display:grid; gap: 28px}
.feature-row{display:flex; flex-direction: column; gap:18px; align-items: stretch}
@media (min-width: 900px){
  .feature-row{flex-direction: row; gap:32px}
  .feature-row.is-reversed{flex-direction: row-reverse}
}
.feature-media{flex:1}
.feature-img{width:100%; height:auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.6)}
.feature-content{flex:1; padding:18px; display:flex; flex-direction:column; gap:12px}
@media (min-width: 768px){
  .feature-content{padding:22px}
}
.feature-header{display:flex; align-items:center; gap:12px}
.feature-content .brand{width:56px; height:56px; border-radius:12px; background: rgba(0,0,0,.07); border:1px solid var(--border); box-shadow: var(--shadow-sm); display:grid; place-items:center; overflow:hidden; padding:6px}
.feature-content .brand.is-dark{background: #20242A; border-color: rgba(255,255,255,.18)}
.feature-content .brand-logo{width:100%; height:100%; object-fit:contain; background:transparent; border:0; box-shadow:none; filter: drop-shadow(0 0 0.5px rgba(0,0,0,.45))}
.feature-title{margin:0; font-size: clamp(1.25rem, 2.6vw, 1.6rem)}
.feature-meta{margin:2px 0 0; color: var(--text-muted)}
.feature-text{margin:4px 0 0}
.feature-highlights{margin:6px 0 0; padding-left:18px}
.feature-actions{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}

/* --- Opleiders feature layout --- */
#opleiders-info-list{display:grid; gap: 28px}

/* --- Blog --- */
.blog-grid{display:grid; grid-template-columns: 1fr; gap:14px; align-items:stretch}
@media (min-width: 768px){
  .blog-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (min-width: 1240px){
  .blog-grid{grid-template-columns: repeat(3, minmax(0, 1fr))}
}
.blog-card{display:flex; flex-direction:column; overflow:hidden; padding:0}
/* Hide media area entirely (no images on blog cards) */
.blog-card .blog-media{display:none}
.blog-media img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block}
.blog-content{padding:16px; display:flex; flex-direction:column; gap:8px}
.blog-meta{color: var(--text-muted); font-size:.9rem}
.blog-title{margin:0; font-size:1.15rem; line-height:1.25}
.blog-excerpt{margin:0; color:var(--fg); display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.blog-actions{margin-top:auto; padding-top:8px}

/* Compact variant for 9-per-page layout */
.blog-card.is-compact .blog-content{padding:12px}
.blog-card.is-compact .blog-meta{font-size:.85rem}
.blog-card.is-compact .blog-title{font-size:1rem; line-height:1.25}
.blog-card.is-compact .blog-excerpt{-webkit-line-clamp:2; line-clamp:2; font-size:.95rem}
.pagination{display:flex; justify-content:center; gap:8px; margin-top:18px}
.pagination .page{display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 14px; border:1px solid var(--border); border-radius:999px; background:#fff; box-shadow: var(--shadow-sm); font-weight:600}
.pagination .page:hover{background: rgba(0,0,0,.06)}
.pagination .page.is-active{background: var(--brand); color:#fff; border-color: transparent}
.pagination .page.is-disabled{opacity:.5; pointer-events:none}

/* --- Single post --- */
.post-hero{border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.6); margin-bottom:18px}
.post-hero img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block}
.post-header{margin-bottom:8px}
.post-meta{color: var(--text-muted); margin:0 0 8px}
.article{max-width: 80ch; margin: 0 auto}
.article-body{display:grid; gap:12px}
.article-body h2{margin-top:12px; margin-bottom:6px}
.article-body h3{margin-top:10px; margin-bottom:6px}