/* Vaste vormgeving van limburgsessies.be. De kleuren staan in seizoen/seizoen.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 1.125rem/1.6 "Alegreya",Georgia,serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-underline-offset:.18em}
a:hover{color:var(--paars)}
h1,h2,h3{font-family:"Macondo",Georgia,serif;font-weight:400;line-height:1.15;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.45rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--paars);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.smal{max-width:760px}
.label{font:600 .8rem/1.3 "Alegreya Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht);margin:0 0 .4em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--teal);color:var(--op-teal);padding:8px 14px;z-index:20}
.skip:focus{left:8px}

/* Knoppen */
.btn{display:inline-flex;align-items:center;gap:.4em;background:var(--teal);color:var(--op-teal);border:2px solid var(--teal);border-radius:999px;padding:.5em 1.25em;font:600 1rem/1.2 "Alegreya Sans",system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--paars);border-color:var(--paars);color:var(--op-teal)}
.btn.ghost{background:transparent;color:var(--teal)}
.btn.ghost:hover{color:var(--paars);border-color:var(--paars);background:transparent}
.soldout{display:inline-block;border:2px solid var(--paars);color:var(--paars);border-radius:999px;padding:.45em 1.1em;font:600 .95rem/1.2 "Alegreya Sans",system-ui,sans-serif}
.acties{display:flex;flex-wrap:wrap;gap:.6em;align-items:center}

/* Kop */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--papier) 94%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--lijn)}
.bar{display:flex;align-items:center;gap:20px;min-height:68px}
.brand img{width:clamp(180px,26vw,260px);filter:var(--logo-filter)}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 22px;flex-wrap:wrap}
nav a{color:var(--inkt);text-decoration:none;font:500 1.02rem/1.2 "Alegreya Sans",system-ui,sans-serif}
nav a:hover,nav a[aria-current]{color:var(--teal);text-decoration:underline;text-decoration-thickness:2px}
#hoofdmenu{margin-left:auto}
.menu-toggle{display:none;margin-left:auto;background:none;border:2px solid var(--inkt);color:var(--inkt);border-radius:999px;padding:.35em 1em;font:600 .95rem "Alegreya Sans",system-ui,sans-serif;cursor:pointer}
@media (max-width:860px){
  .bar{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .bar>.btn{display:none}
  .menu-toggle{display:block}
  #hoofdmenu{display:none;width:100%;margin:0}
  #hoofdmenu.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:6px 0 4px}
  nav a{display:block;padding:10px 0;font-size:1.1rem;border-top:1px solid var(--lijn)}
}

/* Homepage: titel en eerstvolgende concert naast het artwork, zoals op merodefestival.be */
.hero{background:var(--nacht);color:var(--op-nacht);padding:clamp(32px,6vw,72px) 0}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{margin:0 0 .35em;line-height:1}
.hero h1 span{display:block}
.hero .t1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:.02em;color:var(--salie)}
.hero .t2{font-size:clamp(2.2rem,5.4vw,4rem);letter-spacing:.08em;color:var(--op-nacht)}
.kop-zin{font-style:italic;font-size:1.2rem;opacity:.85;margin-bottom:1.6em}
.next{border-left:3px solid var(--teal);padding:.2em 0 .2em 1.1em}
.next .label{color:var(--salie);font-size:.85rem}
.next h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:.15em 0 .2em}
.next h2 a{color:var(--op-nacht);text-decoration:none}
.next h2 a:hover{text-decoration:underline}
.next-waar{opacity:.85;margin-bottom:1.1em}
.hero .btn.ghost,.btn.ghost.licht{color:var(--op-nacht);border-color:color-mix(in srgb,var(--op-nacht) 70%,transparent)}
.hero .btn.ghost:hover,.btn.ghost.licht:hover{border-color:var(--op-nacht);color:var(--op-nacht)}
.hero-beeld{margin:0}
.hero-beeld img{width:100%;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hero-beeld figcaption{font-size:.8rem;opacity:.7;text-align:right;margin-top:8px}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero-beeld{order:-1}}

