/*
Theme Name: Sport HOK
Theme URI: https://sport-hok.dubrovniksun.hr
Author: IT Expert za Dubrovnik Sun
Description: Tema portala Sportskih igara odvjetnika i odvjetničkih vježbenika — vizualni identitet 30. igara (HOK), mobilno-prvi prikaz rezultata, rasporeda i ždrijeba.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: sport-hok
*/

/* ---------------------------------------------------------------- Temelji */

:root {
	--crvena: #E2001A;
	--crvena-tamna: #B80015;
	--magenta: #E8336E;
	--plava: #1D4E9E;
	--plava-tamna: #153D7E;
	--plava-blaga: #EBF1FA;
	--crvena-blaga: #FDECEE;
	--tinta: #191A1E;
	--siva: #5C5F66;
	--siva-svijetla: #6F737C;
	--linija: #E6E7EB;
	--podloga: #FFFFFF;
	--podloga-meka: #F6F7F9;
	--zlato: #B8860B;
	--srebro: #7C7F87;
	--bronca: #A05A2C;
	--naslovni: "Archivo", "Segoe UI", system-ui, sans-serif;
	--tekstni: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--radius: 12px;
	--sjena: 0 1px 2px rgba(20, 22, 26, 0.05), 0 6px 20px rgba(20, 22, 26, 0.06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Off-canvas izbornik (translateX) ne smije stvarati vodoravni scroll;
   clip ne stvara scroll-kontejner pa sticky zaglavlje i dalje radi. */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	margin: 0;
	font-family: var(--tekstni);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--tinta);
	background: var(--podloga);
	-webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--plava); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--plava-tamna); }

:focus-visible {
	outline: 3px solid var(--plava);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--naslovni);
	font-style: italic;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
}

.okvir {
	max-width: 72rem;
	margin: 0 auto;
	padding-inline: 1.1rem;
}
.okvir-uzak { max-width: 46rem; }

.citac {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.preskoci {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--tinta);
	color: #fff;
	padding: 0.6rem 1rem;
	z-index: 100;
}
.preskoci:focus { left: 0; }

/* ---------------------------------------------------------------- Gumbi */

.gumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 999px;
	padding: 0.55rem 1.3rem;
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gumb-velik { padding: 0.75rem 1.7rem; font-size: 1.05rem; }
.gumb-crveni { background: var(--crvena); color: #fff; }
.gumb-crveni:hover { background: var(--crvena-tamna); color: #fff; }
.gumb-obrub { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.gumb-obrub:hover { border-color: var(--crvena); color: var(--crvena); }
.gumb-bijeli { background: #fff; color: var(--crvena); }
.gumb-bijeli:hover { background: var(--crvena-blaga); color: var(--crvena-tamna); }

/* ------------------------------------------------------- Hitna obavijest */

.hitna { background: var(--crvena); color: #fff; }
.hitna-okvir {
	display: flex;
	gap: 0.8rem;
	align-items: baseline;
	padding-block: 0.55rem;
	flex-wrap: wrap;
}
.hitna-oznaka {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 800;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	background: rgba(255, 255, 255, 0.18);
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	white-space: nowrap;
}
.hitna-tekst { font-weight: 600; }

/* --------------------------------------------------------------- Zaglavlje */

.zaglavlje {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--podloga);
	border-bottom: 1px solid var(--linija);
}
/* Blur samo na desktopu: backdrop-filter čini zaglavlje containing blockom
   za position:fixed potomke, što bi mobilnom off-canvas izborniku dalo visinu 0. */
@media (min-width: 861px) {
	.zaglavlje {
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(8px);
	}
}
.zaglavlje-okvir {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.1rem;
}

.logotip {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	color: var(--tinta);
	margin-right: auto;
}
.znak-img { height: 46px; width: auto; display: block; }
.znak-chip {
	display: inline-block;
	background: #fff;
	border-radius: 10px;
	padding: 0.55rem 0.8rem;
	line-height: 0;
}
.logotip-tekst { display: flex; flex-direction: column; line-height: 1.15; }
.logotip-naslov {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 800;
	font-size: 1.02rem;
	letter-spacing: 0.01em;
}
.logotip-podnaslov {
	font-size: 0.72rem;
	color: var(--siva);
	letter-spacing: 0.02em;
}

.glavna-nav { display: flex; align-items: center; gap: 1.1rem; }
.izbornik {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.1rem;
}
.izbornik a {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--tinta);
	text-decoration: none;
	padding: 0.3rem 0.1rem;
	border-bottom: 2px solid transparent;
}
.izbornik a:hover { color: var(--crvena); }
.izbornik .current-menu-item > a,
.izbornik .current_page_item > a { border-bottom-color: var(--crvena); color: var(--crvena); }

.nav-preklopnik {
	display: none;
	background: none;
	border: 0;
	padding: 0.7rem;
	cursor: pointer;
}
.nav-crta,
.nav-crta::before,
.nav-crta::after {
	display: block;
	width: 1.45rem;
	height: 2px;
	background: var(--tinta);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-crta { position: relative; }
.nav-crta::before, .nav-crta::after { content: ""; position: absolute; left: 0; }
.nav-crta::before { top: -6px; }
.nav-crta::after { top: 6px; }
.nav-otvorena .nav-crta { background: transparent; }
.nav-otvorena .nav-crta::before { transform: translateY(6px) rotate(45deg); }
.nav-otvorena .nav-crta::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
	.nav-preklopnik { display: block; }
	.glavna-nav {
		position: fixed;
		inset: 0;
		top: 4.1rem;
		background: var(--podloga);
		flex-direction: column;
		align-items: stretch;
		padding: 1.4rem 1.2rem 2rem;
		gap: 0;
		transform: translateX(100%);
		transition: transform 0.22s ease;
		overflow-y: auto;
		z-index: 49;
	}
	.nav-otvorena .glavna-nav { transform: translateX(0); }
	.nav-otvorena { overflow: hidden; }
	.izbornik { flex-direction: column; gap: 0; }
	.izbornik a {
		display: block;
		font-size: 1.25rem;
		padding: 0.85rem 0.2rem;
		border-bottom: 1px solid var(--linija);
	}
	.nav-prijava { margin-top: 1.3rem; justify-content: center; padding: 0.85rem; font-size: 1.1rem; }
}

/* ------------------------------------------------------------------ Hero */

.hero {
	background: var(--podloga);
	border-bottom: 1px solid var(--linija);
	overflow: hidden;
}
.hero-okvir {
	display: grid;
	gap: 1.5rem;
	padding-block: 2.8rem 3rem;
	align-items: center;
}
@media (min-width: 800px) {
	.hero-okvir { grid-template-columns: 3fr 2fr; padding-block: 4rem; }
}

.natpisnica {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--plava);
	margin: 0 0 0.9rem;
}

.hero-naslov { display: flex; flex-direction: column; gap: 0.2rem; }
.hero-broj {
	font-weight: 800;
	font-size: clamp(4rem, 14vw, 7rem);
	color: var(--crvena);
	line-height: 0.9;
	letter-spacing: -0.04em;
}
.hero-ime {
	font-weight: 700;
	font-size: clamp(1.5rem, 4.5vw, 2.4rem);
	max-width: 22ch;
}

.odbrojavanje { margin-top: 1.6rem; }
.odbrojavanje-najava {
	margin: 0 0 0.4rem;
	font-size: 0.9rem;
	color: var(--siva);
}
.odbrojavanje-brojke { display: flex; gap: 1.4rem; }
.odb-blok { display: flex; flex-direction: column; align-items: center; }
.odb-blok b {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 800;
	font-size: 2.1rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--tinta);
}
.odb-blok i {
	font-style: normal;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--siva-svijetla);
}

.hero-akcije { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-rok { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--siva); }

.vizual-igre { width: 100%; height: auto; display: block; }
.hero-vizual { display: none; }
.hero-vizual-mobitel { max-width: 17rem; margin: 0.4rem auto 1.2rem; }
@media (min-width: 800px) {
	.hero-vizual { display: block; justify-self: center; width: min(26rem, 100%); }
	.hero-vizual-mobitel { display: none; }
}

/* --------------------------------------------------------------- Sekcije */

.sekcija { padding-block: 2.6rem; }
.sekcija-meka { background: var(--podloga-meka); }

