/* ==========================================================================
   Home page hero image. Only loaded when config.yml hero.image exists.
   Phones: the photo is a full-width band under the text (uncropped).
   720px and up: the photo is the background, under a navy overlay.
   ========================================================================== */
.hero-has-image { position: relative; overflow: hidden; }
.hero-media { display: block; }
.hero-img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 639; }

/* Phones: text on the existing brand gradient, photo below it. */
@media (max-width: 719px) {
  .hero-has-image { display: flex; flex-direction: column; }
  .hero-has-image .hero-media { order: 2; }
  .hero-has-image .hero-inner { order: 1; padding-bottom: 40px; }
}

/* Tablet and up: photo behind the text. */
@media (min-width: 720px) {
  .hero-has-image .hero-media { position: absolute; inset: 0; }
  .hero-has-image .hero-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 62% 55%; }
  .hero-has-image::after { /* brand-navy overlay, strongest behind the text on the left */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg,
      rgba(15, 23, 42, .78) 0%, rgba(15, 23, 42, .70) 38%, rgba(15, 23, 42, .38) 62%, rgba(15, 23, 42, .20) 100%);
  }
  .hero-has-image .hero-inner { position: relative; z-index: 1; }
  .hero-has-image .hero-title, .hero-has-image .hero-sub { text-shadow: 0 1px 2px rgba(15, 23, 42, .35); }
}
@media (min-width: 720px) and (max-width: 959px) {
  .hero-has-image::after {
    background: linear-gradient(90deg, rgba(15, 23, 42, .80) 0%, rgba(15, 23, 42, .72) 55%, rgba(15, 23, 42, .40) 100%);
  }
}
/* Wide screens: let the hero grow with the width so the photo isn't cropped to a thin strip. */
@media (min-width: 1400px) {
  .hero-has-image { display: flex; flex-direction: column; justify-content: center; min-height: clamp(450px, 32vw, 620px); }
  .hero-has-image .hero-inner { width: 100%; }
}