/*
 * LiveTV.eu - homepage, fase 3 Golden Master.
 *
 * Alleen op de homepage geladen. De pagina gebruikt de volle breedte met een
 * vloeiende goot (--gx) in plaats van een vaste kolom, zodat 1920px echt als
 * 1920px aanvoelt. Drie kaartfamilies:
 *   A. ed-card   - redactioneel (wereldcollecties, categorieën, landen)
 *   B. mcard     - media/zender (alle zenderrails)
 *   C. row-x     - compacte rij (tv-gids, uitslagen)
 * Eén hover-taal: beeld 1.04x, kaart 4px omhoog, dunne cyaan rand, 240ms.
 */

@font-face{font-family:"LTV Display";src:url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight:500 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.home{
  --gx:clamp(16px,4vw,72px);
  --gap:clamp(12px,1.1vw,20px);
  --r:14px;
  --display:"LTV Display","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t:.24s;
  --ring:rgba(0,224,198,.6);
  background:#04080f;
}
.home-main{display:block;padding-bottom:clamp(24px,4vw,64px)}
.home h1,.home h2,.home h3{font-family:var(--display)}

/* ---------------------------------------------------------- sectieritme */
.home-main > .section{margin:clamp(36px,4.2vw,76px) 0 0}
.home-main > .section.shelf + .section.shelf{margin-top:clamp(28px,3.2vw,56px)}

.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:0 var(--gx);margin:0 0 clamp(12px,1.2vw,20px)}
.shelf-head h2{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(1.35rem,1.05rem + 1vw,2.15rem);
  font-weight:800;letter-spacing:-.025em;line-height:1.1}
.shelf-head--sub{padding:0;margin-bottom:12px}
.shelf-head--sub h3{display:flex;align-items:center;gap:10px;margin:0;font-size:1.05rem;font-weight:700}
.shelf-tools{display:flex;align-items:center;gap:14px}
.shelf-more{display:inline-flex;align-items:center;gap:4px;font-size:.92rem;font-weight:600;color:#b8cbe6;white-space:nowrap}
.shelf-more .ui-ic{width:16px;height:16px;transition:transform var(--t) var(--ease)}
.shelf-more:hover{color:#fff}
.shelf-more:hover .ui-ic{transform:translateX(3px)}
[dir="rtl"] .shelf-more .ui-ic{transform:scaleX(-1)}
[dir="rtl"] .shelf-more:hover .ui-ic{transform:scaleX(-1) translateX(3px)}

.live-dot{width:10px;height:10px;border-radius:50%;background:var(--hot);flex:0 0 10px;
  box-shadow:0 0 0 4px rgba(255,61,113,.2);animation:ltvpulse 2s infinite}

.home .rail-nav{display:none}
@media (min-width:900px) and (hover:hover){
  .home .rail-nav{display:flex;gap:8px}
  .home .rail-nav button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer;
    border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#dbe8fb;
    transition:background var(--t),border-color var(--t),color var(--t)}
  .home .rail-nav button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
  .home .rail-nav .ui-ic{width:18px;height:18px}
  [dir="rtl"] .home .rail-nav .ui-ic{transform:scaleX(-1)}
}

/* ----------------------------------------------------------------- knoppen */
.btn-x{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;
  border-radius:999px;font-weight:700;font-size:1rem;white-space:nowrap;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);
  transition:background var(--t),border-color var(--t),transform var(--t) var(--ease)}