.sekcija-glava {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.3rem;
}
.sekcija-naslov {
	font-weight: 700;
	font-size: 1.5rem;
	position: relative;
	padding-left: 1rem;
	margin-bottom: 0.4rem;
}
.sekcija-naslov::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	width: 0.55rem;
	height: 0.9em;
	background: var(--crvena);
	transform: skewX(-12deg);
}
.sekcija > .okvir > .sekcija-naslov { margin-bottom: 1.2rem; }
.sekcija-vise {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 600;
	font-size: 0.92rem;
	white-space: nowrap;
}

.prazno {
	color: var(--siva);
	background: var(--podloga-meka);
	border: 1px dashed var(--linija);
	border-radius: var(--radius);
	padding: 1.1rem 1.3rem;
	margin: 0;
}
.sekcija-meka .prazno { background: var(--podloga); }
.prazno-veza { margin: 0.8rem 0 0; }

/* --------------------------------------------------------------- Sportovi */

.sport-mreza {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.8rem;
}
.sport-mreza-velika { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

.sport-kartica {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	background: var(--podloga);
	border: 1px solid var(--linija);
	border-radius: var(--radius);
	padding: 1rem 1.05rem;
	text-decoration: none;
	color: var(--tinta);
	height: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.sport-kartica:hover {
	border-color: var(--crvena);
	box-shadow: var(--sjena);
	transform: translateY(-2px);
	color: var(--tinta);
}
.sport-ikona { color: var(--crvena); display: inline-flex; }
.sport-ime {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	font-size: 1.02rem;
}
.sport-opis { font-size: 0.88rem; color: var(--siva); }

/* -------------------------------------------------------------- Rezultati */

.rez-mreza {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}

.rez-kartica {
	background: var(--podloga);
	border: 1px solid var(--linija);
	border-radius: var(--radius);
	padding: 1.05rem 1.2rem;
	box-shadow: var(--sjena);
}
.sekcija-meka .rez-kartica { box-shadow: none; }

.rez-glava {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--linija);
	padding-bottom: 0.55rem;
	margin-bottom: 0.7rem;
}
.rez-sport {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--tinta);
	text-decoration: none;
}
.rez-sport:hover { color: var(--crvena); }
.rez-kategorija { color: var(--siva); font-size: 0.92rem; font-weight: 600; }
.rez-godina { margin-left: auto; color: var(--siva-svijetla); font-size: 0.85rem; }

