/* Hero photo override for honig-aus-ingelheim.de.
   Mobile/tablet use a full-bleed, image-filling crop. Desktop lets the photo fade into
   the text column while keeping the text above the image. */

#honigautomat .hero-photo-frame {
  background-image: url('/images/hero-honigautomat-2026.webp?v=20260909-7');
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
}

#honigautomat .hero-photo-frame > img {
  opacity: 0;
}

html[lang="de"] #honigautomat h1.display-heading {
  font-size: 0;
}

html[lang="de"] #honigautomat h1.display-heading::before {
  content: "Honig aus Ingelheim\A- Direkt vom Imker -";
  display: block;
  white-space: pre;
  font-size: clamp(2.125rem, 10.6vw, 3rem);
}

@media (max-width: 1023px) {
  #honigautomat h1.display-heading {
    text-align: center;
  }

  #honigautomat .hero-photo-frame {
    background-position: center center;
    background-size: cover;
  }
}

@media (min-width: 640px) {
  html[lang="de"] #honigautomat h1.display-heading::before {
    font-size: 3.75rem;
  }
}

@media (min-width: 1024px) {
  html[lang="de"] #honigautomat h1.display-heading::before {
    font-size: 4.5rem;
  }

  html[lang="en"] #honigautomat h1.display-heading {
    margin-bottom: 1rem;
  }

  html[lang="en"] #honigautomat p.mb-8 {
    margin-bottom: 1.25rem;
  }

  html[lang="en"] #honigautomat .mb-7 {
    margin-bottom: 0.75rem;
  }

  #honigautomat .container > .grid > :first-child {
    position: relative;
    z-index: 20;
  }

  #honigautomat .container > .grid > :last-child {
    position: relative;
    z-index: 10;
  }

  #honigautomat .hero-photo-frame {
    --hero-overlap: clamp(7rem, 10vw, 10rem);
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    margin-left: calc(-1 * var(--hero-overlap));
    width: calc(100% + var(--hero-overlap));
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      transparent 24%,
      rgba(0, 0, 0, 0.06) 36%,
      rgba(0, 0, 0, 0.32) 50%,
      rgba(0, 0, 0, 0.68) 64%,
      #000 78%,
      #000 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      transparent 24%,
      rgba(0, 0, 0, 0.06) 36%,
      rgba(0, 0, 0, 0.32) 50%,
      rgba(0, 0, 0, 0.68) 64%,
      #000 78%,
      #000 100%
    );
  }
}