/*
 * Häcker – Galeria na stronie głównej.
 *
 * Dwa mechanizmy, o których łatwo zapomnieć przy tej galerii:
 *
 * 1. Elementor układa ją JS-em: zdjęcia mają position:absolute, a ich `top`
 *    to `((100% / rows) + (vgap / rows)) * row`, gdzie 100% odnosi się do
 *    WYSOKOŚCI KONTENERA. Nadpisanie tej wysokości rozjeżdża odstępy między
 *    rzędami – dlatego przycinamy opakowanie, a kontenera nie dotykamy.
 *
 * 2. .hg-teaser jest kontenerem zapytań, ale jednostki cqw działają dopiero
 *    w jego POTOMKACH – element nigdy nie jest własnym kontenerem. Wyliczenia
 *    siedzą więc w .hg-teaser__inner.
 */

.hg-teaser {
	container-type: inline-size;
	display: block;
}

.hg-teaser__inner {
	/* Wartości brane ze stylesheetu, nie ze stylu inline – inaczej reguły
	   responsywne nie miałyby jak zadziałać. */
	--hg-cols: var(--hg-cols-desktop, 3);
	--hg-gap: var(--hg-gap-desktop, 20px);
	--hg-rows: var(--hg-rows-desktop, 3);

	/* Szerokość kolumny -> wysokość rzędu -> wysokość widocznego obszaru. */
	--hg-col: calc((100cqw - (var(--hg-cols) - 1) * var(--hg-gap)) / var(--hg-cols));
	--hg-row: calc(var(--hg-col) * var(--hg-ratio, .66667));
	--hg-vgap: var(--hg-rowgap, var(--hg-gap));
	--hg-max: calc(var(--hg-row) * var(--hg-rows) + var(--hg-vgap) * (var(--hg-rows) - 1));
	--hg-fade: calc(var(--hg-row) * var(--hg-fadefrac, .5));

	position: relative;
	display: block;
}

@supports (container-type: inline-size) {

	/* Przycinamy OPAKOWANIE, nie kontener galerii – kontener jest układem
	   odniesienia dla zdjęć i zmiana jego wysokości przesunęłaby rzędy. */
	.hg-teaser__inner {
		max-height: var(--hg-max);
		overflow: hidden;
	}

	/* Gradient wtapiający dolną połowę ostatniego widocznego rzędu w tło. */
	.hg-teaser__inner::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--hg-fade);
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, .72) 55%,
			var(--hg-bg, #fff) 90%,
			var(--hg-bg, #fff) 100%
		);
		pointer-events: none;
	}
}

/* Opcjonalne zacieśnienie odstępu pionowego (config `row_gap`).
   Zmieniamy --vgap Elementora razem z naszą wysokością, żeby pozycje
   rzędów pozostały spójne. Bez `row_gap` odstęp zostaje taki jak w widgecie. */
.hg-teaser[style*="--hg-rowgap"] .elementor-gallery__container {
	--vgap: var(--hg-rowgap);
}

/* ---------------------------------------------------------------- */
/* Przycisk „Zobacz całą galerię”                                    */
/* ---------------------------------------------------------------- */

.hg-more {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.hg-more__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border: 1px solid rgba(27, 27, 27, .35);
	border-radius: 2px;
	background: transparent;
	color: #1B1B1B;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.hg-more__btn:hover,
.hg-more__btn:focus-visible {
	background: #1B1B1B;
	border-color: #1B1B1B;
	color: #fff;
	text-decoration: none;
}

.hg-more__btn:focus-visible {
	outline: 2px solid #1B1B1B;
	outline-offset: 3px;
}

.hg-more__arrow {
	flex: 0 0 auto;
	transition: transform .25s ease;
}

.hg-more__btn:hover .hg-more__arrow,
.hg-more__btn:focus-visible .hg-more__arrow {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------- */
/* RWD – kolumny, odstęp i liczba rzędów zgodnie z ustawieniami widgetu */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.hg-teaser__inner {
		--hg-cols: var(--hg-cols-tablet, var(--hg-cols-desktop, 3));
		--hg-gap: var(--hg-gap-tablet, var(--hg-gap-desktop, 20px));
		--hg-rows: var(--hg-rows-tablet, var(--hg-rows-desktop, 3));
	}
}

@media (max-width: 767px) {
	.hg-teaser__inner {
		--hg-cols: var(--hg-cols-mobile, 1);
		--hg-gap: var(--hg-gap-mobile, var(--hg-gap-desktop, 20px));
		--hg-rows: var(--hg-rows-mobile, 3);
	}

	.hg-more {
		margin-top: 22px;
	}

	.hg-more__btn {
		width: 100%;
		justify-content: center;
		padding: 15px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hg-more__btn,
	.hg-more__arrow {
		transition: none;
	}
}