@charset "utf-8";

/**
 * ============================================================
 * CYBER TEAM — Globalna foto galerija
 *
 * Desktop:
 * - broj kolona kontroliše shortcode parametar columns
 * - dozvoljene vrednosti: 2, 3 ili 4
 *
 * Tablet:
 * - 2 kolone
 *
 * Mobilni:
 * - uvek 2 kolone
 * ============================================================
 */

.ct-global-gallery {
	--ct-global-gallery-columns-desktop: 3;
	--ct-global-gallery-columns-tablet: 2;
	--ct-global-gallery-columns-mobile: 2;
	--ct-global-gallery-gap: 12px;
	--ct-global-gallery-radius: 12px;

	position: relative;
	display: grid;
	grid-template-columns: repeat(
		var(--ct-global-gallery-columns-desktop),
		minmax(0, 1fr)
	);
	gap: var(--ct-global-gallery-gap);

	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/**
 * Eksplicitne desktop kolone.
 * Klase generiše shortcode prema columns parametru.
 */
.ct-global-gallery--columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ct-global-gallery--columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ct-global-gallery--columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ct-global-gallery__item {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;

	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ct-global-gallery-radius);
	background: #edf0f2;
	isolation: isolate;
}

.ct-global-gallery__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

.ct-global-gallery__image {
	position: absolute;
	inset: 0;

	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;

	object-fit: cover;
	object-position: center;

	user-select: none;
	-webkit-user-drag: none;

	transition:
		transform 0.35s ease,
		filter 0.25s ease;
}

/**
 * Jasan keyboard fokus.
 */
.ct-global-gallery__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/**
 * Hover efekat samo na uređajima koji podržavaju hover.
 */
@media (hover: hover) and (pointer: fine) {
	.ct-global-gallery__link:hover .ct-global-gallery__image {
		transform: scale(1.035);
		filter: brightness(0.96);
	}
}

/**
 * Tablet prikaz.
 */

@media (min-width: 768px) and (max-width: 1024px) {
	.ct-global-gallery {
		grid-template-columns: repeat(
			var(--ct-global-gallery-columns-tablet),
			minmax(0, 1fr)
		);

		--ct-global-gallery-gap: 10px;
	}
}





/**
 * Mobilni prikaz:
 * uvek dve kolone, bez obzira na shortcode columns parametar.
 */
@media (max-width: 767px) {
	.ct-global-gallery {
		grid-template-columns: repeat(
			var(--ct-global-gallery-columns-mobile),
			minmax(0, 1fr)
		);

		--ct-global-gallery-gap: 8px;
		--ct-global-gallery-radius: 9px;
	}	
	

	.ct-global-gallery__item {
		aspect-ratio: 4 / 3;
	}
}

/**
 * Elementor Shortcode wrapper mora pravilno da
 * zadrži širinu i visinu galerijskog grida.
 */
.elementor-widget-shortcode:has(.ct-global-gallery),
.elementor-widget-shortcode:has(.ct-global-gallery)
	> .elementor-widget-container,
.elementor-widget-shortcode
	.elementor-shortcode:has(.ct-global-gallery) {
	display: block;
	width: 100%;
	min-width: 0;
}

/**
 * Fallback za browsere bez :has() podrške.
 */
.elementor-shortcode > .ct-global-gallery {
	display: grid;
	width: 100%;
	min-width: 0;
}

/**
 * Korisnici koji su isključili animacije.
 */
@media (prefers-reduced-motion: reduce) {
	.ct-global-gallery__image {
		transition: none;
	}
}