/* Sremske Nekretnine V2 - content-page.css (mobile-first)
   Usluge / O nama / Kontakt - staticke sadrzajne stranice. */

.sn-breadcrumb { font-size: var(--sn-text-sm); color: var(--sn-ink-500); margin-bottom: var(--sn-space-3); padding-top: var(--sn-space-4); }
.sn-breadcrumb a { color: var(--sn-ink-500); }
.sn-breadcrumb a:hover { color: var(--sn-primary); }

.sn-content-page { padding-bottom: var(--sn-space-6); max-width: 860px; }
.sn-content-page--wide { max-width: 1290px; } /* Usluge - rasireno 50% na zahtev korisnika (2026-09-11) */
.sn-content-page__lead { color: var(--sn-ink-500); font-size: var(--sn-text-lg); max-width: 60ch; margin-bottom: var(--sn-space-5); }

.sn-service-block { border-top: var(--sn-border-width) solid var(--sn-border-color); padding-block: var(--sn-space-5); }
.sn-service-block:first-of-type { border-top: none; }
.sn-service-block h2 { margin-bottom: var(--sn-space-3); }
.sn-service-block p { max-width: 70ch; }

.sn-service-block__grid { display: grid; grid-template-columns: 1fr; gap: var(--sn-space-3); margin-block: var(--sn-space-4); }
@media (min-width: 700px) {
	.sn-service-block__grid { grid-template-columns: 1fr 1fr; }
	.sn-service-block__grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.sn-service-card { border: var(--sn-border-width) solid var(--sn-border-color); padding: var(--sn-space-3); }
.sn-service-card h3 { margin-bottom: var(--sn-space-2); font-size: var(--sn-text-base); }
.sn-service-card p { margin: 0; font-size: var(--sn-text-sm); color: var(--sn-ink-500); }

.sn-check-list { display: flex; flex-direction: column; gap: var(--sn-space-2); }
.sn-check-list li { padding-left: var(--sn-space-4); position: relative; }
.sn-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--sn-primary); font-weight: 700; }

/* Kontakt forma */
.sn-kontakt-form { display: flex; flex-direction: column; gap: var(--sn-space-4); max-width: 520px; margin-top: var(--sn-space-4); }
.sn-kontakt-form .sn-form-field { display: flex; flex-direction: column; gap: var(--sn-space-1); }
.sn-kontakt-form label { font-size: var(--sn-text-sm); color: var(--sn-ink-700); }
.sn-kontakt-form input,
.sn-kontakt-form select,
.sn-kontakt-form textarea {
	height: 44px; padding-inline: var(--sn-space-2);
	border: var(--sn-border-width) solid var(--sn-border-color); background: var(--sn-white);
	width: 100%; font: inherit;
}
.sn-kontakt-form textarea { height: auto; padding-block: var(--sn-space-2); }
.sn-kontakt-form .sn-btn { align-self: flex-start; }
.sn-hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.sn-form-success { background: var(--sn-primary-tint); border: var(--sn-border-width) solid var(--sn-primary); color: var(--sn-primary-dark); padding: var(--sn-space-3); margin-top: var(--sn-space-4); }
.sn-form-errors { background: #fef2f2; border: var(--sn-border-width) solid var(--sn-danger); color: var(--sn-danger); padding: var(--sn-space-3); margin-top: var(--sn-space-3); }
.sn-form-errors p { margin: 0; }
.sn-form-errors p + p { margin-top: var(--sn-space-1); }

/* Runda 2026-09-11: slike uz Usluge/O nama sekcije (cik-cak layout) */
.sn-service-block__row {
	display: flex;
	flex-direction: column;
	gap: var(--sn-space-4);
	align-items: center;
}
.sn-service-block__col { flex: 1 1 0; min-width: 0; width: 100%; }
.sn-service-block__col--media { display: flex; align-items: center; justify-content: center; }
@media (max-width: 699px) {
	/* Usluge (sn-content-page--wide): na mobilnom slika ide odmah ispod naslova sekcije,
	   PRE teksta/CTA dugmeta - h2 je van .row (section-level), a media kolona dobija
	   order:-1 da se u koloni-redosledu (.row je column na mobilnom) prikaze prva. */
	.sn-content-page--wide .sn-service-block__col--media { order: -1; }
}
.sn-service-block__img {
	width: 100%; height: auto; display: block; object-fit: cover; background: var(--sn-ink-100);
}
@media (min-width: 700px) {
	.sn-service-block__row { flex-direction: row; align-items: flex-start; gap: var(--sn-space-5); }
	.sn-service-block__col { flex: 1 1 50%; }
	.sn-service-block--reverse .sn-service-block__row { flex-direction: row-reverse; }
}

/* Kontakt kartice + forma u kartici (0.9.1) */
.sn-contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sn-space-3); margin: var(--sn-space-5, 24px) 0; }
@media (max-width: 1023px) { .sn-contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .sn-contact-cards { grid-template-columns: 1fr; } }
.sn-contact-card { display: flex; flex-direction: column; gap: 4px; padding: var(--sn-space-4); background: #fff; border: var(--sn-border-width) solid var(--sn-border-color); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; min-width: 0; }
.sn-contact-card:hover { border-color: var(--sn-primary); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.sn-contact-card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--sn-primary-tint); color: var(--sn-primary-dark); border-radius: 999px; margin-bottom: var(--sn-space-2); }
.sn-contact-card__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sn-contact-card__label { font-size: var(--sn-text-xs, 12px); letter-spacing: .06em; text-transform: uppercase; color: var(--sn-ink-500); }
.sn-contact-card__value { font-weight: 600; font-size: var(--sn-text-base, 16px); overflow-wrap: anywhere; }
.sn-contact-form-title { margin: var(--sn-space-6, 32px) 0 0; }
.sn-kontakt-form { background: #fff; border: var(--sn-border-width) solid var(--sn-border-color); padding: var(--sn-space-5, 24px); max-width: 640px; }
.sn-kontakt-form input:focus, .sn-kontakt-form select:focus, .sn-kontakt-form textarea:focus { outline: 2px solid var(--sn-primary); outline-offset: 0; border-color: var(--sn-primary); }