/* =========================================================================
   EXPERTS VOICE — inner page
   Hero/crumb/consult come from vbs.css (the shared inner-page components).
   This file only adds the video grid. Unlike the homepage Studio Tour's
   .player (an inline click-to-play YouTube facade), these cards are plain
   links out to youtube.com/watch — .player/.player-thumb/.player-play are
   reused for the card chrome only, with no data-player/data-yt/JS wiring.
   ========================================================================= */

.xv-experts {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background: var(--void);
}
.xv-grid {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.xv-card { display: flex; flex-direction: column; }
/* These interviews are vertical (reel/Shorts) footage, unlike the
   homepage Studio Tour's widescreen clips that .player is built for —
   override the aspect ratio here rather than touching the shared class.
   The maxresdefault.jpg thumbnails are still 16:9, so object-fit: cover
   on .player-thumb (already set) centre-crops them to fill the tall box. */
.xv-card .player { aspect-ratio: 9 / 16; margin: 0 0 clamp(1rem, 2vw, 1.25rem); }
/* small, corner-anchored YouTube badge on these cards only — the
   homepage's .player instances keep the large centred play button */
.xv-card .player-play {
  left: 10px;
  top: 10px;
  transform: none;
  width: 40px;
  height: 40px;
  background: rgba(15, 15, 20, 0.72);
}
.xv-card .player-play svg { width: 62%; height: 62%; margin-left: 0; }
.xv-card .player:hover .player-play { transform: scale(1.08); }
.xv-name {
  margin: 0 0 0.3rem;
  font-family: var(--font-poster);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.xv-role {
  margin: 0 0 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
}
.xv-blurb { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-mid); }

@media (max-width: 1100px) {
  .xv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .xv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .xv-grid { grid-template-columns: minmax(0, 1fr); }
}