/* ==========================================================================
   HEADER.CSS
   Hero image with dark gradient overlay and name/title text.
   ========================================================================== */

.header {
  position: relative;
  width: 100%;
  height: 55vh;
  min-height: 450px;
  overflow: hidden;
  border-bottom-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
}

/* Oversized photo layer: taller than .header on purpose (see top/height)
   so there is always room to slide it with a transform, no matter how the
   photo's own aspect ratio compares to the header box on a given screen.
   Panning background-position instead (the old approach) broke down on
   small phones, where a portrait photo + a short header box left almost no
   vertical overflow for "cover" to pan through. */
.header__photo {
  position: absolute;
  top: -18%;
  left: 0;
  width: 100%;
  height: 136%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 10%;
  will-change: transform;
}

.header__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
}

.header__text {
  position: absolute;
  bottom: 4rem;
  left: 0;
  width: 100%;
  padding: 0 2rem 1.5rem;
  text-align: center;
  color: #FFFFFF;
}

.header__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.header__subtitle {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-light);
}