/* Video — screening room. Builds on editorial.css. */

.vdo-head { padding-top: clamp(7.5rem, 11vw, 10rem); }
.vdo-head__title { max-width: 12ch; }
.vdo-head__title .ed-accent { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.02em; }
.vdo-head__sub { margin-top: 1.4rem; max-width: 36rem; }

/* Featured film */
.vdo-feature {
  all: unset;
  display: block;
  margin-top: clamp(2.6rem, 5vw, 4.5rem);
  cursor: pointer;
  width: 100%;
}
.vdo-feature__frame,
.vdo-film__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #1a1a1a;
}
.vdo-feature__frame { aspect-ratio: 21 / 9; }
.vdo-feature__frame img,
.vdo-feature__frame video,
.vdo-film__frame img,
.vdo-film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vdo-feature__frame video,
.vdo-film__frame video { opacity: 0; transition: opacity 0.5s ease; }
.is-previewing video { opacity: 1; }
.vdo-feature__frame img { transition: transform 1.4s var(--ed-ease); }
.vdo-feature:hover .vdo-feature__frame img { transform: scale(1.03); }
.vdo-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(64px, 7vw, 96px);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.5s var(--ed-ease), color 0.3s ease;
  z-index: 2;
}
.vdo-feature:hover .vdo-play { transform: translate(-50%, -50%) scale(1.08); color: var(--ed-gold-bright); }
.vdo-feature__info { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 1.4rem; padding-top: 1.2rem; border-bottom: 1px solid var(--ed-rule); padding-bottom: 1.2rem; }
.vdo-feature__info .ed-eyebrow { margin: 0; color: var(--ed-gold-bright); }
.vdo-feature__title { font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em; }
.vdo-feature__meta { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--ed-copy); }

/* Films */
.vdo-section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.vdo-films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem) clamp(1rem, 1.6vw, 1.4rem); }
.vdo-films .vdo-film:nth-child(1), .vdo-films .vdo-film:nth-child(5) { grid-column: span 2; }
.vdo-film { all: unset; display: grid; gap: 0.6rem; cursor: pointer; color: #f4f1ea; }
.vdo-film__frame { aspect-ratio: 4 / 5; }
.vdo-films .vdo-film:nth-child(1) .vdo-film__frame,
.vdo-films .vdo-film:nth-child(5) .vdo-film__frame { aspect-ratio: 8 / 5; }
.vdo-film__frame img { transition: transform 1.2s var(--ed-ease), filter 0.5s ease; filter: saturate(0.85); }
.vdo-film:hover .vdo-film__frame img { transform: scale(1.04); filter: none; }
.vdo-film__num { position: absolute; left: 0.9rem; top: 0.8rem; z-index: 2; font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: rgba(255, 255, 255, 0.85); }
.vdo-film .ed-eyebrow { margin: 0.4rem 0 0; font-size: 0.64rem; }
.vdo-film__title { font-size: clamp(1.05rem, 1.3vw, 1.3rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.vdo-film:focus-visible, .vdo-feature:focus-visible, .vdo-card:focus-visible { outline: 2px solid var(--ed-gold-bright); outline-offset: 4px; }

/* Archive */
.vdo-archive__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.vdo-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vdo-filter {
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--ed-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ed-ink);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.vdo-filter span { margin-left: 0.4em; color: var(--ed-soft); }
.vdo-filter:hover { border-color: var(--ed-ink); }
.vdo-filter.is-active { background: var(--ed-ink); color: var(--ed-paper); border-color: var(--ed-ink); }
.vdo-filter.is-active span { color: var(--ed-gold-bright); }

.vdo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(1.6rem, 2.4vw, 2.4rem) clamp(1rem, 1.6vw, 1.6rem); }
.vdo-card { display: grid; gap: 0.5rem; align-content: start; color: inherit; text-decoration: none; }
.vdo-card[hidden] { display: none; }
.vdo-card__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #ddd6ca; }
.vdo-card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ed-ease); }
.vdo-card:hover .vdo-card__frame img { transform: scale(1.05); }
.vdo-card__play {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.72);
  color: #fff;
  font-size: 0.8rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.vdo-card:hover .vdo-card__play { background: var(--ed-gold-bright); color: #111; }
.vdo-card__meta { margin-top: 0.4rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ed-gold); }
.vdo-card__title { font-size: 1.02rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }

.vdo-channel { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--ed-rule); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.4rem; }
.vdo-channel .ed-text { margin: 0; }

@media (max-width: 900px) {
  .vdo-feature__frame { aspect-ratio: 4 / 3; }
  .vdo-feature__info { grid-template-columns: 1fr; gap: 0.4rem; }
  .vdo-films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vdo-films .vdo-film:nth-child(1), .vdo-films .vdo-film:nth-child(5) { grid-column: span 2; }
}