/* Feature pages redesigned from TM's mockups (web-layout-*, owner 21 Oct 2026). Each page has its own generated file
   (assets/features/<page>.css, deploy/tools/web_feature_page.py); the rules every page shares are here. */

/* the film poster is a button: no button chrome, the poster fills it */
.ofp .fp-vbutton { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; color: inherit; }
.ofp .fp-vbutton:focus-visible { outline: 3px solid #BC08B0; outline-offset: 3px; }
.ofp .fp-vbutton:hover .fp-vplay { transform: scale(1.06); }
.ofp .fp-vplay { transition: transform .15s ease; }
.ofp .fp-vplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ofp a.fp-btn { text-decoration: none; }
.ofp a.fp-btn:hover { background: #9c0792; }

/* dark mode: the site's dark tones (the screenshots and photos stay as they are) */
.dark .ofp { background: var(--color-background-6); color: #E6E8EB; }
.dark .ofp p, .dark .ofp li { color: #B5BAC2; }
.dark .ofp .fp-lead, .dark .ofp h1, .dark .ofp h2, .dark .ofp h3, .dark .ofp h4, .dark .ofp b { color: #F4F5F8; }
.dark .ofp section.fp-tint, .dark .ofp .fp-vid.fp-tint { background: var(--color-background-7); }
.dark .ofp section.fp-white, .dark .ofp .fp-vid.fp-white, .dark .ofp section.fp-row:not(.fp-tint):not(.fp-soft) { background: var(--color-background-6); }
.dark .ofp section.fp-soft, .dark .ofp section[style*="magSoft"] { background: #24121F !important; }
.dark .ofp .fp-lightband { background-image: none; background-color: var(--color-background-7); }
.dark .ofp .fp-card, .dark .ofp .fp-chip, .dark .ofp .fp-panel, .dark .ofp .fp-callout { background: var(--color-background-9); box-shadow: 0 0 0 1px var(--color-stroke-7); }
.dark .ofp li:before { background-color: #BC08B0; }

/* phones: a photo hero without its own phone band gets an even shade, so the text stays readable over the photo */
@media (max-width: 860px) {
  .ofp .fp-hero:not(.fp-has-photo) { position: relative; }
  .ofp .fp-hero:not(.fp-has-photo)::before { content: ""; position: absolute; inset: 0; background: rgba(19, 23, 30, .55); }
  .ofp .fp-hero:not(.fp-has-photo) > .fp-wrap { position: relative; }
}

/* The hero starts right under the fixed site header; its breadcrumb sits above the H1 (TM web-layout-breadcrumb-in-hero) */
.ofp > .fp-hero:first-child { margin-top: 120px; }
.ofp .fp-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.ofp .fp-crumb a { color: #FF36F2; text-decoration: none; }
.ofp .fp-crumb a:hover, .ofp .fp-crumb a:focus-visible { text-decoration: underline; }
.ofp .fp-crumb-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .45); }
.ofp .fp-crumb [aria-current="page"] { color: rgba(255, 255, 255, .8); }

/* homepage film playlist (home.js): once a film plays, the video fills the player and the poster cover goes */
.ofp .fp-films .fp-vplayer .fp-pv { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; background: #13171e; }
.ofp .fp-films .fp-vplayer.fp-on > img, .ofp .fp-films .fp-vplayer.fp-on > .fp-vplay, .ofp .fp-films .fp-vplayer.fp-on > .fp-vlen { display: none; }

/* headings take their section's colour, as in TM's mockups (the site's base CSS gives every heading the dark ink, so
   headings on the dark hero, the slate band and the closing band were dark on dark) */
.ofp :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
/* dark mode: the homepage's soft magenta "A day, a month, a year" band */
.dark .ofp section.fp-day { background: #24121F !important; }