/**
 * Galerija i uvećavanje slika: mreža sličica, slajder, slike iz teksta vesti i izgled Fancybox-a.
 *
 * Učitava se samo uz galeriju ili slike u tekstu vesti (inc/gallery.php), posle stilova Fancyapps UI, pa njihove
 * promenljive (--f-*, --fancybox-*) ovde dobijaju boje i oblike sajta. Markup: template-parts/components/gallery.php.
 */

/* ==========================================================================
   1. Mreža sličica
   Šest kolona: sličica zauzima dve (tri u redu). Kada ih na kraju ostane dve ili četiri, one zauzimaju po tri
   (dve u redu), pa je svaki red pun. U uskoj koloni su po dve u redu, a neparna poslednja je cela.
   ========================================================================== */

.photo-gallery {
	container: photo-gallery / inline-size;
}

.photo-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.photo-grid__item {
	grid-column: span 3;
	min-width: 0;
	margin: 0;
}

@container photo-gallery (max-width: 29.99rem) {
	.photo-grid__item:nth-child(odd):last-child {
		grid-column: 1 / -1;
	}
}

@container photo-gallery (min-width: 30rem) {
	.photo-grid__item {
		grid-column: span 2;
	}

	.photo-grid__item:nth-child(3n + 1):nth-last-child(2),
	.photo-grid__item:nth-child(3n + 1):nth-last-child(2) ~ .photo-grid__item,
	.photo-grid__item:nth-child(3n + 1):nth-last-child(4),
	.photo-grid__item:nth-child(3n + 1):nth-last-child(4) ~ .photo-grid__item {
		grid-column: span 3;
	}
}

.photo-grid--one .photo-grid__item {
	grid-column: 1 / -1;
}

.photo-grid__link {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	cursor: zoom-in;
}

.photo-grid__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform calc(var(--dur-slow) * 3) var(--ease-out);
}

/* Jedna slika: u svojoj razmeri, visoka samo do granice. */
.photo-grid--one .photo-grid__link {
	aspect-ratio: auto;
}

.photo-grid--one .photo-grid__img {
	height: auto;
	max-height: min(36rem, 80vh);
}

/* Znak za uvećanje (mreža i naslovna fotografija): pojavi se na prelazu mišem i fokusu, na dodir stoji stalno. */
.lightbox-zoom {
	position: absolute;
	right: var(--space-2);
	bottom: var(--space-2);
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--smd-white);
	background: rgb(var(--smd-navy-900-rgb) / 0.78);
	border-radius: var(--radius-pill);
	opacity: 0;
	transition: opacity var(--dur) var(--ease-out);
	pointer-events: none;
}

.lightbox-zoom .icon {
	width: 1.125rem;
	height: 1.125rem;
}

.photo-grid__link:hover .photo-grid__img,
.photo-grid__link:focus-visible .photo-grid__img {
	transform: scale(1.04);
}

.photo-grid__link:hover .lightbox-zoom,
.photo-grid__link:focus-visible .lightbox-zoom,
.article-media__link:hover .lightbox-zoom,
.article-media__link:focus-visible .lightbox-zoom {
	opacity: 1;
}

/* Na ekranu na dodir nema prelaza mišem, pa znak stoji stalno. */
@media (hover: none) {
	.lightbox-zoom {
		opacity: 1;
	}
}

/* Naslovna fotografija (smd_article_media()): ista slika, klik otvara celu. */
.article-media__link {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	cursor: zoom-in;
}

.article-media__link .lightbox-zoom {
	right: var(--space-3);
	bottom: var(--space-3);
}

/* ==========================================================================
   2. Slajder (Carousel): bina 3 : 2, strelice na slici, broj slike, sličice ispod
   ========================================================================== */

.photo-slider {
	--f-carousel-gap: var(--space-2);
	--f-arrow-width: 2.75rem;
	--f-arrow-height: 2.75rem;
	--f-arrow-svg-width: 1.25rem;
	--f-arrow-svg-height: 1.25rem;
	--f-arrow-svg-stroke-width: 2;
	--f-arrow-pos: var(--space-3);
	--f-arrow-border-radius: var(--radius-pill);
	--f-arrow-bg: var(--smd-white);
	--f-arrow-hover-bg: var(--smd-white);
	--f-arrow-color: var(--smd-navy-900);
	--f-arrow-hover-color: var(--smd-blue-600);
	--f-arrow-shadow: var(--shadow-md);
	--f-button-outline-width: 3px;
	--f-button-outline-color: var(--color-focus);
	--f-button-outline-offset: 2px;
	--f-button-svg-disabled-opacity: 0.35;

	position: relative;
}

.photo-slider .f-carousel__viewport {
	border-radius: var(--radius-md);
}

.photo-slider__link {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	cursor: zoom-in;
}

.photo-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Strelica na kraju niza se sklanja, umesto da stoji bleda preko slike. */
.photo-slider .f-button.is-arrow[aria-disabled] {
	opacity: 0;
	pointer-events: none;
}

.photo-slider__count {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 21;
	margin: 0;
	padding: 0.2rem 0.6rem;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	color: var(--smd-white);
	background: rgb(var(--smd-navy-900-rgb) / 0.78);
	border-radius: var(--radius-pill);
	pointer-events: none;
}

/* Pre pokretanja i bez JavaScript-a: vodoravni niz, prva slika na mestu bine (bez skoka pri pokretanju). */
.photo-slider:not(.is-enabled) {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	border-radius: var(--radius-md);
}

.photo-slider:not(.is-enabled) > .photo-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.photo-slider:not(.is-enabled) > .photo-slider__count {
	display: none;
}