.rez-medalje { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.rez-medalja {
	display: grid;
	grid-template-columns: 0.9rem 3.6rem 1fr;
	gap: 0.55rem;
	align-items: baseline;
}
.rez-oznaka {
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	align-self: center;
}
.rez-zlato .rez-oznaka { background: linear-gradient(135deg, #E4B62B, #B8860B); }
.rez-srebro .rez-oznaka { background: linear-gradient(135deg, #B9BCC4, #8A8D93); }
.rez-bronca .rez-oznaka { background: linear-gradient(135deg, #C07A3C, #8F4F26); }
.rez-medalja-naziv {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 800;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.rez-zlato .rez-medalja-naziv { color: var(--zlato); }
.rez-srebro .rez-medalja-naziv { color: var(--srebro); }
.rez-bronca .rez-medalja-naziv { color: var(--bronca); }
.rez-ime { font-weight: 700; }
.rez-opis {
	grid-column: 3;
	font-size: 0.86rem;
	color: var(--siva);
	margin-top: -0.2rem;
}
.rez-napomena {
	margin: 0.7rem 0 0;
	font-size: 0.88rem;
	color: var(--siva);
	border-top: 1px dashed var(--linija);
	padding-top: 0.55rem;
}

.rez-grupa { margin-bottom: 2.2rem; }
.rez-grupa-naslov { font-size: 1.3rem; margin-bottom: 0.9rem; }
.rez-grupa-naslov a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--tinta);
	text-decoration: none;
}
.rez-grupa-naslov a:hover { color: var(--crvena); }
.rez-grupa-naslov svg { color: var(--crvena); }

.arhiva-sklop { margin-top: 1.6rem; }
.arhiva-sklop summary {
	cursor: pointer;
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	color: var(--plava);
	padding: 0.5rem 0;
}
.arhiva-sklop[open] summary { margin-bottom: 0.9rem; }

/* ----------------------------------------------------- Godina — filtar */

.godina-filtar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.godina-gumb {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	color: var(--tinta);
	border: 2px solid var(--linija);
	border-radius: 999px;
	padding: 0.35rem 1rem;
}
.godina-gumb:hover { border-color: var(--crvena); color: var(--crvena); }
.godina-gumb.aktivna { background: var(--crvena); border-color: var(--crvena); color: #fff; }

/* -------------------------------------------------------------- Raspored */

.dan { margin-bottom: 2.2rem; }
.dan-naslov {
	font-size: 1.25rem;
	color: var(--plava);
	border-bottom: 2px solid var(--plava);
	padding-bottom: 0.4rem;
	margin-bottom: 0.9rem;
}

.termin-popis { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.termin {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	background: var(--podloga);
	border: 1px solid var(--linija);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
}
.termin-vrijeme {
	display: flex;
	flex-direction: column;
	min-width: 4.6rem;
	text-align: center;
}
.termin-vrijeme b {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 800;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	color: var(--crvena);
}
.termin-vrijeme i { font-style: normal; font-size: 0.85rem; color: var(--siva); }
.termin-info { display: flex; flex-direction: column; gap: 0.1rem; }
.termin-info b { font-weight: 700; }
.termin-info i { font-style: normal; font-size: 0.88rem; color: var(--siva); }
.termin-sport {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	color: var(--tinta);
	text-decoration: none;
}
.termin-sport:hover { color: var(--crvena); }
.termin-sport svg { color: var(--crvena); }

/* --------------------------------------------------------------- Ždrijeb */

.zd-skupine {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	margin-bottom: 1rem;
}
.zd-skupina {
	background: var(--podloga);
	border: 1px solid var(--linija);
	border-radius: var(--radius);
	padding: 1rem 1.15rem;
}
.zd-skupina-naziv {
	font-size: 1.02rem;
	color: var(--plava);
	margin-bottom: 0.6rem;
}
.zd-sudionici { margin: 0; padding-left: 1.4rem; }
.zd-sudionici li { padding: 0.15rem 0; }
.zd-sudionici li::marker { color: var(--siva-svijetla); font-variant-numeric: tabular-nums; }

.zd-naslov {
	font-size: 1.1rem;
	color: var(--tinta);
	margin: 1.4rem 0 0.8rem;
}
.zd-naslov:first-child { margin-top: 0; }
.zd-utakmice {
	border-top: 1px dashed var(--linija);
	margin-top: 0.7rem;
	padding-top: 0.6rem;
	display: grid;
	gap: 0.35rem;
}
.zd-utakmica {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0.6rem;
	align-items: baseline;
	font-size: 0.92rem;
}
.zd-utakmica span:last-child { text-align: right; }
.zd-utakmica b {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--plava);
	white-space: nowrap;
}

.zd-kup {
	display: flex;
	gap: 1.1rem;
	overflow-x: auto;
	padding-bottom: 0.8rem;
	scroll-snap-type: x proximity;
	margin-bottom: 0.6rem;
}
.zd-kolo {
	min-width: 15.5rem;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}
.zd-kolo-naziv {
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--plava);
	margin-bottom: 0.7rem;
}
.zd-parovi {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 0.7rem;
	flex: 1;
}
.zd-par {
	background: var(--podloga);
	border: 1px solid var(--linija);
	border-left: 3px solid var(--crvena);
	border-radius: 8px;
	padding: 0.55rem 5.2rem 0.55rem 0.8rem;
	display: grid;
	gap: 0.15rem;
	position: relative;
}
.zd-igrac { font-size: 0.95rem; color: var(--siva); }
.zd-igrac.zd-pobjednik { font-weight: 700; color: var(--tinta); }
.zd-igrac.zd-pobjednik::after {
	content: "✓";
	color: var(--crvena);
	margin-left: 0.4rem;
	font-weight: 800;
}
.zd-rezultat {
	position: absolute;
	right: 0.8rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--plava);
	font-size: 0.9rem;
}
.zd-napomena { color: var(--siva); font-size: 0.92rem; margin: 0.4rem 0 0; }

/* --------------------------------------------------------------- Novosti */

.novost-mreza {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.novost-kartica {
	background: var(--podloga);
	border: 1px solid var(--linija);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.novost-kartica:hover { box-shadow: var(--sjena); transform: translateY(-2px); }
.novost-slika img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.novost-tijelo { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: 0.4rem; }
.novost-datum { font-size: 0.82rem; color: var(--siva-svijetla); }
.novost-naslov { font-size: 1.12rem; font-weight: 700; }
.novost-naslov a { color: var(--tinta); text-decoration: none; }
.novost-naslov a:hover { color: var(--crvena); }
.novost-izvadak { margin: 0; font-size: 0.94rem; color: var(--siva); }

.novost-popis { list-style: none; margin: 0; padding: 0; }
.novost-popis li {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--linija);
}
.novost-popis a { font-weight: 600; color: var(--tinta); text-decoration: none; }
.novost-popis a:hover { color: var(--crvena); }
.novost-popis time { font-size: 0.85rem; color: var(--siva-svijetla); white-space: nowrap; }

.cipovi { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.cip {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--plava);
	background: var(--plava-blaga);
	border-radius: 999px;
	padding: 0.15rem 0.7rem;
	text-decoration: none;
}
.cip:hover { background: var(--plava); color: #fff; }

/* -------------------------------------------------- Stranice i članci */

.stranica-glava {
	background: var(--podloga-meka);
	border-bottom: 1px solid var(--linija);
	padding-block: 2.2rem;
}
.stranica-naslov { font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.5rem); }
.stranica-uvod { color: var(--siva); margin: 0.6rem 0 0; }

.sport-hero {
	background: var(--podloga-meka);
	border-bottom: 1px solid var(--linija);
	padding-block: 2.2rem;
}
.sport-hero-okvir { display: flex; gap: 1.1rem; align-items: center; }
.sport-hero-ikona {
	color: var(--crvena);
	background: var(--podloga);
	border: 1px solid var(--linija);
	border-radius: var(--radius);
	padding: 0.8rem;
	display: inline-flex;
	flex: none;
}
.sport-hero-naslov { font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.sport-hero-opis { color: var(--siva); margin: 0.4rem 0 0; max-width: 52ch; }

.clanak-slika { margin: 1.6rem 0 0; }
.clanak-slika img { border-radius: var(--radius); }
.clanak-natrag { margin-top: 2rem; }

.prozna { max-width: 46rem; }
.prozna > * + * { margin-top: 0.9rem; }
.prozna h2, .prozna h3 { margin-top: 1.8rem; font-weight: 700; }
.prozna h2 { font-size: 1.4rem; }
.prozna h3 { font-size: 1.15rem; }
.prozna ul, .prozna ol { padding-left: 1.4rem; }
.prozna li::marker { color: var(--crvena); }
.prozna blockquote {
	border-left: 3px solid var(--crvena);
	margin: 1.2rem 0;
	padding: 0.3rem 0 0.3rem 1.1rem;
	color: var(--siva);
}
.prozna table { border-collapse: collapse; width: 100%; }
.prozna th, .prozna td { border-bottom: 1px solid var(--linija); padding: 0.5rem 0.8rem 0.5rem 0; text-align: left; }
.prozna th { font-family: var(--naslovni); font-style: italic; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--siva); }
.prozna .wp-block-table { overflow-x: auto; }
.prozna .wp-block-file a:first-child { font-weight: 700; }
.prozna-uvod { margin-bottom: 1.8rem; }
.prozna .alignwide { max-width: 62rem; }

/* Blokovi koje tim slaže sam — gumbi, obavijesti, ručne medalje, galerija */
.prozna .wp-block-button__link {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	font-size: 0.98rem;
	border-radius: 999px;
	padding: 0.6rem 1.5rem;
	background: var(--crvena);
	color: #fff;
	text-decoration: none;
}
.prozna .wp-block-button__link:hover { background: var(--crvena-tamna); }
.prozna .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--tinta);
	color: var(--tinta);
}

.istaknuta-obavijest {
	background: var(--crvena-blaga);
	border-left: 4px solid var(--crvena);
	border-radius: 0 10px 10px 0;
	padding: 1rem 1.2rem;
}
.istaknuta-obavijest > * + * { margin-top: 0.6rem; }

.prozna .rez-kartica h3 { margin-top: 0; font-size: 1.1rem; }
.medalje-rucno { list-style: none; padding-left: 0; margin: 0.6rem 0 0; }
.medalje-rucno li { position: relative; padding-left: 1.5rem; margin: 0.4rem 0; }
.medalje-rucno li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--siva-svijetla);
}
.medalje-rucno .m-zlato::before { background: linear-gradient(135deg, #E4B62B, #B8860B); }
.medalje-rucno .m-srebro::before { background: linear-gradient(135deg, #B9BCC4, #8A8D93); }
.medalje-rucno .m-bronca::before { background: linear-gradient(135deg, #C07A3C, #8F4F26); }

.prozna .wp-block-gallery { gap: 0.6rem; }
.prozna .wp-block-gallery img { border-radius: 8px; }
.prozna .wp-block-file {
	background: var(--podloga-meka);
	border: 1px solid var(--linija);
	border-radius: 10px;
	padding: 0.8rem 1.1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: space-between;
}
.prozna .wp-block-file .wp-block-file__button {
	background: var(--crvena);
	color: #fff;
	border-radius: 999px;
	padding: 0.4rem 1.1rem;
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
}

/* ------------------------------------------------------------------ Poziv */

.poziv {
	background: linear-gradient(120deg, var(--crvena) 0%, var(--crvena-tamna) 70%);
	color: #fff;
}
.poziv-okvir {
	display: flex;
	gap: 1.4rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-block: 2.4rem;
}
.poziv-naslov { font-weight: 800; font-size: clamp(1.5rem, 4vw, 2rem); }
.poziv-tekst { margin: 0.5rem 0 0; opacity: 0.92; }

/* --------------------------------------------------------------- Podnožje */

.podnozje { background: var(--tinta); color: #C9CBD1; }
.podnozje a { color: #fff; }
.podnozje-okvir {
	display: grid;
	gap: 2rem;
	padding-block: 2.8rem 1.6rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.podnozje .znak-img { height: 52px; }
.podnozje-naziv {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	color: #fff;
	margin: 0.8rem 0 0.2rem;
}
.podnozje-mjesto { margin: 0; font-size: 0.9rem; }
.podnozje-naslov {
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #8A8D93;
	margin-bottom: 0.7rem;
}
.podnozje-izbornik { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.podnozje-izbornik a { text-decoration: none; }
.podnozje-izbornik a:hover { color: var(--magenta); }
.podnozje-blok p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.ds-logo {
	display: inline-block;
	background: #fff;
	border-radius: 10px;
	padding: 0.55rem 0.9rem;
	margin-top: 0.4rem;
	line-height: 0;
}
.ds-logo img { height: 46px; width: auto; }
.ds-logo:hover { outline: 2px solid var(--magenta); outline-offset: 2px; }
.podnozje-dno {
	border-top: 1px solid #33353B;
	padding-block: 1.1rem;
	font-size: 0.85rem;
	color: #8A8D93;
}
.podnozje-dno p { margin: 0; }

/* ------------------------------------------------------------- Straničenje */

.stranicenje { margin-top: 2rem; }
.stranicenje .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.stranicenje .page-numbers {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 700;
	text-decoration: none;
	color: var(--tinta);
	border: 2px solid var(--linija);
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
}
.stranicenje .page-numbers.current { background: var(--crvena); border-color: var(--crvena); color: #fff; }
.stranicenje a.page-numbers:hover { border-color: var(--crvena); color: var(--crvena); }

/* ------------------------------------------------------------------- 404 */

.greska-okvir { text-align: center; padding-block: 2rem; }
.greska-broj {
	font-family: var(--naslovni);
	font-style: italic;
	font-weight: 800;
	font-size: 5rem;
	color: var(--crvena);
	margin: 0;
	line-height: 1;
}
.greska .hero-akcije { justify-content: center; margin-top: 1.4rem; }