/* Sremske Nekretnine V2 - listing-card.css
   Flat/square, slika-napred (jamesedition.com referenca): bez border/senke oko
   kartice, cena+lokacija kao prost tekst ispod slike, ostre ivice na slici. */
.sn-listing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sn-space-4);
}
/* min-width:0 na grid stavci - bez ovoga karticin sadrzaj (slika sa width:100% unutar
   .sn-listing-card__media) propagira svoju INTRINSICNU (prirodnu, punu-rezoluciju)
   sirinu kao automatski minimum grid stavke (poznata CSS grid zamka, ista kao na
   single-oglas galeriji), sto probija 1fr kolonu na mobilnom i izaziva horizontalni
   scroll cele stranice kad god su fotografije vece od viewporta. */
.sn-listing-grid > * { min-width: 0; }
@media (min-width: 600px) {
	.sn-listing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.sn-listing-grid { grid-template-columns: repeat(3, 1fr); }
}

.sn-listing-card { display: block; color: inherit; }
.sn-listing-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--sn-ink-100);
	overflow: hidden;
	border-radius: var(--sn-radius); /* 0 - namerno ostre ivice na slici */
}
.sn-listing-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sn-listing-card__media-placeholder { width: 100%; height: 100%; background: var(--sn-ink-100); }

.sn-favorite-btn {
	position: absolute; top: var(--sn-space-2); right: var(--sn-space-2);
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.9);
	border: none; cursor: pointer;
	color: var(--sn-ink-700);
	/* .sn-circle-accent primenjuje border-radius:999px - NAMERNI izuzetak od flat/square pravila */
}
.sn-favorite-btn:hover, .sn-favorite-btn.is-active { color: var(--sn-danger); }

.sn-listing-card__badge {
	position: absolute; top: var(--sn-space-2); left: var(--sn-space-2);
	background: var(--sn-primary);
	color: var(--sn-white);
	font-size: var(--sn-text-xs);
	font-weight: 600;
	letter-spacing: .04em;
	padding: 4px 10px;
	text-transform: uppercase;
	z-index: 1;
}

.sn-listing-card__body {
	padding: var(--sn-space-2);
	border: 1px solid var(--sn-border-color);
	border-top: none;
}
.sn-listing-card__price { font-weight: 700; font-size: var(--sn-text-lg); margin: 0; }
.sn-listing-card__title {
	font-family: var(--sn-font-sans); font-weight: 400; font-size: var(--sn-text-base);
	margin: var(--sn-space-1) 0 0; color: var(--sn-ink-900);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sn-listing-card__meta { color: var(--sn-ink-500); font-size: var(--sn-text-sm); margin: var(--sn-space-1) 0 0; }
.sn-favorite-btn.is-active { color: var(--sn-danger); }
.sn-favorite-btn.is-active svg { fill: currentColor; }
.sn-favorite-toggle.is-active { background: var(--sn-primary-tint); border-color: var(--sn-primary); color: var(--sn-primary-dark); }


/* Istaknuti oglasi - horizontalni slider (scroll-snap), isti izgled kartica, samo prilagodjena velicina */
.sn-listing-slider-wrap { position: relative; }
/* "Bleed" trik: negativna margina + jednaka padding kompenzacija drzi kartice poravnate
   sa ostatkom sadrzaja (heading, hero, itd.), dok strelice dobijaju prostor van kartica
   umesto da ih preklapaju. Bleed iznos MORA da prati padding .sn-container na svakom
   breakpointu (16/24/40px) - .sn-container nema max-width, pa nema "viska" prostora van
   njega da se strelica bezbedno bleed-uje; bleed veci od trenutnog container paddinga
   gura strelicu van vidljivog ekrana (potvrdjeno - stara fiksna 56px vrednost je bezala
   sa leve ivice na 1024px+ gde je container padding samo 40px). */
@media (min-width: 600px) {
	.sn-listing-slider-wrap { margin-inline: -16px; padding-inline: 16px; }
}
@media (min-width: 768px) {
	.sn-listing-slider-wrap { margin-inline: -24px; padding-inline: 24px; }
}
@media (min-width: 1024px) {
	.sn-listing-slider-wrap { margin-inline: -40px; padding-inline: 40px; }
}
.sn-listing-slider {
	display: flex;
	gap: var(--sn-space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--sn-space-2);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.sn-listing-slider::-webkit-scrollbar { display: none; }
.sn-listing-slider__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 78vw;
	max-width: 300px;
}
@media (min-width: 600px) {
	.sn-listing-slider__item { width: 44vw; max-width: 320px; }
}
@media (min-width: 1024px) {
	/* Raste da popuni raspolozivi prostor kad ima manje od punog broja kartica u redu (npr. tacno 5 istaknutih oglasa), umesto da ostavi prazninu sa desne strane. Ako ima vise kartica nego sto stane, flex-grow prosto ne radi nista (nema viska prostora) i slider i dalje normalno skroluje. */
	.sn-listing-slider__item { flex: 1 1 0; width: auto; min-width: 280px; max-width: 360px; }
	.sn-listing-slider { gap: var(--sn-space-4); }
}

/* Kompaktna varijanta - Slicni oglasi na single-oglas stranici (manje kartice, fiksna sirina, bez rastezanja) */
/* Centrira kartice kad ih ima manje nego sto stane u red (npr. 4 oglasa) umesto da vise uz levu strelicu;
   'safe center' se automatski vraca na normalno ponasanje (pocetak vidljiv) ako ima vise kartica nego prostora,
   tako da skrolovanje ostaje ispravno i kad se broj slicnih oglasa poveca. */
.sn-listing-slider--compact {
	justify-content: center;
	justify-content: safe center;
}
.sn-listing-slider--compact .sn-listing-slider__item {
	width: 60vw;
	max-width: 230px;
}
@media (min-width: 600px) {
	.sn-listing-slider--compact .sn-listing-slider__item { width: 38vw; max-width: 250px; }
}
@media (min-width: 1024px) {
	.sn-listing-slider--compact .sn-listing-slider__item { flex: 0 0 260px; width: 260px; min-width: 0; max-width: 260px; }
}

.sn-slider-nav {
	position: absolute; top: 35%; z-index: 2;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: var(--sn-white); color: var(--sn-ink-900);
	border: 1px solid var(--sn-border-color);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.sn-slider-nav:hover { background: var(--sn-primary); color: var(--sn-white); border-color: var(--sn-primary); }
.sn-slider-nav--prev { left: 0; }
.sn-slider-nav--next { right: 0; }
@media (max-width: 599px) {
	.sn-slider-nav { display: none; }
}

/* Broj pregleda - donji desni ugao kartice */
.sn-listing-card__body { position: relative; }
.sn-listing-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sn-listing-card__meta-text { min-width: 0; }
.sn-listing-card__views { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--sn-text-sm); color: var(--sn-ink-500); line-height: 1; }
.sn-listing-card__views svg { flex: none; }