/* Featured top - allow full-width background to extend */
.featured-top {
  overflow-x: visible;
}

.featured-top .featured-top__inner {
  overflow-x: visible;
  background: transparent;
  width: 100%;
}

.hero-with-background {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  padding-bottom:1em;
	background-color:#e9ecee;
}

/* Remove pseudo background on mobile */
.hero-with-background::before {
  display: none;
}



/* Image block (mobile first) */


.hero-with-background-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-image: url('/_flysystem/fedora/2026-04/A%20canoe%20in%20the%20salish%20sea._0.jpg');
  background-size: cover;
  background-position: left bottom;
  background-repeat: no-repeat;
  margin-bottom: 1rem;
}

/* Content */
.hero-with-background .hero-content {
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}

.hero-with-background .hero-content h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #000;
  text-shadow: none;
}

.hero-with-background .hero-content .hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: #000;
  text-shadow: none;
}

/* Tablet */
@media screen and (min-width: 768px) {
  .hero-with-background {
    padding: 2rem;
    background-color:transparent;
  }

  .hero-with-background .hero-content h1 {
    font-size: 2.5rem;
  }
}

/* Desktop (restore original behavior) */
@media screen and (min-width: 1024px) {
  .hero-with-background {
    position: relative;
    min-height: max(80vh, 700px);
    flex-direction: row;
    align-items: center;
    padding: 2rem 3rem;
    background-color:transparent;
  }

  /* Restore background */
  .hero-with-background::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    height: 100%;
    background-image: url('/_flysystem/fedora/2026-04/A%20canoe%20in%20the%20salish%20sea._0.jpg');
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
    z-index: -1;
  }

  /* Hide inline image */
  .hero-with-background-image {
    display: none;
  }

  /* Restore overlay styles */
  .hero-with-background .hero-content {
    position: relative;
    max-width: 600px;
  }

  .hero-with-background .hero-content h1 {
    font-size: 3.8rem;
    color: #fff;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
  }

  .hero-with-background .hero-content .hero-subtitle {
    font-size: 1.75rem;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
}

/* Quick Links block - solid background so hero image doesn't show through */
.quick-links-featured-block {
  background: #fff;
}