/**
 * Product Card Image - hover swap miniatury produktu (zero JS).
 *
 * Swap tylko na urzadzeniach z realnym hoverem; na dotyku zawsze zdjecie
 * bazowe. :focus-visible linku-karty tez odpala swap (nawigacja klawiatura).
 * Hover-zdjecie jest pozycjonowane absolutnie w obrysie bazowego - zero CLS.
 *
 * @package lukuro
 */

.lukuro-card-image {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	/*
	 * Proporcja karty jest wlasnoscia UKLADU, nie pliku. Bez tego wysokosc karty zalezy
	 * od proporcji obrazu i od tego, ktorego kandydata ze `srcset` wybrala przegladarka,
	 * wiec ta sama siatka renderuje sie inaczej na DPR1 i DPR2.
	 *
	 * Zmienna wspolna z `product-carousel.css` - te sama powierzchnie (karte listingu)
	 * renderuja DWA elementy, wiec proporcja nie moze byc wlasnoscia zadnego z nich.
	 * Wartosc emituje PHP z konfiguracji projektu (`image-slots.php`, klucz `card_ratio`).
	 *
	 * Fallback `4/5` jest siatka bezpieczenstwa na wypadek braku emisji, a nie zaleceniem:
	 * to wartosc awaryjna, ktora nie opisuje zadnego projektu. Projekt deklaruje swoja.
	 */
	aspect-ratio: var(--lukuro-card-ratio, 4/5);
}

.lukuro-card-image__primary {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lukuro-card-image__hover {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
	.lukuro-card-image__hover {
		transition: opacity var(--lukuro-card-swap-dur, 250ms) ease;
	}

	.lukuro-card-image--has-hover:hover .lukuro-card-image__hover,
	a:focus-visible .lukuro-card-image--has-hover .lukuro-card-image__hover {
		opacity: 1;
	}

	/* Wariant fade-zoom: hover-zdjecie dojezdza ze skali 1.05 do 1. */
	.lukuro-card-image--zoom .lukuro-card-image__hover {
		transform: scale(1.05);
		transition:
			opacity var(--lukuro-card-swap-dur, 250ms) ease,
			transform calc(var(--lukuro-card-swap-dur, 250ms) * 2) ease;
	}

	.lukuro-card-image--zoom:hover .lukuro-card-image__hover,
	a:focus-visible .lukuro-card-image--zoom .lukuro-card-image__hover {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lukuro-card-image__hover {
		transition: none !important;
		transform: none !important;
	}
}