/* Page-specific River Ure photography
   Loaded after the core presentation layer so imagery stays intentional and easy to maintain. */

body.page-overview .premium-hero-media {
  background-image: url('/images/river/river-ure-west-tanfield.webp');
  background-position: center 54%;
}

body.page-river-levels .page-hero {
  background-image: url('/images/river/river-ure-mickley.webp');
  background-size: cover;
  background-position: center 52%;
}

body.page-weather .page-hero {
  background-image: url('/images/river/river-ure-evening.webp');
  background-size: cover;
  background-position: center 58%;
}

body.page-fly-guide .page-hero {
  background-image: url('/images/river/river-ure-woodland.webp');
  background-size: cover;
  background-position: center 52%;
}

/* Give the secondary-page imagery a consistent editorial treatment. */
body.page-river-levels .page-hero::before,
body.page-weather .page-hero::before,
body.page-fly-guide .page-hero::before {
  background:
    linear-gradient(90deg, rgba(5, 22, 15, .88) 0%, rgba(5, 22, 15, .62) 46%, rgba(5, 22, 15, .18) 78%, rgba(5, 22, 15, .08) 100%),
    linear-gradient(0deg, rgba(5, 22, 15, .38), transparent 58%);
}

body.page-river-levels .page-hero,
body.page-weather .page-hero,
body.page-fly-guide .page-hero {
  isolation: isolate;
  background-color: #143426;
}

body.page-river-levels .page-hero::after,
body.page-weather .page-hero::after,
body.page-fly-guide .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%);
}

body.page-river-levels .page-hero > *,
body.page-weather .page-hero > *,
body.page-fly-guide .page-hero > * {
  z-index: 1;
}

@media (max-width: 760px) {
  body.page-overview .premium-hero-media {
    background-position: 62% center;
  }

  body.page-river-levels .page-hero {
    background-position: 58% center;
  }

  body.page-weather .page-hero {
    background-position: 62% center;
  }

  body.page-fly-guide .page-hero {
    background-position: 54% center;
  }
}