/* ─── Hero background image system ──────────────────────────────────────── */

/* Base: all hero element types */
#hero,
.about-hero,
.contact-hero {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-color: #0f766e; /* visible before image loads */
  transition: background-color .6s ease;
}

/* Gradient overlay: darker top/bottom, transparent centre */
#hero::before,
.about-hero::before,
.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: background .6s ease;
  background: var(--hero-grad,
    linear-gradient(
      to bottom,
      rgba(15, 118, 110, 0.65) 0%,
      rgba(15, 118, 110, 0.25) 50%,
      rgba(15, 118, 110, 0.65) 100%
    )
  );
}

/* Lift all direct children above the overlay */
#hero > *,
.about-hero > *,
.contact-hero > * {
  position: relative;
  z-index: 1;
}

/* ─── Mobile / iOS Safari ────────────────────────────────────────────────── */
/* background-attachment: fixed is broken on iOS — fall back to scroll.      */
/* JS will apply a transform-based parallax instead.                          */
@media (max-width: 768px) {
  #hero,
  .about-hero,
  .contact-hero {
    background-attachment: scroll;
  }
}

/* ─── Ultra-wide (> 2400 px): cap image, fade edges to brand colour ──────── */
@media (min-width: 2401px) {
  #hero,
  .about-hero,
  .contact-hero {
    background-size: 2400px auto;
    background-position: center center;
  }

  /* Extend the ::before overlay to include left/right fades */
  #hero::before,
  .about-hero::before,
  .contact-hero::before {
    background:
      linear-gradient(to right, rgba(15, 118, 110, 0.92) 0%, transparent 6%),
      linear-gradient(to left,  rgba(15, 118, 110, 0.92) 0%, transparent 6%),
      var(--hero-grad,
        linear-gradient(
          to bottom,
          rgba(15, 118, 110, 0.65) 0%,
          rgba(15, 118, 110, 0.25) 50%,
          rgba(15, 118, 110, 0.65) 100%
        )
      );
  }
}