/* Movie detail (spec §7, order per §6a round 2): backdrop with trailer
   facade → overlapping poster → head (title + meta + synopsis + credits,
   no "Synopsis" heading) → SHOWTIMES → rotation ad → back link. */
.mv-hero{position:relative;height:240px;background:#000}
.mv-hero .bg{position:absolute;inset:0;overflow:hidden}
.mv-hero .bg img{width:100%;height:100%;object-fit:cover}
.mv-hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.6))}
.mv-hero--plain .bg{background:radial-gradient(120% 140% at 70% 0%,#31435f 0%,#1c2740 50%,#0b101c 100%)}

/* Trailer facade: a plain link to YouTube until main.js swaps in the
   iframe on tap (spec §7f) — no iframe weight on page load. */
.trailer-facade{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,.85);text-decoration:none}
.trailer-facade:hover{color:#fff;text-decoration:none}
.trailer-facade .play{width:64px;height:64px;border-radius:50%;background:var(--red);
  box-shadow:0 6px 18px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.trailer-facade .play::before{content:"";width:0;height:0;border-style:solid;
  border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.trailer-facade .cap{font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.mv-hero iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.mv-head .poster{width:104px;margin-top:-58px;position:relative;z-index:2;
  outline:3px solid #fff}
.mv-head .poster img{aspect-ratio:2/3;object-fit:cover;width:100%}
.mv-head h1{font-size:38px;line-height:.95;margin-top:14px}
.mv-head .meta{display:flex;align-items:center;gap:10px;margin-top:8px;
  font-size:13px;color:var(--muted)}

.mv-head .synopsis{font-size:14px;line-height:1.65;color:var(--body);margin:22px 0 0;max-width:640px}
.mv-credits{display:flex;flex-direction:column;gap:14px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.mv-credits h3{font-family:var(--font-body);font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mv-credits p{font-weight:600;font-size:13px;margin:4px 0 0}

.mv-times{padding-top:22px}
.mv-times .day-row{padding:16px 0;border-bottom:1px solid var(--line)}
.mv-times .day-row:first-of-type{margin-top:8px}
.mv-times .day{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.mv-times .pills{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:10px}
.mv-times .empty-state{margin-top:12px}
.mv-back{padding:18px 0 24px}
.mv-back a{font-weight:600;font-size:14px}

@media (min-width:720px){
  .mv-hero{height:400px}
  .trailer-facade .play{width:84px;height:84px}
  .trailer-facade .play::before{border-width:14px 0 14px 23px;margin-left:5px}
  .trailer-facade .cap{font-size:11px;letter-spacing:.16em}
  .mv-head{display:flex;gap:36px;align-items:flex-start}
  .mv-head .poster{width:220px;flex:none;margin-top:-130px;outline-width:4px}
  .mv-head .txt{padding-top:26px;flex:1;min-width:0}
  .mv-head h1{font-size:64px;margin-top:0}
  .mv-head .meta{margin-top:12px;font-size:15px}
  .mv-head .synopsis{font-size:16px;line-height:1.7;margin-top:18px}
  .mv-credits{flex-direction:row;gap:56px;margin-top:22px;padding-top:18px}
  .mv-credits h3{font-size:11px}
  .mv-credits p{font-size:15px;margin-top:6px}
  .mv-times{padding-top:36px}
  .mv-times .day-row{display:grid;grid-template-columns:220px 1fr;gap:24px;
    align-items:center;padding:22px 0}
  .mv-times .day{font-size:15px}
  .mv-times .pills{margin-top:0;gap:20px}
  /* Price tag right-aligns on desktop (canvas: its own right column);
     on mobile it stays inline after the pills, per the mobile artboard. */
  .mv-times .pills .stub + .price-tag{margin-left:auto}
  .mv-back{padding:28px 0 36px}
  .mv-back a{font-size:15px}
}