/* Shared light HERO treatment for all journey pages */

/* Listing pages */
.hero.hero-light-theme {
  background: #f4eee3 !important;
}
.hero.hero-light-theme .hero-media img {
  object-position: center;
  filter: saturate(.96) brightness(1.04) !important;
}
.hero.hero-light-theme::after {
  background:
    linear-gradient(
      to left,
      rgba(255,250,242,.98) 0%,
      rgba(255,250,242,.94) 25%,
      rgba(255,250,242,.76) 43%,
      rgba(255,250,242,.34) 61%,
      rgba(255,250,242,.06) 76%,
      transparent 86%
    ),
    linear-gradient(to top, rgba(255,250,242,.22) 0%, transparent 34%) !important;
}
.hero.hero-light-theme .hero-inner {
  color: #23251f !important;
}
.hero.hero-light-theme .hero-inner > * {
  max-width: 760px;
}
.hero.hero-light-theme .eyebrow {
  color: #238c87 !important;
}
.hero.hero-light-theme h1 {
  max-width: 790px;
  color: #26332d !important;
  text-shadow: none !important;
}
.hero.hero-light-theme .hero-lead {
  max-width: 720px;
  color: rgba(35,37,31,.78) !important;
}
.hero.hero-light-theme .btn-primary {
  color: #fff !important;
  background: #238c87 !important;
  box-shadow: 0 14px 34px rgba(35,140,135,.24) !important;
}
.hero.hero-light-theme .btn-ghost {
  color: #235f5a !important;
  border-color: rgba(35,95,90,.28) !important;
  background: rgba(255,253,248,.68) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Individual journey pages */
:is(.beach-hero,.death-hero,.desert-hero,.journey-hero,.galilee-hero,.nepal-hero).hero-light-theme {
  position: relative;
  isolation: isolate !important;
  color: #26332d !important;
  background: #f4eee3 !important;
}
:is(.beach-hero,.death-hero,.desert-hero,.journey-hero,.galilee-hero,.nepal-hero).hero-light-theme::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to left,
      rgba(255,250,242,.99) 0%,
      rgba(255,250,242,.95) 26%,
      rgba(255,250,242,.78) 44%,
      rgba(255,250,242,.38) 61%,
      rgba(255,250,242,.07) 77%,
      transparent 88%
    ),
    linear-gradient(to top, rgba(255,250,242,.18), transparent 38%);
}

/* Put the photography below the light mask */
.hero-light-theme > .hero-bg,
.hero-light-theme > .hero-image,
.hero-light-theme > .hero-media {
  z-index: 0 !important;
}
.hero-light-theme > .hero-content,
.hero-light-theme > .hero-inner {
  position: relative;
  z-index: 2 !important;
}
.hero-light-theme > .hero-scroll {
  z-index: 3 !important;
}
.hero-light-theme .hero-bg img {
  filter: saturate(.98) brightness(1.04) !important;
}

/* Remove the previous dark masks while preserving each page's photograph */
.hero-page-beach .hero-bg {
  background-image: url('../journeys/beach/hero_beach.webp') !important;
  background-size: cover !important;
  background-position: center !important;
}
.hero-page-death .hero-bg {
  background: url('../journeys/death-as-teacher/hero-dead-sea.webp') center/cover no-repeat !important;
  filter: saturate(.96) brightness(1.04) !important;
}
.hero-page-galilee .hero-bg {
  background-image: url('../journeys/kesher-savta-galilee/hero-stream.webp') !important;
  background-size: cover !important;
  background-position: center !important;
}
.hero-page-nepal-grandparents .hero-bg {
  background-image: url('../journeys/nepal-kesher-savta/village-group.webp') !important;
  background-size: cover !important;
  background-position: center !important;
}
.hero-page-desert .hero-bg::after,
.hero-page-laos .hero-bg::after,
.hero-page-nepal-wisdom .hero-bg::after {
  background: transparent !important;
}
.hero-page-georgia .hero-gradient {
  background: transparent !important;
}
.hero-page-georgia .hero-noise,
.hero-page-georgia .hero-map-line {
  opacity: .08 !important;
}
.hero-light-theme .hero-wave,
.hero-light-theme .hero-glow,
.hero-light-theme .hero-sand-glow,
.hero-light-theme .hero-light,
.hero-light-theme .hero-mist {
  opacity: .16 !important;
}