/* Agenda */
.agenda{padding:clamp(40px,7vw,80px) 0}
.agenda>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,64px);align-items:start}
.intro{position:sticky;top:96px}
.intro h2{font-size:1.9rem}
.intro p{font-style:italic;color:var(--inkt-zacht)}
.kruisjes{white-space:nowrap;letter-spacing:.35em;color:var(--inkt-zacht);font-family:"Alegreya Sans",system-ui,sans-serif;margin:1.4rem 0}
.intro .prijzen{font-size:1rem}
@media (max-width:860px){.agenda>.wrap{grid-template-columns:1fr}.intro{position:static}}
.agenda h2.label{font-size:1rem;margin-bottom:1.1rem}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters .btn{font-size:.95rem;padding:.4em 1em}
.events{list-style:none;margin:0;padding:0}
.event{display:grid;grid-template-columns:4.5rem 6.5rem minmax(0,1fr) auto;gap:1.25rem;align-items:start;padding:.4rem 0 1.4rem}
.event + .event::before,.event.eerste::before{content:"× × ×";grid-column:1 / -1;text-align:center;letter-spacing:.4em;color:var(--inkt-zacht);font-family:"Alegreya Sans",system-ui,sans-serif;margin-bottom:1rem}
.event.eerste::before{display:none}
.date{font-family:"Alegreya Sans",system-ui,sans-serif;line-height:1.1;padding-top:.15rem}
.date .d{font-family:"Macondo",Georgia,serif;font-size:2.4rem;display:block;color:var(--teal)}
.date .m,.date .w{font-size:.9rem;color:var(--inkt-zacht);display:block}
.thumb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
.thumb:empty{display:none}
.thumb:empty + div{grid-column:2 / span 2}
.wanneer{display:inline-block;background:var(--paars);color:var(--papier);font:600 .8rem/1 "Alegreya Sans",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.35em .8em;margin:0 0 .5em}
.wanneer[hidden]{display:none}
.event .sub{font-style:italic;margin:0 0 .1em;color:var(--inkt-zacht)}
.artist{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:0}
.artist a{color:var(--inkt);text-decoration:none}
.artist a:hover{color:var(--teal);text-decoration:underline}
.meta{font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.98rem;margin:.35rem 0 0;color:var(--inkt-zacht)}
.links{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;align-items:baseline;margin-top:.55rem;font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.95rem}
.links details[open]{flex-basis:100%;font-family:"Alegreya",Georgia,serif;font-size:1.05rem}
.links details p{margin:.5rem 0 .6rem;max-width:40rem}
summary{cursor:pointer;font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.95rem;text-decoration:underline;text-underline-offset:3px;width:max-content;color:var(--teal)}
.act{display:flex;align-items:center;gap:.9rem;padding-top:.3rem}
.price{font-family:"Alegreya Sans",system-ui,sans-serif;color:var(--inkt-zacht);white-space:nowrap}
.event.is-full .artist{opacity:.6}
@media (max-width:640px){
  .event{grid-template-columns:3.4rem 4.5rem minmax(0,1fr);gap:.9rem}
  .act{grid-column:2 / -1}
  .thumb:empty + div{grid-column:2 / -1}
}
.plek-kaart{display:block;text-decoration:none;color:var(--op-nacht)}
.plek-kaart img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;margin-bottom:12px;transition:opacity .15s}
.plek-kaart:hover img{opacity:.85}
.plek-kaart .naam{display:block;font-family:"Macondo",Georgia,serif;font-size:1.45rem}
.plek-kaart .adres{display:block;opacity:.75;font-size:.98rem}

.sectie{padding:clamp(40px,7vw,80px) 0}
.sectie.salie{background:var(--salie-zacht)}
.sectie.donker{background:var(--nacht);color:var(--op-nacht)}
.sectie.donker a:not(.btn){color:var(--op-nacht)}
.sectie.donker .label{color:color-mix(in srgb,var(--op-nacht) 70%,transparent)}
.sectie-kop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.sectie-kop h2{margin:0}

.leeg{font-size:1.2rem}

.twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px}
.prijzen{list-style:none;margin:0 0 1.4em;padding:0}
.prijzen li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid currentColor;padding:.55em 0;border-color:color-mix(in srgb,currentColor 25%,transparent)}
.prijzen b{font-family:"Macondo",Georgia,serif;font-weight:400;font-size:1.3rem;white-space:nowrap}

.plek{background:var(--papier);border:1px solid var(--lijn);border-radius:6px;overflow:hidden}
.plek img{width:100%;aspect-ratio:16/10;object-fit:cover}
.plek .in{padding:20px 22px 22px}
.plek h3{margin-bottom:.3em}
.plek ul{margin:.6em 0 0;padding-left:1.1em}

