/* Sremske Nekretnine V2 - sections.css (opsta pravila za homepage sekcije) */
.sn-section { padding-block: var(--sn-space-5); }
.sn-section__head {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--sn-space-3);
	margin-bottom: var(--sn-space-4);
}
.sn-section__head h2 { margin: 0; }
.sn-section__link { color: var(--sn-primary); font-size: var(--sn-text-sm); white-space: nowrap; }

/* Lokacije - brzi linkovi ka opstinama (8 kartica: Srem + 7 opstina, 4 po redu) - dizajn isti kao live sajt: foto + zeleni stat-badge + naziv */
.sn-location-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sn-space-2);
}
/* min-width:0 - ista CSS grid zamka kao na sn-listing-grid (vidi listing-card.css). */
.sn-location-grid > * { min-width: 0; }
.sn-location-card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 0;
	color: var(--sn-white);
	background: var(--sn-ink-100, #eee);
	transition: transform .25s ease, box-shadow .25s ease;
}
.sn-location-card:hover, .sn-location-card:focus-visible {
	transform: scale(1.02);
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.sn-location-card--photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Placeholder kartice (Irig, Pecinci) - nema jos fotografije sa live sajta, CSS badge sa realnim popis 2022 podacima */
.sn-location-card--placeholder {
	background: linear-gradient(160deg, var(--sn-primary-darker, #16261f) 0%, var(--sn-primary, #2f5b45) 100%);
}
.sn-location-card__badge {
	position: absolute; top: 2.3%; right: 2%; width: 46.9%; height: 9.8%;
	display: flex; align-items: center; justify-content: space-around;
	background: #3B7A57; border-radius: 0; padding: 0 4%;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.sn-location-card__badge-item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; color: var(--sn-white); line-height: 1.15; flex: 1 1 0;
	padding-inline: 2px;
}
.sn-location-card__badge-item + .sn-location-card__badge-item { border-left: 1px solid rgba(255,255,255,.35); }
.sn-location-card__badge-item strong { font-size: clamp(7px, 1vw, 11px); font-weight: 700; letter-spacing: .02em; }
.sn-location-card__badge-item small { font-size: clamp(6px, 0.85vw, 9px); opacity: .85; font-weight: 400; }
.sn-location-card__name {
	position: absolute; left: 3%; bottom: 6%;
	font-family: var(--sn-font-serif, 'Prata', serif);
	font-size: clamp(16px, 3.2vw, 28px);
	color: var(--sn-white);
	text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.sn-empty-state {
	padding: var(--sn-space-5); text-align: center; color: var(--sn-ink-500);
	border: var(--sn-border-width) dashed var(--sn-border-color);
}

@media (min-width: 768px) {
	.sn-location-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
	.sn-location-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sn-space-3); }
}

/* Benefiti (4 kolone) - iznad Istaknutih oglasa. Cetvrtast okvir (bez border-radius),
   krugovi za ikonice su namerni izuzetak (isto kao sn-circle-accent na drugim mestima). */
.sn-benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: var(--sn-border-width) solid var(--sn-border-color);
	background: var(--sn-white);
}
.sn-benefits__item {
	padding: var(--sn-space-5) var(--sn-space-4);
	text-align: center;
	border-left: var(--sn-border-width) solid var(--sn-border-color);
}
.sn-benefits__item:first-child { border-left: none; }
.sn-benefits__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 60px; height: 60px;
	border-radius: 50%;
	background: var(--sn-primary);
	color: var(--sn-white);
	margin-bottom: var(--sn-space-3);
}
.sn-benefits__item h3 {
	font-family: var(--sn-font-sans);
	font-size: var(--sn-text-base);
	font-weight: 700;
	color: var(--sn-primary-dark);
	margin: 0 0 var(--sn-space-2);
}
.sn-benefits__item p {
	font-size: var(--sn-text-sm);
	color: var(--sn-ink-500);
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 767px) {
	.sn-benefits { grid-template-columns: 1fr; }
	.sn-benefits__item { border-left: none; border-top: var(--sn-border-width) solid var(--sn-border-color); }
	.sn-benefits__item:first-child { border-top: none; }

	/* Mobilni fade slajder (zahtev korisnika): 4 kartice benefita se na mobilnom
	   automatski smenjuju kroz fade in/out, u petlji, bez vidljivih strelica.
	   Svi item-i dele ISTU grid celiju (grid-column/row: 1) - ovo je namerna tehnika
	   da kontejner automatski dobije visinu najvise kartice bez JS merenja visine. */
	.sn-benefits[data-sn-benefits] {
		display: grid;
		grid-template-columns: 1fr;
	}
	.sn-benefits[data-sn-benefits] .sn-benefits__item {
		grid-column: 1;
		grid-row: 1;
		border-top: none;
		opacity: 0;
		pointer-events: none;
		transition: opacity 1s ease-in-out;
	}
	.sn-benefits[data-sn-benefits] .sn-benefits__item.is-active {
		opacity: 1;
		pointer-events: auto;
		position: relative;
		z-index: 1;
	}
	@media (prefers-reduced-motion: reduce) {
		.sn-benefits[data-sn-benefits] .sn-benefits__item { transition: none; }
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.sn-benefits { grid-template-columns: repeat(2, 1fr); }
	.sn-benefits__item:nth-child(3) { border-left: none; }
	.sn-benefits__item:nth-child(3), .sn-benefits__item:nth-child(4) { border-top: var(--sn-border-width) solid var(--sn-border-color); }
}

/* Promo kartice (Profesionalno kreiranje oglasa / O nama) - JE 'Podcast card' stil */
.sn-promo-card {
	display: flex;
	align-items: center;
	gap: var(--sn-space-5);
	background: var(--sn-ink-50);
	border: 1px solid var(--sn-border-color);
	padding: var(--sn-space-5);
}
.sn-promo-card__text { flex: 1 1 auto; min-width: 0; }
.sn-promo-card__text h2 { margin: 0 0 var(--sn-space-2); }
.sn-promo-card__text p {
	margin: 0 0 var(--sn-space-3);
	color: var(--sn-ink-500);
	line-height: 1.6;
	max-width: 62ch;
}
.sn-promo-card__divider {
	width: 1px;
	align-self: stretch;
	background: var(--sn-border-color);
	flex: 0 0 1px;
	display: none;
}
.sn-promo-card__media {
	flex: 0 0 326px;
	width: 326px;
	height: 258px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sn-promo-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.sn-promo-card__media--round img {
	width: auto; height: auto;
	max-width: 220px; max-height: 220px;
	object-fit: contain;
}
@media (min-width: 640px) {
	.sn-promo-card__divider { display: block; }
}
@media (max-width: 639px) {
	.sn-promo-card { flex-direction: column-reverse; text-align: left; }
	.sn-promo-card__media { flex-basis: auto; width: 100%; height: auto; max-height: 220px; }
	.sn-promo-card__media--round img { max-width: 140px; max-height: 140px; }
}
/* Mobilni (do 639px): promo kartice - slika gore, uredna i cela (bez secenja), manji naslov i tekst */
@media (max-width: 639px) {
	.sn-promo-card { flex-direction: column-reverse; gap: var(--sn-space-3); padding: var(--sn-space-4); align-items: stretch; }
	.sn-promo-card__media { flex: 0 0 auto; width: 100%; height: 150px; max-height: none; overflow: visible; }
	.sn-promo-card__media img { width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
	.sn-promo-card__media--round { height: 112px; }
	.sn-promo-card__media--round img { width: 112px; height: 112px; max-width: 112px; max-height: 112px; border-radius: 50%; border: 1px solid var(--sn-border-color); background: var(--sn-white); padding: 6px; box-sizing: border-box; }
	.sn-promo-card__text h2 { font-size: 22px; line-height: 1.25; }
	.sn-promo-card__text p { font-size: 14.5px; line-height: 1.55; }
	.sn-promo-card__text .sn-btn { width: 100%; justify-content: center; text-align: center; }
}
/* Mobilni (do 767px): benefiti u 2x2 gridu umesto fade slajdera (zahtev korisnika) */
@media (max-width: 767px) {
	.sn-benefits, .sn-benefits[data-sn-benefits] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sn-benefits[data-sn-benefits] .sn-benefits__item,
	.sn-benefits[data-sn-benefits] .sn-benefits__item.is-active {
		grid-column: auto; grid-row: auto; opacity: 1; pointer-events: auto; position: static; z-index: auto; transition: none;
		padding: var(--sn-space-3) var(--sn-space-2);
		border-top: 0; border-left: 0;
	}
	.sn-benefits__item:nth-child(even) { border-left: var(--sn-border-width) solid var(--sn-border-color) !important; }
	.sn-benefits__item:nth-child(n+3) { border-top: var(--sn-border-width) solid var(--sn-border-color) !important; }
	.sn-benefits__icon { width: 40px; height: 40px; margin-bottom: var(--sn-space-2); }
	.sn-benefits__icon svg { width: 20px; height: 20px; }
	.sn-benefits__item h3 { font-size: 13.5px; line-height: 1.25; margin-bottom: 4px; }
	.sn-benefits__item p { font-size: 12px; line-height: 1.4; }
}
/* Benefiti 2x2 na mobilnom: razmak izmedju kartica, svaka kartica ima svoj okvir */
@media (max-width: 767px) {
	.sn-benefits, .sn-benefits[data-sn-benefits] { gap: 12px; border: 0; background: transparent; }
	.sn-benefits[data-sn-benefits] .sn-benefits__item,
	.sn-benefits[data-sn-benefits] .sn-benefits__item.is-active,
	.sn-benefits__item:nth-child(even),
	.sn-benefits__item:nth-child(n+3) {
		border: var(--sn-border-width) solid var(--sn-border-color) !important;
		background: var(--sn-white);
	}
}

/* Mobilni: manje praznog prostora oko promo sekcija (Profesionalno kreiranje oglasa / O nama) */
@media (max-width: 767px) {
	.sn-section--promo { padding-block: var(--sn-space-2); }
	.sn-section--promo + .sn-section--promo { padding-top: var(--sn-space-2); }\n\t.sn-section--promo:last-of-type { padding-bottom: 0; }
}


/* Promo kartica sa slikom levo (desktop/tablet od 640px); na mobilnom ostaje slika gore */
@media (min-width: 640px) {
	.sn-promo-card--media-left { flex-direction: row-reverse; }
	.sn-promo-card--media-left .sn-promo-card__text { flex: 0 1 auto; margin-left: auto; max-width: 880px; }
	.sn-promo-card__text p { max-width: 92ch; }
	.sn-promo-card--media-left .sn-promo-card__text .sn-btn { display: flex; width: fit-content; margin-left: auto; }
}