/*!
 * STŠ Škola — komponente (vesti, profili, dokumenta, brzi linkovi, obaveštenje, radno vreme, zgrade, kontakt).
 * Mobile-first, 360px → 1920px. Koristi tokene iz tokens.css.
 */

/* ---------- Osnova ---------- */
.sts-vesti,
.sts-profili,
.sts-dokumenta,
.sts-brzi,
.sts-radno-vreme,
.sts-zgrade,
.sts-kontakt,
.sts-arhiva {
	font-family: var(--sts-font-tekst);
	color: var(--sts-tekst);
	font-size: var(--sts-tekst-velicina);
	line-height: 1.6;
	box-sizing: border-box;
}
.sts-vesti *,
.sts-profili *,
.sts-dokumenta *,
.sts-brzi *,
.sts-radno-vreme *,
.sts-zgrade *,
.sts-kontakt *,
.sts-arhiva * {
	box-sizing: inherit;
}
.sts-ikona {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	vertical-align: -0.2em;
}
.sts-prazno {
	padding: var(--sts-razmak-5);
	border: 1px dashed var(--sts-linija-jaka);
	border-radius: var(--sts-radijus);
	color: var(--sts-tekst-blag);
	background: var(--sts-povrsina);
}
.sts-vesti a:focus-visible,
.sts-profili a:focus-visible,
.sts-dokumenta a:focus-visible,
.sts-dokumenta button:focus-visible,
.sts-dokumenta input:focus-visible,
.sts-dokumenta select:focus-visible,
.sts-brzi a:focus-visible,
.sts-zgrade a:focus-visible,
.sts-kontakt a:focus-visible,
.sts-obavestenje a:focus-visible,
.sts-arhiva a:focus-visible {
	outline: none;
	box-shadow: var(--sts-fokus);
	border-radius: var(--sts-radijus-mali);
}
.sts-sekcija-naslov {
	font-family: var(--sts-font-naslov);
	font-size: var(--sts-h2);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 var(--sts-razmak-5);
	color: var(--sts-primarna);
}

/* ---------- Mreža ---------- */
.sts-mreza {
	display: grid;
	gap: var(--sts-razmak-5);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
	.sts-mreza--2,
	.sts-mreza--3,
	.sts-mreza--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.sts-mreza--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sts-mreza--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Kartica (sa „kotom“ u uglu kao na tehničkom crtežu) ---------- */
.sts-kartica {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sts-pozadina);
	border: 1px solid var(--sts-linija);
	border-radius: var(--sts-radijus);
	overflow: hidden;
	transition: box-shadow var(--sts-trajanje) var(--sts-kriva), transform var(--sts-trajanje) var(--sts-kriva), border-color var(--sts-trajanje);
}
.sts-kartica::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: 14px;
	height: 14px;
	border-top: 1px solid var(--sts-linija-jaka);
	border-left: 1px solid var(--sts-linija-jaka);
	pointer-events: none;
	z-index: 1;
}
.sts-kartica:hover {
	box-shadow: var(--sts-senka-hover);
	border-color: var(--sts-linija-jaka);
}
@media (prefers-reduced-motion: no-preference) {
	.sts-kartica:hover {
		transform: translateY(-2px);
	}
}
.sts-kartica__telo {
	display: flex;
	flex-direction: column;
	gap: var(--sts-razmak-3);
	padding: var(--sts-razmak-5);
	flex: 1;
}
.sts-kartica__naslov {
	font-family: var(--sts-font-naslov);
	font-size: var(--sts-h3);
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	color: var(--sts-tekst);
	overflow-wrap: anywhere;
	hyphens: auto;
}
.sts-kartica__naslov a {
	color: inherit;
	text-decoration: none;
}
.sts-kartica__naslov a::after {
	/* Cela kartica je klikabilna, a link ostaje jedan (pristupačno). */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
.sts-kartica__naslov a:hover {
	color: var(--sts-primarna);
}
.sts-kartica__tekst {
	margin: 0;
	color: var(--sts-tekst-blag);
	font-size: 0.95em;
}

/* ---------- Oznake / meta ---------- */
.sts-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sts-razmak-2) var(--sts-razmak-3);
	font-size: var(--sts-sitno);
	color: var(--sts-tekst-blag);
	font-family: var(--sts-font-mono);
	letter-spacing: 0.02em;
}
.sts-oznaka {
	display: inline-flex;
	align-items: center;
	padding: 0.2em 0.65em;
	border-radius: var(--sts-radijus-pun);
	background: var(--sts-povrsina);
	border: 1px solid var(--sts-linija);
	color: var(--sts-primarna);
	font-family: var(--sts-font-tekst);
	font-size: var(--sts-sitno);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	white-space: nowrap;
}
.sts-oznaka--dual {
	background: #e6f4f3;
	border-color: #b7e0dc;
	color: var(--sts-saobracaj-tekst);
}
.sts-oznaka--obavezno {
	background: #fdeced;
	border-color: #f4c3c5;
	color: var(--sts-masinstvo-tekst);
}
.sts-oznaka--isteklo {
	background: var(--sts-povrsina-2);
	color: var(--sts-tekst-blag);
}
.sts-oznake {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sts-razmak-2);
}

