/* Wrapper: full width, height driven by text + padding */
.hover-headline-box {
  position: relative;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 50px 20px;                /* = +100px height (50 top + 50 bottom) */
  overflow: hidden;                  /* crop the image to the box */
  background: #111;                  /* fallback behind image */
}

/* The headline stays visible on hover */
.hover-headline {
  position: relative;
  margin: 0;                         /* tighter height calculation */
  z-index: 2;                        /* above the image */
  color: #fff;
  text-align: center;
}

/* Image layer: fills box, center-cropped, hidden until hover */
.hover-headline-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* fill without distortion */
  object-position: center;           /* centered in the box */
  opacity: 0;                        /* hidden by default */
  transform: scale(1.05);            /* subtle zoom-out on hover */
  transition: opacity 0.45s ease, transform 0.6s ease;
  z-index: 1;                        /* behind the text */
  pointer-events: none;              /* keep hover on the box, not the img */
}

/* Hover: fade image in behind text */
.hover-headline-box:hover .hover-headline-img {
  opacity: 1;
  transform: scale(1);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hover-headline-img {
    transition: opacity 0.2s linear;
    transform: none;
  }
  .hover-headline-box:hover .hover-headline-img {
    transform: none;
  }

  .hover-headline-box { border: 2px solid #fff; border-radius: 12px; }
.hover-headline-box:hover { box-shadow: 0 0 10px rgba(255,255,255,0.35); }

}