/*
 * Ховер-зум изображений в карточках.
 * ТЗ десктоп 28.08 — пп. 6д, 11, 14, 16, 17 и «Другие регионы».
 *
 * ПАРАМЕТРЫ (решение принято 31.08, «делаем по эталону»).
 * Эталонный блок `/lifestyle-menedzhment/` → «Комплексная забота» был
 * проверен: самого зума там нет, есть только подготовленный контейнер —
 * `overflow: hidden` на обёртке и `object-fit: cover` на картинке.
 * Поэтому берём коэффициент 1.075 — единственное масштабирование, уже
 * живущее в теме (кейфрейм `travel-ideas-cards-slider-kb`), чтобы в
 * проекте не появилось второе число «из ниоткуда». Длительность и кривая —
 * из общих токенов (`--ev-dur-image`, `--ev-ease` в style.css).
 *
 * Эталонный блок правится здесь же, первым: он и задаёт паттерн.
 *
 * ДВА СПОСОБА.
 * 1. Где картинка это <img> внутри обёртки с `overflow: hidden` —
 *    масштабируем саму картинку.
 * 2. Где изображение задано фоном на карточке (регионы) — масштабировать
 *    карточку нельзя, вместе с ней уедут заголовок и стрелка. Рисуем фон
 *    на `::before` и двигаем его. `background-image: inherit` берёт
 *    вычисленное значение с родителя, поэтому per-item фоны Elementor и
 *    CSS-переменные (`--rc-card-bg`, `--slide-bg`) работают без правок.
 *
 * `@media (hover: hover)` обязателен: на тач-экранах `:hover` залипает
 * после тапа — на этом в проекте уже обжигались (см. комментарий в
 * `projects-slider.css` и MOBILE-SPEC.md §7).
 */

@media (hover: hover) {

	/* --- 1. Картинка внутри обёртки ---------------------------------- */

	/* Эталон: «Комплексная забота» на /lifestyle-menedzhment/. */
	div.info-slider-cards .info-slider-cards__image,
	/* Карточки направлений на странице региона (пп. 14, 16). */
	div.places-slider .places-slider__image,
	/* Большие карточки в табах регионов. */
	.regions-category-tabs__image {
		transition: transform var(--ev-dur-image, 600ms) var(--ev-ease, ease-out);
		will-change: transform;
	}

	div.info-slider-cards .info-slider-cards__slide:hover .info-slider-cards__image,
	div.places-slider .places-slider__card:hover .places-slider__image,
	.regions-category-tabs__media:hover .regions-category-tabs__image {
		transform: scale(var(--ev-zoom, 1.075));
	}

	/* --- 2. Изображение задано фоном ---------------------------------- */

	/*
	 * Карточки регионов (п. 11), слайдер «Страны ЮВА» на главной (п. 6д),
	 * слайдер мест на странице субрегиона (п. 17, /regions/bangkok/)
	 * и карточки «Другие регионы» (Elementor Loop Grid, класс `cat-card`).
	 */
	.regions-category__card::before,
	div.regions-slider .regions-slider__slide::before,
    div.region-places-slider .region-places-slider__slide::before,
    div.articles-slider .articles-slider__slide::before,
    div.restaurant-regions-slider .rrs__slide::before,
    .cat-card::before,
	/* Карточки направлений из Elementor Loop template #1196. */
	.elementor-1196 .elementor-element.elementor-element-8cfac62::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image: inherit;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transition: transform var(--ev-dur-image, 600ms) var(--ev-ease, ease-out);
		will-change: transform;
		pointer-events: none;
	}

	div.restaurant-regions-slider .rrs__slide::before {
		background-image: var(--slide-bg);
	}

	/*
	 * В loop template #1196 Elementor сам рисует градиент в ::before,
	 * поэтому `background-image: inherit` наследовал не фото, а только этот
	 * градиент. URL фона передаёт JS в переменную; оба слоя масштабируются
	 * вместе, тогда изображение действительно увеличивается на hover.
	 */
	.elementor-1196 .elementor-element.elementor-element-8cfac62::before {
		background-image:
			linear-gradient(180deg, rgba(0, 0, 0, 0) 61%, #000000 91%),
			var(--ev-region-loop-card-image) !important;
		/* Elementor задаёт своему overlay opacity: .5; фото должно быть 100%. */
		opacity: 1 !important;
	}

	/*
	 * После того как JS передал URL в масштабируемый слой, убираем исходный
	 * фон контейнера. Иначе браузер рисует два одинаковых фото — статичное
	 * и увеличенное — и hover выглядит как размытие/двойное изображение.
	 */
	.elementor-1196 .elementor-element.elementor-element-8cfac62.ev-region-loop-card-zoom-ready {
		background-image: none !important;
	}

	.regions-category__card:hover::before,
	div.regions-slider .regions-slider__slide:hover::before,
    div.region-places-slider .region-places-slider__slide:hover::before,
    div.articles-slider .articles-slider__slide:hover::before,
    div.restaurant-regions-slider .rrs__slide:hover::before,
    .cat-card:hover::before,
	.elementor-1196 .elementor-element.elementor-element-8cfac62:hover::before {
		transform: scale(var(--ev-zoom, 1.075));
	}

	/*
	 * Loop-grid карточка приходит от Elementor без обрезки — без этого
	 * увеличенный фон вылезет за скруглённые углы на соседние карточки.
	 */
	.cat-card,
	.elementor-1196 .elementor-element.elementor-element-8cfac62 {
		overflow: hidden;
	}

	.elementor-1196 .elementor-element.elementor-element-8cfac62 > .e-con-inner {
		position: relative;
		z-index: 1;
	}
}

/*
 * Движение — украшение, а не смысл. Кому оно мешает, тому его нет.
 */
@media (prefers-reduced-motion: reduce) {
	div.info-slider-cards .info-slider-cards__image,
	div.places-slider .places-slider__image,
	.regions-category-tabs__image,
	.regions-category__card::before,
	div.regions-slider .regions-slider__slide::before,
    div.region-places-slider .region-places-slider__slide::before,
    div.articles-slider .articles-slider__slide::before,
    div.restaurant-regions-slider .rrs__slide::before,
    .cat-card::before,
	.elementor-1196 .elementor-element.elementor-element-8cfac62::before {
		transition: none;
	}
}