/* ==========================================================================
   HERO — переключение картинки и фона при наведении
   Требует полей hero_image_hover / hero_bg_hover (ACF) и правок hero.php:
   - .hero получает CSS-переменные --hero-bg / --hero-bg-hover через style="",
     сам background-image берётся отсюда (var()), а не напрямую инлайново —
     так его можно переключить обычным CSS-правилом.
   - .hero-media содержит два <img class="hero-image">: базовый и
     .hero-image-hover-layer (второй слой, показывается по наведению).
   ========================================================================== */

.hero {
	background-image: var( --hero-bg, none );
	transition: background-image 0.4s ease;
}

/* Наведение на медиа-блок (картинку) переключает и фон всей секции.
   :has() поддерживается всеми актуальными браузерами; на случай очень
   старых — ниже есть JS-фолбэк через класс .is-media-hover. */
.hero:has( .hero-media:hover ),
.hero.is-media-hover {
	background-image: var( --hero-bg-hover, var( --hero-bg, none ) );
}

.hero-media {
	position: relative;
}

.hero-image {
	position: relative;
	z-index: 1;
}

.hero-image-hover-layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 490px;
	/*height: 100%;*/
	object-fit: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.hero-media:hover .hero-image-hover-layer {
	opacity: 1;
}

/* На тач-екранах (телефон/планшет) :hover може "залипати" після тапу —
   вмикаємо ефект тільки там, де є справжня миша й наведення. */
@media not all and (hover: hover) and (pointer: fine) {
	.hero:has( .hero-media:hover ),
	.hero.is-media-hover {
		background-image: var( --hero-bg, none );
	}
	.hero-media:hover .hero-image-hover-layer {
		opacity: 0;
	}
}