/**
 * News Scroll
 *
 * Aktivira se dodavanjem klase:
 * tr-news-scroll
 *
 * Visina se određuje dodatnom klasom, na primer:
 * tr-news-scroll-h-597
 * tr-news-scroll-h-450
 * tr-news-scroll-h-720
 */

.tr-news-scroll {
	--tr-news-scroll-height: 597px;
}

/* Vertikalna lista vesti sa internim skrolom */
.tr-news-scroll .td_block_inner {
	height: var(--tr-news-scroll-height);
	overflow-y: auto;
	overflow-x: hidden;

	/*
	 * Desktop:
	 * skrol ostaje unutar bloka dok korisnik koristi miš ili trackpad.
	 */
	overscroll-behavior-y: contain;

	/* Glatko skrolovanje na iOS uređajima */
	-webkit-overflow-scrolling: touch;

	/* Dozvoljava vertikalni touch gest */
	touch-action: pan-y;

	/* Sprečava promenu širine sadržaja zbog scrollbara */
	scrollbar-gutter: stable;

	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

/*
 * Mobilni i drugi touch uređaji:
 * kada se dođe do vrha ili dna internog sadržaja,
 * skrol se nastavlja na glavnoj stranici.
 */
@media (hover: none) and (pointer: coarse) {
	.tr-news-scroll .td_block_inner {
		overscroll-behavior-y: auto;

		/*
		 * Na mobilnom nije potrebno rezervisati prostor
		 * za desktop scrollbar.
		 */
		scrollbar-gutter: auto;
	}
}

/*
 * Rezervna podrška za mobilne uređaje kod kojih
 * hover/pointer media query nije pravilno prepoznat.
 */
@media (max-width: 767px) {
	.tr-news-scroll .td_block_inner {
		overscroll-behavior-y: auto;
		scrollbar-gutter: auto;
	}
}

/* Firefox – scrollbar se prikazuje kada je miš iznad bloka */
@media (hover: hover) and (pointer: fine) {
	.tr-news-scroll:hover .td_block_inner {
		scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
	}
}

/* Chrome, Edge i Safari */
.tr-news-scroll .td_block_inner::-webkit-scrollbar {
	width: 7px;
}

.tr-news-scroll .td_block_inner::-webkit-scrollbar-track {
	background: transparent;
}

.tr-news-scroll .td_block_inner::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 10px;
}

/*
 * Mobilni i touch uređaji:
 * dozvoljavamo prelazak skrola sa boxa na stranicu.
 */
@media (hover: none) and (pointer: coarse) {
	.tr-news-scroll .td_block_inner {
		overscroll-behavior-y: auto;
		scrollbar-gutter: auto;
		touch-action: pan-y;
	}
}

@media (max-width: 767px) {
	.tr-news-scroll .td_block_inner {
		overscroll-behavior-y: auto;
		scrollbar-gutter: auto;
		touch-action: pan-y;
	}
}