/* ---------- Filter (pill linkovi) ---------- */
.sts-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sts-razmak-2);
	margin: 0 0 var(--sts-razmak-5);
}
.sts-filter__pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5em 1.1em;
	border-radius: var(--sts-radijus-pun);
	border: 1px solid var(--sts-linija-jaka);
	background: var(--sts-pozadina);
	color: var(--sts-tekst);
	font-weight: 700;
	font-size: var(--sts-mali);
	text-decoration: none;
	transition: background var(--sts-trajanje), color var(--sts-trajanje), border-color var(--sts-trajanje);
}
.sts-filter__pill:hover {
	border-color: var(--sts-primarna);
	color: var(--sts-primarna);
}
.sts-filter__pill.is-active {
	background: var(--sts-primarna);
	border-color: var(--sts-primarna);
	color: #ffffff;
}

/* ---------- Vesti ---------- */
.sts-vest__slika {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--sts-povrsina);
	overflow: hidden;
}
.sts-vest__slika img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sts-vest__bez-slike {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--sts-povrsina);
	background-image:
		linear-gradient(var(--sts-linija) 1px, transparent 1px),
		linear-gradient(90deg, var(--sts-linija) 1px, transparent 1px);
	background-size: 24px 24px;
}

/* ---------- Profili ---------- */
.sts-profil {
	--sts-p: var(--sts-opste);
	--sts-p-tekst: var(--sts-primarna);
	border-top: 3px solid var(--sts-p);
}
.sts-podrucje--elektro {
	--sts-p: var(--sts-elektro);
	--sts-p-tekst: var(--sts-elektro-tekst);
}
.sts-podrucje--masinstvo {
	--sts-p: var(--sts-masinstvo);
	--sts-p-tekst: var(--sts-masinstvo-tekst);
}
.sts-podrucje--saobracaj {
	--sts-p: var(--sts-saobracaj);
	--sts-p-tekst: var(--sts-saobracaj-tekst);
}
.sts-profil__vrh {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sts-razmak-3);
	padding-left: 1.5rem;
}
.sts-profil__podrucje {
	font-family: var(--sts-font-mono);
	font-size: var(--sts-sitno);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sts-p-tekst);
}
.sts-trajanje {
	flex: 0 0 auto;
	border: 1px solid var(--sts-p);
	border-radius: var(--sts-radijus-pun);
	padding: 0.2em 0.7em;
	color: var(--sts-p-tekst);
	font-weight: 700;
	font-size: var(--sts-sitno);
	white-space: nowrap;
}
.sts-bedzevi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sts-razmak-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sts-bedzevi li,
.sts-profile-badge {
	display: inline-flex;
	padding: 0.25em 0.7em;
	border-radius: var(--sts-radijus-pun);
	background: var(--sts-povrsina);
	border: 1px solid var(--sts-linija);
	color: var(--sts-tekst-blag);
	font-size: var(--sts-sitno);
	font-weight: 700;
	letter-spacing: 0.03em;
}
.sts-profile-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sts-razmak-2);
}
.sts-link-strelica {
	position: relative;
	z-index: 3;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--sts-p-tekst, var(--sts-primarna));
	font-weight: 700;
	text-decoration: none;
	font-size: var(--sts-mali);
}
.sts-link-strelica:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Dokumenta ---------- */
.sts-dok-filter {
	display: grid;
	gap: var(--sts-razmak-3);
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	padding: var(--sts-razmak-4);
	margin: 0 0 var(--sts-razmak-5);
	background: var(--sts-povrsina);
	border: 1px solid var(--sts-linija);
	border-radius: var(--sts-radijus);
}
@media (min-width: 760px) {
	.sts-dok-filter {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
	}
}
.sts-polje {
	display: flex;
	flex-direction: column;
	gap: var(--sts-razmak-1);
}
.sts-polje label {
	font-size: var(--sts-sitno);
	font-weight: 700;
	color: var(--sts-tekst-blag);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.sts-dokumenta .sts-polje input,
.sts-dokumenta .sts-polje select {
	min-height: 44px;
	width: 100%;
	padding: 0.5em 0.75em;
	border: 1px solid var(--sts-linija-jaka);
	border-radius: var(--sts-radijus-mali);
	background: #ffffff;
	color: var(--sts-tekst);
	font: inherit;
	font-size: 1rem;
}
.sts-polje--dugme {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--sts-razmak-2);
}
.sts-dokumenta .sts-dugme,
.sts-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5em 1.2em;
	border: 1px solid var(--sts-primarna);
	border-radius: var(--sts-radijus-mali);
	background: var(--sts-primarna);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.sts-dokumenta .sts-dugme:hover,
