/* video-swap: click-to-play YouTube facade in place of a feature photo (lib/enhance/transforms/video-swap.ts).
 *
 * The thumbnail stays IN FLOW and sizes the box. An aspect-ratio box with a % width collapses to 0 px
 * inside the Elementor flex columns on mobile (the column measures it before the width is known); a
 * replaced <img> with width/height attributes does not. On play, the iframe is laid over the thumbnail. */
.yn-vs {
  position: relative;
  width: var(--yn-vs-w, 100%);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 12px;
  background: #1d1410;
  line-height: 0;
}
.yn-vs .yn-vs-btn {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
/* !important beats the rules sized for the old photo: the theme's `.service-featured-image img` /
   `.why-choose-image img` aspect-ratio, Elementor's `.elementor-NNN .elementor-element.elementor-element-<id> img`
   width/height, and the theme's `.at-animation-image-style-1 img { clip-path }` scroll-reveal. */
.yn-vs .yn-vs-thumb {
  display: block;
  position: static;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
  border-radius: 0 !important;
  clip-path: none !important;
  transition: transform 0.6s ease;
}
.yn-vs .yn-vs-btn:hover .yn-vs-thumb { transform: scale(1.03); }
.yn-vs .yn-vs-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: rgba(164, 60, 31, 0.92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.yn-vs .yn-vs-play::after {
  content: '';
  position: absolute;
  left: 31px;
  top: 24px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff;
}
.yn-vs .yn-vs-btn:hover .yn-vs-play,
.yn-vs .yn-vs-btn:focus-visible .yn-vs-play { transform: scale(1.08); background: #a43c1f; }
.yn-vs .yn-vs-btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.yn-vs iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .yn-vs { width: 100%; }
  .yn-vs .yn-vs-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .yn-vs .yn-vs-play::after { left: 24px; top: 18px; border-width: 12px 0 12px 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .yn-vs .yn-vs-thumb, .yn-vs .yn-vs-play { transition: none; }
  .yn-vs .yn-vs-btn:hover .yn-vs-thumb { transform: none; }
}