/*
  Kasteelfeesten Lite – Mobile-first CSS (±10–14KB gzip)
  - Geen frameworks; focus op snelheid & a11y
  - Sponsor-slider zonder bloat (RTL auto-step)
  - Hero-slider met scroll-snap + kleine JS
*/
:root{
  --container: 72rem;
  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem; --space-5:2rem; --space-6:3rem;
  --radius: 1rem;
  --kf-slider-interval: 4000ms;
  --kf-slider-transition: 500ms;
  --kf-sponsor-gap: 20px;
  --kf-sponsor-items: 4;      /* 3 of 4 zichtbaar */
  --kf-sponsor-step-ms: 2500; /* hoe vaak schuiven (ms) */
}
*{box-sizing:border-box}
html{font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; line-height:1.5}
body{margin:0;color:#111;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:underline}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-3)}
.flow>*+*{margin-top:var(--space-4)}
.grid{display:grid;gap:var(--space-4)}
.grid.cols-2{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:1fr}
.row{display:flex;gap:var(--space-3)}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.center{text-align:center}

@media (min-width: 48rem){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}

/* Header / nav */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:1000}
.brand{font-weight:700;display:inline-block;padding-block:var(--space-3);text-decoration:none}
.nav{position:relative}
.nav summary{list-style:none;cursor:pointer;border:1px solid #ddd;border-radius:.75rem;padding:.5rem .75rem}
.nav summary::-webkit-details-marker{display:none}
.nav .hamburger{display:inline-block;width:1.25rem;height:.9rem;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.nav .hamburger:before{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);border-top:2px solid currentColor}
.nav .menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:14rem;background:#fff;border:1px solid #eee;border-radius:.75rem;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:.5rem;display:flex;flex-direction:column}
.nav[open] summary{background:#f7f7f7}
.nav .menu li{list-style:none}
.nav .menu a{display:block;padding:.5rem .75rem;border-radius:.5rem;text-decoration:none}
.nav .menu a:hover{background:#f2f2f2}
@media (min-width: 64rem){
  .nav summary{display:none}
  .nav .menu{position:static;flex-direction:row;gap:.25rem;border:none;box-shadow:none;padding:0}
  .nav .menu a{padding:.75rem .9rem}
}

/* Cards / content */
.card{border:1px solid #eee;border-radius:var(--radius);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);background:#fff}
.card .thumb{border-radius:.75rem;overflow:hidden;display:block}
.prose h1,.prose h2,.prose h3{line-height:1.2}
.prose img{border-radius:.75rem}
.meta{opacity:.66}
.h3{font-size:clamp(1.1rem,2vw,1.4rem)}
.h4{font-size:clamp(1rem,1.6vw,1.2rem)}

/* Hero */
.hero{position:relative}
.hero-media img,.hero-placeholder{width:100%;height:clamp(14rem,35vw,28rem);object-fit:cover;background:#f3f3f3}
.hero-inner{position:relative;margin-top:-4rem}
.hero-title{display:inline-block;background:rgba(255,255,255,.9);padding:.75rem 1rem;border-radius:.75rem;box-shadow:0 10px 30px rgba(0,0,0,.06)}

/* Slider */
.hero-slider{position:relative;overflow:hidden}
.hero-track{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.slide{min-width:100%;scroll-snap-align:center;position:relative}
.slide-media{display:block;line-height:0}
.slide-caption{position:absolute;left:1rem;bottom:1rem;background:rgba(255,255,255,.85);padding:.4rem .6rem;border-radius:.5rem}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(0,0,0,.35);color:#fff;width:2rem;height:2rem;border-radius:50%;cursor:pointer}
.slider-btn:hover{background:rgba(0,0,0,.5)}
.slider-btn.prev{left:.5rem}
.slider-btn.next{right:.5rem}

/* Sponsors – minimal stepper RTL */
.sponsors{padding-block:var(--space-6);border-top:1px solid #eee;margin-top:var(--space-6)}
.sponsor-slider{overflow:hidden}
.sponsor-track{display:flex;gap:var(--kf-sponsor-gap);align-items:center;will-change:transform}
.sponsor-item{flex:0 0 calc((100% - (var(--kf-sponsor-gap) * (var(--kf-sponsor-items) - 1))) / var(--kf-sponsor-items)); display:flex; justify-content:center; align-items:center}
.sponsor-logo{height:3rem;width:auto}

/* Footer */
.site-footer{margin-top:var(--space-6);padding-block:var(--space-5);border-top:1px solid #eee}
.menu.horizontal{display:flex;gap:1rem;flex-wrap:wrap}

/* A11y */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem;border-radius:.25rem}