/* Faded blue photos behind the hero banners.
   Images are greyscale WebP; the blend mode tints them with the banner's own navy,
   and the mask fades them in from the right so the text side stays solid.
   Photos from Unsplash (free licence). Sources listed in unsplash-credits.txt.
   Note: the class is .hero-bg, NOT .hero-photo (an old .hero-photo rule exists in the main stylesheet). */

.hero-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--hero-img) var(--hero-pos, center) / cover no-repeat;
  mix-blend-mode: luminosity;
  opacity: .3;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 40%, #000 80%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 40%, #000 80%);
}

/* Home banner: the feature image. Anchored right at full banner height so the physio
   and the knee he's assessing sit clear of the award card on wide screens. The image
   file has its own soft fade on the left edge, so there's no visible seam. */
.hero.hero-bg::before {
  background-size: auto 100%;
  background-position: right bottom;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.35) 30%, #000 55%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.35) 30%, #000 55%);
}

.hero-bg--home             { --hero-img: url("hero-home.webp"); }
.hero-bg--physiotherapists { --hero-img: url("hero-physiotherapists.webp"); --hero-pos: center 42%; }
.hero-bg--treatment        { --hero-img: url("hero-treatment.webp");        --hero-pos: center 55%; }
.hero-bg--prices           { --hero-img: url("hero-prices.webp");           --hero-pos: center 50%; }
.hero-bg--faqs             { --hero-img: url("hero-faqs.webp");             --hero-pos: center 45%; }
.hero-bg--contact          { --hero-img: url("hero-contact.webp");          --hero-pos: center 55%; }

/* Home banner on tablets and phones: the layout stacks, so switch to a tighter crop
   on the physio's face, hands and the knee, fading out towards the buttons */
@media (max-width: 960px) {
  .hero.hero-bg::before {
    background-size: cover;
    background-position: center top;
    opacity: .3;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,.35) 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,.35) 100%);
  }
  .hero-bg--home { --hero-img: url("hero-home-sm.webp"); }
}

/* Phones: text runs full width, so drop the side fade and go fainter; serve smaller files */
@media (max-width: 760px) {
  .hero-bg::before {
    opacity: .18;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero-bg--physiotherapists { --hero-img: url("hero-physiotherapists-sm.webp"); }
  .hero-bg--treatment        { --hero-img: url("hero-treatment-sm.webp"); }
  .hero-bg--prices           { --hero-img: url("hero-prices-sm.webp"); }
  .hero-bg--faqs             { --hero-img: url("hero-faqs-sm.webp"); }
  .hero-bg--contact          { --hero-img: url("hero-contact-sm.webp"); }
}

/* Visitors who ask for higher contrast, and printouts, get the plain banner */
@media (prefers-contrast: more) { .hero-bg::before { display: none; } }
@media print { .hero-bg::before { display: none; } }