/* ============================================
   Films page — page-specific styles
   All selectors prefixed `.films-page-*` to avoid
   collision with the shared `.films-section` /
   `.films-grid-row*` / `.film-card` classes used
   on the home page.
   Reference width: 1920px. All units in vw.
   ============================================ */

.films-page-section {
  padding-top: 1.5vw;
}

.films-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap-videos);
  row-gap: 1.7vw;
}

.films-page-tile {
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.films-page-tile-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.films-page-tile-video video,
.films-page-tile-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.films-page-tile-title {
  font-size: 1.4vw;
  font-weight: 800;
  letter-spacing: 0.035vw;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 0.65vw;
}

.films-page-tile-subtitle {
  font-size: 0.85vw;
  font-weight: 500;
  letter-spacing: 0.05vw;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 0.25vw;
  color: #d0d0d0;
}

/* Placeholder tile — same shell as a film tile, empty dark media area,
   not interactive (no hover/click affordance). Used for unannounced
   future films so the grid stays visually balanced at 3 × 2. */
.films-page-tile-is-placeholder {
  cursor: default;
}

.films-page-tile-placeholder {
  width: 100%;
  height: 100%;
  background: #111;
}

/* Anamorphic tiles (2.67:1 native aspect — LONDON, BTCaWIP, etc.)
   render their video at native aspect inside the standard 16:9 tile
   shell. The shorter video is vertically centered so its Y-axis
   midline aligns with any 16:9 sibling's midline in the same row.
   Small letterbox bars appear above and below. Activated by the
   data flag `anamorphic: true` on a tile entry. */
.films-page-tile-is-anamorphic .films-page-tile-video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.films-page-tile-is-anamorphic .films-page-tile-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 2.67 / 1;
  object-fit: contain;
}