/* Reliable same-host TOP hero asset switching.
 * Uses root-relative URLs so staging and production always request images from the current host.
 * The known-working 1920x1280 asset is retained as a fallback layer at every breakpoint so the FV never goes blank if a dedicated asset cannot be served.
 * Loaded after top-hero-live-visual.css.
 */

.c-hero--top .c-hero-brand-media {
  background-color: #020610;
  background-image:
    url("/wp-content/themes/lit-aid/assets/images/hero/lit-aid-fv-wide-blue-torch-2560x1440.webp?v=20260804-4"),
    url("/wp-content/themes/lit-aid/assets/images/hero/lit-aid-fv-blue-torch-1920x1280.webp?v=20260804-4");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

/* Keep the <picture> markup for semantics/future cleanup, but render via the verified same-host CSS path. */
.c-hero--top .c-hero-brand-media img {
  opacity: 0 !important;
}

@media (max-width: 1200px) and (min-width: 901px) {
  .c-hero--top .c-hero-brand-media {
    background-image: url("/wp-content/themes/lit-aid/assets/images/hero/lit-aid-fv-blue-torch-1920x1280.webp?v=20260804-4");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

@media (max-width: 900px) {
  .c-hero--top .c-hero-brand-media {
    background-image:
      url("/wp-content/themes/lit-aid/assets/images/hero/lit-aid-fv-mobile-blue-torch-1080x1440.webp?v=20260804-4"),
      url("/wp-content/themes/lit-aid/assets/images/hero/lit-aid-fv-blue-torch-1920x1280.webp?v=20260804-4");
    background-position: 66% center, 66% center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
  }
}

@media (max-width: 620px) {
  .c-hero--top .c-hero-brand-media {
    background-position: 72% center, 72% center;
  }
}