/* Hero with full-bleed photo: flame on top, logo + call to action at the bottom */
.banner.style1.hero-photo {
  --hero-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.82) 100%);
  background: var(--hero-overlay), url("../../images/hero.jpg") center top / cover no-repeat;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

.banner.style1.hero-photo .content {
  align-self: center;
  flex-grow: 0;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4.5rem;
  text-align: center;
}

.hero-logo {
  display: block;
  margin: 0 auto 1.25rem;
  width: min(260px, 60vw);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}

.banner.style1.hero-photo .major {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

/* Phones / portrait screens: use the vertical photo */
@media (orientation: portrait) {
  .banner.style1.hero-photo {
    background: var(--hero-overlay), url("../../images/hero-portrait.jpg") center top / cover no-repeat;
    background-color: #000000;
  }
}

/* Buttons wrap instead of overflowing on narrow screens */
.banner.style1.hero-photo .content {
  min-width: 0;
}

.banner.style1.hero-photo ul.actions li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding-left: 0;
}

.banner.style1.hero-photo ul.actions li .button {
  margin: 0;
}