/* Chou Force — section media (FUP 2026-10-13). Loads after site.css.
   Replaces the abstract glyph cards (.cf-art) with real visuals in equal 4:3 frames, plus the
   Octalysis Prime trailer embed. Theme CSS (tokens.css / site.css) is untouched so the WordPress
   theme can adopt this file as-is. */

.cf-shot { position: relative; margin: 0 auto; width: min(100%, 520px); }
.cf-shot::before {
  content: ""; position: absolute; inset: 8% -6% -4% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, var(--cf-cyan)) 26%, transparent), transparent 75%);
  filter: blur(8px);
}
.cf-shot__frame {
  position: relative; z-index: 1; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--cf-r-lg);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--accent, var(--cf-cyan)) 40%, var(--cf-line-soft));
  box-shadow: var(--cf-shadow-lift), 0 0 0 6px color-mix(in srgb, var(--accent, var(--cf-cyan)) 9%, transparent);
}
.cf-shot__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-shot figcaption {
  position: relative; z-index: 1; margin-top: 14px; padding-inline: 6px;
  font-size: .875rem; line-height: 1.5; color: var(--cf-muted); text-align: center;
}

/* Octalysis Prime trailer, placed at the end of its own section (FUP whole-section-topic match). */
.cf-front__video { margin-top: clamp(36px, 5vw, 56px); }
.cf-video {
  width: min(100%, 760px); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--cf-r-lg); overflow: hidden;
  background: #000; border: 1px solid color-mix(in srgb, var(--accent, var(--cf-cyan)) 40%, var(--cf-line-soft));
  box-shadow: var(--cf-shadow-lift);
}
.cf-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.cf-video__cap { margin: 14px auto 0; text-align: center; font-size: .875rem; color: var(--cf-muted); }

@media (max-width: 860px) {
  .cf-shot { width: min(100%, 460px); margin-inline: 0; }
  .cf-shot::before { inset: 6% 0 -2% 0; } /* keep the glow inside the 16px phone gutter (no sideways scroll) */
  /* Phones: every section reads heading -> copy -> image. The theme put the art first in even sections and
     last in odd ones; with real images that showed a picture before its own heading. */
  .cf-front .cf-front__art, .cf-front--flip .cf-front__art { order: 2; }
  .cf-front__grid { row-gap: 40px; }
}