/* The moving-image catalogue is intentionally isolated from shared page rules. */
.catalog-films {
  color: var(--page-cream);
  background: var(--page-forest);
}

.catalog-films-intro {
  margin-bottom: clamp(48px, 7vw, 88px);
}

.catalog-films-intro h2 {
  max-width: 850px;
  line-height: 1.06;
  text-wrap: balance;
}

.catalog-films-intro p {
  max-width: 320px;
  color: var(--page-cream);
}

.catalog-films-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(18px, 3.2vw, 58px);
  width: 100%;
}

.catalog-films-track:focus-visible {
  outline: 1px solid var(--page-cream);
  outline-offset: 8px;
}

.catalog-film-card {
  min-width: 0;
  color: var(--page-cream);
}

.catalog-film-card:nth-child(2) {
  margin-top: clamp(22px, 3.8vw, 64px);
}

.catalog-film-card:nth-child(3) {
  margin-top: clamp(10px, 1.8vw, 30px);
}

.catalog-film-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--page-forest-deep);
  border: 1px solid var(--page-light-line);
}

.catalog-film-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--page-forest-deep);
}

.catalog-film-media:focus-within {
  border-color: var(--page-cream);
}

.catalog-film-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding-top: 18px;
}

.catalog-film-index {
  padding-top: 5px;
  color: var(--page-sand);
  font: 500 9px/1.4 var(--page-sans);
  letter-spacing: .16em;
}

.catalog-film-caption h3 {
  margin: 0;
  color: var(--page-cream);
  font: 400 clamp(28px, 3.2vw, 48px)/1.15 var(--page-serif);
  letter-spacing: -.035em;
}

.catalog-film-caption p {
  max-width: 260px;
  margin: 8px 0 0;
  color: var(--page-sand);
  font: 400 11px/1.7 var(--page-sans);
}

@media (max-width: 700px) {
  .catalog-films-intro {
    margin-bottom: 42px;
  }

  .catalog-films-track {
    display: flex;
    gap: 16px;
    width: auto;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    padding-bottom: 8px;
    overflow-x: auto;
    scroll-padding-inline: var(--page-gutter);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--page-cream) transparent;
    scrollbar-width: thin;
  }

  .catalog-film-card,
  .catalog-film-card:nth-child(2),
  .catalog-film-card:nth-child(3) {
    flex: 0 0 min(78vw, 310px);
    margin-top: 0;
    scroll-snap-align: start;
  }

  .catalog-film-caption h3 {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-films-track {
    scroll-behavior: auto;
  }
}