/* Film-specific content uses the layout and theme of the approved series panorama. */
.fp-film .fp-shell { container: film-card / inline-size; }
.fp-film[data-variant=panorama] .fp-hero {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  grid-template-areas: "heading art" "intro art" "actions art";
  align-items: start;
  align-content: center;
  justify-items: stretch;
  gap: 12px 0;
  min-height: 0;
  padding: 0;
  background: var(--paper);
  color: var(--type);
}
.fp-film[data-variant=panorama] .fp-hero-art {
  grid-area: art;
  position: relative;
  inset: auto;
  z-index: auto;
  align-self: center;
  border-radius: 10px;
  overflow: hidden;
}
.fp-film[data-variant=panorama] .fp-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
}
.fp-film[data-variant=panorama] .fp-hero-copy {
  grid-area: heading;
  align-self: end;
  padding: 20px 18px 0;
}
.fp-film .fp-hero .fp-intro {
  grid-area: intro;
  max-width: none;
  padding-inline: 18px;
  margin: 0 !important;
}
.fp-film .fp-hero .fp-actions { grid-area: actions; align-self: start; padding: 0 18px 20px; }
.fp-film[data-variant=panorama] .fp-original { color: var(--sub); }
@container film-card (width > 1120px) {
  .fp-film[data-variant=panorama] .fp-hero-art { align-self: stretch; border-radius: 0; }
  .fp-film[data-variant=panorama] .fp-hero-art img {
    position: absolute;
    inset: 0;
    margin-block: auto;
    /* Limit enlargement if a larger text size makes the heading unusually tall. */
    height: min(100%, calc(43cqw - 15px));
    object-fit: cover;
    object-position: 42% top;
    mask-image: linear-gradient(to right, transparent, black 4%);
  }
}
@container film-card (min-width: 560px) and (max-width: 1120px) {
  .fp-film[data-variant=panorama] .fp-hero {
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
    grid-template-areas: "heading art" "intro intro" "actions actions";
    padding: 14px;
    gap: 14px 18px;
  }
  .fp-film[data-variant=panorama] .fp-hero-copy { padding: 0; align-self: center; }
  .fp-film .fp-hero .fp-intro, .fp-film .fp-hero .fp-actions { padding: 0; }
  .fp-film .fp-hero .fp-actions > * { flex: 0 1 auto; }
}
@container film-card (max-width: 559.99px) {
  .fp-film[data-variant=panorama] .fp-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "art" "heading" "intro" "actions";
    padding: 10px;
    gap: 12px;
  }
  .fp-film[data-variant=panorama] .fp-hero-art img { aspect-ratio: 1.95; object-fit: cover; object-position: center top; }
  .fp-film[data-variant=panorama] .fp-hero-copy, .fp-film .fp-hero .fp-intro, .fp-film .fp-hero .fp-actions { padding: 0; }
}
.fp-film .fp-title-word { white-space: nowrap; }
.fp-film .fp-hero h1 { font-size: clamp(32px,3.3vw,49px); text-wrap: balance; }
.fp-film .fp-actions > * { min-height: 44px; padding-inline: 13px; }
.fp-film .fp-poster-link { display: inline-block; margin-top: 10px; font-size: 13px; }
.fp-film #fp-finance, .fp-film #k4y-sec-source { margin-top: 14px; }
.fp-film #fp-finance dl, .fp-film #kc-dates dl {
  display: grid; grid-template-columns: minmax(95px,auto) minmax(0,1fr); gap: 7px 16px; font-size: 14px;
}
.fp-film #fp-finance dt, .fp-film #kc-dates dt { color: var(--sub); }
.fp-film .kc-section-heading, .fp-film .fp-gallery-heading {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
}
.fp-film #k4y-sec-source .k4y-source { grid-template-columns: minmax(100px,150px) minmax(0,1fr); }
.fp-film #fp-film-frames {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; overflow: visible; padding: 0;
}
.fp-film #fp-film-frames .kc-frame { min-width: 0; }
.fp-film #fp-film-frames .kc-frame img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.fp-film .fp-gallery-toggle {
  margin-bottom: 12px; padding: 6px 10px; border: 1px solid var(--edge); border-radius: 7px;
  background: var(--wash); color: var(--purple); font-weight: 650; font-size: 14px;
}
.fp-film .fp-making-stories { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 32px; }
.fp-film .fp-making-stories p { margin-bottom: 8px; line-height: 1.55; }
.fp-film .fp-making-stories h3 a { color:var(--type); font:inherit; text-decoration:underline; text-underline-offset:3px; }
.fp-film .fp-making-stories small, .fp-film .fp-score-credit { font-size: 13px; color:var(--sub); }
.fp-film .fp-video-poster { aspect-ratio: 16/9; }
.fp-film .fp-playlist .fp-clip-symbol {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16/9; background: var(--tint); color: var(--purple); border-radius: 6px;
}
.fp-film .fp-songs { margin: 12px 0; padding-left: 2.3em; columns: 2; column-gap: 30px; }
.fp-film .fp-songs li { break-inside: avoid; padding: 4px 0; }
.fp-film .fp-songs button {
  width: 100%; text-align: left; color: var(--type); border: 0; border-radius: 6px; background: transparent; padding: 5px 8px;
}
.fp-film .fp-songs button:is([aria-pressed=true],:hover) { color: var(--purple); background: var(--wash); }
.fp-film .fp-songs small { display: block; color: var(--sub); }
.fp-film .fp-score-credit { color: var(--sub); margin-top: 10px; }
.fp-film #k4y-sec-music details { margin-top: 12px; }
@media (max-width: 760px) {
  .fp-film .fp-hero h1 { font-size: clamp(26px,7.2vw,34px); }
  .fp-film #fp-film-frames, .fp-film .fp-making-stories { gap: 8px; }
  .fp-film #fp-film-frames { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fp-film .fp-making-stories { grid-template-columns: minmax(0,1fr); row-gap: 18px; }
  .fp-film .fp-songs { columns: 1; }
  .fp-film #k4y-sec-source .k4y-source { grid-template-columns: minmax(0,1fr); }
}