.sts-dugme:hover {
	background: #10264a;
	color: #ffffff;
}
.sts-dokumenta .sts-dugme--obrub,
.sts-dugme--obrub {
	background: transparent;
	color: var(--sts-primarna);
}
.sts-dokumenta .sts-dugme--obrub:hover,
.sts-dugme--obrub:hover {
	background: var(--sts-povrsina-2);
}
.sts-dok-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sts-linija);
}
.sts-dok {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--sts-razmak-3);
	align-items: center;
	padding: var(--sts-razmak-4) var(--sts-razmak-2);
	border-bottom: 1px solid var(--sts-linija);
}
.sts-dok:hover {
	background: var(--sts-povrsina);
}
.sts-dok__ikona {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sts-radijus-mali);
	background: var(--sts-povrsina-2);
	color: var(--sts-primarna);
}
.sts-dok__ikona .sts-ikona {
	width: 26px;
	height: 26px;
}
.sts-dok--pdf .sts-dok__ikona {
	color: var(--sts-masinstvo-tekst);
	background: #fdeced;
}
.sts-dok--doc .sts-dok__ikona {
	color: var(--sts-elektro-tekst);
	background: #e8f1fc;
}
.sts-dok--xls .sts-dok__ikona {
	color: var(--sts-saobracaj-tekst);
	background: #e6f4f3;
}
.sts-dok__naslov {
	color: var(--sts-tekst);
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sts-dok__naslov:hover {
	color: var(--sts-primarna);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sts-dok__meta {
	margin-top: 0.15em;
	font-size: var(--sts-sitno);
	color: var(--sts-tekst-blag);
	font-family: var(--sts-font-mono);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em;
}
.sts-dok__preuzmi {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sts-radijus-pun);
	color: var(--sts-primarna);
	border: 1px solid var(--sts-linija-jaka);
}
.sts-dok__preuzmi:hover {
	background: var(--sts-primarna);
	color: #ffffff;
}
.sts-dok.is-isteklo .sts-dok__naslov {
	color: var(--sts-tekst-blag);
}
.sts-dok-lista--jedan {
	margin-top: var(--sts-razmak-5);
}

/* ---------- Paginacija ---------- */
.sts-paginacija {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sts-razmak-2);
	margin-top: var(--sts-razmak-6);
}
.sts-paginacija .page-numbers,
.sts-paginacija .nav-links > * {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75em;
	border: 1px solid var(--sts-linija-jaka);
	border-radius: var(--sts-radijus-mali);
	color: var(--sts-tekst);
	text-decoration: none;
	font-weight: 700;
}
.sts-paginacija .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sts-razmak-2);
}
.sts-paginacija .current {
	background: var(--sts-primarna);
	border-color: var(--sts-primarna);
	color: #ffffff;
}