/* Gewone pagina’s */
.pagina-kop{padding:clamp(36px,6vw,72px) 0 8px}
.tekst{padding:8px 0 clamp(48px,7vw,88px)}
.tekst h2{font-size:1.7rem;margin-top:1.4em}
.kaartjes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:22px;margin-top:20px}
.kaartje{background:var(--salie-zacht);border-radius:6px;padding:22px}
.kaartje h2{font-size:1.5rem;margin:0 0 .4em}
.tickets-lijst{list-style:none;margin:20px 0 0;padding:0}
.tickets-lijst li{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:16px 0;border-bottom:1px solid var(--lijn)}
.tickets-lijst .wat{flex:1 1 280px}
.tickets-lijst .wat strong{font-family:"Macondo",Georgia,serif;font-weight:400;font-size:1.35rem;display:block}

/* Concertpagina */
.chero{padding:clamp(28px,5vw,56px) 0}
.chero .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,48px);align-items:center}
.terug{display:inline-block;margin-bottom:18px;font-family:"Alegreya Sans",system-ui,sans-serif}
.csub{font-style:italic;font-size:1.3rem;margin-bottom:.2em}
.chero .waar{color:var(--inkt-zacht);font-size:1.15rem}
.cbeeld{margin:0}
.cbeeld img{width:100%;border-radius:6px;aspect-ratio:4/3;object-fit:cover}
.cbeeld figcaption{font-size:.85rem;color:var(--inkt-zacht);margin-top:6px}
@media (max-width:820px){.chero .wrap{grid-template-columns:1fr}.cbeeld{order:-1}}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,5vw,64px);padding-top:clamp(36px,5vw,60px);padding-bottom:clamp(48px,7vw,80px)}
@media (max-width:820px){.cgrid{grid-template-columns:1fr}}
.ctekst blockquote{margin:1.2em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--paars);font-style:italic;font-size:1.15rem}
.ctekst h3{margin-top:1.2em}
.praktisch{background:var(--salie-zacht);border-radius:6px;padding:22px;align-self:start;position:sticky;top:90px}
.praktisch dl{margin:0 0 18px}
.praktisch dl div{padding:.5em 0;border-bottom:1px solid var(--lijn)}
.praktisch dt{font:600 .78rem/1.3 "Alegreya Sans",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-zacht)}
.praktisch dd{margin:.15em 0 0}
.ics{margin:14px 0 0;font-family:"Alegreya Sans",system-ui,sans-serif}
.luister,.beelden{margin-top:2.2em}
.videos{display:grid;gap:14px;margin:12px 0 18px}
.videos.meer{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.video{aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden}
.video iframe,.yt{width:100%;height:100%;border:0;display:block}
.yt{background:center/cover no-repeat;cursor:pointer;position:relative}
.yt .play{position:absolute;inset:50% auto auto 50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:rgba(0,0,0,.72)}
.yt .play::after{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.yt:hover .play{background:var(--teal)}
.spotify{display:grid;gap:12px}
.spotify iframe{width:100%;border:0;border-radius:12px}
.beeldrij{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.beeldrij figure{margin:0;flex:0 0 min(80%,360px)}
.beeldrij figcaption{font-size:.85rem;color:var(--inkt-zacht)}
.ook-lijst{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.ook-lijst a{display:block;text-decoration:none;border:1px solid color-mix(in srgb,var(--op-nacht) 30%,transparent);border-radius:6px;padding:16px 18px}
.ook-lijst a:hover{border-color:var(--op-nacht)}
.ook-lijst .naam{display:block;font-family:"Macondo",Georgia,serif;font-size:1.35rem;line-height:1.2}

/* Voet */
footer{background:var(--nacht);color:var(--op-nacht);padding:48px 0 36px;font-size:1rem}
footer a{color:var(--op-nacht)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:28px}
footer h3{font-size:1.3rem}
footer ul{list-style:none;margin:0;padding:0}
.foot-logo{width:150px;filter:invert(1);margin-bottom:28px}
/* Met steun van: transparante logo’s in kleur op een vaste lichte achtergrond, ook in donkere modus */
.steun{background:#F6EEE1;color:#2E2219;padding:40px 0 44px;border-top:1px solid #D2B68E}
.steun h2{font-size:1.6rem;text-align:center;margin-bottom:24px}
.logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 48px}
.logos a{display:flex;align-items:center;justify-content:center;width:190px;height:96px;transition:transform .15s}
.logos a:hover,.logos a:focus-visible{transform:translateY(-3px)}
.logos img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:600px){.logos{gap:18px 28px}.logos a{width:136px;height:72px}}
.klein{font-size:.85rem;opacity:.8;margin-top:32px}