/* ST VINCENTS — flexible media (container-agnostic).
   Works in any placeholder: tiles, exhibition sections, product galleries, landing. */

.sv-media {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
}

/* Fill (default): the poster image sizes the box; the video covers it and
   crops to fit — vertical or horizontal clips both adapt to the container. */
.sv-media__sizer {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  /* The sizer exists only to reserve the box's dimensions — it is never seen
     (the <video>'s own poster paints the first frame). Keeping it invisible
     avoids a ghosted double-layer when the video fades to translucent. */
  visibility: hidden;
}

/* On genuine video failure the mu-plugin JS adds .sv-media--error: reveal the
   placeholder image (the sizer) and hide the broken video. Because the video's
   poster is its own frame, this only ever shows on real failure — not as an
   image→video flash on a clip that works. */
.sv-media--error .sv-media__sizer { visibility: visible; }
.sv-media--error .sv-media__video { display: none; }

.sv-media__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  /* Promote to its own GPU layer so the edge doesn't flicker during the
     scroll-fade repaint (a Chrome compositing artifact). */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Safari/WebKit overlays its native "start playback" ▶ button on any <video>
   without controls that isn't actively playing yet, and it lingers over a
   muted background loop. Hide the native media-controls overlay entirely. */
.sv-media__video::-webkit-media-controls,
.sv-media__video::-webkit-media-controls-enclosure,
.sv-media__video::-webkit-media-controls-panel,
.sv-media__video::-webkit-media-controls-overlay-play-button,
.sv-media__video::-webkit-media-controls-start-playback-button,
.sv-media__video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
  pointer-events: none;
}

/* Fit: show the whole clip, uncropped — the video's own aspect ratio sets the
   block height (no image box, no letterbox). */
.sv-media--fit-contain .sv-media__sizer {
  display: none;
}

.sv-media--fit-contain .sv-media__video {
  position: static;
  width: 100%;
  height: auto;
}

/* Long-form Stream embed: responsive 16:9 box. */
.sv-media--embed {
  width: 100%;
  padding-top: 56.25%;
}

.sv-media__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Optional unmute button. */
.sv-media__sound {
  position: absolute;
  z-index: 3;
  right: 15px;
  bottom: 15px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.sv-media__sound:hover {
  background: rgba(0, 0, 0, 0.7);
}

.sv-media__sound .sv-media__sound-on { display: none; }
.sv-media__sound[data-state="on"] .sv-media__sound-off { display: none; }
.sv-media__sound[data-state="on"] .sv-media__sound-on { display: inline; }

/* --- Honour the theme's translucency effects on video too (not just <img>) --- */

.sv-media__video {
  transition: opacity 0.5s ease;
}

/* Product hero: the video sits in the full-bleed .featured-image and fades on
   scroll, exactly like the image hero (.featured-image.scrolling_up img).
   Fill it with absolute positioning rather than a flex-child height:100%,
   which Safari's -webkit-box implementation collapses to zero (video vanishes)
   and which leaves a 1px top gap in Chrome. Absolute pins it flush, all browsers. */
.product__images .featured-image {
  position: relative;
}
.product__images .featured-image .sv-media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 15px; /* leave the theme's 15px hero spacing, matching the image hero */
  width: 100%;
}
.product__images .featured-image.scrolling_up .sv-media__video {
  opacity: 0.3;
}
.product__images .featured-image.scrolling_down .sv-media__video {
  opacity: 1;
}

/* Shop-grid card: the video fades on hover like the product image — but ONLY
   on devices with a real pointer. On touch, a tap leaves the card in a sticky
   :hover state and the video would stay dimmed (image cards don't), so gate it
   behind hover-capable devices to keep mobile clean. */
@media (hover: hover) {
  .products li.product:hover .sv-media__video,
  .woocommerce-shop.woocommerce ul.products li.product:hover .sv-media__video {
    opacity: 0.3;
  }
}

/* Loading-band fix: the product gallery slider (.product__slider) has several
   slides that render in a row for a beat before slick.js collapses them into a
   carousel — a load-time flash. The theme's .slick-slide{display:none} only
   applies once slick adds its classes; before that the raw slides show. Hide
   all but the first slide until slick marks the slider initialised. */
.product__slider:not(.slick-initialized) > *:not(:first-child) {
  display: none;
}

/* (Mobile product video is handled by adding the hero video as the first slide
   of the .product__slider carousel — see content-single-product.blade.php. The
   desktop .featured-image hero stays desktop-only.) */

/* Exhibition video: the theme's .video-container kept a 56.25% top-padding
   (an aspect-ratio box for the old 16:9 Vimeo iframe). The component sizes
   itself now, so that padding is just dead space above the video — remove it. */
.exhibition-video .video__inner .video-container {
  padding-top: 0;
}

/* Landing / intro screen: fill the full-screen overlay like the background
   image (#landing .background__image is 100%/object-fit:cover). */
#landing .video-container-full,
#landing .video-container-full .sv-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Shop-grid card: let the cropped 4:3 thumbnail poster define the card box
   (override the theme's img{height:100%}, which would collapse it), so the
   video card matches the uniform image cards exactly. */
.products li.product .sv-media__sizer,
.woocommerce-shop.woocommerce ul.products li.product .sv-media__sizer {
  height: auto;
}