/* LiveTV.eu - Halloween After Dark 2026 (tijdelijke homepagesectie, includes/halloween.php).
 * Bouwt op home.css: .section-ritme, .rail-x, .mcard, .rail-nav. Alleen geladen zolang de special actief is. */
.hw{padding-inline:var(--gx)}
.hw-frame{--gx:clamp(18px,2.6vw,40px);--hw-ink:#070a1c;--hw-orange:#ff9a3d;--hw-violet:#a78bfa;
  position:relative;overflow:hidden;border-radius:22px;isolation:isolate;
  background:radial-gradient(70% 60% at 100% 0%,rgba(255,122,24,.10),transparent 60%),
             radial-gradient(60% 70% at 0% 100%,rgba(124,58,237,.18),transparent 62%),var(--hw-ink);
  border:1px solid rgba(167,139,250,.24);
  box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}

/* ------------------------------------------------------------ banner */
.hw-banner{position:relative;display:flex;align-items:flex-end;min-height:clamp(300px,25vw,380px)}
.hw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 12%;z-index:-1}
.hw-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7,10,28,.97) 0%,rgba(7,10,28,.86) 30%,rgba(7,10,28,.35) 58%,rgba(7,10,28,.08) 100%),
             linear-gradient(0deg,var(--hw-ink) 0%,rgba(7,10,28,0) 38%)}
.hw-copy{position:relative;max-width:620px;padding:clamp(24px,3vw,44px) var(--gx) clamp(18px,2vw,28px)}
.hw-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:.76rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--hw-orange)}
.hw-moon{width:12px;height:12px;border-radius:50%;flex:0 0 12px;
  background:radial-gradient(circle at 35% 35%,#ffe0a8,#ff9a3d 70%);box-shadow:0 0 14px rgba(255,154,61,.75)}
.hw-title{margin:0;font-size:clamp(2.1rem,1.1rem + 3.2vw,3.9rem);font-weight:800;line-height:.95;
  letter-spacing:.01em;text-transform:uppercase;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hw-title span{display:block;background:linear-gradient(90deg,#ffb35c,#ff7a18 55%,#d9468f);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 18px rgba(255,122,24,.35))}
.hw-tagline{margin:12px 0 0;font-size:clamp(1rem,.9rem + .45vw,1.3rem);font-weight:600;color:#ddd3ff}
.hw-advisory{display:flex;align-items:flex-start;gap:12px;max-width:500px;margin-top:18px;padding:10px 14px;
  border-radius:12px;background:rgba(10,8,30,.68);border:1px solid rgba(255,154,61,.38);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hw-advisory-ic{width:20px;height:20px;flex:0 0 20px;margin-top:1px;fill:var(--hw-orange)}
.hw-advisory p{display:flex;flex-direction:column;gap:2px;margin:0;font-size:.84rem;line-height:1.4;color:#c9c2e6}
.hw-advisory strong{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ffd2a6}

/* -------------------------------------------------------------- rail */
.hw-rail{position:relative;padding:4px 0 clamp(8px,1vw,14px)}
.hw-rail .shelf-head--sub{padding:0 var(--gx)}
.hw-rail .shelf-head--sub h3{font-size:.95rem;color:#ddd3ff}
.hw-cards{--cards:1.45}
.hw .mcard-media{border:1px solid rgba(167,139,250,.16)}
.hw .mcard-img{filter:saturate(.7) brightness(.78)}
.hw .mcard-shade{background:linear-gradient(180deg,rgba(64,24,120,.30) 0%,rgba(7,10,28,.15) 45%,rgba(7,10,28,.82) 100%)}
@media (hover:hover){
  .hw .mcard-link:hover .mcard-media::after,.hw .mcard-link:focus-visible .mcard-media::after{box-shadow:inset 0 0 0 2px rgba(255,154,61,.75)}
}
@media (min-width:600px){.hw-cards{--cards:2.4}}
@media (min-width:900px){.hw-cards{--cards:3.4}}
/* Breed: alle zes naast elkaar, zonder scroll en zonder pijlen. */
@media (min-width:1200px){
  .hw-cards{grid-auto-columns:calc((100% - var(--gap) * 5) / 6);overflow:visible}
  .home .hw .rail-nav{display:none}
}

/* ------------------------------------------------------------ mobiel */
@media (max-width:759px){
  .hw-frame{border-radius:18px}
  .hw-banner{min-height:0;padding-top:150px}
  .hw-img{object-position:62% 28%}
  .hw-shade{background:linear-gradient(180deg,rgba(7,10,28,.15) 0%,rgba(7,10,28,.72) 40%,var(--hw-ink) 78%)}
  .hw-advisory{margin-top:14px}
}