/* ==========================================================================
   Armstrong Build — Vimeo player component (inc/video.php, assets/js/vimeo-player.js)
   16:9 stage, client-supplied poster, custom play/pause. Uses main.css tokens. Added 2026-10-22.
   ========================================================================== */
.vimeo-player{ width:100%; }
.vimeo-player__stage{
  position:relative; width:100%; aspect-ratio:16 / 9;
  background:var(--ink); border-radius:var(--radius-img); overflow:hidden;
}
.vimeo-player__frame, .vimeo-player__frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.vimeo-player__cover{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
}
.vimeo-player__cover[hidden]{ display:none; }
.vimeo-player__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.vimeo-player__cover::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(13,13,11,.5) 0%, rgba(13,13,11,.08) 55%);
}
.vimeo-player__play{
  position:relative; z-index:3;
  display:inline-flex; align-items:center; gap:16px;
  padding:0; border:0; background:none; cursor:pointer; color:#fff;
  font-family:var(--font-sans); font-weight:400; font-size:12px; letter-spacing:2.5px; text-transform:uppercase;
}
.vimeo-player__play-icon{
  width:72px; height:72px; border-radius:50%; background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.55);
  transition:transform .25s ease, background-color .25s ease;
}
.vimeo-player__play-icon::before{
  content:""; display:block; width:0; height:0; margin-left:5px;
  border-style:solid; border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent var(--ink);
}
.vimeo-player__play:hover .vimeo-player__play-icon,
.vimeo-player__play:focus-visible .vimeo-player__play-icon{ transform:scale(1.06); background:var(--paper-3); }
.vimeo-player__play:focus-visible{ outline:2px solid #fff; outline-offset:10px; border-radius:40px; }
.vimeo-player__play:disabled{ cursor:progress; }
/* loading: the triangle becomes a spinner until Vimeo reports that playback has begun */
.vimeo-player[data-vimeo-state="loading"] .vimeo-player__play-icon::before{
  width:22px; height:22px; margin:0; border-radius:50%;
  border-width:3px; border-style:solid;
  border-color:rgba(20,19,15,.2); border-top-color:var(--ink);
  animation:vimeo-spin .9s linear infinite;
}
@keyframes vimeo-spin{ to{ transform:rotate(360deg); } }
.vimeo-player__status{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  margin:0; max-width:90%; text-align:center;
  font-size:12px; letter-spacing:1px; line-height:1.5; color:rgba(255,255,255,.9);
}
.vimeo-player__status:empty{ display:none; }
.vimeo-player__pause{
  position:absolute; left:20px; bottom:20px; z-index:3;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px; border:1px solid rgba(255,255,255,.4); border-radius:var(--radius-btn);
  background:rgba(13,13,11,.62); color:#fff; cursor:pointer;
  font-family:var(--font-sans); font-size:11px; letter-spacing:2px; text-transform:uppercase;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background-color .2s ease;
}
.vimeo-player__pause[hidden]{ display:none; }
.vimeo-player__pause:hover{ background:rgba(13,13,11,.88); }
.vimeo-player__pause:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.vimeo-player__pause-icon{ width:10px; height:12px; border-left:3px solid #fff; border-right:3px solid #fff; display:inline-block; }
.vimeo-player__caption{ margin-top:14px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.vimeo-player--on-dark .vimeo-player__caption{ color:var(--on-dark-muted); }

@media (max-width:560px){
  .vimeo-player__play-icon{ width:60px; height:60px; }
  .vimeo-player__play-text{ display:none; }
  .vimeo-player__pause{ left:12px; bottom:12px; padding:9px 12px; }
  .vimeo-player__status{ bottom:14px; font-size:11px; }
}
@media (prefers-reduced-motion: reduce){
  .vimeo-player__play-icon{ transition:none; }
  .vimeo-player[data-vimeo-state="loading"] .vimeo-player__play-icon::before{ animation-duration:2s; }
}