/* ============================================================
   Casa Tequila Prime — Click-to-play Video Player (reusable)
   Pairs with assets/js/video-player.js. Uses only existing design
   tokens (colors, easing) — no new tokens added.
   ============================================================ */

.video-player {
  position: relative;
  width: 100%;
  /* Both supplied clips are native 9:16 portrait — the container itself
     carries that ratio so the poster and the real <video> that replaces
     it both render at their own true proportions, full-bleed, with
     nothing to crop or stretch to fit. */
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--black-2);
  border: 1px solid var(--border);
}

.video-player-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.video-player-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 6, .18);
  transition: background .3s ease;
}
.video-player-play:hover,
.video-player-play:focus-visible { background: rgba(8, 8, 6, .32); }

.video-player-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(8, 8, 6, .55);
  border: 1.5px solid var(--gold);
  transition: transform .3s ease, background .3s ease;
}
.video-player-play:hover .video-player-play-icon,
.video-player-play:focus-visible .video-player-play-icon {
  transform: scale(1.08);
  background: rgba(8, 8, 6, .72);
}
.video-player-play-icon svg {
  width: 22px; height: 22px;
  fill: var(--gold);
  margin-left: 3px; /* optically center the triangle */
}

.video-player-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

@media (max-width: 480px) {
  .video-player-play-icon { width: 54px; height: 54px; }
  .video-player-play-icon svg { width: 18px; height: 18px; }
}