/* ==========================================================================
   START PAGE — Kers Beej Dich | Kers Met Kids  (two worlds, one choice)
   Wandelen Naor Schandele is reachable from the strip underneath.
   ========================================================================== */
.p-root{background:#050002;color:var(--ink)}
.sr-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.p-root main{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.gate{position:relative;flex:1;display:flex;min-height:560px}
.gate__half{position:relative;flex:1 1 50%;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;text-decoration:none;color:#fff;transition:flex-grow .6s var(--ease)}
.gate__half+.gate__half{box-shadow:-1px 0 0 rgba(240,208,112,.5)}
.gate__bg{position:absolute;inset:0;z-index:-2}
.gate__backdrop{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(18px) saturate(1.15) brightness(.55);transform:scale(1.05)}
.gate__poster{position:absolute;left:50%;top:max(110px,11%);height:calc(100% - max(110px,11%) - 250px);width:auto;max-width:82%;object-fit:contain;transform:translateX(-50%);box-shadow:0 40px 80px -20px rgba(0,0,0,.9);transition:transform .8s var(--ease)}
.gate__half::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,0,2,.94) 0%,rgba(5,0,2,.72) 22%,rgba(5,0,2,0) 48%)}
.gate__half--kmk::after{background:linear-gradient(0deg,rgba(11,16,36,.95) 0%,rgba(11,16,36,.7) 22%,rgba(11,16,36,0) 48%)}
.gate canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.8}
.gate__body{display:grid;justify-items:center;gap:8px;padding:0 24px 38px;text-align:center}
.gate__tag{display:inline-block;padding:7px 12px 5px;border-radius:999px;background:#f4c95d;color:#3a2408;font:800 .7rem/1.1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg)}
.gate__tag--kbd{border-radius:0;transform:none;background:var(--gold);color:#1d1000}
.gate__name{font:800 clamp(1.9rem,3.2vw,2.8rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;color:#f2d27c;margin-top:4px}
.gate__sub{font:500 1.05rem/1.3 var(--f-display);font-style:italic;color:rgba(255,246,230,.9)}
.gate__dates{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font:600 .8rem/1.3 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,246,230,.85)}
.gate__dates b{color:#f2d27c}
.gate__go{display:inline-flex;align-items:center;gap:12px;margin-top:10px;min-height:52px;padding:0 24px 0 8px;border-radius:999px;font:700 .82rem/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(240,208,112,.6);transition:background .3s,box-shadow .3s}
.gate__go i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#1d1000;font-style:normal;font-size:1.1rem;transition:transform .3s var(--ease)}
.gate__half--kmk .gate__go i{background:linear-gradient(180deg,#ff6b5b,#d6392b);color:#fff}
.gate__half:hover .gate__go,.gate__half:focus-visible .gate__go{background:rgba(240,208,112,.16);box-shadow:inset 0 0 0 1px #f0d070}
.gate__half:hover .gate__go i{transform:translateX(4px)}
.gate__half:focus-visible{outline:3px solid #f0d070;outline-offset:-6px}
@media (hover:hover) and (min-width:761px){
  .gate:hover .gate__half{flex-grow:.9}
  .gate .gate__half:hover{flex-grow:1.12}
  .gate__half:hover .gate__poster{transform:translateX(-50%) scale(1.03)}
}
.gate__top{position:absolute;left:50%;top:22px;z-index:3;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;pointer-events:none}
.gate__top img{width:78px;height:78px;border-radius:50%;box-shadow:0 0 0 1px rgba(240,208,112,.6),0 10px 30px rgba(0,0,0,.6)}
.gate__top p{margin:0;font:700 .7rem/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:#f2d27c;text-shadow:0 2px 8px rgba(0,0,0,.8)}

/* Strip: Wandelen Naor Schandele + small links */
.gate__more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:10px clamp(16px,3vw,40px);background:linear-gradient(90deg,#04070f,#0a1424 60%,#04070f);border-top:1px solid rgba(243,181,74,.35)}
.gate__wns{display:flex;align-items:center;gap:14px;min-height:52px;text-decoration:none;color:#f6ecd6}
.gate__wns b{display:block;font:700 1rem/1.25 var(--f-display);color:#ffd88a}
.gate__wns small{display:block;font-size:.84rem;color:rgba(246,236,214,.75)}
.gate__wns i{font-style:normal;color:#ffd88a;transition:transform .3s var(--ease)}
.gate__wns:hover i{transform:translateX(4px)}
.gate__lamp{flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff3cf 0,#f3b54a 40%,transparent 70%);box-shadow:0 0 22px 6px rgba(243,181,74,.45)}
.gate__links{display:flex;gap:18px}
.gate__links a,.gate__links button{background:none;border:0;padding:8px 0;cursor:pointer;font:600 .7rem/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(246,236,214,.6);text-decoration:none}

/* Phones: two stacked "tickets" to choose from, both visible at once */
@media (max-width:760px){
  .gate{flex-direction:column;min-height:0;padding-top:78px;background:#050002}
  .gate__top{top:12px;grid-auto-flow:column;align-items:center;gap:10px}
  .gate__top img{width:52px;height:52px}
  .gate__half{flex:1 0 auto;min-height:max(250px,calc((100svh - 78px - 76px) / 2));flex-direction:row;align-items:stretch;justify-content:flex-start}
  .gate__half+.gate__half{box-shadow:0 -1px 0 rgba(240,208,112,.5)}
  .gate__half::after{background:linear-gradient(90deg,rgba(5,0,2,.1) 0%,rgba(5,0,2,.55) 42%,rgba(5,0,2,.85) 100%)}
  .gate__half--kmk::after{background:linear-gradient(90deg,rgba(11,16,36,.1) 0%,rgba(11,16,36,.55) 42%,rgba(11,16,36,.88) 100%)}
  .gate__poster{left:14px;top:50%;transform:translateY(-50%);height:auto;width:38%;max-width:180px;max-height:calc(100% - 28px)}
  .gate__half:hover .gate__poster{transform:translateY(-50%)}
  .gate__body{margin-left:calc(min(38%,180px) + 24px);justify-items:start;align-content:center;text-align:left;gap:6px;padding:16px 14px 16px 0}
  .gate__name{font-size:clamp(1.45rem,6.6vw,2rem)}
  .gate__sub{font-size:.92rem}
  .gate__dates{justify-content:flex-start;flex-direction:column;gap:2px;font-size:.7rem}
  .gate__dates .dl-sep{display:none}
  .gate__tag{font-size:.6rem}
  .gate__go{margin-top:6px;min-height:46px;padding:0 16px 0 6px;font-size:.7rem;gap:8px}
  .gate__go i{width:34px;height:34px}
  .gate__more{padding:10px 16px}
  .gate__links{width:100%;justify-content:center}
}
@media (hover:none){.gate__name{background:none!important;-webkit-text-fill-color:#f2d27c!important}}