/* ============================================================
 * MaskeZaMob.rs — Layout: bočni prostor na desktop širinama
 * ============================================================
 *
 * Fajl: css/_layout.css
 * Putanja: wp-content/themes/flatsome-child/css/_layout.css
 *
 * Verzija: 1.0 — 09.08.2026.
 *
 * Zavisi od: _design-tokens.css
 * Vidi: DECISIONS.md → F-036, F-037
 * ============================================================
 *
 * PROBLEM
 *
 * Flatsome-ov `.container` ima `max-width: 1290px`. Čim ekran padne ispod
 * te vrednosti, kontejner se rastegne preko cele širine i bočne margine
 * nestanu — ostaje samo 15px paddinga. Sadržaj se doslovno lepi za ivice.
 *
 * Izmereno na dev sajtu 09.08.2026.:
 *
 *   1440px  →  75px margine   ✓
 *   1366px  →  38px margine
 *   1290px  →   0px
 *   1240px  →   0px (samo 15px padding)
 *
 * Prelaz nije postepen — sve preko 1290 ima margine, sve ispod ih nema.
 * Ceo opseg 1200–1290 je edge-to-edge, a tu živi veliki deo laptopova.
 *
 * OGRANIČENJE
 *
 * Bočni prostor se ne može dodavati slobodno: glavni meni ima 11 stavki
 * plus dugme „Print maskice" i traži **1190px** unutrašnje širine na
 * `font-size: 0.75rem`. Čim mu se oduzme više, prelama se u dva reda.
 *
 * Otud tri koraka umesto jedne vrednosti — svaki je najveći koji meni
 * podnosi na toj širini. Pragovi su izmereni, ne procenjeni:
 *
 *   1240px  →  25px   (izmereno 25)
 *   1280px  →  45px   (izmereno 45)
 *   1366px  →  50px   (izmereno 50, dalje ne raste jer je container
 *                      zaključan na 1290 pa širi ekran ne donosi prostor)
 *
 * Ako se meniju ikad doda stavka, ove pragove treba **ponovo izmeriti**.
 * Skripta: `tools/mzm-mera-laptop.js`, plus prag-tester iz `F-036`.
 *
 * ZAŠTO `.section-content` DOBIJA `max-width`
 *
 * Homepage sekcije nisu u `.container` nego u `.section-content`, koji je
 * pun po širini. Bez istog ograničenja sadržaj sekcija ne bi bio u liniji
 * sa headerom — ista neporavnatost kao `F-035`, samo u suprotnom smeru.
 *
 * Pozadine sekcija ostaju preko cele širine, jer ih nosi roditeljski
 * `.section`, ne `.section-content`.
 * ============================================================ */

@media screen and (min-width: 1000px) {

	.section-content {
		max-width: 1290px;
		margin-left: auto;
		margin-right: auto;
	}

	.container,
	.section-content {
		padding-left: 25px;
		padding-right: 25px;
	}
}

@media screen and (min-width: 1280px) {

	.container,
	.section-content {
		padding-left: 45px;
		padding-right: 45px;
	}
}

@media screen and (min-width: 1320px) {

	.container,
	.section-content {
		padding-left: 50px;
		padding-right: 50px;
	}
}

/* ============================================================
 * Ako padding ne prihvati
 * ============================================================
 *
 * Flatsome ponekad upisuje `padding` na `.section-content` inline, iz
 * `[section]` shortcode-a. Ako se posle kopiranja na server ništa ne
 * promeni, to je uzrok — tada `.section-content` pravilima treba dodati
 * `!important`. To je jedan od dva opravdana izuzetka na ovom projektu
 * (drugi su Flickity inline stilovi).
 *
 * Provera kroz konzolu:
 *   document.querySelector('.section-content').getAttribute('style')
 * ============================================================ */