/*** PAGE BANNER
     - styles_banner.css
     - Updated 26-04-35
***/

.picture-banner {
  /* Banner image sourceset for mobile should be specified in banner part */
  /* background-image: url(https://www.bushheritage.org.au/uploads/main/Images/BBIS/banners/xxxx_400x300.jpg); */
  position: relative;
  background-color: var(--color-charcoal-grey);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 300px;
  background-position: 50% 50%;                                      
}

/* Tear images below the banner - the tear image is added as a pseudo element so it can be positioned at the bottom of the banner and overlap the content below. The tear should match the colour of the top content nblock on the page.
  Inone of the following classes to the picture-banner element to specify which colour of tear to show:
  Mobile: .mobile-white-tear, .mobile-beige-tear, .mobile-coral-tear, .mobile-green-tear, .mobile-pale-green-tear, .mobile-pale-blue-tear
  Desktop: .white-tear, .beige-tear, .coral-tear, .green-tear, .pale-green-tear, .pale-blue-tear
*/
.picture-banner:after {
  /* background-image: url(/image/donation-pages/banner-tears/banner-tear_white.png); */
  height: 45px;
  content: "";
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

/* Tear textures to show on mobile */
.picture-banner.mobile-white-tear:after {
  background-image: url(/image/donation-pages/banner-tears/banner-tear_white.png);
}
.picture-banner.mobile-beige-tear:after {
  background-image: url(/image/donation-pages/banner-tears/banner-tear_beige.png);
}
.picture-banner.mobile-coral-tear:after {
  background-image: url(/image/donation-pages/banner-tears/banner-tear_coral.png);
}
.picture-banner.mobile-green-tear:after {
  background-image: url(/image/donation-pages/banner-tears/banner-tear_green.png);
}
.picture-banner.mobile-pale-green-tear:after {
  background-image: url(/image/donation-pages/banner-tears/banner-tear_pale-green.png);
}
.picture-banner.mobile-pale-blue-tear:after {
  background-image: url(/image/donation-pages/banner-tears/banner-tear_pale-blue.png);
}

@media only screen and (min-width: 576px) {

  /* Tear textures to show on desktop. */
  .picture-banner.white-tear:after {
    background-image: url(/image/donation-pages/banner-tears/banner-tear_white.png);
  }
  .picture-banner.beige-tear:after {
    background-image: url(/image/donation-pages/banner-tears/banner-tear_beige.png);
  }
  .picture-banner.coral-tear:after {
    background-image: url(/image/donation-pages/banner-tears/banner-tear_coral.png);
  }
  .picture-banner.green-tear:after {
    background-image: url(/image/donation-pages/banner-tears/banner-tear_green.png);
  }
  .picture-banner.pale-green-tear:after {
    background-image: url(/image/donation-pages/banner-tears/banner-tear_pale-green.png);
  }
  .picture-banner.pale-blue-tear:after {
    background-image: url(/image/donation-pages/banner-tears/banner-tear_pale-blue.png);
  }

}

/* The container inside the banner is used to position the heading and caption. */
.picture-banner .container {
  text-align: center;
  padding: 1rem;
}

/* Banner heading */
.picture-banner h1 {
  max-width: unset;
  display: inline-block;
  margin: 120px 0 0 0;  
  padding: 15px;
  text-align: center;
  font-size: 1.8rem;  
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, .95);  
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(.5px) saturate(120%);
  text-shadow: 0 0 1px rgba(0, 0, 0, .5), 0 0 5px rgba(0, 0, 0, .5);
}

/* Banner caption, placed at top right */
.banner-caption {
  display: none; /* don't show on mobile */
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 10px;  
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  text-shadow: 0 0 2px rgba(0,0,0,.7);
  opacity: .7;
}

@media only screen and (min-width: 576px) {

  .picture-banner .container {
    padding: 1rem 0;
  }

}

@media only screen and (min-width: 768px) {

  .picture-banner {
    height: 460px;
  }

  .picture-banner .container {
    text-align: left;
  }

  .picture-banner h1 { 
    margin-top: 250px;
    font-size: 2.4rem;
  }

  /* Show the banner caption on desktop. */
  .banner-caption {
    display: block;
  }

}

@media only screen and (min-width: 992px) {

  .picture-banner {
    background-position: center top;
    height: 560px;
  }

  .picture-banner h1 {
    /* margin-top: 250px; */
    font-size: 2.8rem;
  }

}

@media only screen and (min-width: 1200px) { }

/* Fix to prevent horizontal scrollbar on mobile */
.picture-banner .row {
  /* width: 100%; */
}

/*** END page banner ***/