/* Cutting Room — Film section: full-width poster fan strip */

.film-strip {
  display: flex; width: 100%; height: clamp(300px, 32vw, 440px);
  margin-bottom: 22px; background: var(--panel); overflow: hidden;
}
.film-cell {
  position: relative; display: block; flex: 1 1 0%; min-width: 0; overflow: hidden;
  transition: flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.film-strip:has(.film-cell:hover) .film-cell:not(:hover) { flex-grow: 0.42; }
.film-cell:hover { flex-grow: 1.3; }
.film-cell .film-poster {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.1); transition: filter 0.5s ease;
}
.film-cell:hover .film-poster { filter: grayscale(0.3) contrast(1.1); }
.film-cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
}
.film-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(10px, 1.4vw, 16px); }
.film-cap h3 {
  margin: 0; font-family: var(--font-display);
  font-size: 13px; font-weight: 400; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.film-panel {
  flex: 0 0 0px; min-width: 0; overflow: hidden; background: var(--panel);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 26px; transition: flex-basis 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.film-cell:hover + .film-panel { flex-basis: 260px; }
.film-panel > * { opacity: 0; white-space: nowrap; transition: opacity 0.25s ease; }
.film-cell:hover + .film-panel > * { opacity: 1; transition-delay: 0.2s; }
.film-panel h3 {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 20px); font-weight: 400;
  color: var(--ink); letter-spacing: -0.02em;
}
.film-status {
  display: inline-block; align-self: flex-start; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); border: 1px solid rgba(236,233,226,0.4); padding: 3px 8px; margin-bottom: 12px;
}
.film-role { margin: 0; font-size: 12px; color: var(--ink-dim); white-space: normal; }
.film-desc { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-faint); white-space: normal; max-width: 26ch; }

.film-foot { font-size: 13px; color: var(--ink-faint); }
.film-foot a { color: var(--ink-dim); border-bottom: 1px solid var(--ink-faint); }
.film-foot a:hover { color: var(--ink); border-color: var(--ink); }
.film-copy {
  text-align: justify; hyphens: auto; max-width: 56ch;
  font-size: 17px; font-weight: 400; line-height: 1.7;
  color: var(--ink); margin-bottom: clamp(24px, 3.4vw, 36px);
}
.film-copy strong em { font-family: var(--font-display); font-weight: 400; }

@media (max-width: 700px) {
  .film-strip { flex-direction: column; height: auto; gap: 0; background: none; }
  .film-cell { flex: none !important; width: 100%; aspect-ratio: 16 / 9; }
  .film-cap h3 { font-size: 16px; }
  .film-panel {
    display: flex;
    flex: none;
    flex-basis: auto !important;
    padding: 14px 0 28px;
    background: transparent;
  }
  .film-panel > * { opacity: 1 !important; white-space: normal; }
  .film-panel h3 { display: none; }
  .film-desc { max-width: none; }
  .film-copy { text-align: left; hyphens: none; font-size: 16px; }
}

.fp1 { background-image: url(../assets/images/film/artificial-soul.jpg); }
.fp2 { background-image: url(../assets/images/film/two-truths-and-a-lie.jpg); }
.fp-volwassen { background-image: url(../assets/images/film/volwassen.jpg); }
.fp3 { background-image: url(../assets/images/film/the-trinity-system.jpg); }
.fp4 { background-image: url(../assets/images/film/anyone-but-me.jpg); }
.fp5 { background-image: url(../assets/images/film/f-ma.jpg); }