/*
 * Home hero: keep the video natural and protect the copy locally.
 * This intentionally overrides the site-wide WCAG overlay, which is too dark
 * for a moving image, while retaining strong contrast around the text.
 */
html body:not(.frc-booking-page):not(.frc-checkout-page)
  .swiper-form-wrap.frc-video-only-hero .frc-video-hero-slide::before {
  background:
    radial-gradient(
      ellipse 62% 88% at 25% 56%,
      rgba(3, 18, 27, 0.42) 0%,
      rgba(3, 18, 27, 0.27) 43%,
      rgba(3, 18, 27, 0.07) 72%,
      rgba(3, 18, 27, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 18, 27, 0.11) 0%,
      rgba(3, 18, 27, 0.02) 42%,
      rgba(3, 18, 27, 0.14) 100%
    ) !important;
}

html body .swiper-form-wrap.frc-video-only-hero .frc-hero-video {
  filter: none !important;
}

html body .swiper-form-wrap.frc-video-only-hero .swiper-slide-caption h1,
html body .swiper-form-wrap.frc-video-only-hero .swiper-slide-caption h2,
html body .swiper-form-wrap.frc-video-only-hero .swiper-slide-caption h6,
html body .swiper-form-wrap.frc-video-only-hero .swiper-slide-caption p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.92),
    0 5px 20px rgba(0, 12, 20, 0.72) !important;
}

/* Tablet: the copy becomes centered, so the local contrast follows it. */
@media (min-width: 768px) and (max-width: 991px) {
  html body:not(.frc-booking-page):not(.frc-checkout-page)
    .swiper-form-wrap.frc-video-only-hero .frc-video-hero-slide::before {
    background:
      radial-gradient(
        ellipse 80% 78% at 50% 53%,
        rgba(3, 18, 27, 0.42) 0%,
        rgba(3, 18, 27, 0.25) 46%,
        rgba(3, 18, 27, 0.05) 76%,
        rgba(3, 18, 27, 0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(3, 18, 27, 0.11) 0%,
        rgba(3, 18, 27, 0.02) 42%,
        rgba(3, 18, 27, 0.14) 100%
      ) !important;
  }
}

/* Phone: preserve the brighter edges and protect the central text column. */
@media (max-width: 767px) {
  html body:not(.frc-booking-page):not(.frc-checkout-page)
    .swiper-form-wrap.frc-video-only-hero .frc-video-hero-slide::before {
    background:
      radial-gradient(
        ellipse 108% 70% at 50% 49%,
        rgba(3, 18, 27, 0.44) 0%,
        rgba(3, 18, 27, 0.27) 48%,
        rgba(3, 18, 27, 0.06) 78%,
        rgba(3, 18, 27, 0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(3, 18, 27, 0.12) 0%,
        rgba(3, 18, 27, 0.03) 45%,
        rgba(3, 18, 27, 0.16) 100%
      ) !important;
  }

  /* Keep the original clean layout and add only a soft halo to the copy. */
  html body .swiper-form-wrap.frc-video-only-hero .swiper-slide-caption h1,
  html body .swiper-form-wrap.frc-video-only-hero .swiper-slide-caption p {
    text-shadow:
      0 2px 3px rgba(0, 0, 0, 0.82),
      0 0 10px rgba(3, 18, 27, 0.58),
      0 5px 16px rgba(3, 18, 27, 0.42) !important;
  }
}

/* Short landscape screens need a slightly wider protection around wrapped copy. */
@media (max-width: 991px) and (max-height: 600px) and (orientation: landscape) {
  html body:not(.frc-booking-page):not(.frc-checkout-page)
    .swiper-form-wrap.frc-video-only-hero .frc-video-hero-slide::before {
    background:
      radial-gradient(
        ellipse 78% 110% at 50% 54%,
        rgba(3, 18, 27, 0.43) 0%,
        rgba(3, 18, 27, 0.25) 48%,
        rgba(3, 18, 27, 0.05) 78%,
        rgba(3, 18, 27, 0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(3, 18, 27, 0.12) 0%,
        rgba(3, 18, 27, 0.03) 45%,
        rgba(3, 18, 27, 0.15) 100%
      ) !important;
  }
}