/* Page banners: photography behind a shadowed navy scrim.
   Titles and layout remain in Blade.

   Sources live in images/banners/source/ as 16:9 originals; the cropped
   1920x640 (desktop) and 1080x900 (mobile) versions used below are generated
   from them. Regenerate the crops rather than pointing this file at the
   sources, which are ~800 KB each and the wrong shape for both breakpoints.

   Each image was composed with an open middle - a blank wall, a window, a
   central aisle - so the centred page title sits over empty background
   instead of across someone's face. Keep that in mind when swapping any of
   them: a centred subject will fight the title. */

.slppa-icon-banner {
  background-color: #091c32;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The scrim sits in the background stack, above the photo: darker top and
   bottom, lighter through the middle, so the photograph still reads while the
   white title keeps its contrast. */
.slppa-icon-banner.banner-about {
  background-image:
    linear-gradient(180deg, rgba(9, 28, 50, .86) 0%, rgba(9, 28, 50, .68) 50%, rgba(9, 28, 50, .88) 100%),
    url("../images/banners/photos/about-desktop.jpg") !important;
}

.slppa-icon-banner.banner-news {
  background-image:
    linear-gradient(180deg, rgba(9, 28, 50, .86) 0%, rgba(9, 28, 50, .68) 50%, rgba(9, 28, 50, .88) 100%),
    url("../images/banners/photos/news-desktop.jpg") !important;
}

.slppa-icon-banner.banner-gallery {
  background-image:
    linear-gradient(180deg, rgba(9, 28, 50, .86) 0%, rgba(9, 28, 50, .68) 50%, rgba(9, 28, 50, .88) 100%),
    url("../images/banners/photos/gallery-desktop.jpg") !important;
}

.slppa-icon-banner.banner-resources {
  background-image:
    linear-gradient(180deg, rgba(9, 28, 50, .86) 0%, rgba(9, 28, 50, .68) 50%, rgba(9, 28, 50, .88) 100%),
    url("../images/banners/photos/resources-desktop.jpg") !important;
}

.slppa-icon-banner.banner-contact {
  background-image:
    linear-gradient(180deg, rgba(9, 28, 50, .86) 0%, rgba(9, 28, 50, .68) 50%, rgba(9, 28, 50, .88) 100%),
    url("../images/banners/photos/contact-desktop.jpg") !important;
}

.slppa-icon-banner.banner-learning {
  background-image:
    linear-gradient(180deg, rgba(9, 28, 50, .86) 0%, rgba(9, 28, 50, .68) 50%, rgba(9, 28, 50, .88) 100%),
    url("../images/banners/photos/learning-desktop.jpg") !important;
}

.slppa-icon-banner.banner-workshops {
  background-image:
    linear-gradient(180deg, rgba(9, 28, 50, .86) 0%, rgba(9, 28, 50, .68) 50%, rgba(9, 28, 50, .88) 100%),
    url("../images/banners/photos/workshops-desktop.jpg") !important;
}

.slppa-icon-banner.banner-membership {
  background-image:
    linear-gradient(180deg, rgba(9, 28, 50, .86) 0%, rgba(9, 28, 50, .68) 50%, rgba(9, 28, 50, .88) 100%),
    url("../images/banners/photos/membership-desktop.jpg") !important;
}

.slppa-icon-banner.banner-registration {
  background-image:
    linear-gradient(180deg, rgba(9, 28, 50, .86) 0%, rgba(9, 28, 50, .68) 50%, rgba(9, 28, 50, .88) 100%),
    url("../images/banners/photos/registration-desktop.jpg") !important;
}

/* Blade's own ::after already paints rgba(0,0,0,.4) over .breadcrumbs-wrap.
   The scrim above does that job now, so keep this layer light or the photo
   washes out to flat navy. */
.slppa-icon-banner.breadcrumbs-wrap::after {
  background: rgba(3, 12, 23, .10);
}

@media (max-width: 767px) {
  /* Taller crops of the same photographs: the 1920x640 desktop files would
     centre-crop to an unreadable sliver on a phone. Slightly heavier scrim,
     because the title wraps and covers more of the image. */
  .slppa-icon-banner.banner-about {
    background-image:
      linear-gradient(180deg, rgba(9, 28, 50, .88) 0%, rgba(9, 28, 50, .74) 50%, rgba(9, 28, 50, .90) 100%),
      url("../images/banners/photos/about-mobile.jpg") !important;
  }

  .slppa-icon-banner.banner-news {
    background-image:
      linear-gradient(180deg, rgba(9, 28, 50, .88) 0%, rgba(9, 28, 50, .74) 50%, rgba(9, 28, 50, .90) 100%),
      url("../images/banners/photos/news-mobile.jpg") !important;
  }

  .slppa-icon-banner.banner-gallery {
    background-image:
      linear-gradient(180deg, rgba(9, 28, 50, .88) 0%, rgba(9, 28, 50, .74) 50%, rgba(9, 28, 50, .90) 100%),
      url("../images/banners/photos/gallery-mobile.jpg") !important;
  }

  .slppa-icon-banner.banner-resources {
    background-image:
      linear-gradient(180deg, rgba(9, 28, 50, .88) 0%, rgba(9, 28, 50, .74) 50%, rgba(9, 28, 50, .90) 100%),
      url("../images/banners/photos/resources-mobile.jpg") !important;
  }

  .slppa-icon-banner.banner-contact {
    background-image:
      linear-gradient(180deg, rgba(9, 28, 50, .88) 0%, rgba(9, 28, 50, .74) 50%, rgba(9, 28, 50, .90) 100%),
      url("../images/banners/photos/contact-mobile.jpg") !important;
  }

  .slppa-icon-banner.banner-learning {
    background-image:
      linear-gradient(180deg, rgba(9, 28, 50, .88) 0%, rgba(9, 28, 50, .74) 50%, rgba(9, 28, 50, .90) 100%),
      url("../images/banners/photos/learning-mobile.jpg") !important;
  }

  .slppa-icon-banner.banner-workshops {
    background-image:
      linear-gradient(180deg, rgba(9, 28, 50, .88) 0%, rgba(9, 28, 50, .74) 50%, rgba(9, 28, 50, .90) 100%),
      url("../images/banners/photos/workshops-mobile.jpg") !important;
  }

  .slppa-icon-banner.banner-membership {
    background-image:
      linear-gradient(180deg, rgba(9, 28, 50, .88) 0%, rgba(9, 28, 50, .74) 50%, rgba(9, 28, 50, .90) 100%),
      url("../images/banners/photos/membership-mobile.jpg") !important;
  }

  .slppa-icon-banner.banner-registration {
    background-image:
      linear-gradient(180deg, rgba(9, 28, 50, .88) 0%, rgba(9, 28, 50, .74) 50%, rgba(9, 28, 50, .90) 100%),
      url("../images/banners/photos/registration-mobile.jpg") !important;
  }
}