/* The brand film 《分身有术》 (3.1.2): hero button, §09 recap card, and the player dialog. */

/* ---- § 00: the second hero action plays the film ---- */
.button-film svg { font-size: 13px; }
.button-film:hover svg { transform: scale(1.12); }
/* Phones keep the two hero actions on one row, as before the film was added. */
.film-label-short { display: none; }
@media (max-width: 520px) { .film-label-long { display: none; } .film-label-short { display: inline; } }
/* The smallest phones (≤ 360 px): both hero actions still fit on one row, above the fold. */
@media (max-width: 360px) { .film-dur { display: none; } .hero .actions { gap: 10px; } .hero .actions .button { padding: 0 18px; } }

/* ---- § 09: a second chance to watch, between the journey's end and the call to action ---- */
.film-recap {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 56px);
  max-width: 980px; margin: 0 auto clamp(80px, 10vw, 150px);
}
.film-poster {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: var(--r-l); border: 1px solid var(--hair-2); background: var(--ink-0);
  box-shadow: var(--shadow-lift);
}
.film-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out), filter var(--t-base); }
.film-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3, 7, 15, 0.55)); pointer-events: none; }
.film-poster:hover img { transform: scale(1.03); filter: brightness(1.08); }
.film-play {
  position: absolute; left: 20px; bottom: 18px; z-index: 1; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(36, 111, 241, 0.92); color: #fff; box-shadow: 0 0 0 10px rgba(36, 111, 241, 0.18), var(--shadow-glow);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.film-play svg { width: 24px; height: 24px; margin-left: 3px; }
.film-poster:hover .film-play { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(36, 111, 241, 0.22), var(--shadow-glow); }
.film-poster:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 4px; }
.film-time {
  position: absolute; right: 14px; bottom: 12px; z-index: 1; padding: 2px 9px; border-radius: 999px;
  font: 500 12px/1.6 var(--mono); color: var(--text-1); background: rgba(3, 7, 15, 0.6);
}
.film-recap-copy { display: grid; justify-items: start; gap: 14px; }
.film-recap-copy .folio { margin: 0; }
.film-recap-title { font: 400 clamp(24px, 2.3vw, 34px)/1.4 var(--serif); letter-spacing: -0.01em; color: var(--text-1); }
.film-recap-text { color: var(--text-2); max-width: 26em; }
.film-recap-copy .text-link { margin-top: 4px; }
.film-recap-copy .text-link svg { font-size: 12px; }
.film-recap-copy .text-link:hover svg { transform: scale(1.12); }

/* ---- the player ---- */
dialog.film-dialog {
  width: min(1180px, calc(100% - 48px), calc((100svh - 140px) * 16 / 9)); max-height: calc(100% - 32px); overflow: hidden;
  border: 1px solid var(--hair-2); border-radius: var(--r-l); background: var(--ink-0); color: var(--text-1);
}
dialog.film-dialog::backdrop { background: rgba(3, 7, 15, 0.86); }
.film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.film-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.film-video:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: -2px; }
.film-error { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--text-2); background: rgba(3, 7, 15, 0.85); }
.film-error[hidden] { display: none; }
.film-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 14px 22px 16px; }
.film-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-right: auto; }
.film-caption b { font: 500 18px/1.4 var(--serif); }
.film-caption span { font-size: 13px; color: var(--text-3); }
.film-note { font-size: 12px; color: var(--text-3); }
dialog.film-dialog .text-link { color: var(--blue-soft); font-size: 14px; }
/* Close sits on the picture's top-right corner, clear of the native controls along the bottom. */
.film-close { top: 12px; right: 12px; z-index: 2; color: #fff; background: rgba(3, 7, 15, 0.55); }
.film-close:hover { color: #fff; background: rgba(3, 7, 15, 0.8); }

@media (max-width: 900px) {
  .film-recap { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 640px; }
  .film-poster { width: 100%; }
  .film-recap-copy { justify-items: center; }
}
@media (max-width: 760px) {
  dialog.film-dialog { width: calc(100% - 24px); border-radius: var(--r-m); }
  .film-bar { padding: 12px 16px 14px; gap: 6px 16px; }
  .film-caption b { font-size: 16px; }
  .film-close { top: 8px; right: 8px; }
  .film-play { width: 54px; height: 54px; left: 14px; bottom: 12px; }
  .film-play svg { width: 20px; height: 20px; }
}