/* =============================================================================
   Shared inner-page heroes — ~75vh (three-quarters viewport), one visual system
   Use with: class="headerSection site-page-hero" (+ page-specific id/classes)
   Load after page stylesheets so these rules win.
   ============================================================================= */

.site-page-hero.headerSection {
  box-sizing: border-box;
  isolation: isolate;
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 75vh;
  max-height: 75vh;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.site-page-hero.headerSection::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(28, 28, 30, 0.58) 0%,
    rgba(16, 16, 18, 0.74) 45%,
    rgba(8, 8, 10, 0.82) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.site-page-hero .header-content-container,
.site-page-hero .header-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40rem;
}

.site-page-hero .headerText {
  margin: 0 auto;
  text-align: center;
  font-family: var(--title-font) !important;
  font-weight: var(--font-semi-bold);
  font-size: clamp(2.35rem, 7.5vw, 3.75rem);
  line-height: 1.08;
  color: #fff;
  -webkit-text-stroke: 0;
  text-transform: capitalize;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.45),
    0 12px 40px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.02em;
}

.site-page-hero .headerText .small {
  display: block;
  margin-top: 0.2em;
  font-size: clamp(1.85rem, 5.5vw, 3rem);
  font-weight: var(--font-medium);
  font-style: italic;
  color: hsl(0, 0%, 92%);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.site-page-hero .headerText .no-fill {
  font-style: italic;
  color: hsl(0, 0%, 92%);
  -webkit-text-stroke: 0;
}

/* Prefer reduced motion: no layout change, only safer contrast */
@media (prefers-reduced-motion: reduce) {
  .site-page-hero.headerSection::before {
    background: linear-gradient(
      180deg,
      rgba(22, 22, 24, 0.68) 0%,
      rgba(10, 10, 12, 0.85) 100%
    );
  }
}