/* =========================================================================
   video-controls.css — custom minimal video controls (play/pause + sound).
   Pairs with js/video-controls.js. Applied to videos marked
   [data-sound-toggle]: the native player is removed and a small control
   cluster sits in the lower-left corner. No dark overlay, no scrubber.
   ========================================================================= */

/* JS wraps the video in this so the controls anchor to the video's own box
   (the video is inset within its padded container, so anchoring to the parent
   would misplace them). */
/* align-self:start so that when the wrap is a grid/flex item it hugs the
   video's height instead of stretching to the row height (a bare <video>
   doesn't stretch because it has intrinsic size; an empty <div> would). That
   keeps the control cluster anchored to a shorter video's own bottom edge. */
.vc-wrap { position: relative; display: block; align-self: start; }

.vc-controls {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 5;
  display: flex;
  gap: 10px;
}

.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;

  border: none;
  border-radius: 50%;
  background: rgba(13, 13, 12, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fffcf9;
  cursor: pointer;

  transition: background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
@media (hover: hover) {
  .vc-btn:hover { background: rgba(13, 13, 12, 0.8); transform: scale(1.08); }
}
.vc-btn:focus-visible { outline: 2px solid #25e87f; outline-offset: 2px; }
.vc-btn svg { width: 22px; height: 22px; display: block; fill: currentColor; }

/* Sound icon swap: "off" (muted) icon while muted, "on" once unmuted. */
.vc-sound .vc-ic--on  { display: none; }
.vc-sound .vc-ic--off { display: block; }
.vc-sound.is-on .vc-ic--on  { display: block; }
.vc-sound.is-on .vc-ic--off { display: none; }

/* Play/pause icon swap: "play" while paused, "pause" while playing. */
.vc-play .vc-ic--pause { display: none; }
.vc-play .vc-ic--play  { display: block; }
.vc-play.is-playing .vc-ic--pause { display: block; }
.vc-play.is-playing .vc-ic--play  { display: none; }

@media only screen and (max-width: 576px) {
  .vc-controls { left: 12px; bottom: 12px; gap: 8px; }
  .vc-btn { width: 42px; height: 42px; }
}