.btn-x:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);color:#fff}
.btn-x.is-primary{background:#fff;color:#04101d;border-color:#fff}
.btn-x.is-primary:hover{background:#dff4ff;color:#04101d;border-color:#dff4ff}
.btn-x .ui-ic{width:20px;height:20px}

.eyebrow-x{margin:0 0 10px;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7fe9f7}

/* ==================================================================== HERO */
.stage{position:relative;overflow:hidden;background:#02050b;outline:none}
.stage-track{display:flex;transition:transform .8s var(--ease);will-change:transform}
.stage-slide{position:relative;flex:0 0 100%;min-width:100%;display:flex;align-items:flex-end;
  min-height:clamp(540px,82vh,880px);isolation:isolate}
.stage-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.stage-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(3,7,14,.92) 0%,rgba(3,7,14,.66) 34%,rgba(3,7,14,.12) 70%,rgba(3,7,14,.05) 100%),
  linear-gradient(0deg,#04080f 0%,rgba(4,8,15,.55) 22%,rgba(4,8,15,0) 48%),
  linear-gradient(180deg,rgba(4,8,15,.55) 0%,rgba(4,8,15,0) 18%)}
[dir="rtl"] .stage-shade{background:
  linear-gradient(270deg,rgba(3,7,14,.92) 0%,rgba(3,7,14,.66) 34%,rgba(3,7,14,.12) 70%,rgba(3,7,14,.05) 100%),
  linear-gradient(0deg,#04080f 0%,rgba(4,8,15,.55) 22%,rgba(4,8,15,0) 48%),
  linear-gradient(180deg,rgba(4,8,15,.55) 0%,rgba(4,8,15,0) 18%)}
.stage-copy{position:relative;width:100%;max-width:min(760px,100%);padding:0 var(--gx) clamp(84px,9vw,132px)}
.stage-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 18px;font-size:.88rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#cfe3fb}
.live-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:6px;background:var(--hot);
  color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.12em}
.live-pill i{width:7px;height:7px;border-radius:50%;background:#fff;animation:ltvpulse 2s infinite}
.stage-copy h1,.stage-copy h2{margin:0 0 18px;font-size:clamp(2.5rem,1.4rem + 4.6vw,5.6rem);font-weight:800;
  line-height:1;letter-spacing:-.04em;color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.stage-accent{display:block;background:linear-gradient(95deg,#6fd3ff 0%,#2f9dff 45%,#00e0c6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.stage-lead{max-width:52ch;margin:0 0 28px;font-size:clamp(1.02rem,.94rem + .35vw,1.28rem);line-height:1.55;color:#dbe7f7}
.stage-cta{display:flex;flex-wrap:wrap;gap:12px}
.stage-note{margin:22px 0 0;font-size:.95rem;color:#a9bfdc}

.stage-controls{position:absolute;inset-inline-end:var(--gx);bottom:clamp(28px,3.4vw,52px);z-index:3;
  display:flex;align-items:center;gap:10px}
.stage-dots{display:flex;align-items:center;gap:2px;margin-inline-end:6px}
.stage-dots button{display:grid;place-items:center;width:28px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.stage-dots i{display:block;width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.4);
  transition:width var(--t) var(--ease),background var(--t)}
.stage-dots button[aria-current="true"] i{width:24px;background:#fff}
.stage-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.24);background:rgba(4,8,15,.45);backdrop-filter:blur(10px);
  transition:background var(--t),border-color var(--t)}
.stage-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.stage-btn .ui-ic{width:18px;height:18px}
[dir="rtl"] .stage-btn[data-carousel-prev] .ui-ic,[dir="rtl"] .stage-btn[data-carousel-next] .ui-ic{transform:scaleX(-1)}
.stage-progress{position:absolute;inset-inline:0;bottom:0;height:2px;background:rgba(255,255,255,.08);z-index:3}
.stage-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

@media (max-width:759px){
  .stage-slide{min-height:clamp(480px,74svh,640px)}
  .stage-img{object-position:62% 40%}
  .stage-shade{background:linear-gradient(0deg,#04080f 0%,rgba(4,8,15,.86) 34%,rgba(4,8,15,.25) 66%,rgba(4,8,15,.35) 100%)}
  [dir="rtl"] .stage-shade{background:linear-gradient(0deg,#04080f 0%,rgba(4,8,15,.86) 34%,rgba(4,8,15,.25) 66%,rgba(4,8,15,.35) 100%)}
  .stage-copy{padding-bottom:84px}
  .stage-kicker{font-size:.78rem;margin-bottom:14px}
  .stage-lead{margin-bottom:22px}
  .stage-cta .btn-x{flex:1 1 auto;padding:0 18px}
  .stage-controls{inset-inline:var(--gx);justify-content:flex-start;bottom:20px}
  .stage-controls .stage-btn[data-carousel-prev],.stage-controls .stage-btn[data-carousel-next]{display:none}
  .stage-note{display:none}
}

/* ================================================================= RAILS */
.rail-x{--cards:1.3;display:grid;grid-auto-flow:column;gap:var(--gap);
  grid-auto-columns:calc((100% + var(--gx) - var(--gap) * var(--cards)) / var(--cards));
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gx);
  padding:6px var(--gx) 18px;scrollbar-width:none}
.rail-x::-webkit-scrollbar{display:none}
.rail-x > *{scroll-snap-align:start}
@media (min-width:600px){.rail-x{--cards:2.3}}
@media (min-width:900px){.rail-x{--cards:3.3}}
@media (min-width:1200px){.rail-x{--cards:4.3}}
@media (min-width:1600px){.rail-x{--cards:5.3}}

/* ============================================ B. mediakaart (zenders) === */
.mcard{position:relative;min-width:0}
.mcard-link{display:block;color:var(--text);border-radius:var(--r);outline-offset:4px}
.mcard-link:hover{color:#fff}
.mcard-media{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:#0b1424;box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.mcard-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow var(--t)}
.mcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.mcard-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,15,0) 40%,rgba(4,8,15,.72) 100%)}
.mcard-logo{position:absolute;inset-inline-start:12px;bottom:12px;display:grid;place-items:center;width:clamp(48px,4vw,60px);
  aspect-ratio:1;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.5)}
.mcard-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.mcard-logo .ini{display:grid;place-items:center;width:100%;height:100%;font-weight:800;font-size:1rem;color:#fff;
  background:linear-gradient(135deg,#1c7de0,#00b8a5)}
.mcard-live{position:absolute;top:10px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:5px;background:var(--hot);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.1em}
.mcard-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:ltvpulse 2s infinite}
.mcard-play{position:absolute;inset-inline-end:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:#fff;color:#04101d;box-shadow:0 8px 22px rgba(0,0,0,.45);
  opacity:0;transform:scale(.85);transition:opacity var(--t),transform var(--t) var(--ease)}
.mcard-play .ui-ic{width:20px;height:20px;margin-inline-start:2px}
.mcard-body{display:block;padding:12px 2px 0}
.mcard-title{display:block;font-size:1rem;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard-meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.875rem;color:#9fb3cf;min-width:0}
.mcard-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard-meta .flag,.mcard-meta .flag-fallback{width:20px;height:14px;flex:0 0 20px;border-radius:3px;box-shadow:none;font-size:.55rem}
.mcard-fav{position:absolute;top:8px;inset-inline-end:8px;width:40px;height:40px;margin:0;
  background:rgba(4,8,15,.55);border-color:rgba(255,255,255,.18);backdrop-filter:blur(8px);
  opacity:0;transition:opacity var(--t),color var(--t),border-color var(--t)}
.mcard:hover .mcard-fav,.mcard-fav:focus-visible,.mcard-fav.on{opacity:1}
@media (hover:none){.mcard-fav{opacity:1}}
@media (hover:hover){
  .mcard-link:hover .mcard-media,.mcard-link:focus-visible .mcard-media{transform:translateY(-4px);box-shadow:0 22px 44px rgba(0,0,0,.55)}
  .mcard-link:hover .mcard-media::after,.mcard-link:focus-visible .mcard-media::after{box-shadow:inset 0 0 0 2px var(--ring)}
  .mcard-link:hover .mcard-img,.mcard-link:focus-visible .mcard-img{transform:scale(1.04)}
  .mcard-link:hover .mcard-play,.mcard-link:focus-visible .mcard-play{opacity:1;transform:none}
}

/* ====================================== A. redactionele kaart (beeld) ==== */
.ed-card{position:relative;display:block;overflow:hidden;isolation:isolate;border-radius:calc(var(--r) + 4px);
  background:#0b1424;color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.4);aspect-ratio:16/10;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.ed-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow var(--t)}
.ed-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ed-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,8,15,0) 38%,rgba(4,8,15,.38) 62%,rgba(4,8,15,.88) 100%)}
.ed-body{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:clamp(16px,1.6vw,26px)}
.ed-title{font-family:var(--display);font-size:clamp(1.3rem,1.05rem + .8vw,1.85rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.05;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.ed-meta{font-size:.9rem;color:rgba(232,241,255,.82)}
.ed-cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:.95rem;font-weight:700;color:#fff}
.ed-cta .ui-ic{width:18px;height:18px;transition:transform var(--t) var(--ease)}
[dir="rtl"] .ed-cta .ui-ic{transform:scaleX(-1)}
.ed-flag{display:inline-flex;margin-bottom:6px}
.ed-flag .flag,.ed-flag .flag-fallback{width:32px;height:22px;border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.ed-card:hover,.ed-card:focus-visible{color:#fff}
@media (hover:hover){
  .ed-card:hover,.ed-card:focus-visible{transform:translateY(-4px);box-shadow:0 26px 54px rgba(0,0,0,.6)}
  .ed-card:hover::after,.ed-card:focus-visible::after{box-shadow:inset 0 0 0 2px var(--ring)}
  .ed-card:hover .ed-img,.ed-card:focus-visible .ed-img{transform:scale(1.04)}
  .ed-card:hover .ed-cta .ui-ic{transform:translateX(4px)}
  [dir="rtl"] .ed-card:hover .ed-cta .ui-ic{transform:scaleX(-1) translateX(4px)}
}

/* ---- wereldcollecties: asymmetrische redactionele compositie ---------- */
.collections{--cards:1.2;display:grid;grid-auto-flow:column;gap:var(--gap);
  grid-auto-columns:calc((100% + var(--gx) - var(--gap) * var(--cards)) / var(--cards));
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gx);padding:6px var(--gx) 18px;scrollbar-width:none}
.collections::-webkit-scrollbar{display:none}
.collections .ed-card{aspect-ratio:4/5;scroll-snap-align:start}
.collections .ed-title{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.6rem)}
@media (min-width:700px){
  .collections{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;padding-bottom:0}
  .collections .ed-card{aspect-ratio:4/3}
}
@media (min-width:1100px){
  .collections{grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:repeat(2,clamp(230px,19vw,400px))}
  .collections .ed-card{aspect-ratio:auto}
  .collections .ed-card--europe{grid-row:1 / span 2}
  .collections .ed-card--africa{grid-column:2 / span 2}
}

/* ---- categorieën en landen: rail op mobiel/tablet, 4x2 op desktop ----- */
.rail-x--grid4 .ed-card{aspect-ratio:16/10}
.rail-x--grid4 .ed-card--country{aspect-ratio:4/5}
@media (min-width:1100px){
  .rail-x--grid4{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
  section:has(.rail-x--grid4) .rail-nav{display:none}
  .rail-x--grid4 .ed-card--country{aspect-ratio:5/6}
}
@media (max-width:599px){.rail-x--grid4:has(.ed-card--country){--cards:1.8}}

/* =========================================================== LIVE SPORT == */
.arena{position:relative;isolation:isolate;overflow:hidden;padding:clamp(48px,6vw,104px) 0 clamp(32px,4vw,64px)}
.arena-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.arena-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(4,8,15,.94) 0%,rgba(4,8,15,.7) 40%,rgba(4,8,15,.35) 100%),
  linear-gradient(180deg,#04080f 0%,rgba(4,8,15,0) 18%,rgba(4,8,15,0) 70%,#04080f 100%)}
[dir="rtl"] .arena-shade{background:
  linear-gradient(270deg,rgba(4,8,15,.94) 0%,rgba(4,8,15,.7) 40%,rgba(4,8,15,.35) 100%),
  linear-gradient(180deg,#04080f 0%,rgba(4,8,15,0) 18%,rgba(4,8,15,0) 70%,#04080f 100%)}
.arena-in{display:grid;gap:clamp(24px,3vw,44px)}
.arena-copy{padding:0 var(--gx);max-width:640px}
.arena-copy h2{margin:0 0 14px;font-size:clamp(2rem,1.3rem + 2.8vw,3.8rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.arena-lead{margin:0 0 24px;font-size:clamp(1rem,.95rem + .3vw,1.2rem);color:#dbe7f7;max-width:46ch}
.arena-rail .shelf-head--sub{padding:0 var(--gx)}
.arena-rail .rail-x{--cards:1.45}
.arena-results{padding:0 var(--gx)}
.arena-results h3{margin:0 0 10px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9fb3cf;font-family:inherit}
.arena-results ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.arena-results li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}
.res-teams{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-vs{color:#7f93b0}
.res-score{font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.res-comp{grid-column:1 / -1;font-size:.85rem;color:#9fb3cf}
@media (min-width:600px){.arena-rail .rail-x{--cards:2.4}}
@media (min-width:1100px){
  .arena-in{grid-template-columns:minmax(320px,.8fr) minmax(0,1.7fr);grid-template-areas:"copy rail" "results rail";align-items:end}
  .arena-copy{grid-area:copy;padding-inline-end:0;align-self:end}
  .arena-results{grid-area:results;padding-inline-end:0;max-width:520px}
  .arena-rail{grid-area:rail;align-self:end;min-width:0}
  .arena-rail .shelf-head--sub{padding-inline-start:0}
  .arena-rail .rail-x{--cards:2.7;padding-inline-start:0;scroll-padding-inline:0}
}
@media (min-width:1600px){.arena-rail .rail-x{--cards:3.4}}

/* ============================================== C. tv-gids (compact) ==== */
.guide-x{display:grid;gap:clamp(20px,3vw,48px);padding:clamp(28px,3vw,48px) var(--gx) 0;
  border-top:1px solid rgba(255,255,255,.08)}
.guide-x-copy h2{margin:0 0 12px;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.guide-x-copy p:not(.eyebrow-x){margin:0 0 22px;color:#b9cbe4;max-width:46ch}
.guide-x-list{list-style:none;margin:0;padding:0}
.guide-x-list li + li{border-top:1px solid rgba(255,255,255,.08)}
.row-x{display:flex;align-items:center;gap:14px;padding:12px 4px;color:var(--text);border-radius:10px;
  transition:background var(--t)}
.row-x:hover{background:rgba(255,255,255,.04);color:#fff}
.row-x > .ui-ic{width:18px;height:18px;color:#7f93b0;flex:0 0 auto}
[dir="rtl"] .row-x > .ui-ic{transform:scaleX(-1)}
.row-x-logo{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:10px;overflow:hidden;background:#fff}
.row-x-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.row-x-logo .ini{display:grid;place-items:center;width:100%;height:100%;font-weight:800;color:#fff;background:linear-gradient(135deg,#1c7de0,#00b8a5)}
.row-x-text{display:flex;flex-direction:column;min-width:0;flex:1}
.row-x-text b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-x-text span{font-size:.875rem;color:#9fb3cf}
@media (min-width:900px){.guide-x{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}

/* ===================================================== beweging / a11y == */
.home :focus-visible{outline:2px solid #7fe9f7;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .stage-track{transition:none}
  .mcard-media,.mcard-img,.ed-card,.ed-img{transition:none!important;transform:none!important}
}

/* ====================================================================
   Golden Master verfijning (fase 4)
   Bovenop het bestaande systeem: hero met "wat te kijken"-paneel en
   tabbladen, redactionele regels, compactere landen, kaart, nieuws.
   ==================================================================== */

/* ---- koppen met ondertitel ------------------------------------------ */
.shelf-title{display:flex;flex-direction:column;gap:6px;min-width:0}
.shelf-lead{margin:0;font-size:.95rem;color:#9fb3cf;max-width:60ch}

/* ---- zenderlogo iets bescheidener ----------------------------------- */
.mcard-logo{width:clamp(42px,3.3vw,54px);border-radius:10px}

/* ---- hero: tekst links, paneel rechts, tabs onderaan ------------------ */
.stage-slide{min-height:clamp(560px,84vh,900px)}
.stage-in{position:relative;width:100%;display:grid;align-items:end;gap:32px;
  padding:0 var(--gx) clamp(112px,10vw,150px)}
.stage-in .stage-copy{padding:0;max-width:720px}
.stage-panel{display:none}
@media (min-width:1100px){
  .stage-in{grid-template-columns:minmax(0,1fr) minmax(330px,400px)}
  .stage-panel{display:block;align-self:end;padding:14px;border-radius:18px;
    background:rgba(4,8,15,.52);border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
}
@media (min-width:1600px){.stage-in{grid-template-columns:minmax(0,1fr) 440px}}
.stage-panel-label{margin:2px 6px 8px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9fb3cf}
.stage-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pick{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;color:var(--text);
  transition:background var(--t)}
.pick:hover,.pick:focus-visible{background:rgba(255,255,255,.07);color:#fff}
.pick-logo{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:10px;overflow:hidden;background:#fff}
.pick-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.pick-logo .ini{display:grid;place-items:center;width:100%;height:100%;font-weight:800;color:#fff;background:linear-gradient(135deg,#1c7de0,#00b8a5)}
.pick-flag{display:grid;place-items:center;flex:0 0 46px}
.pick-flag .flag,.pick-flag .flag-fallback{width:40px;height:28px;border-radius:6px}
.pick-text{display:flex;flex-direction:column;min-width:0;flex:1}
.pick-text b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-text > span{display:flex;align-items:center;gap:7px;font-size:.85rem;color:#a9bdd8;overflow:hidden;white-space:nowrap}
.pick-text .flag,.pick-text .flag-fallback{width:18px;height:13px;border-radius:3px;box-shadow:none;flex:0 0 18px;font-size:.5rem}
.pick-live{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:5px;background:var(--hot);color:#fff;
  font-size:.7rem;font-weight:800;letter-spacing:.08em}
.pick-live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:ltvpulse 2s infinite}
.pick-go{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;
  transition:background var(--t),color var(--t)}
.pick:hover .pick-go{background:#fff;color:#04101d}
.pick-go .ui-ic{width:15px;height:15px}
[dir="rtl"] .pick-go .ui-ic{transform:scaleX(-1)}

.stage-bar{position:absolute;inset-inline:var(--gx);bottom:clamp(22px,2.8vw,40px);z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.stage-tabs{display:flex;gap:clamp(10px,1.4vw,22px);flex:1;max-width:820px}
.stage-tab{flex:1;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:baseline;min-height:44px;
  padding:6px 0 0;border:0;background:transparent;color:rgba(255,255,255,.62);text-align:start;cursor:pointer;font:inherit;
  transition:color var(--t)}
.stage-tab:hover{color:#fff}
.stage-tab-num{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;color:#7fe9f7}
.stage-tab-label{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-tab-bar{grid-column:1 / -1;display:block;height:3px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.18)}
.stage-tab-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.stage-tab[aria-current="true"]{color:#fff}
.stage-tab[aria-current="true"] .stage-tab-bar{background:rgba(255,255,255,.42)}
.stage-buttons{display:flex;gap:10px}
@media (max-width:759px){
  .stage-in{padding-bottom:86px}
  .stage-bar{bottom:18px}
  .stage-tabs{flex:0 1 auto;gap:8px}
  .stage-tab{flex:0 0 36px;grid-template-columns:1fr;padding-top:20px}
  .stage-tab-num,.stage-tab-label{display:none}
  .stage-buttons .stage-btn[data-carousel-prev],.stage-buttons .stage-btn[data-carousel-next]{display:none}
}
@media (min-width:760px) and (max-width:1099px){.stage-tab-label{display:none}}

/* ---- wereldcollecties: korte redactionele regel ----------------------- */
.ed-desc{display:block;max-width:40ch;margin-top:4px;font-size:.95rem;line-height:1.45;color:rgba(232,241,255,.86)}
.collections .ed-desc{font-size:clamp(.92rem,.85rem + .2vw,1.05rem)}
@media (min-width:1100px) and (max-width:1499px){
  .collections .ed-card--asia .ed-desc,.collections .ed-card--americas .ed-desc{display:none}
}

/* ---- categorieën: lager, beschrijving boven het aantal ---------------- */
.rail-x--grid4 .ed-card--wide{aspect-ratio:16/9}
@media (min-width:1100px){.rail-x--grid4 .ed-card--wide{aspect-ratio:2/1}}
.ed-card--wide .ed-desc{font-size:.9rem;max-width:32ch}
.ed-count{margin-top:6px;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:rgba(232,241,255,.62)}
@media (min-width:1100px) and (max-width:1365px){.ed-card--wide .ed-desc{display:none}}

/* ---- populaire landen: compacte redactionele rail --------------------- */
.rail-x--countries{--cards:1.75}
@media (min-width:600px){.rail-x--countries{--cards:2.7}}
@media (min-width:900px){.rail-x--countries{--cards:3.7}}
@media (min-width:1200px){.rail-x--countries{--cards:4.6}}
@media (min-width:1600px){.rail-x--countries{--cards:5.6}}
.ed-card--country{aspect-ratio:3/4}
.ed-card--country > .ed-flag{position:absolute;top:14px;inset-inline-start:14px;margin:0}
.ed-card--country .ed-title{font-size:clamp(1.2rem,1.05rem + .5vw,1.6rem)}
.ed-card--country .ed-meta{font-size:.85rem}
.ed-tags{display:block;max-width:100%;margin-top:2px;font-size:.82rem;color:rgba(232,241,255,.72);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-card--country .ed-cta{margin-top:8px;font-size:.88rem}

/* ---- wereldkaart: verfijnde, interactieve verkenning ------------------ */
.atlas{display:grid;gap:clamp(20px,3vw,48px);align-items:center;padding:0 var(--gx)}
.atlas-copy h2{margin:0 0 12px;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.atlas-copy p:not(.eyebrow-x){margin:0 0 22px;color:#b9cbe4;max-width:44ch}
.atlas-map{position:relative;width:100%;max-width:980px;justify-self:center;aspect-ratio:950/620;direction:ltr}
.atlas-land{position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(127,233,247,.55) 1.1px,transparent 1.6px);background-size:7px 7px;
  -webkit-mask:url("/assets/img/world.svg") center/100% 100% no-repeat;mask:url("/assets/img/world.svg") center/100% 100% no-repeat;
  opacity:.75}
.atlas-map::before{content:"";position:absolute;inset:10% 15%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(47,157,255,.16),transparent)}
.atlas-spot{position:absolute;z-index:1;display:flex;align-items:center;gap:8px;transform:translate(-6px,-50%);
  color:#dbe8fb;font-size:.85rem;font-weight:600;white-space:nowrap;outline-offset:6px}
.atlas-dot{position:relative;width:12px;height:12px;border-radius:50%;background:#7fe9f7;
  box-shadow:0 0 0 4px rgba(127,233,247,.18),0 0 18px rgba(127,233,247,.6)}
.atlas-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(127,233,247,.5);
  animation:atlasping 3.2s ease-out infinite}
@keyframes atlasping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.atlas-name{text-shadow:0 2px 10px rgba(0,0,0,.8);opacity:.88;transition:opacity var(--t)}
.atlas-card{position:absolute;left:-10px;bottom:calc(100% + 12px);display:flex;flex-direction:column;gap:4px;min-width:220px;
  padding:14px 16px;border-radius:14px;background:rgba(6,12,22,.94);border:1px solid rgba(127,233,247,.28);
  box-shadow:0 18px 40px rgba(0,0,0,.55);opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--t),transform var(--t) var(--ease)}
.atlas-spot.is-east .atlas-card{left:auto;right:-10px}
.atlas-card b{font-family:var(--display);font-size:1.15rem;color:#fff}
.atlas-card span{font-size:.85rem;color:#a9bdd8;font-weight:500}
.atlas-card .atlas-go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;color:#7fe9f7;font-weight:700}
.atlas-go .ui-ic{width:16px;height:16px}
.atlas-spot:hover,.atlas-spot:focus-visible{color:#fff;z-index:2}
.atlas-spot:hover .atlas-name,.atlas-spot:focus-visible .atlas-name{opacity:1}
.atlas-spot:hover .atlas-card,.atlas-spot:focus-visible .atlas-card{opacity:1;transform:none}
@media (min-width:1000px){.atlas{grid-template-columns:minmax(280px,.7fr) minmax(0,1.5fr)}}
@media (max-width:759px){
  .atlas-card{display:none}
  .atlas-spot{font-size:.72rem;gap:5px}
  .atlas-dot{width:9px;height:9px}
}

/* ---- nieuws: één uitgelichte zender + vier kleinere -------------------- */
.newsdesk-grid{display:grid;gap:var(--gap);padding:6px var(--gx) 0}
.news-lead{position:relative;display:block;isolation:isolate;overflow:hidden;aspect-ratio:4/3;
  border-radius:calc(var(--r) + 4px);background:#0b1424;color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.4);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.news-lead::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow var(--t)}
.news-lead .mcard-live{top:16px;inset-inline-start:16px;font-size:.78rem;padding:4px 10px}
.news-lead-body{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;flex-wrap:wrap;gap:16px;
  padding:clamp(18px,2vw,30px)}
.news-logo{display:grid;place-items:center;flex:0 0 auto;width:clamp(54px,4.6vw,72px);aspect-ratio:1;border-radius:14px;
  overflow:hidden;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.news-logo img{width:100%;height:100%;object-fit:contain;padding:7px}
.news-logo .ini{display:grid;place-items:center;width:100%;height:100%;font-weight:800;color:#fff;background:linear-gradient(135deg,#1c7de0,#00b8a5)}
.news-lead-title{display:block;font-family:var(--display);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.5rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.news-lead-meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.95rem;color:rgba(232,241,255,.85)}
.news-lead-meta .flag,.news-lead-meta .flag-fallback{width:22px;height:15px;border-radius:3px}
.news-lead-cta{margin-inline-start:auto}
.newsdesk-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.newsdesk-side .mcard-title{font-size:.95rem}
@media (hover:hover){
  .news-lead:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(0,0,0,.6)}
  .news-lead:hover::after{box-shadow:inset 0 0 0 2px var(--ring)}
  .news-lead:hover .ed-img{transform:scale(1.04)}
}
@media (min-width:900px){
  .newsdesk-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch}
  .news-lead{aspect-ratio:auto;min-height:420px}
}
@media (max-width:599px){.news-lead-cta{display:none}}

/* ---- nieuw in de gids: kleinere, rustige rail ------------------------ */
.rail-x--small{--cards:1.9}
@media (min-width:600px){.rail-x--small{--cards:3.2}}
@media (min-width:900px){.rail-x--small{--cards:4.3}}
@media (min-width:1200px){.rail-x--small{--cards:5.4}}
@media (min-width:1600px){.rail-x--small{--cards:6.5}}
.rail-x--small .mcard-title{font-size:.92rem}
.rail-x--small .mcard-meta{font-size:.8rem}
.rail-x--small .mcard-logo{width:clamp(36px,2.6vw,44px)}
.shelf--quiet .shelf-head h2{font-size:clamp(1.2rem,1rem + .7vw,1.7rem)}

@media (prefers-reduced-motion:reduce){
  .atlas-dot::after{animation:none}
  .news-lead,.news-lead .ed-img{transition:none!important;transform:none!important}
}

/* ---- header lijnt op de homepage uit met de vloeiende goten van de pagina ---- */
.home .topbar .wrap{max-width:none;padding-inline:var(--gx)}

/* ====================================================================
   Golden Master - final polish (bevroren basis, alleen verfijning)
   ==================================================================== */

/* ---- hero: ca. 10-15% lager (desktop ~520-580px) ---------------------- */
.stage-slide{min-height:clamp(520px,68vh,580px)}
.stage-in{padding-bottom:clamp(96px,8.2vw,124px);gap:28px}
.stage-copy h1,.stage-copy h2{font-size:clamp(2.3rem,1.3rem + 3.5vw,4.6rem);margin-bottom:14px}
.stage-lead{margin-bottom:22px}
.stage-kicker{margin-bottom:14px}
.pick{padding:8px}
@media (max-width:759px){.stage-slide{min-height:clamp(430px,62svh,520px)}}

/* ---- één hover-taal: beeld 1.03, kleine lift, rustige cyaan rand ------- */
@media (hover:hover){
  .mcard-link:hover .mcard-img,.mcard-link:focus-visible .mcard-img,
  .ed-card:hover .ed-img,.ed-card:focus-visible .ed-img,
  .news-lead:hover .ed-img{transform:scale(1.03)}
  .mcard-link:hover .mcard-media,.ed-card:hover,.news-lead:hover{transform:translateY(-3px)}
}

/* ---- beelden die nog laden: rustige gradient, nooit een wit vlak ------- */
.mcard-media,.ed-card,.news-lead{background:linear-gradient(160deg,#0e1b2f,#070d18)}

/* ---- wereldcollecties: beschrijving + identieke Explore op alle vier --- */
@media (min-width:1100px){
  .collections{grid-template-rows:repeat(2,clamp(250px,21vw,420px))}
  .collections .ed-card--asia .ed-desc,.collections .ed-card--americas .ed-desc{display:block}
  .collections .ed-card--asia .ed-title,.collections .ed-card--americas .ed-title{font-size:clamp(1.7rem,1rem + 1.6vw,2.8rem)}
  .collections .ed-card--asia .ed-desc,.collections .ed-card--americas .ed-desc{font-size:.92rem;max-width:34ch}
}
.collections .ed-cta{margin-top:12px}

/* ---- categorieën: iets lager, beschrijving sterker dan het aantal ----- */
@media (min-width:1100px){.rail-x--grid4 .ed-card--wide{aspect-ratio:13/6}}
.ed-card--wide .ed-title{font-size:clamp(1.2rem,1rem + .6vw,1.6rem)}
.ed-card--wide .ed-desc{display:block;font-size:.92rem;font-weight:600;color:#fff;max-width:30ch;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.ed-card--wide .ed-count{margin-top:4px;font-size:.76rem;font-weight:500;color:rgba(232,241,255,.6)}

/* ---- populaire landen: compactere premium-shelf ----------------------- */
.rail-x--countries{--cards:2.2}
@media (min-width:600px){.rail-x--countries{--cards:3.3}}
@media (min-width:900px){.rail-x--countries{--cards:4.4}}
@media (min-width:1200px){.rail-x--countries{--cards:5.2}}
@media (min-width:1600px){.rail-x--countries{--cards:6.2}}
.ed-card--country{aspect-ratio:4/5}
.ed-card--country .ed-body{padding:14px 14px 16px}
.ed-card--country .ed-title{font-size:clamp(1.1rem,1rem + .4vw,1.4rem)}
.ed-card--country > .ed-flag .flag,.ed-card--country > .ed-flag .flag-fallback{width:28px;height:19px}

/* ---- zachte reveal: alleen met JavaScript, één keer, geen layout shift ---
 * Zonder JS (of bij reduced motion) staat alles meteen in beeld. */
.home .reveal{opacity:1;transform:none}
.js .home .reveal{opacity:0;transform:translateY(12px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.js .home .reveal.is-in{opacity:1;transform:none}
.js .home .reveal :is(.rail-x,.collections,.newsdesk-grid,.newsdesk-side) > *{opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.js .home .reveal.is-in :is(.rail-x,.collections,.newsdesk-grid,.newsdesk-side) > *{opacity:1;transform:none}
.js .home .reveal.is-in :is(.rail-x,.collections,.newsdesk-side) > :nth-child(2){transition-delay:55ms}
.js .home .reveal.is-in :is(.rail-x,.collections,.newsdesk-side) > :nth-child(3){transition-delay:110ms}
.js .home .reveal.is-in :is(.rail-x,.collections,.newsdesk-side) > :nth-child(4){transition-delay:165ms}
.js .home .reveal.is-in :is(.rail-x,.collections,.newsdesk-side) > :nth-child(5){transition-delay:220ms}
.js .home .reveal.is-in :is(.rail-x,.collections,.newsdesk-side) > :nth-child(n+6){transition-delay:270ms}
.js .home .reveal.is-in .newsdesk-grid > :nth-child(2){transition-delay:80ms}
@media (prefers-reduced-motion:reduce){
  .js .home .reveal,.js .home .reveal :is(.rail-x,.collections,.newsdesk-grid,.newsdesk-side) > *{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* ====================================================================
   Music TV - vlaggenschip #2 (zusje van Live Sports)
   Sport = stadion/competitie; muziek = podium/sfeer. Zelfde schaal en
   bouwstenen (btn-x, mcard, rail-x, rail-nav), eigen compositie:
   tekst + uitgelichte zender bovenaan, zenderrail over de volle breedte.
   ==================================================================== */
.stagex{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,6vw,104px) 0 clamp(36px,3.6vw,60px)}
.stagex-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 64%}
.stagex-shade{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(55% 50% at 74% 36%,rgba(139,92,246,.24),transparent 70%),
  radial-gradient(42% 46% at 16% 88%,rgba(0,224,198,.12),transparent 70%),
  linear-gradient(90deg,rgba(4,8,15,.9) 0%,rgba(4,8,15,.58) 40%,rgba(4,8,15,.18) 100%),
  linear-gradient(180deg,#04080f 0%,rgba(4,8,15,.12) 20%,rgba(4,8,15,.2) 62%,#04080f 100%)}
[dir="rtl"] .stagex-shade{background:
  radial-gradient(55% 50% at 26% 36%,rgba(139,92,246,.24),transparent 70%),
  radial-gradient(42% 46% at 84% 88%,rgba(0,224,198,.12),transparent 70%),
  linear-gradient(270deg,rgba(4,8,15,.9) 0%,rgba(4,8,15,.58) 40%,rgba(4,8,15,.18) 100%),
  linear-gradient(180deg,#04080f 0%,rgba(4,8,15,.12) 20%,rgba(4,8,15,.2) 62%,#04080f 100%)}
.stagex-in{display:grid;gap:clamp(24px,2.6vw,40px)}
.stagex-copy{padding:0 var(--gx);max-width:680px}
.stagex-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#c6b8ff}
.stagex-eq{display:inline-flex;align-items:flex-end;gap:3px;height:14px}
.stagex-eq i{display:block;width:3px;border-radius:2px;background:linear-gradient(180deg,#9b8cff,#7fe9f7)}
.stagex-eq i:nth-child(1){height:6px}.stagex-eq i:nth-child(2){height:13px}
.stagex-eq i:nth-child(3){height:9px}.stagex-eq i:nth-child(4){height:14px}
.stagex-copy h2{margin:0 0 16px;font-size:clamp(2.3rem,1.3rem + 3.3vw,4.5rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.stagex-accent{display:block;background:linear-gradient(95deg,#7fe9f7 0%,#9b8cff 55%,#d199ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.stagex-lead{margin:0 0 24px;max-width:44ch;font-size:clamp(1rem,.95rem + .3vw,1.2rem);line-height:1.55;color:#dfe6f7}
.stagex-cta{display:flex;flex-wrap:wrap;gap:12px}
.stagex-arrow{width:18px;height:18px;transition:transform var(--t) var(--ease)}
.stagex-cta .btn-x:hover .stagex-arrow{transform:translateX(4px)}
[dir="rtl"] .stagex-arrow{transform:scaleX(-1)}
[dir="rtl"] .stagex-cta .btn-x:hover .stagex-arrow{transform:scaleX(-1) translateX(4px)}
.stagex-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:18px 0 0;font-size:.92rem;color:#b9c3dc}
.stagex-live{display:inline-flex;align-items:center;gap:8px;color:#fff}
.stagex-live i{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 3px rgba(255,61,113,.22);animation:ltvpulse 2s infinite}

.stagex-feature{position:relative;display:block;isolation:isolate;overflow:hidden;margin:0 var(--gx);aspect-ratio:16/10;
  border-radius:calc(var(--r) + 4px);background:linear-gradient(160deg,#151033,#070d18);color:#fff;
  box-shadow:0 22px 50px rgba(0,0,0,.5);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.stagex-feature::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow var(--t)}
.stagex-feature .mcard-live{top:16px;inset-inline-start:16px;font-size:.78rem;padding:4px 10px}
.stagex-feature-body{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px;padding:clamp(16px,1.8vw,26px)}
.stagex-feature-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.stagex-feature-label{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c6b8ff}
.stagex-feature-text b{font-family:var(--display);font-size:clamp(1.3rem,1rem + 1vw,2rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;
  text-shadow:0 2px 16px rgba(0,0,0,.5)}
.stagex-watch{margin-inline-start:auto}
@media (hover:hover){
  .stagex-feature:hover{transform:translateY(-3px);box-shadow:0 28px 60px rgba(0,0,0,.6)}
  .stagex-feature:hover::after{box-shadow:inset 0 0 0 2px var(--ring)}
  .stagex-feature:hover .ed-img{transform:scale(1.03)}
}

.stagex-rail .shelf-head--sub{padding:0 var(--gx)}
.stagex-rail .shelf-head--sub h3{font-size:1.05rem;letter-spacing:.01em}
.rail-x--music{--cards:1.5}
@media (min-width:600px){.rail-x--music{--cards:2.6}}
@media (min-width:900px){.rail-x--music{--cards:3.6}}
@media (min-width:1200px){.rail-x--music{--cards:4.5}}
@media (min-width:1600px){.rail-x--music{--cards:5.4}}

@media (min-width:1100px){
  .stagex-in{grid-template-columns:minmax(0,1fr) minmax(400px,.9fr);grid-template-areas:"copy feature" "rail rail";align-items:end}
  .stagex-copy{grid-area:copy;padding-inline-end:0;align-self:center}
  .stagex-feature{grid-area:feature;margin-inline-start:0}
  .stagex-rail{grid-area:rail;min-width:0}
}
@media (max-width:599px){
  .stagex-feature{aspect-ratio:4/3}
  .stagex-watch{display:none}
}
@media (prefers-reduced-motion:reduce){
  .stagex-feature,.stagex-feature .ed-img,.stagex-arrow{transition:none!important;transform:none!important}
}

/* ---- Music TV: compacter (doel ca. 600-680px desktop) ------------------ */
.stagex{padding-top:clamp(44px,4.4vw,80px)}
.stagex-in{gap:clamp(20px,2.2vw,32px)}
@media (min-width:1100px){
  .stagex-in{grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr)}
  .stagex-feature{aspect-ratio:16/9;max-height:360px;width:100%;justify-self:end}
}
@media (min-width:1600px){.stagex-feature{max-height:400px}}
.rail-x--music{--cards:1.5}
@media (min-width:600px){.rail-x--music{--cards:2.8}}
@media (min-width:900px){.rail-x--music{--cards:3.9}}
@media (min-width:1200px){.rail-x--music{--cards:5.1}}
@media (min-width:1600px){.rail-x--music{--cards:6.1}}
.rail-x--music .mcard-title{font-size:.95rem}
@media (min-width:760px) and (max-width:1099px){.stagex-feature{aspect-ratio:16/9}}
.stagex-copy h2{font-size:clamp(2.1rem,1.2rem + 2.6vw,3.7rem);margin-bottom:14px}
.stagex-lead{margin-bottom:20px}
.stagex-cta{align-items:center;gap:12px 22px}
.stagex-cta .stagex-meta{margin:0}

/* ====================================================================
   Definitieve uitbreiding: LIVE-badge op wereldcollecties + Animal TV
   (zelfde vlaggenschip-architectuur als Music TV, eigen natuurtint)
   ==================================================================== */
.ed-card .ed-live{top:14px;inset-inline-start:14px;z-index:2}

/* Animal TV: groen/oceaanblauw in plaats van violet; zelfde opbouw. */
.stagex--animal .stagex-img{object-position:center 55%}
.stagex--animal .stagex-shade{background:
  radial-gradient(55% 50% at 74% 36%,rgba(16,185,129,.18),transparent 70%),
  radial-gradient(42% 46% at 16% 88%,rgba(0,224,198,.12),transparent 70%),
  linear-gradient(90deg,rgba(4,8,15,.9) 0%,rgba(4,8,15,.56) 40%,rgba(4,8,15,.14) 100%),
  linear-gradient(180deg,#04080f 0%,rgba(4,8,15,.1) 20%,rgba(4,8,15,.2) 62%,#04080f 100%)}
[dir="rtl"] .stagex--animal .stagex-shade{background:
  radial-gradient(55% 50% at 26% 36%,rgba(16,185,129,.18),transparent 70%),
  radial-gradient(42% 46% at 84% 88%,rgba(0,224,198,.12),transparent 70%),
  linear-gradient(270deg,rgba(4,8,15,.9) 0%,rgba(4,8,15,.56) 40%,rgba(4,8,15,.14) 100%),
  linear-gradient(180deg,#04080f 0%,rgba(4,8,15,.1) 20%,rgba(4,8,15,.2) 62%,#04080f 100%)}
.stagex--animal .stagex-eyebrow{color:#9ff0c9}
.stagex--animal .stagex-eq i{background:linear-gradient(180deg,#34d399,#7fe9f7)}
.stagex--animal .stagex-accent{background:linear-gradient(95deg,#7fe9f7 0%,#34d399 55%,#a3e635 100%);
  -webkit-background-clip:text;background-clip:text}

/* Zonder bevestigd live-kanaal geen uitgelichte kaart: de foto krijgt de ruimte. */
@media (min-width:1100px){
  .stagex--nofeature .stagex-in{grid-template-areas:"copy copy" "rail rail"}
  .stagex--nofeature .stagex-copy{min-height:clamp(240px,20vw,340px);display:flex;flex-direction:column;justify-content:center}
}