/* Hero artwork sourced only from Plex, on landing, home and requests pages. */
.plex-spotlight{position:relative;isolation:isolate;min-height:340px}
.plex-spotlight-slot{position:absolute;display:block;overflow:hidden;width:36%;height:76%;top:8%;border-radius:18px;background:linear-gradient(150deg,#33202e,#11151e);border:1px solid rgba(255,255,255,.35);box-shadow:0 22px 54px rgba(0,0,0,.62);transition:transform .55s ease,box-shadow .25s ease;pointer-events:auto;z-index:2;text-decoration:none!important}
.plex-spotlight-slot:hover,.plex-spotlight-slot:focus-visible{box-shadow:0 28px 68px rgba(0,0,0,.78);outline:2px solid #f5ad92;outline-offset:3px}
.plex-spotlight-slot img{width:100%;height:100%;display:block;object-fit:cover}
.plex-spotlight-slot-0{left:2%;top:11%;transform:rotate(-11deg);z-index:1}
.plex-spotlight-slot-1{left:33%;top:3%;transform:rotate(3deg);z-index:3}
.plex-spotlight-slot-2{right:0;left:auto;top:14%;transform:rotate(12deg);z-index:2}
.plex-spotlight-slot-0:hover{transform:rotate(-7deg) translateY(-7px)}
.plex-spotlight-slot-1:hover{transform:rotate(0deg) translateY(-7px)}
.plex-spotlight-slot-2:hover{transform:rotate(7deg) translateY(-7px)}
.plex-spotlight-tag{position:absolute;top:12px;left:12px;background:rgba(15,15,26,.89);border:1px solid rgba(255,255,255,.26);color:#fff!important;border-radius:999px;padding:4px 8px;font:800 11px/1.3 system-ui,sans-serif;letter-spacing:.08em}
.plex-spotlight-wait,.plex-spotlight-note{position:absolute;top:32%;left:12%;right:12%;padding:20px;color:#ddd2df;text-align:center;background:rgba(23,18,34,.72);border:1px solid rgba(255,255,255,.16);border-radius:16px;z-index:2;font:600 1rem/1.55 system-ui,sans-serif}
.plex-spotlight-note a{color:#ffbc97!important;text-decoration:underline!important}
.plex-spotlight-broken{display:grid;place-items:center;text-align:center;color:#edcfdb;padding:18px;font:700 .85rem system-ui}
/* Home: override the old flex placeholders and keep the original caption. */
.lc-hero-posters.plex-spotlight{display:block;min-height:390px;width:100%;overflow:visible}
.lc-hero-posters.plex-spotlight .plex-spotlight-slot{width:36%;height:335px}
.lc-hero-gallery .lc-hero-overlay{pointer-events:none}
/* Landing page: real covers where previously there were decorative fake cards. */
.lc-landing-art.plex-spotlight{pointer-events:auto;z-index:2;min-height:0}
.lc-landing-art.plex-spotlight .plex-spotlight-slot{top:14%;height:68%;width:35%}
.lc-landing-art .plex-spotlight-caption{position:absolute;left:9%;right:8%;bottom:6%;z-index:5;background:rgba(15,16,27,.91);border:1px solid #ffffff25;border-radius:14px;padding:12px 18px;box-shadow:0 18px 35px #0009;pointer-events:none;color:#fff}
.lc-landing-art .plex-spotlight-caption strong,.lc-landing-art .plex-spotlight-caption small{display:block}
.lc-landing-art .plex-spotlight-caption small{color:#bdb5c5;font-size:.79rem}
/* Requests: replace empty gradients with the actual latest posters. */
.cine-visual.plex-spotlight{height:455px;width:100%;max-width:none}
.cine-visual.plex-spotlight .plex-spotlight-slot{height:71%;width:36%;top:9%}
.cine-visual.plex-spotlight .cine-visual-overlay{z-index:5;pointer-events:none}
@media(max-width:1050px){.lc-landing-art.plex-spotlight{opacity:.90}}
@media(max-width:760px){.plex-spotlight{min-height:300px}.lc-hero-posters.plex-spotlight{min-height:300px}.lc-hero-posters.plex-spotlight .plex-spotlight-slot{height:248px}.cine-visual.plex-spotlight{height:325px}.cine-visual.plex-spotlight .plex-spotlight-slot{height:250px}.lc-landing-art.plex-spotlight .plex-spotlight-slot{height:72%}.lc-landing-art .plex-spotlight-caption{bottom:0}}
@media(max-width:470px){.lc-hero-posters.plex-spotlight{min-height:270px}.lc-hero-posters.plex-spotlight .plex-spotlight-slot{height:225px}.cine-visual.plex-spotlight{height:290px}.cine-visual.plex-spotlight .plex-spotlight-slot{height:205px}.plex-spotlight-tag{font-size:9px;padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.plex-spotlight-slot{transition:none}}
/* Landing page composition: featured Plex artwork beside the introductory copy,
   instead of drifting beneath the carousel in the implicit grid rows. */
.lc-landing:has(> .plex-spotlight-index){
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  grid-template-rows:auto auto auto auto;
  column-gap:24px;
  row-gap:20px;
  align-content:start;
}
.lc-landing:has(> .plex-spotlight-index) > .lc-landing-top{grid-column:1/-1;grid-row:1}
.lc-landing:has(> .plex-spotlight-index) > .lc-landing-main{
  grid-column:1;grid-row:2;align-self:center;
  width:100%;max-width:none;padding:34px 0 42px;margin:0;
}
.lc-landing:has(> .plex-spotlight-index) > .plex-spotlight-index{
  grid-column:2;grid-row:2;position:relative;inset:auto;
  transform:none;align-self:center;z-index:3;
  height:480px;min-height:400px;width:100%;max-width:none;
}
.lc-landing:has(> .plex-spotlight-index) > .lpc{
  grid-column:1/-1;grid-row:3;width:100%;margin:8px auto 16px;
}
.lc-landing:has(> .plex-spotlight-index) > .lc-landing-bottom{grid-column:1/-1;grid-row:4}
.lc-landing:has(> .plex-spotlight-index) .lc-landing-main h1{
  font-size:clamp(3.5rem,7.3vw,7.5rem);
}
@media(max-width:950px){
  .lc-landing:has(> .plex-spotlight-index){grid-template-columns:1fr;grid-template-rows:repeat(5,auto);gap:8px}
  .lc-landing:has(> .plex-spotlight-index) > .lc-landing-top{grid-column:1;grid-row:1}
  .lc-landing:has(> .plex-spotlight-index) > .lc-landing-main{grid-column:1;grid-row:2;padding:24px 0 6px}
  .lc-landing:has(> .plex-spotlight-index) > .plex-spotlight-index{grid-column:1;grid-row:3;height:350px;min-height:300px;max-width:570px;margin:0 auto}
  .lc-landing:has(> .plex-spotlight-index) > .lpc{grid-column:1;grid-row:4}
  .lc-landing:has(> .plex-spotlight-index) > .lc-landing-bottom{grid-column:1;grid-row:5}
  .lc-landing:has(> .plex-spotlight-index) .lc-landing-main h1{font-size:clamp(3.4rem,11vw,6rem)}
}