/* ============================================================
   Hero Banner Section
   ============================================================ */

.section-hero-banner {
  margin-top: calc(-1 * var(--header-height, 86px)) !important;
  padding-top: 0 !important;
}

.hero-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hero-banner__media {
  position: relative;
  width: 100%;
}

.hero-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Dual gradient: dark at top (nav readability) + dark on right (text readability) */
.hero-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9) 0,
      rgba(0, 0, 0, 0.7) 80px,
      rgba(0, 0, 0, 0.4) 150px,
      rgba(0, 0, 0, 0.15) 220px,
      transparent 320px
    ),
    linear-gradient(
      to left,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0.08) 65%,
      transparent 100%
    );
}

/* Content block: bottom-right on desktop */
.hero-banner__content {
  position: absolute;
  bottom: 3.5rem;
  right: 4rem;
  text-align: right;
  max-width: clamp(380px, 34vw, 640px);
  z-index: 2;
}

.hero-banner__eyebrow {
  display: block;
  font-size: clamp(0.75rem, 0.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e17512;
  margin-bottom: 0.75rem;
}

.hero-banner__heading {
  font-size: clamp(2.2rem, 3.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  text-wrap: balance;
}

.hero-banner__btn {
  display: inline-block;
  background: #e17512;
  color: #ffffff;
  padding: clamp(0.8rem, 1.1vw, 1.5rem) clamp(2rem, 2.8vw, 4rem);
  font-size: clamp(1rem, 1.3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.hero-banner__btn:hover {
  background: #c96510;
  box-shadow: 0 4px 20px rgba(225, 117, 18, 0.45);
}

/* ── Homepage: Nav bar overlays Hero (announcement bar stays above) ── */

/* Boost z-index so nav bar always renders above the hero */
.section-header {
  z-index: 100 !important;
}

/* Transparent nav when floating over the hero at top of page */
.section-header:not(.shopify-section-header-sticky) .header-wrapper {
  background-color: transparent !important;
  background: transparent !important;
  background-attachment: initial !important;
  box-shadow: none !important;
}

/* Home page only: make logo and icons dark so they're readable on light hero images */
.template-index .section-header:not(.shopify-section-header-sticky) .header__icon {
  color: #000 !important;
}

.template-index .section-header:not(.shopify-section-header-sticky) .header__heading-logo {
  filter: invert(1);
}

/* Keep header hidden once scrolled past — only visible at page top */
.section-header.shopify-section-header-sticky .header-wrapper {
  transform: translateY(-100%) !important;
}

/* ── Responsive ── */

/* Tablet */
@media screen and (max-width: 989px) {
  .hero-banner__content {
    right: 2.5rem;
    bottom: 2.5rem;
    max-width: 380px;
  }
}

/* Mobile */
@media screen and (max-width: 749px) {
  /* Show only the middle 75% of the image (crop 10% left, 15% right) */
  .hero-banner__img {
    width: calc(100% / 0.75);       /* 133.333% — scale so 75% fills the container */
    margin-left: calc(-10% / 0.75); /* -13.333% — shift left so the crop starts at 10% */
  }

  .hero-banner__content {
    bottom: 2rem;
    left: 0;
    right: 0;
    text-align: center;
    max-width: 100%;
    padding: 0 1.5rem;
  }

  .hero-banner__heading {
    font-size: 2.475rem;
  }

  .hero-banner__btn {
    padding: 1.16rem 2.97rem;
    font-size: 1.46rem;
  }
}