/*
 * Płynny hover kafelka (loop-item / etiudy-box) – powiększenie całości.
 *
 * Źródło "szarpnięcia": oryginał ustawiał transform dopiero w :hover,
 * więc przejście startowało z braku transformacji (none). Definiujemy
 * transform w OBU stanach (scale(1) -> scale(...)) + stałą warstwę
 * kompozytora (will-change), dzięki czemu skala interpoluje płynnie,
 * bez wstępnego "opadania".
 */

.etiudy-box {
	transform: scale(1);
	transform-origin: center;
	/* box-shadow zamiast border – nie zmienia rozmiaru, więc nie szarpie. */
	box-shadow: 0 0 0 0 rgba(243, 244, 244, 0);
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		font-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Jeśli w hoverze zmienia się rozmiar tekstu – niech też animuje płynnie. */
.etiudy-box .etiudy-title,
.etiudy-box .etiudy-title .elementor-heading-title,
.etiudy-box .etiudy-arrow,
.etiudy-box .etiudy-arrow svg {
	transition:
		font-size 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1025px) {
	/*
	 * Nadpisujemy oryginalną regułę scale(1.25).
	 * !important, bo pierwotny styl Elementora celuje w ID elementu
	 * (wyższa specyficzność).
	 */
	.etiudy-box:hover,
	.etiudy-box:focus-within {
		transform: scale(1.15);
		box-shadow: 0 0 0 10px #f3f4f4;
		z-index: 100 !important;
	}
}

/* Szacunek dla ustawień dostępności – bez animacji, jeśli użytkownik ich nie chce. */
@media (prefers-reduced-motion: reduce) {
	.etiudy-box,
	.etiudy-box .etiudy-title,
	.etiudy-box .etiudy-title .elementor-heading-title,
	.etiudy-box .etiudy-arrow,
	.etiudy-box .etiudy-arrow svg {
		transition: none !important;
	}
}