/*
 * Hero — single image at top of front page.
 *
 * `.hero` (existing) keeps the legacy CSS-background fallback.
 * `.hero.hero--image` is the variant when an admin sets an ACF hero_image;
 * the <img> fills the hero box with object-fit: cover.
 */

.hero.hero--image {
  background: #000;       /* visible while image loads */
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 600px;      /* matches legacy .hero */
}

.hero.hero--image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 600px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1024px) {
  .hero.hero--image,
  .hero.hero--image img { min-height: 350px; }
}

@media (max-width: 640px) {
  .hero.hero--image,
  .hero.hero--image img { min-height: 300px; }
}

@media (max-width: 480px) {
  .hero.hero--image,
  .hero.hero--image img { min-height: 250px; }
}