/* ============================================================
   film.css — filmography list (Film / Music Videos) and film
   detail Template B (BRIEF §5). Values from reference
   film.dc.html / film-detail.dc.html, canvas px × --u.
   ============================================================ */

/* ---- filmography rows ---- */
.films {
  position: relative;
  z-index: 2;
  max-width: calc(1280 * var(--u));
  margin: calc(80 * var(--u)) auto 0;
  padding: 0 calc(64 * var(--u));
}

.film-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: calc(64 * var(--u));
  align-items: center;
  transition: opacity 0.5s ease;
}

.film-row--flip {
  grid-template-columns: 5fr 7fr;
}

.film-row + .film-row {
  margin-top: calc(110 * var(--u));
}

.films:has(.film-row:hover) .film-row:not(:hover) {
  opacity: 0.55;
}

.film-row__still {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: block;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
  background: #161a20;
}

.film-row--flip .film-row__still {
  grid-column: 2;
}

.film-row__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-filter);
  transition: transform 0.7s var(--ease-slide), opacity 0.6s ease;
}

.film-row__img--raw {
  filter: none;
  opacity: 0;
  pointer-events: none;
}

.film-row:hover .film-row__img,
.film-row:focus-within .film-row__img {
  transform: scale(1.025);
}

.film-row:hover .film-row__img--raw,
.film-row:focus-within .film-row__img--raw {
  opacity: 1;
}

.film-row__text {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

.film-row--flip .film-row__text {
  grid-column: 1;
  align-items: flex-end;
  text-align: right;
}

/* serif italic = film titles (type roles, BRIEF §4) */
.film-row__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(72 * var(--u));
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-wrap: balance;
}

.film-row__meta {
  font-family: var(--font-mono);
  font-size: max(calc(10 * var(--u)), 9px);
  letter-spacing: var(--meta-tracking);
  text-transform: uppercase;
  color: var(--secondary);
}

/* ============================================================
   Film detail — Template B
   ============================================================ */

/* header-over-poster behavior comes from .has-hero-header (base.css) */

/* ---- full-bleed poster ---- */
.poster {
  position: relative;
  z-index: 1;
  height: 78vh;
  min-height: 540px;
  overflow: hidden;
  background: #161a20;
}

.poster__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-filter);
}

.poster__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 14, 19, 0.66) 0%,
    rgba(11, 14, 19, 0.14) 32%,
    rgba(11, 14, 19, 0.08) 55%,
    rgba(11, 14, 19, 0.82) 100%
  );
}

.poster__titleblock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(58 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(26 * var(--u));
  text-align: center;
  padding: 0 calc(40 * var(--u));
}

/* serif italic = display lines + film titles */
.poster__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(118 * var(--u));
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--paper);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(11, 14, 19, 0.55);
}

.poster__meta {
  font-family: var(--font-mono);
  font-size: max(calc(10.5 * var(--u)), 9px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tagline-color);
  line-height: 1;
}

/* ---- inline player ---- */
.film-player {
  position: relative;
  z-index: 2;
  max-width: calc(1080 * var(--u));
  margin: calc(76 * var(--u)) auto 0;
  padding: 0 calc(64 * var(--u));
}

.film-player__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #161a20;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.film-player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.film-player__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-filter);
  transform: scale(1);
  transition: transform 0.9s var(--ease-slide), opacity 0.6s ease;
}

.film-player__img--raw {
  filter: none;
  opacity: 0;
  pointer-events: none;
}

.film-player__frame:hover .film-player__img,
.film-player__frame:focus-visible .film-player__img {
  transform: scale(1.02);
}

.film-player__frame:hover .film-player__img--raw,
.film-player__frame:focus-visible .film-player__img--raw {
  opacity: 1;
}

.film-player__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.film-player__frame:hover .film-player__play {
  opacity: 1;
}

.film-player__play::before {
  content: "";
  width: 66px;
  height: 66px;
  border: 1px solid rgba(233, 233, 228, 0.55);
  border-radius: 50%;
}

.film-player__play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 13px solid rgba(233, 233, 228, 0.9);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 4px;
}

.film-player__note {
  position: absolute;
  left: calc(22 * var(--u));
  bottom: calc(18 * var(--u));
  font-family: var(--font-mono);
  font-size: max(calc(9.5 * var(--u)), 8.5px);
  letter-spacing: var(--meta-tracking);
  color: rgba(233, 233, 228, 0.75);
  pointer-events: none;
}

/* ---- synopsis & laurels ---- */
.synopsis {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--u));
  margin: calc(72 * var(--u)) auto 0;
  padding: 0 calc(64 * var(--u));
  max-width: calc(1080 * var(--u));
  text-align: center;
}

.synopsis__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(26 * var(--u));
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--tagline-color);
  max-width: 44ch;
  text-wrap: balance;
}

.synopsis__laurels {
  font-family: var(--font-mono);
  font-size: max(calc(9.5 * var(--u)), 8.5px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--numerals);
  line-height: 2;
}

/* prev / next rail (.film-nav) lives in base.css — shared with case pages */