/* /films: hero (the film in a 2.39:1 frame) and the seven features. Loads after site.css. */

/* ---------- hero ---------- */
.films-hero { padding-bottom: 0; overflow: visible; }   /* no shader here to clip, and clipping slices the frame's glow at the section edge */
.scope { margin-top: var(--space-2xl); }
.scope-frame { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; border-radius: var(--radius-card); background: var(--color-media); outline: var(--rule-hair) solid var(--color-rule); box-shadow: 0 40px 120px -40px var(--color-brand-glow); }
.scope-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scope-tag, .ff-media .label { position: absolute; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-scrim); color: var(--color-ink); font: 500 var(--text-xs)/1.4 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.scope-tag { top: var(--space-md); left: var(--space-md); }
.scope figcaption, .ff-proof figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.scope figcaption { text-align: center; }


/* ---------- features: one row each, copy left, proof right ---------- */
.ff { padding-block: var(--section-gap-s); }
.ff-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-3xl); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: var(--nav-h); }
.ff-row:first-of-type { padding-top: 0; }
.ff-eyebrow { display: flex; gap: var(--space-sm); align-items: baseline; font: 400 var(--text-xl)/1.2 var(--font-display); color: var(--color-ink-2); }
.ff-eyebrow span { font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-accent-bright); font-variant-numeric: tabular-nums; }
.ff-copy h3 { margin-top: var(--space-xl); font-size: var(--text-3xl); line-height: 1.08; letter-spacing: -0.025em; max-width: 16ch; }
.ff-copy h3 + p { margin-top: var(--space-lg); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); max-width: 38ch; }

.ff-proof { display: grid; gap: var(--space-sm); margin: 0; }
.ff-media { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--color-media); outline: var(--rule-hair) solid var(--color-rule); }
.ff-media > video, .ff-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* small and in the corner, so the label never sits on a face */
.ff-media .label { bottom: var(--space-xs); left: var(--space-xs); padding: 1px var(--space-xs); font-size: 0.6875rem; }
/* phones: abstract stand-ins replace the recordings, size to their content, and the screenplay's counts sit under them */
@media (max-width: 40rem) {
  .ff-media:has(.mock) { aspect-ratio: auto; background: var(--color-canvas); }
  .ff-media:has(.mock-script, .mock-chat) .mock { height: auto; }
  .ff-media:has(.mock-edit) { aspect-ratio: 16 / 10; }
  .ff-media .mock ~ .breakdown { border-top: var(--rule-hair) solid var(--color-rule); background: none; }
}
.r16x10 { aspect-ratio: 16 / 10; }
.r16x9 { aspect-ratio: 16 / 9; }
.r239 { aspect-ratio: 2.39 / 1; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

/* 01: breakdown counts over the script recording */
.breakdown { position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-scrim); }
.breakdown dt { font-size: var(--text-xs); color: var(--color-muted); }
.breakdown dd { margin: 0; font: 600 var(--text-2xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }

/* 02 angles + 04 storyboard strip */
.angles, .strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.angles li, .strip li { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-input); background: var(--color-media); }
.angles img, .strip img { width: 100%; height: 100%; object-fit: cover; }
.angles span { position: absolute; left: var(--space-2xs); bottom: var(--space-2xs); padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-scrim); font-size: var(--text-xs); }
.strip { counter-reset: shot; }
.strip li::after { counter-increment: shot; content: counter(shot, decimal-leading-zero); position: absolute; left: var(--space-2xs); bottom: var(--space-2xs); padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-scrim); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

.ff-cta { display: flex; justify-content: center; padding-top: var(--space-2xl); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .ff-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
  .ff-copy h3 { margin-top: var(--space-lg); }
}
@media (max-width: 40rem) {
  .ff-media:has(.breakdown) { aspect-ratio: auto; }
  .breakdown { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); border-radius: 0; }
  .pair, .angles, .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}