/* =========================================================
   森蓝摄影社 · 影像板块（B 站嵌入）
   依赖 style.css 中的 :root 变量，单独成文件便于维护
   ========================================================= */

.films {
  position: relative;
  padding-block: clamp(64px, 8vw, 120px);
  border-top: 1px solid rgba(18, 26, 24, 0.12);
  color: #122a24;
}
.films .section-head { align-items: flex-end; }
.films .section-label { color: var(--accent-deep); }
.films .section-note { color: rgba(20, 35, 31, 0.55); }
.films .display { color: #10201c; }

.film-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.4vw, 44px);
  margin-top: clamp(30px, 4vw, 52px);
}

.film {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.film-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(78svh, 820px);
  overflow: hidden;
  border-radius: clamp(16px, 1.9vw, 26px);
  background:
    radial-gradient(120% 120% at 50% 0%, #16231f 0%, #0a1312 60%, #08100f 100%);
  box-shadow:
    0 26px 64px rgba(18, 26, 24, 0.16),
    0 0 52px rgba(47, 107, 94, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* 棱镜边：与站内玻璃按钮同一圈极薄色散光 */
.film-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(from 210deg,
    rgba(255, 95, 95, 0.5),
    rgba(255, 214, 120, 0.28),
    rgba(120, 255, 180, 0.34),
    rgba(80, 220, 255, 0.52),
    rgba(150, 120, 255, 0.38),
    rgba(255, 120, 220, 0.46),
    rgba(255, 95, 95, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(0.2px);
  opacity: 0.62;
  pointer-events: none;
}

/* 边角内侧的一层冷光，让画面像是嵌在玻璃里 */
.film-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(143, 216, 198, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 22%);
  box-shadow: inset 0 0 46px rgba(3, 10, 9, 0.55);
  pointer-events: none;
}

.film-stage > img,
.film-stage > iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.film-stage > img {
  object-fit: cover;
  filter: brightness(0.8) saturate(0.95);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}

/* 未填链接时的占位 */
.film-soon {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 16px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.film.is-empty .film-soon { display: grid; }
.film.is-empty .film-hit { display: none; }
.film.is-empty .film-stage {
  background:
    radial-gradient(120% 120% at 50% 0%, #1a2a26 0%, #131f1c 55%, #0d1816 100%);
}
.film.is-empty .film-stage::before {
  background: conic-gradient(from 210deg,
    rgba(233, 238, 234, 0.22),
    rgba(143, 216, 198, 0.16),
    rgba(233, 238, 234, 0.22));
}
/* 播放器接入后，内层冷光让位给画面本身 */
.film-stage:has(iframe)::after { display: none; }

/* 点击封面播放 */
.film-hit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(8, 16, 15, 0.04) 0%, rgba(8, 16, 15, 0.42) 100%);
  cursor: pointer;
}
.film-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.film-play {
  display: grid;
  place-items: center;
  width: clamp(52px, 5.5vw, 64px);
  aspect-ratio: 1;
  border: 1px solid rgba(233, 238, 234, 0.55);
  border-radius: 50%;
  background: rgba(8, 16, 15, 0.36);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.4s var(--ease), background 0.3s, border-color 0.3s;
}
.film-play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 13px solid var(--paper);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.film-hit:hover .film-play,
.film-hit:focus-visible .film-play {
  transform: scale(1.07);
  background: rgba(8, 16, 15, 0.55);
  border-color: rgba(233, 238, 234, 0.8);
}
.film-stage:hover > img { transform: scale(1.03); filter: brightness(0.88) saturate(1); }

.film-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.film-num {
  flex: none;
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(18, 42, 36, 0.42);
}
.film-meta > div { min-width: 0; }
.film-title {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: #10201c;
}
.film-desc {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #3f514a;
}

@media (max-width: 720px) {
  .film-grid { gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .film-stage > img,
  .film-stage:hover > img,
  .film-play { transition: none; }
}