/* LiveTV.eu - December 2026 preview (tijdelijke homepagesectie, includes/december.php + assets/js/december.js).
 * Bouwt op home.css: .rail-x, .mcard, .rail-nav, .shelf-head. Alleen geladen zolang de preview actief is. */
.dec{scroll-margin-top:clamp(90px,10vw,140px);--dec-ink:#060b1c;--dec-gold:#f6c86a;--dec-red:#e0243a;--dec-ice:#bcd6ff;padding-inline:var(--gx)}
.home-main > .dec{margin-top:clamp(16px,1.6vw,28px)}
.dec-teaser,.dec-panel{--gx:clamp(16px,2.6vw,40px);position:relative;overflow:hidden;isolation:isolate;border-radius:20px;
  background:var(--dec-ink);border:1px solid rgba(120,170,255,.38);
  box-shadow:0 0 0 1px rgba(60,120,255,.10),0 0 26px rgba(70,130,255,.22),0 24px 60px rgba(0,0,0,.45)}
.dec-eyebrow{margin:0 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.2em;line-height:1.3;text-transform:uppercase;color:var(--dec-gold)}

/* ----------------------------------------------------------- teaser */
.dec-teaser{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:96px;
  padding:12px var(--gx) 12px clamp(14px,1.8vw,28px)}
.dec-teaser[hidden]{display:none}
.dec-teaser-img{position:absolute;inset:0 0 0 auto;z-index:-2;width:76%;height:100%;object-fit:cover;object-position:50% 60%}
.dec-teaser-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--dec-ink) 24%,rgba(6,11,28,.55) 40%,rgba(6,11,28,.06) 62%,rgba(6,11,28,.0) 78%,rgba(6,11,28,.72) 100%)}
.dec-teaser-copy{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);min-width:0}
.dec-gift{width:clamp(38px,3.4vw,50px);height:auto;flex:0 0 auto;fill:none;stroke:var(--dec-gold);stroke-width:2.4;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(246,200,106,.55))}
.dec-teaser-title{margin:0;font-size:clamp(1.55rem,1rem + 1.9vw,2.6rem);font-weight:800;line-height:1;letter-spacing:.01em;
  text-transform:uppercase;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.dec-teaser-title span,.dec-title span{background:linear-gradient(180deg,#ffe3a3,#f6c86a 55%,#d99a2b);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.dec-teaser-sub{margin:4px 0 0;font-size:clamp(.82rem,.76rem + .25vw,1rem);font-weight:600;color:#dfe8ff;text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* ----------------------------------------------------------- knoppen */
.dec-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;min-height:46px;padding:0 20px;
  border-radius:12px;font:inherit;font-size:1rem;font-weight:700;color:#fff;cursor:pointer;
  transition:background-color .2s ease,box-shadow .2s ease,border-color .2s ease}
.dec-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dec-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dec-btn--open{background:linear-gradient(180deg,#ef3349,#b9142a);border:1px solid rgba(255,140,150,.65);
  box-shadow:0 0 18px rgba(224,36,58,.45),inset 0 1px 0 rgba(255,255,255,.22)}
.dec-btn--open:hover{box-shadow:0 0 26px rgba(224,36,58,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.dec-btn--close{position:absolute;top:clamp(12px,1.4vw,18px);inset-inline-end:clamp(12px,1.4vw,18px);z-index:2;
  background:rgba(6,11,28,.78);border:1px solid rgba(160,195,255,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dec-btn--close:hover{background:rgba(20,32,70,.9);border-color:rgba(190,215,255,.7)}
.dec-btn--close svg{transform:rotate(180deg)}

/* ------------------------------------------------------------ paneel */
.dec-panel[hidden]{display:none}
.dec-snow{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.dec-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(320px,26vw,400px)}
.dec-scene{position:absolute;inset:0 0 0 auto;z-index:-2;width:74%;height:100%;object-fit:cover;object-position:60% 50%}
.dec-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--dec-ink) 26%,rgba(6,11,28,.82) 36%,rgba(6,11,28,.25) 55%,rgba(6,11,28,0) 70%),
             linear-gradient(0deg,var(--dec-ink) 0%,rgba(6,11,28,0) 30%)}
.dec-copy{position:relative;z-index:1;max-width:660px;padding:clamp(22px,2.6vw,40px) var(--gx) clamp(16px,1.8vw,24px)}
.dec-logo{display:block;width:auto;height:clamp(36px,3.2vw,50px);margin:0 0 clamp(14px,1.6vw,22px)}
.dec-eyebrow--panel{margin-bottom:8px}
.dec-title{margin:0;font-size:clamp(2.2rem,1.2rem + 3.4vw,4.1rem);font-weight:800;line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6);outline:none}
.dec-lead{margin:14px 0 0;max-width:34em;font-size:clamp(.98rem,.9rem + .35vw,1.2rem);font-weight:500;line-height:1.45;color:#e6edff;
  text-shadow:0 1px 10px rgba(0,0,0,.75)}

/* -------------------------------------------------------------- rail */
.dec-rail{position:relative;z-index:1;padding:6px 0 clamp(8px,1vw,14px)}
.dec-rail .shelf-head--sub{padding:0 var(--gx)}
.dec-rail .shelf-head--sub h3{display:block;font-size:.98rem;color:#fff}
.dec-note{font-weight:700;color:var(--dec-gold)}
.dec-cards{--cards:1.45}
.dec .mcard-media{border:1px solid rgba(140,180,255,.2)}
/* Deze zenderlogo's zijn licht ontworpen (voor donkere achtergrond); op wit vielen ze weg. */
.dec .mcard-logo{background:#0b1430;box-shadow:0 8px 22px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12)}
@media (hover:hover){
  .dec .mcard-link:hover .mcard-media::after,.dec .mcard-link:focus-visible .mcard-media::after{box-shadow:inset 0 0 0 2px rgba(246,200,106,.8)}
}
/* Partnertegel (extern, affiliate): de bestaande goedgekeurde SkyShowtime-uiting ongewijzigd en volledig zichtbaar,
   op een eigen winterachtergrond; gouden kader + badge houden hem apart van de gratis livezenders. */
.dec-partner-media{display:grid;place-items:center;
  background:radial-gradient(80% 90% at 50% 110%,rgba(224,36,58,.28),transparent 60%),
             linear-gradient(180deg,rgba(6,11,28,.35),rgba(6,11,28,.85)),url("/assets/img/december/village-sm.webp") center 60%/cover,#0b1430}
.dec-partner-badge{display:inline-block;margin-inline-start:6px;padding:2px 7px;border-radius:5px;background:var(--dec-gold);vertical-align:2px;
  color:#1b1300;font-size:.66rem;font-weight:800;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.dec-partner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(0,0,0,.65))}
.dec .dec-partner .mcard-media{border-color:rgba(246,200,106,.5)}
/* Christmas Fireplace-kaart: zelfde .mcard-opbouw als de zenders; knop i.p.v. link, play altijd zichtbaar (klein),
   turquoise "Ambience"-badge (geen LIVE). Afspelen = bewegend vuur in dezelfde kaart (december.js), zonder geluid. */
.dec-firecard-btn{display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:var(--text);text-align:start;cursor:pointer}
.dec-firecard-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.dec .dec-firecard .mcard-media{border-color:rgba(255,170,80,.42)}
.dec-firecard .mcard-play{opacity:1;transform:none;width:40px;height:40px}
.dec-fc-ic{width:18px;height:18px;fill:currentColor}
.dec-fc-ic--play{margin-inline-start:2px}
.dec-firecard-btn[aria-pressed="true"] .dec-fc-ic--play,.dec-firecard-btn[aria-pressed="false"] .dec-fc-ic--pause{display:none}
.dec-firecard-badge{position:absolute;top:10px;inset-inline-start:10px;padding:3px 8px;border-radius:5px;background:rgba(6,11,28,.74);
  border:1px solid rgba(56,214,208,.6);color:#c4f6f2;font-size:.72rem;font-weight:800;letter-spacing:.1em;line-height:1.3;text-transform:uppercase}
.dec-firecard-logo{background:#0b1430}
.dec-firecard-logo img{padding:5px}
/* Afspelen: de vlammen (canvas, door CSS opgeschaald en verzacht) liggen precies over de haardopening van de poster;
   de geschilderde vlammen worden iets gedimd zodat alleen het bewegende vuur opvalt. Kaartmaat verandert nooit. */
.dec-firecard-dim,.dec-firecard-fire{position:absolute;pointer-events:none;opacity:0;transition:opacity .45s ease}
.dec-firecard-dim{left:30%;top:30%;width:40%;height:58%;background:radial-gradient(45% 55% at 50% 60%,rgba(60,20,4,.42),transparent 75%)}
.dec-firecard-fire{left:31%;top:22%;width:38%;height:62%;filter:blur(1px) saturate(1.3) brightness(1.15);mix-blend-mode:screen}
.dec-firecard.is-burning .dec-firecard-dim,.dec-firecard.is-burning .dec-firecard-fire{opacity:1}
@media (min-width:600px){.dec-cards{--cards:2.4}}
@media (min-width:900px){.dec-cards{--cards:3.4}}
/* Breed: alle kaarten naast elkaar (max. vier kolommen), zonder scroll en zonder pijlen. */
@media (min-width:1200px){
  .dec-cards{grid-auto-columns:calc((100% - var(--gap) * 3) / 4);overflow:visible}
  .home .dec .rail-nav{display:none}
}

@media (min-width:760px){.dec-title{white-space:nowrap}}

/* ------------------------------------------------------------ mobiel */
@media (max-width:759px){
  .dec-teaser,.dec-panel{border-radius:16px}
  .dec-teaser{flex-wrap:wrap;gap:12px;min-height:0;padding:12px 14px}
  .dec-teaser-copy{flex:1 1 210px}
  .dec-teaser-sub{font-size:.8rem}
  .dec-btn--open{min-height:42px;padding:0 16px}
  .dec-teaser-img{width:100%;object-position:70% 60%}
  .dec-teaser-shade{background:linear-gradient(90deg,rgba(6,11,28,.92) 0%,rgba(6,11,28,.62) 60%,rgba(6,11,28,.35) 100%)}
  .dec-hero{display:block;min-height:0;padding-top:clamp(150px,46vw,210px)}
  .dec-scene{inset:0 0 auto 0;width:100%;height:clamp(150px,46vw,210px);object-position:72% 50%}
  .dec-shade{background:linear-gradient(180deg,rgba(6,11,28,0) 0%,rgba(6,11,28,.2) clamp(80px,26vw,120px),var(--dec-ink) clamp(150px,46vw,210px))}
  .dec-copy{padding-top:6px}
  .dec-btn--close{min-height:40px;padding:0 14px;font-size:.92rem}
}
@media (max-width:379px){
  .dec-gift{display:none}
  .dec-btn--close span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dec-btn--close{width:44px;padding:0}
}