/* LiveTV.eu - Horror Zone (permanente homepagesectie, includes/horror_zone.php).
 * Volle breedte: aangeleverd beeld als achtergrondlaag, kaarten eroverheen op een donkere overgang.
 * Bouwt op home.css: .section-ritme, .rail-x, .mcard, .rail-nav. Geen animaties. */
.hz{--hz-ink:#07060a;--hz-red:#e0404f;--hz-rail-gx:var(--gx,16px)}
.hz-frame{position:relative;overflow:hidden;isolation:isolate;background:var(--hz-ink);
  border-block:1px solid rgba(179,38,58,.38)}

/* ------------------------------------------------------------ beeld + tekst */
.hz-banner{display:flex;align-items:flex-end;min-height:clamp(330px,28vw,500px)}
.hz-img{position:absolute;inset:0 0 auto;z-index:-2;display:block;width:100%;height:auto;min-height:440px;object-fit:cover;object-position:right top}
.hz-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7,6,10,.94) 0%,rgba(7,6,10,.76) 30%,rgba(7,6,10,.14) 60%,rgba(7,6,10,0) 100%),
             linear-gradient(0deg,var(--hz-ink) 0,var(--hz-ink) calc(100% - clamp(390px,33vw,620px)),rgba(7,6,10,0) calc(100% - clamp(150px,14vw,260px)))}
.hz-copy{position:relative;max-width:calc(620px + var(--hz-rail-gx));padding:clamp(28px,3vw,48px) var(--hz-rail-gx) clamp(16px,1.8vw,26px)}
.hz-sub{margin:0 0 10px;font-size:.78rem;font-weight:800;letter-spacing:.24em;line-height:1.3;text-transform:uppercase;color:#ff6a76;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hz-title{margin:0;font-size:clamp(2.4rem,1.1rem + 4vw,4.8rem);font-weight:800;line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;color:#fff;text-shadow:0 2px 28px rgba(0,0,0,.75)}
.hz-title span{color:var(--hz-red)}
.hz-lead{margin:14px 0 0;max-width:34em;font-size:clamp(.98rem,.92rem + .3vw,1.18rem);line-height:1.45;color:#f0e7e9;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hz-advisory{margin:10px 0 0;max-width:40em;font-size:.8rem;line-height:1.4;color:#c9bbbf;text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* -------------------------------------------------------------- rail */
.hz-rail{position:relative;padding:4px 0 clamp(20px,2.4vw,36px)}
.hz-rail .shelf-head--sub{padding:0 var(--hz-rail-gx)}
.hz-rail .shelf-head--sub h3{font-size:.95rem;color:#f0e7e9}
.hz-cards{--cards:1.45;padding-inline:var(--hz-rail-gx);scroll-padding-inline:var(--hz-rail-gx)}
.hz-item{min-width:0}
.hz-genre{margin:0 0 8px;font-size:.7rem;font-weight:800;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;color:#ff8f99}
.hz .mcard-media{border:1px solid rgba(224,64,79,.3)}
/* Veel horrorlogo's zijn wit: donkere logotegel (zoals .dec .mcard-logo). */
.hz .mcard-logo{background:#1a1114;box-shadow:0 8px 22px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12)}
.hz .mcard-img{filter:saturate(.72) brightness(.8)}
.hz .mcard-shade{background:linear-gradient(180deg,rgba(74,19,32,.3) 0%,rgba(13,10,12,.15) 45%,rgba(13,10,12,.84) 100%)}
@media (hover:hover){
  .hz .mcard-link:hover .mcard-media::after,.hz .mcard-link:focus-visible .mcard-media::after{box-shadow:inset 0 0 0 2px rgba(224,64,79,.85)}
}
@media (min-width:600px){.hz-cards{--cards:2.4}}
@media (min-width:900px){.hz-cards{--cards:3.4}}
/* Breed: alle zes naast elkaar, zonder scroll en zonder pijlen. */
@media (min-width:1200px){
  .hz-cards{grid-auto-columns:calc((100% - var(--gap) * 5) / 6);overflow:visible}
  .home .hz .rail-nav{display:none}
}

/* ------------------------------------------------------------ mobiel: maan en kasteel boven, tekst eronder */
@media (max-width:759px){
  .hz-banner{min-height:0;padding-top:178px}
  .hz-img{height:270px;min-height:0;object-position:88% top}
  .hz-shade{background:linear-gradient(180deg,rgba(7,6,10,0) 0,rgba(7,6,10,0) 130px,rgba(7,6,10,.82) 215px,var(--hz-ink) 270px)}
}

/* Ruimte rond de SkyShowtime-banner boven deze sectie: zelfde maten als de Viaplay-banner (24px erboven, 28px eronder). */
.home-main > #music-tv:has(+ .ad-slot){padding-bottom:20px}
.home-main > .ad-slot:has(+ .hz){margin:16px 0 0}
.home-main > .ad-slot + .hz{margin-top:28px}