/* Hero v2: grid layout so long titles and descriptions grow the hero instead of overlapping the counter,
   plus richer preview cards. Loaded after home-cinematic.css; the hero markup, data and slide logic are unchanged. */
.home-cinematic .hero.hero-cinematic{--hero-pad-x:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,372px);grid-template-rows:auto minmax(0,1fr) auto;column-gap:clamp(24px,3vw,48px);height:auto;min-height:clamp(560px,66vh,700px);padding:30px calc(var(--hero-pad-x) - 8px) 26px var(--hero-pad-x);align-items:stretch}
.home-cinematic .hero.hero-cinematic>.hero-art,.home-cinematic .hero.hero-cinematic>.hero-shade{position:absolute}
.home-cinematic .hero.hero-cinematic>.spotlight-topline{position:relative;left:auto;right:auto;top:auto;grid-column:1/-1;grid-row:1;min-height:24px}
.home-cinematic .hero.hero-cinematic>.spotlight-topline>span{font-size:11px;letter-spacing:2.4px}
.home-cinematic .hero.hero-cinematic>.spotlight-topline>a{font-size:12px;padding:6px 12px;border:1px solid #ffffff1c;border-radius:999px;background:#0a0d1266;backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.home-cinematic .hero.hero-cinematic>.spotlight-topline>a:hover{background:#ff725b24;border-color:#ff725b66}
.home-cinematic .hero.hero-cinematic .hero-content{grid-column:1;grid-row:2;align-self:center;position:relative!important;inset:auto!important;width:auto!important;max-width:680px!important;margin:0!important;padding:28px 0 22px!important;min-width:0}
.home-cinematic .hero.hero-cinematic .hero-original{max-width:100%;margin:0 0 14px!important;font-size:11px!important;letter-spacing:2px;opacity:.85}
.home-cinematic .hero.hero-cinematic .hero-identity{margin:0 0 16px}
.home-cinematic .hero.hero-cinematic .hero-identity #heroTitle{font-size:clamp(34px,4.1vw,62px);letter-spacing:-1.6px;line-height:1.04;max-width:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;text-wrap:balance}
.home-cinematic .hero.hero-cinematic .hero-source-rating{margin:14px 0 16px}
.home-cinematic .hero.hero-cinematic .hero-meta{max-width:none;margin:0;font-size:13px;gap:10px;align-items:center}
.home-cinematic .hero.hero-cinematic .hero-meta span:first-child{font-size:12px;padding:4px 10px;border-radius:7px;background:#ffffff0d}
.home-cinematic .hero.hero-cinematic .hero-description{max-width:min(560px,100%);margin:18px 0 24px;font-size:14px;line-height:1.7;color:#d0d3dc;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home-cinematic .hero.hero-cinematic .hero-buttons{max-width:none;gap:10px}
.home-cinematic .hero.hero-cinematic .hero-buttons .button{min-height:48px;font-size:13px;padding:0 24px;border-radius:10px}
.home-cinematic .hero.hero-cinematic #heroTrailer{font-size:13px;padding:0 18px}
.home-cinematic .hero.hero-cinematic .hero-source{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 12px;border:1px solid #ffffff17;border-radius:999px;background:#0a0d1266;backdrop-filter:blur(8px);font-size:12px;letter-spacing:0;color:#c6c9d3}
.home-cinematic .hero.hero-cinematic .hero-bottom{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;grid-column:1/-1;grid-row:3;display:flex;align-items:center;justify-content:space-between!important;gap:24px;padding-top:14px;border-top:1px solid #ffffff12}
.home-cinematic .hero.hero-cinematic .spotlight-count>span:first-child{font-size:22px}
.home-cinematic .hero.hero-cinematic .spotlight-count{font-size:12px}
.home-cinematic .hero.hero-cinematic .hero-pagination{margin-left:auto}
.home-cinematic .hero.hero-cinematic .hero-pagination>#heroNumber,.home-cinematic .hero.hero-cinematic .hero-pagination>.muted{display:none}

/* Preview rail */
.home-cinematic .hero.hero-cinematic .spotlight-previews{position:relative;inset:auto;right:auto;top:auto;bottom:auto;width:auto;grid-column:2;grid-row:2;align-self:center;display:flex;flex-direction:column;gap:12px;z-index:3}
.home-cinematic .hero.hero-cinematic .spotlight-rail-head{display:flex;justify-content:space-between;align-items:center;padding:0 4px 2px;font-size:11px;letter-spacing:1.6px;font-weight:650;color:#e6e9f0;text-shadow:0 1px 10px #000c,0 0 2px #0008;text-transform:uppercase}
.home-cinematic .hero.hero-cinematic .spotlight-rail-head b{color:#f1f2f6;font-weight:700;letter-spacing:.6px}
.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:stretch;gap:0;aspect-ratio:auto;max-height:none;min-height:132px;opacity:.82;border-radius:14px;border:1px solid #ffffff1f;background:#10141bd9;backdrop-filter:blur(14px);box-shadow:0 10px 30px #0005;translate:none;transition:opacity .25s,transform .3s var(--motion-ease),border-color .25s,background .25s,box-shadow .25s}
.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview:hover{opacity:1;transform:translateX(-4px);border-color:#ffffff66;background:#151a23f2}
.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview.active{grid-template-columns:118px minmax(0,1fr);opacity:1;min-height:176px;border-color:#ff725bb0;background:#161a22f5;box-shadow:0 0 0 3px #ff725b1a,0 16px 40px #0007}
.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview>img{position:relative;inset:auto;width:100%;height:100%;min-height:132px;object-fit:cover;object-position:top center}
.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview.active>img{min-height:176px}
.hero-preview-body{display:flex;flex-direction:column;gap:7px;padding:14px 38px 16px 14px;min-width:0;pointer-events:none}
.hero-preview-kicker{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1.4px;font-weight:700;color:#98a0b0;text-transform:uppercase}
.hero-preview.active .hero-preview-kicker{color:var(--accent)}
.hero-preview-kicker .live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #ff725b99}
.hero-preview-body strong{font-size:15px;line-height:1.3;font-weight:700;color:#f5f6f9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-preview.active .hero-preview-body strong{font-size:16px}
.hero-preview-meta{font-size:12px;color:#aab0be}
.hero-preview-tags{display:flex;flex-wrap:wrap;gap:6px}
.hero-preview-tags em{font-style:normal;font-size:11px;padding:3px 9px;border-radius:999px;background:#ffffff10;color:#d4d7e0;white-space:nowrap}
.hero-preview-text{margin:0;font-size:12px;line-height:1.55;color:#aeb4c1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-preview:not(.active) .hero-preview-text{display:none}
.hero-preview-foot{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:12px;color:#c3c8d3}
.hero-preview-foot .rating-slot:empty{display:none}
.hero-preview-foot .source-rating{font-size:12px}
.hero-preview-eps{padding:3px 9px;border-radius:999px;border:1px solid #ffffff1c;font-size:11px;white-space:nowrap}
.hero-preview-arrow{position:absolute;right:12px;top:12px;width:18px;height:18px;color:#fff;opacity:.7;transition:opacity .2s,transform .2s;pointer-events:none}
.hero-preview:hover .hero-preview-arrow{opacity:1;transform:translate(2px,-2px)}
.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview>i{height:3px;border-radius:0 3px 3px 0}

/* Tablet: the rail moves below the copy as a row of cards; the hero stays one grid. */
@media(max-width:1100px){
 .home-cinematic .hero.hero-cinematic{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;min-height:0;padding:26px var(--hero-pad-x) 22px}
 .home-cinematic .hero.hero-cinematic .hero-content{grid-row:2;max-width:640px!important;padding:56px 0 18px!important}
 .home-cinematic .hero.hero-cinematic .spotlight-previews{display:grid!important;grid-column:1;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-self:stretch}
 .home-cinematic .hero.hero-cinematic .spotlight-rail-head{display:none}
 .home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview,.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview.active{grid-template-columns:75px minmax(0,1fr);min-height:112px}
 .home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview>img,.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview.active>img{min-height:112px}
 .home-cinematic .hero.hero-cinematic .hero-bottom{grid-row:4;margin-top:14px}
 .hero-preview-body{padding:10px 30px 12px 10px}
 .hero-preview-tags,.hero-preview-text,.hero-preview.active .hero-preview-text{display:none}
 .hero-preview-body strong,.hero-preview.active .hero-preview-body strong{font-size:13px}
}
@media(max-width:820px){
 .home-cinematic .hero.hero-cinematic .spotlight-previews{display:none!important}
 .home-cinematic .hero.hero-cinematic .hero-edge{top:auto;bottom:16px;width:36px;height:36px;z-index:5}
 .home-cinematic .hero.hero-cinematic .hero-edge.prev{left:auto;right:64px}
 .home-cinematic .hero.hero-cinematic .hero-edge.next{right:20px}
 .home-cinematic .hero.hero-cinematic .hero-bottom{padding-right:96px;min-height:36px}
 .home-cinematic .hero.hero-cinematic .hero-content{max-width:none!important}
 .home-cinematic .hero.hero-cinematic .hero-bottom{grid-row:3;margin-top:0}
}
@media(max-width:580px){
 .home-cinematic .hero.hero-cinematic{--hero-pad-x:20px;min-height:min(640px,calc(100svh - 150px));padding:20px 20px 18px}
 .home-cinematic .hero.hero-cinematic .hero-content{align-self:end;padding:150px 0 16px!important}
 .home-cinematic .hero.hero-cinematic .hero-identity #heroTitle{font-size:clamp(30px,9vw,40px)}
 .home-cinematic .hero.hero-cinematic .hero-description{font-size:13px;-webkit-line-clamp:3}
 .home-cinematic .hero.hero-cinematic .hero-buttons .button{min-height:46px;padding:0 18px}
 .home-cinematic .hero.hero-cinematic>.spotlight-topline>a{display:none}
}
@media(min-width:1600px){
 .home-cinematic .hero.hero-cinematic{min-height:700px}
 .home-cinematic .hero.hero-cinematic .hero-description{-webkit-line-clamp:4}
}
@media(prefers-reduced-motion:reduce){.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview,.hero-preview-arrow{transition:none!important}.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview:hover{transform:none}}

/* First paint: the cinematic layout is applied by an inline script, so the hero keeps its size when the real
   slide is rendered. Until then the stale static copy stays hidden (revealed after 6s if scripts fail). */
@media(min-width:1101px){.home-cinematic .hero.hero-cinematic{grid-template-rows:32px minmax(0,1fr) auto}}
.home-cinematic .hero.hero-cinematic>.spotlight-topline{min-height:32px}
.home-cinematic .hero.hero-cinematic .hero-bottom{min-height:56px}
@keyframes hero-reveal{to{opacity:1}}
.hero-pending .hero.hero-cinematic:not(.hero-ready) .hero-content,.hero-pending .hero.hero-cinematic:not(.hero-ready) .hero-bottom{opacity:0;animation:hero-reveal .2s 6s forwards}
.hero.hero-cinematic.hero-ready .hero-content{animation:none}

/* Hide the static catalogue block until the router has chosen the view (it used to flash under the hero). */
.hero-pending #home>.page-content,.hero-pending footer{display:none}

/* Desktop: fixed card heights make the hero the same size before and after the slide is rendered. */
@media(min-width:1101px){
 .home-cinematic .hero.hero-cinematic{min-height:680px}
 .home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview{height:140px;min-height:0;overflow:hidden}
 .home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview.active{height:200px;min-height:0}
 .home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview>img,.home-cinematic .hero.hero-cinematic .spotlight-previews .hero-preview.active>img{min-height:0;height:100%}
 .hero-preview-body{gap:6px;padding:12px 34px 12px 14px}
 .hero-preview:not(.active) .hero-preview-tags,.hero-preview.active .hero-preview-meta{display:none}
 .hero-preview-body strong{-webkit-line-clamp:2}
}
@media(min-width:1600px){.home-cinematic .hero.hero-cinematic{min-height:700px}}