/* CCC 2026 interviews: card grid + player dialog. Shared by the CCC pages, the 2027 booking page and
   the main site; each page themes it through the --voice-* variables (falls back to the CCC page tokens). */
.voices {
  --v-accent: var(--voice-accent, var(--red, #1d4ed8));
  --v-ink: var(--voice-ink, var(--ink, #1b232d));
  --v-soft: var(--voice-soft, var(--ink-soft, #5b6470));
  --v-display: var(--voice-display, var(--font-display, Georgia, serif));
  --v-ui: var(--voice-ui, var(--font-ui, system-ui, -apple-system, "Segoe UI", sans-serif));
  --v-card: var(--voice-card, #fff);
  --v-hair: var(--voice-hair, rgba(27, 35, 45, .12));
  max-width: 72rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; scroll-margin-top: 6rem;
}
.voices--main { --voice-accent: #765a09; --voice-ink: #203518; --voice-soft: #5d6156; --voice-display: "Newsreader", Georgia, serif;
  --voice-ui: "Manrope", system-ui, sans-serif; --voice-hair: rgba(32, 53, 24, .14); margin-top: 0; }
.voices--booking { --voice-accent: var(--blue, #1d4ed8); --voice-ink: var(--navy-deep, #0e2350); --voice-display: var(--display);
  --voice-ui: var(--ui); margin-top: 0; }

.voices__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); }
.voices__kicker { font: 800 .74rem/1.2 var(--v-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--v-accent); margin: 0 0 .7rem; }
.voices__title { font-family: var(--v-display); font-weight: 700; color: var(--v-ink); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem);
  line-height: 1.1; margin: 0 0 .7rem; letter-spacing: -.01em; }
.voices__lede { font: 400 1rem/1.6 var(--v-ui); color: var(--v-soft); margin: 0; }

.voices__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.voice { display: flex; flex-direction: column; background: var(--v-card); border: 1px solid var(--v-hair); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 30px -22px rgba(0, 0, 0, .35); transition: transform .25s ease, box-shadow .25s ease; }
.voice:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 24px 40px -24px rgba(0, 0, 0, .45); }
.voice__play { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0b1424; }
.voice__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.voice--tall .voice__play img { object-position: 50% 18%; }
.voice--square .voice__play img { object-position: 50% 30%; }
.voice__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 15, 0) 55%, rgba(5, 8, 15, .45)); }
.voice__play:hover img, .voice__play:focus-visible img { transform: scale(1.04); }
.voice__play:focus-visible { outline: 3px solid var(--v-accent); outline-offset: -3px; }
.voice__btn { position: absolute; z-index: 1; left: 50%; top: 50%; width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem; border-radius: 50%;
  background: rgba(255, 255, 255, .94); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.voice__btn::after { content: ""; position: absolute; left: 1.42rem; top: 1.05rem; border-style: solid; border-width: .75rem 0 .75rem 1.2rem;
  border-color: transparent transparent transparent var(--v-accent); }
.voice__play:hover .voice__btn { transform: scale(1.1); }
.voice__len { position: absolute; z-index: 1; right: .6rem; bottom: .6rem; background: rgba(10, 16, 28, .8); color: #fff;
  font: 700 .78rem/1 var(--v-ui); padding: .32rem .5rem; border-radius: 6px; }
.voice__name { font: 700 1.2rem/1.25 var(--v-display); color: var(--v-ink); margin: 1rem 1.15rem .15rem; }
.voice__role { font: 600 .86rem/1.4 var(--v-ui); color: var(--v-soft); margin: 0 1.15rem 1.05rem; }
.voice__quote { margin: auto 1.15rem 1.2rem; padding-top: .9rem; border-top: 1px solid var(--v-hair);
  font: italic 400 1rem/1.5 var(--v-display); color: var(--v-ink); quotes: "\201C" "\201D"; }
.voice__quote::before { content: open-quote; } .voice__quote::after { content: close-quote; }
.voices__more { text-align: center; margin: 1.8rem 0 0; font: 700 .98rem var(--v-ui); }
.voices__more a { color: var(--v-accent); text-underline-offset: 3px; }

/* Player */
.voice-dialog { border: 0; padding: 0; background: #05080f; color: #fff; border-radius: 14px; width: min(64rem, 100vw - 1.5rem);
  max-height: calc(100vh - 1.5rem); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
.voice-dialog[data-shape="tall"] { width: min(24rem, 100vw - 1.5rem); }
.voice-dialog[data-shape="square"] { width: min(40rem, 100vw - 1.5rem); }
.voice-dialog::backdrop { background: rgba(5, 8, 15, .84); }
.voice-dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .55rem .55rem 1rem; }
.voice-dialog__title { margin: 0; font: 600 .92rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: #e6ebf2; }
.voice-dialog__x { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff;
  font: 400 1.5rem/1 system-ui, sans-serif; cursor: pointer; }
.voice-dialog__x:hover { background: rgba(255, 255, 255, .26); }
.voice-dialog video { display: block; width: 100%; max-height: calc(100vh - 5.5rem); background: #000; }
.voice-dialog video::cue { font-size: 1.05em; background: rgba(0, 0, 0, .78); }

@media (prefers-reduced-motion: reduce) { .voice, .voice__play img, .voice__btn { transition: none; } .voice:hover { transform: none; } }