.js .photo-slider:not(.is-enabled) {
	scrollbar-width: none;
}

/* Mesto za sličice dok se ne pojave (visina jednog reda sličica). */
.js .photo-slider__thumbs:empty {
	height: calc(var(--photo-thumb-height) + 2 * var(--space-2));
}

.photo-slider__thumbs {
	--photo-thumb-height: 3.75rem;
	--f-thumbs-gap: var(--space-2);
	--f-thumbs-padding-x: 0px;
	--f-thumbs-padding-y: var(--space-2);
	--f-thumb-width: 5.625rem;
	--f-thumb-height: var(--photo-thumb-height);
	--f-thumb-border-radius: var(--radius-sm);
	--f-thumb-bg: var(--color-bg-subtle);
	--f-thumb-opacity: 0.6;
	--f-thumb-hover-opacity: 1;
	--f-thumb-selected-opacity: 1;
	--f-thumb-focus-opacity: 1;
	--f-thumb-img-position: 50% 50%;
	--f-thumb-selected-shadow: inset 0 0 0 2px var(--smd-blue-600);
	--f-thumb-focus-shadow: inset 0 0 0 3px var(--color-focus);
}

/* ==========================================================================
   3. Slike iz teksta vesti (veza na uvećanu sliku)
   ========================================================================== */

.prose .lightbox-link {
	display: block;
	width: fit-content;
	max-width: 100%;
	text-decoration: none;
	border-radius: var(--radius-md);
	cursor: zoom-in;
}

.prose .lightbox-link:has(> .aligncenter) {
	margin-inline: auto;
}

.prose .lightbox-link img {
	display: block;
}

/* ==========================================================================
   4. Fancybox: tamna pozadina sajta, dugmad i slova sajta, vidljiv fokus
   ========================================================================== */

.smd-lightbox {
	/* Providna noćna plava: sadržaj strane se nazire iza slike. */
	--fancybox-backdrop-bg: rgb(var(--smd-navy-975-rgb) / 0.8);
	--fancybox-color: var(--smd-white);
	--f-toolbar-font: var(--font-display);
	--f-toolbar-font-size: var(--fs-sm);
	--f-toolbar-font-weight: var(--fw-semibold);
	--f-toolbar-text-shadow: none;
	--f-button-outline-width: 3px;
	--f-button-outline-color: var(--color-focus-inverse);
	--f-button-outline-offset: 2px;
	--f-thumb-selected-shadow: inset 0 0 0 2px var(--smd-white);
	--f-thumb-focus-shadow: inset 0 0 0 3px var(--color-focus-inverse);
	--f-caption-font: var(--fw-regular) var(--fs-sm) / 1.5 var(--font-sans);
	--f-caption-color: rgb(255 255 255 / 0.9);
	--f-caption-padding: var(--space-2) var(--space-4);
	--f-caption-margin: var(--space-3) 0 0;
	--f-caption-bg: rgb(var(--smd-navy-975-rgb) / 0.72);
	/* Dugmad i strelice: tamnoplavi krug ili traka umesto sivih kvadrata biblioteke. */
	--f-button-color: var(--smd-white);
	--f-button-hover-color: var(--smd-white);
	--f-button-bg: rgb(var(--smd-navy-900-rgb) / 0.75);
	--f-button-hover-bg: var(--smd-navy-900);
	--f-arrow-bg: rgb(var(--smd-navy-900-rgb) / 0.75);
	--f-arrow-hover-bg: var(--smd-navy-900);
	--f-arrow-color: var(--smd-white);
	--f-arrow-hover-color: var(--smd-white);
}

.smd-lightbox .f-carousel__toolbar__column.is-right {
	overflow: hidden;
	border-radius: var(--radius-md);
}

.smd-lightbox .f-counter {
	padding: 0.15rem 0.6rem;
	background: rgb(var(--smd-navy-900-rgb) / 0.75);
	border-radius: var(--radius-pill);
}

/* Slika ne ide do ivica ekrana: na širem ekranu ima mesta za strelice levo i desno i za dugmad gore. */
@media (min-width: 48em) {
	.smd-lightbox {
		--f-carousel-slide-padding: 4rem 7rem 1.5rem;
	}
}

.smd-lightbox .f-caption {
	max-width: min(100%, 48rem);
	text-align: center;
	border-radius: var(--radius-md);
}

.smd-lightbox .smd-caption__title {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	color: var(--smd-white);
}

.smd-lightbox .smd-caption__text {
	display: block;
}

.smd-lightbox :focus-visible {
	outline-color: var(--color-focus-inverse);
}

/* Dok je uvećanje otvoreno, Fancybox sklanja traku za skrolovanje i telu dodaje desnu marginu iste širine
   (--f-scrollbar-compensate). Fiksni elementi preko cele širine dobijaju isti pomak, pa se iza providne pozadine
   ništa ne pomera. */
html.with-fancybox .site-top.is-fixed .site-header,
html.with-fancybox .reading-progress {
	right: var(--f-scrollbar-compensate, 0px);
}

@media print {
	.prose .lightbox-link::after {
		content: none;
	}

	.lightbox-zoom,
	.photo-slider__count,
	.photo-slider__thumbs,
	.photo-slider .f-button {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.photo-grid__img {
		transition: none;
	}

	.photo-grid__link:hover .photo-grid__img,
	.photo-grid__link:focus-visible .photo-grid__img {
		transform: none;
	}
}

/* Galerija u detaljima lokacije na mapi: bez sive podloge odeljka, slike idu do ivica kolone. */
.map-detail__gallery {
	padding: 0;
	background: none;
}