/* ---------- Brzi linkovi ---------- */
.sts-brzi ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sts-razmak-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
	.sts-brzi ul {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	}
}
.sts-brzi__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sts-razmak-3);
	height: 100%;
	min-height: 44px;
	padding: var(--sts-razmak-4);
	border: 1px solid var(--sts-linija);
	border-radius: var(--sts-radijus);
	background: var(--sts-pozadina);
	color: var(--sts-tekst);
	text-decoration: none;
	font-weight: 700;
	line-height: 1.3;
	transition: border-color var(--sts-trajanje), box-shadow var(--sts-trajanje), color var(--sts-trajanje);
}
.sts-brzi__link:hover {
	border-color: var(--sts-primarna);
	box-shadow: var(--sts-senka);
	color: var(--sts-primarna);
}
.sts-brzi__ikona {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sts-radijus-mali);
	background: var(--sts-povrsina);
	color: var(--sts-primarna);
}
.sts-brzi--dugmad ul {
	display: flex;
	flex-wrap: wrap;
}
.sts-brzi--dugmad .sts-brzi__link {
	flex-direction: row;
	align-items: center;
	padding: 0.5em 1em 0.5em 0.5em;
	border-radius: var(--sts-radijus-pun);
}
.sts-brzi--dugmad .sts-brzi__ikona {
	width: 32px;
	height: 32px;
	border-radius: var(--sts-radijus-pun);
}
.sts-brzi--lista ul {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
.sts-brzi--lista .sts-brzi__link {
	flex-direction: row;
	align-items: center;
	border-width: 0 0 1px;
	border-radius: 0;
}

/* ---------- Obaveštenje (traka) ---------- */
.sts-obavestenje {
	--sts-o: var(--sts-primarna);
	--sts-o-pozadina: #eaf1fb;
	font-family: var(--sts-font-tekst);
	background: var(--sts-o-pozadina);
	border-bottom: 1px solid var(--sts-linija);
	color: var(--sts-tekst);
	position: relative;
	z-index: 50;
}
.sts-obavestenje--vazno {
	--sts-o: #8a5a00;
	--sts-o-pozadina: #fff6e0;
}
.sts-obavestenje--hitno {
	--sts-o: var(--sts-masinstvo-tekst);
	--sts-o-pozadina: #fdeced;
}
.sts-obavestenje__in {
	display: flex;
	gap: var(--sts-razmak-3);
	align-items: flex-start;
	max-width: var(--sts-sirina);
	margin: 0 auto;
	padding: var(--sts-razmak-3) var(--sts-razmak-4);
	font-size: var(--sts-mali);
	line-height: 1.5;
}
.sts-obavestenje__in .sts-ikona {
	color: var(--sts-o);
	margin-top: 0.1em;
}
.sts-obavestenje p {
	margin: 0;
}
.sts-obavestenje a {
	color: var(--sts-o);
	font-weight: 700;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ---------- Radno vreme ---------- */
.sts-radno-vreme {
	padding: var(--sts-razmak-5);
	border: 1px solid var(--sts-linija);
	border-radius: var(--sts-radijus);
	background: var(--sts-pozadina);
}
.sts-radno-vreme__naslov {
	display: flex;
	align-items: center;
	gap: var(--sts-razmak-2);
	margin: 0 0 var(--sts-razmak-4);
	font-family: var(--sts-font-naslov);
	font-size: var(--sts-h3);
	font-weight: 600;
	color: var(--sts-primarna);
}
.sts-radno-vreme dl {
	margin: 0;
}
.sts-radno-vreme__red {
	display: flex;
	justify-content: space-between;
	gap: var(--sts-razmak-4);
	padding: var(--sts-razmak-2) 0;
	border-bottom: 1px dashed var(--sts-linija-jaka);
}
.sts-radno-vreme dt {
	color: var(--sts-tekst-blag);
}
.sts-radno-vreme dd {
	margin: 0;
	font-weight: 700;
	font-family: var(--sts-font-mono);
	white-space: nowrap;
}
.sts-radno-vreme__napomena {
	margin: var(--sts-razmak-4) 0 0;
	font-size: var(--sts-mali);
	color: var(--sts-tekst-blag);
}

/* ---------- Zgrade ---------- */
.sts-zgrade {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sts-razmak-5);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
	.sts-zgrade {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.sts-zgrada__broj {
	font-family: var(--sts-font-mono);
	font-size: var(--sts-sitno);
	color: var(--sts-tekst-blag);
	letter-spacing: 0.12em;
	padding-left: 1.5rem;
}
.sts-zgrada__adresa {
	display: flex;
	gap: var(--sts-razmak-2);
	margin: 0;
	font-weight: 700;
}
.sts-zgrada__adresa a {
	color: var(--sts-primarna);
	text-underline-offset: 3px;
}

/* ---------- Kontakt ---------- */
.sts-kontakt__adresa {
	display: flex;
	gap: var(--sts-razmak-2);
	font-weight: 700;
	margin: 0 0 var(--sts-razmak-4);
}
.sts-kontakt__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sts-razmak-3);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
	.sts-kontakt__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.sts-kontakt__lista li {
	display: flex;
	flex-direction: column;
	gap: var(--sts-razmak-1);
	padding: var(--sts-razmak-4);
	border: 1px solid var(--sts-linija);
	border-radius: var(--sts-radijus);
}
.sts-kontakt__osoba {
	color: var(--sts-tekst-blag);
}
.sts-kontakt__lista a {
	display: inline-flex;
	align-items: center;
	gap: var(--sts-razmak-2);
	min-height: 32px;
	color: var(--sts-primarna);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sts-kontakt__lista a:hover {
	text-decoration: underline;
}

/* ---------- Arhiva profila (šablon plugina) ---------- */
.sts-arhiva {
	background: var(--sts-povrsina);
	padding: var(--sts-razmak-8) 0;
	min-height: 60vh;
}
.sts-omotac {
	width: min(var(--sts-sirina), calc(100% - 2.5rem));
	margin: 0 auto;
}
.sts-arhiva__zaglavlje {
	margin-bottom: var(--sts-razmak-6);
}
.sts-nadnaslov {
	margin: 0 0 var(--sts-razmak-3);
	font-family: var(--sts-font-mono);
	font-size: var(--sts-sitno);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--sts-tirkizna);
	color: var(--sts-saobracaj-tekst);
}
.sts-arhiva__naslov {
	font-family: var(--sts-font-naslov);
	font-size: var(--sts-h1);
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
	color: var(--sts-primarna);
}
.sts-arhiva__opis {
	max-width: 760px;
	margin-top: var(--sts-razmak-4);
	color: var(--sts-tekst-blag);
}

/* Čitač ekrana */
.sts-vesti .screen-reader-text,
.sts-profili .screen-reader-text,
.sts-dokumenta .screen-reader-text,
.sts-brzi .screen-reader-text,
.sts-zgrade .screen-reader-text,
.sts-arhiva .screen-reader-text,
.sts-paginacija .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media print {
	.sts-dok-filter,
	.sts-filter,
	.sts-paginacija,
	.sts-obavestenje {
		display: none;
	}
}