/* =========================================================
   Vidu The Realtor — "About the business" video section
   Used on about.html only. Load AFTER vidu-2026.css.
   ========================================================= */

.vidu-video-section {
  background: linear-gradient(160deg, var(--plum-dark, #2A0721) 0%, var(--plum, #3F0B32) 100%);
  position: relative;
}
.vidu-video-section .subheading { color: var(--gold, #C6A15B); }
.vidu-video-section h2 { color: #fff; }
.vidu-video-section .video-intro {
  color: rgba(255, 255, 255, .78);
  max-width: 640px;
  margin: 0 auto;
}

/* ---- The video frame (always 16:9, any screen size) ---- */
.vidu-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #1a0415;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(198, 161, 91, .35);
}
@supports not (aspect-ratio: 16 / 9) {
  .vidu-video { height: 0; padding-top: 56.25%; }
}

/* ---- Preview (poster + play button) ---- */
.vidu-video-play {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  text-decoration: none;
}
.vidu-video-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* also trims YouTube's black bars if the HD thumbnail isn't available */
  display: block;
  transition: transform .7s var(--ease, ease);
}
.vidu-video-play::after {     /* soft plum tint so the gold button stands out */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 7, 33, .55), rgba(42, 7, 33, .08) 60%);
  pointer-events: none;
}
.vidu-video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  background: var(--gold, #C6A15B);
  color: var(--plum-dark, #2A0721);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 12px rgba(198, 161, 91, .25), 0 12px 30px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.vidu-video-btn svg { width: 34px; height: 34px; margin-left: 5px; }  /* nudge: optically centres the triangle */
.vidu-video-play:hover img,
.vidu-video-play:focus-visible img { transform: scale(1.04); }
.vidu-video-play:hover .vidu-video-btn,
.vidu-video-play:focus-visible .vidu-video-btn {
  transform: scale(1.08);
  box-shadow: 0 0 0 16px rgba(198, 161, 91, .30), 0 12px 30px rgba(0, 0, 0, .35);
}
.vidu-video-play:focus-visible { outline: 3px solid var(--gold, #C6A15B); outline-offset: -3px; }

/* ---- The player once playing ---- */
.vidu-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- "Watch on YouTube" link under the frame ---- */
.vidu-video-alt { margin-top: 18px; }
.vidu-video-alt a {
  color: var(--gold, #C6A15B);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vidu-video-alt a:hover { color: #fff; }
.vidu-video-alt svg { width: 15px; height: 15px; }

@media (max-width: 575.98px) {
  .vidu-video { border-radius: 12px; }
  .vidu-video-btn { width: 64px; height: 64px; margin: -32px 0 0 -32px; box-shadow: 0 0 0 8px rgba(198, 161, 91, .25), 0 8px 22px rgba(0, 0, 0, .35); }
  .vidu-video-btn svg { width: 26px; height: 26px; margin-left: 4px; }
}