/* Dark, readable copy on the cream side */
.hero-light-theme .hero-copy,
.hero-light-theme .hero-copy h1,
.hero-light-theme .hero-title {
  color: #26332d !important;
  text-shadow: none !important;
}
.hero-light-theme .hero-copy h1 span,
.hero-light-theme .hero-title span {
  color: #238c87 !important;
}
.hero-light-theme .hero-subtitle {
  color: #235f5a !important;
  text-shadow: none !important;
}
.hero-light-theme .hero-text {
  color: rgba(35,37,31,.78) !important;
  text-shadow: none !important;
}
.hero-light-theme .hero-pill {
  color: #238c87 !important;
  border-color: rgba(35,95,90,.20) !important;
  background: rgba(255,250,242,.76) !important;
  box-shadow: 0 10px 30px rgba(35,37,31,.07) !important;
}
.hero-light-theme .hero-facts > div,
.hero-light-theme .hero-fact {
  color: #26332d !important;
  border-color: rgba(35,95,90,.16) !important;
  background: rgba(255,253,248,.72) !important;
  box-shadow: 0 10px 28px rgba(35,37,31,.06) !important;
}
.hero-light-theme .hero-facts small,
.hero-light-theme .hero-fact small {
  color: rgba(35,37,31,.62) !important;
  opacity: 1 !important;
}
.hero-light-theme .hero-facts strong,
.hero-light-theme .hero-fact strong {
  color: #26332d !important;
}
.hero-light-theme .ghost-button {
  color: #235f5a !important;
  border-color: rgba(35,95,90,.25) !important;
  background: rgba(255,253,248,.72) !important;
  box-shadow: 0 10px 28px rgba(35,37,31,.06) !important;
}
.hero-light-theme .hero-scroll {
  color: #235f5a !important;
  text-shadow: none !important;
}
.hero-light-theme .hero-scroll span {
  border-color: rgba(35,95,90,.62) !important;
  background: linear-gradient(180deg, transparent, #235f5a) !important;
}
.hero-light-theme .hero-scroll span::after,
.hero-light-theme .hero-scroll span:after {
  background: #235f5a !important;
}

@media (max-width: 760px) {
  .hero.hero-light-theme {
    min-height: 76vh !important;
    padding: 112px 0 44px !important;
    align-items: end !important;
  }
  .hero.hero-light-theme::after {
    background:
      linear-gradient(to top, rgba(255,250,242,.99) 0%, rgba(255,250,242,.95) 43%, rgba(255,250,242,.48) 68%, rgba(255,250,242,.05) 89%),
      linear-gradient(to left, rgba(255,250,242,.50), transparent 70%) !important;
  }
  .hero.hero-light-theme .hero-inner {
    width: calc(100% - 26px) !important;
  }

  :is(.beach-hero,.death-hero,.desert-hero,.journey-hero,.galilee-hero,.nepal-hero).hero-light-theme::before {
    background:
      linear-gradient(to bottom, rgba(255,250,242,.99) 0%, rgba(255,250,242,.96) 44%, rgba(255,250,242,.76) 64%, rgba(255,250,242,.20) 82%, transparent 100%),
      linear-gradient(to left, rgba(255,250,242,.32), transparent 72%);
  }
  .hero-light-theme .hero-copy {
    position: relative;
    z-index: 4;
  }
  .hero-light-theme .hero-copy h1,
  .hero-light-theme .hero-title {
    font-size: clamp(3.1rem, 16vw, 5.4rem) !important;
  }
}
