/* Films: one featured player and poster cards (work-orh-site/films.js). Brand: navy, copper, Grogan Display. */
.fp { max-width: 1680px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); }
.fp__stage { position: relative; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.fp__stage video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border-radius: 0; transition: opacity .26s var(--ease); }
.fp__stage.is-swapping video { opacity: 0; }
.fp__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 16px 0 0; }
.fp__now { font: 600 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--copper); }
.fp__title { font: 400 clamp(22px, 2.4vw, 32px)/1.1 var(--display); color: #fff; }
.fp__len { font: 500 13px/1 var(--sans); color: rgba(255, 255, 255, .55); letter-spacing: .06em; }
.fp__tools { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.fp__next { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: rgba(255, 255, 255, .7); cursor: pointer; user-select: none; }
.fp__next input { appearance: none; width: 34px; height: 20px; border-radius: 20px; background: rgba(255, 255, 255, .22); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.fp__next input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.fp__next input:checked { background: var(--copper); }
.fp__next input:checked::after { transform: translateX(14px); }
.fp__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: clamp(22px, 2.6vw, 34px) 0 0; }
.fp__card { display: block; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; font: inherit; }
.fp__card[hidden] { display: none; }
.fp__poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px; background: #111; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.fp__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.fp__poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 19, 34, 0) 45%, rgba(10, 19, 34, .55)); }
.fp__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .3s var(--ease), background .3s; }
.fp__play svg { width: 20px; height: 20px; margin-left: 3px; fill: var(--navy); }
.fp__name { display: block; margin: 12px 0 2px; font: 400 clamp(18px, 1.5vw, 22px)/1.2 var(--display); }
.fp__dur { font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--copper); }
.fp__card:focus-visible { outline: none; }
.fp__card:focus-visible .fp__poster { outline: 3px solid var(--copper); outline-offset: 3px; }
@media (hover: hover) {
  .fp__card:hover .fp__poster { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
  .fp__card:hover .fp__poster img { transform: scale(1.06); }
  .fp__card:hover .fp__play { transform: scale(1.08); background: #fff; }
}
@media (max-width: 1100px) { .fp__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .fp__tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .fp__cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 clamp(16px, 3vw, 48px); margin-left: calc(-1 * clamp(16px, 3vw, 48px)); margin-right: calc(-1 * clamp(16px, 3vw, 48px)); padding: 0 clamp(16px, 3vw, 48px) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fp__cards::-webkit-scrollbar { display: none; }
  .fp__card { flex: 0 0 68%; scroll-snap-align: start; }
  .fp__play { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
}
@media (prefers-reduced-motion: reduce) { .fp__stage video, .fp__poster, .fp__poster img, .fp__play { transition: none; } }
/* Matt, 2026-10-22: film titles look cleaner in lowercase (the card titles and the "Now playing" title only). */
.fp__title, .fp__name { text-transform: lowercase; }