/* =========================================================
   GKČ Valpovo — main.css
   0. Fontovi
   1. Tokeni
   2. Reset i baza
   3. Tipografija
   4. Layout (container, section)
   5. Accessibility helperi
   ========================================================= */

/* ---------- 0. Fontovi ---------- */

/*
 * Lokalno hostano, NIKAD preko Google CDN-a: poziv na fonts.gstatic.com
 * šalje IP posjetitelja Googleu prije ikakve privole, što je GDPR problem
 * (presuda LG München I, 2022.). Ovako nijedan zahtjev ne izlazi izvan
 * naše domene.
 *
 * Oba su VARIJABILNA fonta suzena na wght 400–700, pa jedna datoteka
 * pokriva i regular i semibold i sve između — nema zasebnih datoteka po
 * rezu. Subset: Latin + Latin-1 + Latin Extended-A (svi hrvatski i
 * srednjoeuropski dijakritici) plus tipografska interpunkcija „ “ – …
 * Zajedno 70 KB.
 *
 * Licenca: SIL Open Font License; tekst stoji uz same datoteke.
 */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/lora.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- 1. Tokeni ---------- */

:root {
	/* Boje — početne, fino se usklađuju kad se potvrdi branding. */
	--color-primary: #174f43;
	--color-primary-dark: #103d35;
	--color-accent: #d8a62a;
	--color-accent-dark: #b98a1d;
	--color-text: #222;
	--color-muted: #6b6b6b;
	--color-bg: #ffffff;
	--color-surface: #f6f5f1;
	--color-surface-cool: #e9f0ef; /* hladnija podloga, kartica „O knjižnici“ */
	--color-border: #e4e2db;
	--color-on-dark: #ffffff;
	--color-error: #a4322a; /* greške u obrascima; paleta inače nema crvenu */

	/* Tipografija */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-serif: "Lora", Georgia, "Iowan Old Style", "Times New Roman", Times, serif;

	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
	--fs-h3: clamp(1.25rem, 2vw, 1.5rem);
	--fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
	--fs-h1: clamp(2.25rem, 5vw, 3.5rem);

	--lh-body: 1.6;
	--lh-heading: 1.2;

	/* Radijusi */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	/* Prostor */
	--container: 1200px;
	--container-pad: clamp(1rem, 4vw, 2rem);
	--space-section: clamp(1.5rem, 3vw, 3rem);

	/* Boje ikona u brzim poveznicama */
	--tone-forest: #174f43;
	--tone-gold: #d8a62a;
	--tone-moss: #3f7a63;
	--tone-sage: #7fae8c;

	/* Header i hero */
	--header-pad: 0.75rem;
	/* Veliko zaobljenje punih traka: hero prema dolje, footer prema gore. */
	--radius-block: clamp(1.5rem, 4vw, 3rem);
	--tap-target: 2.75rem; /* 44px */

	/* Ostalo */
	--shadow-card: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);
	--transition: 160ms ease;
}

/* ---------- 2. Reset i baza ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;

	/* Nijedna sekcija ne smije gurati stranicu u horizontalni scroll. */
	overflow-x: hidden;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* JS skriva panele preko `hidden` — to mora nadjačati layout pravila ispod. */
[hidden] {
	display: none !important;
}

/* ---------- 3. Tipografija ---------- */

h1,
h2,
h3,
h4 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: var(--lh-heading);
	color: var(--color-primary);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
}

p {
	text-wrap: pretty;
}

a {
	color: var(--color-primary);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--color-primary-dark);
}

/* ---------- 4. Layout ---------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.section {
	padding-block: var(--space-section);
}

.section--surface {
	background-color: var(--color-surface);
}

/* ---------- 5. Accessibility ---------- */

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

/* Fokus prikazujemo samo tipkovnici, ali nikad ga ne uklanjamo bez zamjene. */
:focus:not(:focus-visible) {
	outline: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background-color: var(--color-primary);
	color: #fff;
	text-decoration: none;
	transform: translateY(-120%);
}

.skip-link:focus {
	color: #fff;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 6. Gumbi ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--tap-target);
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;

	/* Kratka oznaka gumba nikad se ne lomi u dva reda. */
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition);
}

.btn--primary {
	background-color: var(--color-primary);
	color: var(--color-on-dark);
}

.btn--primary:hover {
	background-color: var(--color-primary-dark);
	color: var(--color-on-dark);
}

.btn--accent {
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.btn--accent:hover {
	background-color: var(--color-accent-dark);
	color: var(--color-primary-dark);
}

/* ---------- 7. Zaglavlje ---------- */

.site-header {
	position: relative;
	z-index: 20;
	background-color: var(--color-bg);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas:
		"brand utility toggle"
		"nav   nav     nav";
	align-items: center;
	column-gap: 0.75rem;
	padding-block: var(--header-pad);
}

/* --- Brand --- */

.site-brand {
	grid-area: brand;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.site-brand__logo {
	display: block;
	flex: 0 0 auto;

	/* Slika je jedini sadržaj; line-height bi inače dodao prazan redak ispod. */
	line-height: 0;
}

.site-brand__logo img {
	width: auto;
	height: clamp(2.5rem, 6vw, 3.25rem);
}

.site-brand__name {
	display: block;
	font-family: var(--font-serif);
	font-size: clamp(0.8125rem, 2.2vw, 1rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-primary);
}

.site-brand__line {
	display: block;
}

/* --- Utility (radno vrijeme, mreže, mail, pretraga) --- */

.site-header__utility {
	grid-area: utility;
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 1.5vw, 1rem);
	justify-self: end;
}

.site-hours {
	display: none; /* na mobitelu je u footeru, ne u zaglavlju */
	align-items: center;
	gap: 0.5rem;
	color: var(--color-muted);
}

.site-hours__label {
	display: block;
	font-size: 0.6875rem;
	line-height: 1.3;
}

.site-hours__value {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text);
}

.social-links {
	display: flex;
	align-items: center;
	gap: 0.125rem;
}

.social-links__item,
.site-header__mail {
	display: grid;
	place-items: center;
	width: var(--tap-target);
	height: var(--tap-target);
	border-radius: 50%;
	color: var(--color-muted);
	transition: color var(--transition), background-color var(--transition);
}

.social-links__item:hover,
.site-header__mail:hover {
	color: var(--color-primary);
	background-color: var(--color-surface);
}

.social-links--header {
	display: none;
}

.search-toggle {
	display: grid;
	place-items: center;
	width: var(--tap-target);
	height: var(--tap-target);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	transition: background-color var(--transition);
}

.search-toggle:hover {
	background-color: var(--color-primary-dark);
}

/* --- Hamburger --- */

.nav-toggle {
	grid-area: toggle;
	display: grid;
	place-items: center;
	width: var(--tap-target);
	height: var(--tap-target);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-primary);
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
	display: block;
	width: 1.375rem;
	height: 2px;
	background-color: currentcolor;
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
	content: "";
	position: relative;
}

.nav-toggle__icon::before {
	top: -7px;
}

.nav-toggle__icon::after {
	top: 5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
	background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
	transform: translateY(-5px) rotate(-45deg);
}

/* --- Navigacija --- */

.site-nav {
	grid-area: nav;
}

/* Bez JS-a izbornik ostaje otvoren; s JS-om ga zatvaramo dok se ne klikne. */
.has-js .site-nav {
	display: none;
}

.site-header.is-nav-open .site-nav {
	display: block;
}

.site-nav__list {
	display: flex;
	flex-direction: column;
	padding-block: 0.5rem;
	border-top: 1px solid var(--color-border);
	margin-top: var(--header-pad);
}

.site-nav__list a {
	display: block;
	padding: 0.75rem 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-primary);
}

.site-nav__list a:hover {
	color: var(--color-accent-dark);
}

/* Gumb za otvaranje podizbornika (dodaje ga main.js). */
.submenu-toggle {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: var(--tap-target);
	height: var(--tap-target);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-primary);
}

.submenu-toggle .icon {
	transition: transform var(--transition);
}

.submenu-toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.site-nav .sub-menu {
	padding-left: 1rem;
}

/*
 * Podizbornici kao accordion — samo na mobitelu i tabletu.
 * Vezano uz `.has-js`: bez JS-a nema gumba, pa podizbornici ostaju
 * otvoreni i navigacija je i dalje potpuna.
 */
@media (max-width: 63.999rem) {
	.site-nav .menu-item-has-children {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.site-nav .menu-item-has-children > .sub-menu {
		grid-column: 1 / -1;
	}

	.has-js .site-nav .sub-menu {
		display: none;
	}

	.has-js .site-nav .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}
}

.site-nav .sub-menu a {
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-muted);
}

.site-nav__empty {
	padding-block: 0.75rem;
	font-size: 0.875rem;
	color: var(--color-muted);
}

/* --- Pretraga --- */

.site-search {
	padding-block: 1rem;
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border);
}

.site-search .search-form {
	display: flex;
	gap: 0.5rem;

	/* Na širokom ekranu traka ne ide preko cijelog kontejnera. */
	max-width: 30rem;
}

/*
 * WordPress omotava polje u <label>, pa je flex stavka label — ne input.
 * Rastezanje mora ići ovdje, inače polje ostaje na zadanoj širini.
 */
.site-search .search-form > label {
	flex: 1 1 auto;
	min-width: 0;
}

.site-search .search-field {
	width: 100%;
	min-height: var(--tap-target);
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg);
}

.site-search .search-submit {
	/* Gumb ne smije shrinkati — inače mu se oznaka prelomi. */
	flex: 0 0 auto;
	min-height: var(--tap-target);
	padding-inline: 1.5rem;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --- Desktop zaglavlje --- */

@media (min-width: 64rem) {
	.site-header__inner {
		position: relative;
		grid-template-columns: auto 1fr;

		/*
		 * Logo je u gornjem redu uz radno vrijeme i ikone; izbornik ima
		 * cijeli donji red za sebe. Dok je logo držao oba reda, izborniku
		 * je ostajao samo dio širine pa se s više stavki lomio u dva reda.
		 */
		grid-template-areas:
			"brand utility"
			"nav   nav";
		row-gap: 0.5rem;
		padding-block: 1rem;
	}

	.site-brand__name {
		font-size: 0.9375rem;
		letter-spacing: 0.04em;
	}

	.site-hours,
	.social-links--header {
		display: flex;
	}

	.nav-toggle {
		display: none;
	}

	.has-js .site-nav {
		display: block;
	}

	.site-nav__list {
		flex-direction: row;
		flex-wrap: wrap;

		/* Stavke se razvuku od lijevog do desnog ruba kontejnera. */
		justify-content: space-between;
		align-items: center;
		gap: clamp(0.75rem, 1.8vw, 1.75rem);
		padding-block: 0;
		margin-top: 0;
		border-top: 0;
	}

	.site-nav__list > li {
		position: relative;
	}

	.site-nav__list > li > a {
		position: relative;
		padding: 0.5rem 0;
	}

	/*
	 * Aktivna stavka — zlatna crta ispod, kao na referenci.
	 *
	 * Apsolutno pozicionirana: da je u toku, povećala bi visinu te stavke,
	 * pa bi joj tekst zbog `align-items: center` sjeo više od ostalih.
	 */
	.site-nav__list > .current-menu-item > a::after,
	.site-nav__list > .current-menu-ancestor > a::after,
	.site-nav__list > .current_page_item > a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0.25rem;
		height: 2px;
		background-color: var(--color-accent);
		border-radius: 2px;
	}

	.site-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 30;
		min-width: 14rem;
		padding: 0.5rem;
		background-color: var(--color-bg);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-card);
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.25rem);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	}

	.site-nav .menu-item-has-children:hover > .sub-menu,
	.site-nav .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav .sub-menu a {
		padding: 0.5rem 0.75rem;
		border-radius: var(--radius-sm);
	}

	.site-nav .sub-menu a:hover {
		background-color: var(--color-surface);
	}

	/* Na desktopu podizbornik otvara hover i focus-within, gumb ne treba. */
	.submenu-toggle {
		display: none;
	}
}

/* ---------- 8. Hero ---------- */

.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(22rem, 60vh, 40rem);
	background-color: var(--color-primary-dark);
	border-end-start-radius: var(--radius-block);
	border-end-end-radius: var(--radius-block);
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
}

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay samo koliko treba za čitljivost teksta slijeva. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			rgb(16 40 34 / 92%) 0%,
			rgb(16 40 34 / 80%) 30%,
			rgb(16 40 34 / 35%) 62%,
			rgb(16 40 34 / 12%) 100%
		);
}

.hero--no-image {
	background-image: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: clamp(3rem, 8vw, 6rem);
}

.hero__content {
	max-width: 34rem;
}

.hero__title {
	color: var(--color-on-dark);
	font-weight: 400;
}

.hero__lead {
	max-width: 30rem;
	margin-top: 1.25rem;
	font-size: var(--fs-lead);
	color: rgb(255 255 255 / 88%);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* ---------- 9. Brze poveznice ---------- */

.quick-links {
	position: relative;
	z-index: 2;

	/* Kartica presijeca donji rub heroa. */
	margin-top: clamp(-3.5rem, -5vw, -1.5rem);
}

.quick-links__grid {
	display: grid;
	grid-template-columns: 1fr;
	background-color: var(--color-bg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);

	/* Razdjelnici ne smiju viriti izvan zaobljenih kutova. */
	overflow: hidden;
}

/*
 * Ikona lijevo, oba teksta desno u istom stupcu, strelica poravnata s tekstom:
 *
 *   ┌──────┬──────────────┐
 *   │      │  NASLOV      │
 *   │ ico  │  opis…       │
 *   │      │  →           │
 *   └──────┴──────────────┘
 */
.quick-link {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto 1fr;
	column-gap: 0.875rem;
	row-gap: 0.25rem;

	/* Fiksno: container staje na 1200px pa se ćelije ionako dalje ne šire. */
	padding: 1.6rem 1.1rem;
	text-decoration: none;
	color: inherit;
	transition: background-color var(--transition);
}

.quick-link:hover {
	background-color: var(--color-surface);
	color: inherit;
}

.quick-link__badge {
	/* Stupac lijevo, uz naslov i opis — strelica ostaje ispod teksta. */
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--quick-link-tone, var(--color-primary));
	color: var(--color-on-dark);
}

.quick-link--forest {
	--quick-link-tone: var(--tone-forest);
}

.quick-link--gold {
	--quick-link-tone: var(--tone-gold);
}

.quick-link--moss {
	--quick-link-tone: var(--tone-moss);
}

.quick-link--sage {
	--quick-link-tone: var(--tone-sage);
}

.quick-link__title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text);
}

.quick-link__text {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-muted);
}

.quick-link__arrow {
	/* Poravnata s tekstom, ne s ikonom, i drži se dna bez obzira na duljinu opisa. */
	grid-column: 2;
	grid-row: 3;
	align-self: end;
	display: block;
	color: var(--color-primary);
	transition: transform var(--transition);
}

.quick-link:hover .quick-link__arrow {
	transform: translateX(0.25rem);
}

/* Razdjelnici — vodoravni na mobitelu, okomiti kad ima stupaca. */
.quick-link + .quick-link {
	border-top: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
	.quick-links__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.quick-link + .quick-link {
		border-top: 0;
	}

	.quick-link:nth-child(n + 3) {
		border-top: 1px solid var(--color-border);
	}

	.quick-link:nth-child(even) {
		border-left: 1px solid var(--color-border);
	}
}

@media (min-width: 64rem) {
	.quick-links__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.quick-link:nth-child(n + 3) {
		border-top: 0;
	}

	.quick-link + .quick-link {
		border-left: 1px solid var(--color-border);
	}
}

/* ---------- 10. Zaglavlje sekcije ---------- */

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.section-head__title {
	margin: 0;
}

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition);
}

.link-more:hover {
	color: var(--color-accent-dark);
}

.link-more .icon {
	/* Strelica je zlatna i u mirovanju — ista boja koju tekst dobije na hover. */
	color: var(--color-accent-dark);
	transition: transform var(--transition);
}

.link-more:hover .icon {
	transform: translateX(0.25rem);
}

/* ---------- 11. Kartica zapisa (događanja, novosti, kategorije, pretraga) ---------- */

.events__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.entry-card {
	background-color: var(--color-surface);
	border-radius: var(--radius-md);

	/* Slika i datumski badge moraju pratiti zaobljeni kut. */
	overflow: hidden;
	transition: box-shadow var(--transition);
}

.entry-card:hover {
	box-shadow: var(--shadow-card);
}

.entry-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.entry-card__media {
	position: relative;

	/* Fiksni omjer — slika se učita bez pomicanja layouta. */
	aspect-ratio: 4 / 3;
	background-color: var(--color-border);
}

.entry-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entry-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(135deg, #e8e6df, #d9d6cc);
	color: var(--color-muted);
}

/* Datum sjedi u gornjem lijevom kutu slike, zaobljen samo prema unutra. */
.entry-card__date {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	justify-items: center;
	padding: 0.375rem 0.625rem 0.5rem;
	background-color: #7fae8c;

	/* Svijetla pozadina — tamno slovo zbog kontrasta. */
	color: var(--color-on-dark);
	border-end-end-radius: var(--radius-sm);
}

.entry-card__day {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.1;
}

.entry-card__month {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.entry-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;

	/* Meta redak se drži dna i kad su naslovi različite duljine. */
	flex: 1 1 auto;
	padding: 0.875rem 1rem 1rem;
}

.entry-card__category {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.entry-card__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-text);
}

.entry-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--color-muted);
}

.entry-card__when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.625rem;
}

/* Ikona i vrijednost drže se zajedno i ne lome se jedna od druge. */
.entry-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	white-space: nowrap;
}

.entry-card__meta-item .icon {
	flex: 0 0 auto;
}

.entry-card__arrow {
	display: block;

	/* Datum i vrijeme lijevo, strelica uvijek uz desni rub. */
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--color-primary);
	transition: transform var(--transition);
}

.entry-card__link:hover .entry-card__arrow {
	transform: translateX(0.25rem);
}

@media (min-width: 48rem) {
	.events__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.events__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- 12. O knjižnici + Novosti ---------- */

.about-news__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

/* Naslov bez „vidi sve“ linka — nema se s čim poravnavati u redak. */
.section-head--stacked {
	margin-bottom: 0;
}

.squiggle {
	display: block;
	color: var(--color-accent);
}

/* --- O knjižnici --- */

.about-card {
	display: grid;
	grid-template-columns: 1fr;

	/*
	 * Bijela, jer sekcija oko nje ima sivu podlogu.
	 * Namjerno odvojeno od .media-card (block pattern) — isti izgled,
	 * ali dvije komponente; promjena ovdje ne dira sadržaj u editoru.
	 */
	background-color: var(--color-bg);
	border-radius: var(--radius-md);

	/* Fotografija ide do ruba kartice pa mora pratiti zaobljenje. */
	overflow: hidden;
}

.about-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	padding: clamp(1.25rem, 2.5vw, 2rem);
}

/*
 * Naslov s valićem ostaje gore, gumb dolje, a tekst pada u sredinu:
 * dvije `auto` margine dijele slobodan prostor na pola.
 */
.about-card__text,
.about-card__content .btn {
	margin-top: auto;
}

.about-card__text {
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.about-card__media {
	position: relative;

	/* Omjer drži visinu dok se slika ne učita; na desktopu preuzima visinu kartice. */
	aspect-ratio: 16 / 10;
	background-color: var(--color-border);
}

.about-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(135deg, #e8e6df, #d9d6cc);
	color: var(--color-muted);
}

/* --- Novosti --- */

.news-card {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
}

/*
 * Na sivoj podlozi sekcije kartica novosti mora biti bijela — inače bi se
 * stopila s pozadinom. Scoped samo ovdje; u sidebaru objave ostaje siva,
 * jer je tamo pozadina stranice bijela.
 */
.section--surface .news-card,
.section--surface .recommendations,
.section--surface .calendar-card {
	background-color: var(--color-bg);
}

/*
 * Kompaktna varijanta za sidebar. Naslov ostaje h2 zbog strukture dokumenta —
 * ovdje se mijenja samo izgled, na otprilike pola veličine.
 */
.news-card--compact .section-head__title {
	font-size: clamp(1rem, 1.6vw, 1.8rem);
}

.news-card--compact .section-head {
	margin-bottom: 1rem;
}

.news-list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.news-item__link {
	display: grid;
	grid-template-columns: auto 1fr;

	/* Tekst kreće od vrha sličice, ne centriran uz nju. */
	align-items: start;
	gap: 0.875rem;
	color: inherit;
	text-decoration: none;
}

.news-item__thumb {
	display: grid;
	place-items: center;

	/* Horizontalni kadar; object-fit reže sliku bez obzira na njezin omjer. */
	width: 140px;
	height: 90px;
	border-radius: var(--radius-sm);
	background-color: var(--color-border);
	color: var(--color-muted);
	overflow: hidden;
}

.news-item__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-item__body {
	display: grid;
	gap: 0.1875rem;
	min-width: 0;
}

.news-item__title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-text);
	transition: color var(--transition);
}

.news-item__link:hover .news-item__title {
	color: var(--color-primary);
}

.news-item__date {
	/* Ikona i datum se drže zajedno, kao u meta retku kartica događanja. */
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	font-size: 0.75rem;
	color: var(--color-muted);
}

.news-item__date .icon {
	flex: 0 0 auto;
}

.news-list__empty {
	font-size: 0.875rem;
	color: var(--color-muted);
}

@media (min-width: 40rem) {
	.about-card {
		/* Tekst lijevo, fotografija uz desni rub kartice. */
		grid-template-columns: 1fr 0.8fr;
	}

	.about-card__media {
		aspect-ratio: auto;
	}
}

@media (min-width: 64rem) {
	.about-news__grid {
		grid-template-columns: 1.35fr 1fr;

		/* Bez align-items: obje kartice se rastežu na visinu više od njih dvije. */
	}
}

/* ---------- 13. Digitalne usluge ---------- */

.digital__card {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
}

/* U ovoj sekciji valić stoji uz naslov, ne ispod njega kao u „O knjižnici“. */
.section-head__title .squiggle {
	display: inline-block;
	margin-left: 0.625rem;
	vertical-align: middle;
}

.digital__grid {
	display: grid;

	/* Tri stavke: 3 stupca na desktopu, 2 na tabletu, 1 na mobitelu. */
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.25rem 1.5rem;
}

/* Isti princip kao brze poveznice: ikona lijevo, oba teksta desno. */
.digital-link {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.875rem;
	row-gap: 0.25rem;
	text-decoration: none;
	color: inherit;
}

.digital-link__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	color: var(--color-primary);
	transition: color var(--transition);
}

.digital-link:hover .digital-link__icon {
	color: var(--color-accent-dark);
}

.digital-link__title {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text);
}

.digital-link__text {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-muted);
}

/* ---------- 14. Statistika ---------- */

.stats {
	position: relative;

	/* Vlastiti stacking context — pozadina ne može ispod susjednih sekcija. */
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	background-color: var(--color-primary);
	color: var(--color-on-dark);
}

/*
 * Slot za pozadinsku sliku. Kadrira se uz desni rub i prigušuje
 * da kontrast brojki ostane visok. Prazno = samo zelena podloga.
 */
.stats__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.stats__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	opacity: 0.22;
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
	gap: 1.75rem 1rem;
}

/* Ikona lijevo, brojka i opis desno — isti princip kao ostale kartice. */
.stat {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.875rem;
	align-items: center;
}

.stat__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	color: var(--color-accent);
}

.stat__value {
	grid-column: 2;
	grid-row: 1;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
}

.stat__label {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: rgb(255 255 255 / 85%);
}

@media (min-width: 64rem) {
	.stats__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- 15. Preporuke + kalendar ---------- */

.reading__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.recommendations,
.calendar-card {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);

	/* Bez ovoga grid stavka može nabujati preko svog fr udjela. */
	min-width: 0;
}

/* Kalendar je zasad samo naslov — visina da kartica ne kolabira. */
.calendar-card {
	min-height: 14rem;
}

/* --- Karusel --- */

.carousel {
	position: relative;
}

.carousel__track {
	/*
	 * Broj vidljivih naslovnica je jedini parametar — širina kartice
	 * se računa iz njega, pa uvijek stane točno toliko knjiga.
	 */
	--carousel-gap: 1rem;
	--carousel-visible: 2;

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--carousel-visible) - 1) * var(--carousel-gap)) / var(--carousel-visible)
	);
	gap: var(--carousel-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	/* Strelice preuzimaju ulogu scrollbara. */
	scrollbar-width: none;

	/*
	 * Bez ovoga vodoravni scroller doduše ispravno reže sadržaj, ali njegova
	 * puna širina i dalje ulazi u obračun širine dokumenta: na 375 px
	 * naslovnica je „bila“ 834 px široka. Stranica se nije mogla pomicati
	 * bočno, ali je iOS Safari dopuštao pinch-zoom out na tu izmišljenu
	 * širinu, pa je layout izgledao kao da pliva.
	 *
	 * `contain: paint` kaže pregledniku da djeca ne iscrtavaju izvan okvira,
	 * pa ih prestaje pribrajati širini stranice. Vizualno ne mijenja ništa,
	 * a stariji preglednici ga jednostavno ignoriraju.
	 */
	contain: paint;
}

.carousel__track::-webkit-scrollbar {
	display: none;
}

.book {
	scroll-snap-align: start;
}

.book__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.book__cover {
	/*
	 * Grid, ne block: jedino dijete (slika ili placeholder) time popunjava
	 * okvir u oba smjera i ne oslanja se na height: 100%.
	 */
	display: grid;

	/* Fiksni omjer naslovnice — nema pomicanja pri učitavanju slika. */
	aspect-ratio: 2 / 3;
	border-radius: var(--radius-sm);
	background-color: var(--color-border);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition);
}

.book__link:hover .book__cover {
	transform: translateY(-0.25rem);
}

.book__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.book__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.25rem;
	width: 100%;
	height: 100%;
	padding: 0.75rem;
	background-image: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
	color: var(--color-on-dark);
}

.book__placeholder-title {
	font-family: var(--font-serif);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
}

.book__placeholder-author {
	font-size: 0.6875rem;
	color: rgb(255 255 255 / 75%);
}

.carousel__btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: var(--tap-target);
	height: var(--tap-target);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	box-shadow: var(--shadow-card);
	transition: background-color var(--transition);
}

.carousel__btn:hover {
	background-color: var(--color-primary-dark);
}

/* Kraj liste — gumb ostaje vidljiv da se layout ne trza. */
.carousel__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* JS označi karusel kad sve stavke stanu — tek tada strelice nestaju. */
.carousel--static .carousel__btn {
	display: none;
}

.carousel__btn--prev {
	left: -1.25rem;
}

.carousel__btn--next {
	right: -1.25rem;
}

@media (min-width: 48rem) {
	.carousel__track {
		--carousel-visible: 3;
	}
}

@media (min-width: 64rem) {
	.reading__grid {
		grid-template-columns: 1.35fr 1fr;
	}

	.carousel__track {
		--carousel-visible: 4;
	}
}

/* ---------- 16. Newsletter ---------- */

/*
 * Newsletter nije .section, pa razmak dobiva ovdje — isti kao sve sekcije
 * iznad. `.reading` više nema vlastiti donji razmak i koristi zadani iz .section.
 */
.newsletter {
	padding-block: var(--space-section);
}

.newsletter__card {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1rem 1.25rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
}

.newsletter__icon {
	display: grid;
	place-items: center;
	color: var(--color-primary);
}

.newsletter__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.newsletter__lead {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;

	/* Na mobitelu ide u puni red ispod ikone i teksta. */
	grid-column: 1 / -1;
}

.newsletter__input {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: var(--tap-target);
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg);
	color: var(--color-text);
}

.newsletter__input::placeholder {
	color: var(--color-muted);
}

@media (min-width: 64rem) {
	.newsletter__card {
		/*
		 * Ikona | tekst | forma.
		 * Formi je dano 35% širine kartice; ikona i tekst dijele preostalih
		 * 65%. Bez zadane vrijednosti `auto` bi formi dao samo koliko treba,
		 * a sav višak otišao bi u prazninu srednjeg stupca.
		 */
		grid-template-columns: auto minmax(0, 1fr) 35%;
	}

	.newsletter__form {
		grid-column: auto;
		flex-wrap: nowrap;
		min-width: 0;
	}

	.newsletter__input {
		/* Popuni sve što gumb ne zauzme. */
		flex: 1 1 auto;
	}

	/* Gumb se ne smije stiskati — inače mu se oznaka lomi. */
	.newsletter__form .btn {
		flex: 0 0 auto;
	}
}

/* ---------- 17. Podnožje ---------- */

.site-footer {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	background-color: var(--color-primary);
	color: rgb(255 255 255 / 82%);

	/* Zrcalno herou: on je zaobljen prema dolje, footer prema gore. */
	border-start-start-radius: var(--radius-block);
	border-start-end-radius: var(--radius-block);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem 1.5rem;
}

.site-footer__title {
	margin: 0 0 0.875rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-on-dark);
}

/* --- Naziv i kontakt --- */

.footer-brand {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--font-serif);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-on-dark);
}

.footer-brand:hover {
	color: var(--color-accent);
}

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-style: normal;
	font-size: 0.8125rem;
}

.footer-contact__item {
	display: flex;

	/* Ikona ostaje uz prvi redak i kad se adresa prelomi. */
	align-items: flex-start;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

.footer-contact__item .icon {
	flex: 0 0 auto;
	margin-top: 0.1875rem;
	color: var(--color-accent);
}

a.footer-contact__item:hover {
	color: var(--color-on-dark);
}

/* --- Brzi linkovi --- */

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.8125rem;
}

.footer-menu a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

.footer-menu a:hover {
	color: var(--color-accent);
}

/* --- Radno vrijeme --- */

.footer-hours {
	margin: 0;
	font-size: 0.8125rem;
}

.footer-hours__day {
	font-weight: 600;
	color: var(--color-on-dark);
}

.footer-hours__time {
	margin: 0 0 0.625rem;
}

.footer-hours__time:last-child {
	margin-bottom: 0;
}

/* --- Društvene mreže i karta --- */

/*
 * Dvije klase namjerno: reset `ul[class] { margin: 0 }` je specifičniji
 * od jedne klase i inače bi pojeo donji razmak do karte.
 */
.social-links.social-links--footer {
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.social-links--footer .social-links__item {
	width: 2.5rem;
	height: 2.5rem;
	background-color: rgb(255 255 255 / 10%);
	color: var(--color-on-dark);
}

.social-links--footer .social-links__item:hover {
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.footer-map {
	max-width: 18rem;

	/* Fiksan omjer drži prostor prije nego se lazy iframe učita — nema CLS-a. */
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-sm);
	background-color: rgb(255 255 255 / 8%);
	overflow: hidden;
}

.footer-map__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Donja traka --- */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-block: 1.25rem;
	border-top: 1px solid rgb(255 255 255 / 15%);
	font-size: 0.75rem;
}

.site-footer__copy {
	margin: 0;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.footer-legal a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

.footer-legal a:hover {
	color: var(--color-accent);
}

@media (min-width: 48rem) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.site-footer__grid {
		grid-template-columns: 1.3fr 1fr 1fr 1fr;
	}
}

/* ---------- 18. Zaglavlje stranice (putanja + naslov) ---------- */

.page-header {
	/* Uža traka od heroa, ali istog jezika: ista zelena i isto zaobljenje. */
	position: relative;

	/* Vlastiti stacking context da pozadinska slika ostane unutar trake. */
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	border-end-start-radius: var(--radius-block);
	border-end-end-radius: var(--radius-block);
}

/* Viša varijanta za stranice — sadržaj se okomito centrira. */
.page-header--large {
	display: grid;
	align-items: center;
	min-height: clamp(15rem, 34vw, 25rem);
}

.page-header__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.page-header__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zatamnjenje koliko treba da bijeli naslov ostane čitljiv na svakoj fotografiji. */
.page-header__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		180deg,
		rgb(16 40 34 / 80%),
		rgb(16 40 34 / 66%)
	);
}

/*
 * Bez istaknute slike traka nije prazna zelena ploha — u pozadinu ide
 * ornament knjižnice (knjige u oba donja kuta, sredina prazna, pa naslov
 * ostaje čist).
 *
 * Ide kao ::before, a ne kao background na samom elementu, da se prozirnost
 * može podesiti neovisno o tekstu. Putanja je relativna na ovu datoteku,
 * pa ne ovisi o domeni.
 *
 * `100% auto` umjesto `cover`: širina uvijek stane, pa oba kutna ornamenta
 * ostaju vidljiva i na mobitelu — `cover` bi ih na uskom ekranu odrezao.
 */
.page-header:not(.page-header--media)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../../images/bg-siluet-knjiznica.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	opacity: 0.1;
	pointer-events: none;
}

.page-header__title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 400;
	color: var(--color-on-dark);
}

.breadcrumb {
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	color: rgb(255 255 255 / 75%);
}

.breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumb__item a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

.breadcrumb__item a:hover {
	color: var(--color-accent);
}

.breadcrumb__item [aria-current="page"] {
	color: var(--color-on-dark);
}

.breadcrumb__sep {
	display: block;
	color: rgb(255 255 255 / 45%);
}

/* ---------- 19. Objava ---------- */

/* Dvostupčani raspored — dijele ga objave, stranice i ostali predlošci. */
.content-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding-block: var(--space-section);
}

.content-layout__main {
	min-width: 0;
}

.main-sidebar {
	min-width: 0;
	display: grid;
	align-content: start;
	gap: 1.5rem;
}

.single__media {
	margin: 0 0 1.25rem;
}

.single__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.entry-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	color: inherit;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: color var(--transition);
}

.entry-meta__item .icon {
	flex: 0 0 auto;
	color: var(--color-accent-dark);
}

a.entry-meta__item:hover {
	color: var(--color-primary);
}

/* --- Sadržaj iz Gutenberga --- */

.entry-content > * + * {
	margin-top: 1.25rem;
}

.entry-content h2 {
	margin-top: 2.25rem;
	font-size: var(--fs-h3);
}

.entry-content h3 {
	margin-top: 1.75rem;
	font-size: 1.125rem;
}

/*
 * Gutenberg blokovima liste daju klasu (wp-block-list), pa ih globalni
 * reset `ul[class] { list-style: none }` obezglavi. Ovdje ih vraćamo —
 * samo unutar sadržaja, da komponente teme ostanu bez oznaka.
 */
.entry-content ul,
.entry-content ol {
	padding-left: 1.5rem;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ul ul {
	list-style: circle;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li::marker {
	color: var(--color-accent-dark);
}

.entry-content ol > li::marker {
	color: var(--color-primary);
	font-weight: 700;
}

.entry-content li + li {
	margin-top: 0.375rem;
}

/* Ugniježđena lista treba zrak, a `> * + *` je ne dohvaća. */
.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0.375rem;
}

.entry-content img {
	border-radius: var(--radius-sm);
}

/* --- Poveznice na dokumente --- */

.entry-content .doc-link {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1.125rem;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	text-decoration: none;
	transition: background-color var(--transition), border-color var(--transition);
}

/*
 * Podloga potamni za jedan korak (surface → border), tekst u tamnozelenu.
 * Ostaje svijetla pa tipske boje ikona vrijede i u hoveru — ne treba ih gasiti.
 * Fokus dobiva isto stanje da tipkovnica ne bude zakinuta.
 */
.entry-content .doc-link:hover,
.entry-content .doc-link:focus-visible {
	background-color: var(--color-border);
	border-color: var(--color-border);
	color: var(--color-primary);
}

.doc-link__icon {
	display: grid;
	place-items: center;

	/* Ikone imaju različite viewBoxove — fiksni okvir ih poravnava. */
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;

	/*
	 * Sve ikone jedne boje — razliku nosi crtež, ne boja.
	 * Paleta teme nema crvenu ni plavu, pa bi šarene nijanse ionako bile
	 * proizvoljne, a ne prepoznatljive konvencije tipova datoteka.
	 */
	color: var(--color-primary);
}

.doc-link__glyph {
	width: 100%;
	height: 100%;
}

.doc-link__text {
	min-width: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
}

/*
 * Klase .doc-link--pdf / --word / --excel / --ppt / --file i dalje se ispisuju
 * u markupu. Ne nose boju, ali ostaju kao hook ako ikad zatreba razlikovanje.
 */

/*
 * Obična web poveznica — tamna varijanta iste kartice.
 * Dolazi nakon općeg hover pravila jer im je specifičnost jednaka.
 */
.entry-content .doc-link--url {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-dark);
}

.entry-content .doc-link--url .doc-link__icon {
	color: var(--color-accent);
}

.entry-content .doc-link--url:hover,
.entry-content .doc-link--url:focus-visible {
	background-color: var(--color-muted);
	border-color: var(--color-muted);
	color: var(--color-on-dark);
}

.entry-content blockquote {
	padding-left: 1.25rem;
	border-left: 3px solid var(--color-accent);
	color: var(--color-muted);
	font-style: italic;
}

@media (min-width: 64rem) {
	.content-layout {
		/*
		 * minmax(0, …) čuva glavni stupac od širenja zbog dugog sadržaja.
		 * 22rem jer sidebar nosi karticu novosti sa sličicom od 140px —
		 * uže od toga i naslovi bi se lomili u previše redaka.
		 */
		grid-template-columns: minmax(0, 1fr) 22rem;
		gap: 3rem;
	}
}

/* ---------- 20. Galerija ---------- */

/*
 * Zamjenjuje WordPressov zadani float raspored (isključen u setup.php).
 * Broj stupaca dolazi iz klase gallery-columns-N koju WP sam ispisuje,
 * pa se mijenja iz editora bez diranja CSS-a.
 */
.entry-content .gallery {
	--gallery-columns: 3;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin: 0;
}

.entry-content .gallery-columns-1 {
	--gallery-columns: 1;
}

.entry-content .gallery-columns-2 {
	--gallery-columns: 2;
}

.entry-content .gallery-columns-4 {
	--gallery-columns: 4;
}

.entry-content .gallery-columns-5 {
	--gallery-columns: 5;
}

.entry-content .gallery-columns-6 {
	--gallery-columns: 6;
}

.entry-content .gallery-item {
	margin: 0;
	min-width: 0;
}

/*
 * Fiksni omjer izjednačava redove — slike su miješanih orijentacija,
 * pa bi bez ovoga raspored bio nazubljen.
 */
.entry-content .gallery-icon {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
}

.entry-content .gallery-icon a {
	display: block;
	width: 100%;
	height: 100%;
}

.entry-content .gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--transition);
}

.gallery--lightbox .gallery-icon a {
	cursor: zoom-in;
}

.entry-content .gallery-item a:hover img {
	transform: scale(1.04);
}

.entry-content .gallery-caption {
	margin-top: 0.375rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--color-muted);
}

@media (min-width: 48rem) {
	.entry-content .gallery {
		grid-template-columns: repeat(var(--gallery-columns), 1fr);
	}
}

/* ---------- 21. Kartica sa slikom (block pattern) ---------- */

/*
 * NAMJERNO ODVOJENO od .about-card sa naslovnice.
 * Iste su vizualne obitelji, ali dvije neovisne komponente — izmjena
 * naslovnice ne smije promijeniti sadržaj koji su urednici složili
 * u Gutenbergu, ni obrnuto. Dijele samo tokene.
 */
.entry-content .media-card {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background-color: var(--color-surface-cool);
	border-radius: var(--radius-md);
}

.entry-content .media-card .wp-block-columns {
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-bottom: 0;
}

.media-card__media {
	min-width: 0;
}

.media-card__image {
	margin: 0;
}

/*
 * Bez aspect-ratio i object-fit — fotografija zadržava svoj prirodni omjer
 * i ne reže se. Visinu kartice određuje slika koju urednik odabere.
 */
.media-card__image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.media-card__content {
	min-width: 0;
}

.entry-content .media-card__title {
	margin-top: 0;
	font-size: var(--fs-h2);
}

/*
 * Valić ispod naslova. Maska umjesto pozadinske slike da boja i dalje
 * dolazi iz tokena — u data URI-ju se CSS varijabla ne može koristiti.
 */
.media-card__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 10px;
	margin-top: 0.625rem;
	background-color: var(--color-accent);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5c1.8-3 4.2-3 6 0s4.2 3 6 0 4.2-3 6 0 4.2 3 6 0 4.2-3 6 0'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5c1.8-3 4.2-3 6 0s4.2 3 6 0 4.2-3 6 0 4.2 3 6 0 4.2-3 6 0'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
}

.entry-content .media-card__text {
	color: var(--color-muted);
}

/* Gumb iz Gutenberga poprima izgled tema-gumba, unutar ove kartice. */
.media-card .wp-block-button__link {
	min-height: var(--tap-target);
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition);
}

.media-card .wp-block-button__link:hover {
	background-color: var(--color-primary-dark);
	color: var(--color-on-dark);
}

/* Bez slike zadnji element ne smije vući donju marginu odlomka. */
.entry-content .media-card--text > *:last-child {
	margin-bottom: 0;
}

/* Na mobitelu slika uvijek ide iznad teksta, bez obzira na varijantu. */
@media (max-width: 47.999rem) {
	.media-card--media-last .wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* ---------- 22. Karusel preporuka iz shortcodea ---------- */

/*
 * Širi raspored od onoga na naslovnici: 6 / 4 / 2 knjige.
 * Naslovnica ostaje na 4 / 3 / 2 — modifikator ima veću specifičnost
 * pa nadjačava osnovnu vrijednost bez obzira na redoslijed pravila.
 */
.carousel--wide .carousel__track {
	--carousel-visible: 2;
}

.gkc-preporuke__title {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/*
 * Karusel je <ul>, pa ga u sadržaju hvataju pravila za Gutenberg liste
 * (točkice, lijevi razmak, razmak između stavki). Vraćamo ga na
 * komponentne vrijednosti — dvije klase nadjačavaju `.entry-content ul`.
 */
.entry-content .carousel__track {
	padding-left: 0;
	list-style: none;
}

.entry-content .carousel__track .book {
	margin-top: 0;
}

.entry-content .carousel__track .book__image {
	border-radius: 0;
}

/* Lightbox preuzima klik samo ako knjiga ima naslovnicu. */
.carousel--lightbox a.book__link {
	cursor: zoom-in;
}

/* Knjiga bez naslovnice nije poveznica — ne smije se ponašati kao da jest. */
.carousel--lightbox span.book__link {
	cursor: default;
}

.gkc-notice {
	padding: 0.875rem 1.125rem;
	border-left: 3px solid var(--color-accent);
	background-color: var(--color-surface);
	font-size: 0.875rem;
	color: var(--color-muted);
}

@media (min-width: 48rem) {
	.carousel--wide .carousel__track {
		--carousel-visible: 4;
	}
}

@media (min-width: 64rem) {
	.carousel--wide .carousel__track {
		--carousel-visible: 6;
	}
}

/* ---------- 23. Tablice u sadržaju ---------- */

/*
 * Omotač nosi zaobljenje i vodoravni scroll (dodaje ga inc/content-tables.php).
 * `border-collapse: collapse` na tablici ne poštuje border-radius, pa se
 * kutovi režu ovdje.
 */
.entry-content .table-scroll {
	overflow-x: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);

	/* Scroll na dodir ostaje gladak i ne otima okomiti scroll stranice. */
	overscroll-behavior-x: contain;
}

.entry-content table {
	width: 100%;

	/* Bez razmaka između ćelija — zebra redovi nose podjelu, ne linije. */
	border-collapse: collapse;
	background-color: var(--color-bg);
	font-size: 0.9375rem;
}

.entry-content th,
.entry-content td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;

	/* Namjerno bez okvira — identitet teme je mekan, bez jakih linija. */
	border: 0;
}

.entry-content thead th {
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;

	/* Naslovi stupaca su kratki; prelamanje ih čini nečitkima. */
	white-space: nowrap;
}

/* Zebra: neparni red svjetlija podloga, parni bijeli. */
.entry-content tbody tr:nth-child(odd) {
	background-color: var(--color-surface);
}

.entry-content tbody tr:nth-child(even) {
	background-color: var(--color-bg);
}

.entry-content tbody tr:hover {
	background-color: var(--color-surface-cool);
}

/* Zaglavlje retka (prvi stupac kao <th>) — istaknuto, ali bez okvira. */
.entry-content tbody th {
	font-weight: 700;
	color: var(--color-primary);
}

.entry-content table caption {
	padding-bottom: 0.625rem;
	font-size: 0.8125rem;
	text-align: left;
	color: var(--color-muted);
}

@media (max-width: 47.999rem) {
	.entry-content table {
		font-size: 0.875rem;
	}

	.entry-content th,
	.entry-content td {
		padding: 0.625rem 0.75rem;
	}
}

/* ---------- 24. Accordion (details / summary) ---------- */

/*
 * Native <details> — otvaranje, tipkovnica i čitači ekrana rade bez JS-a.
 * U Gutenbergu to je ugrađeni blok „Detalji“, u klasičnom editoru običan
 * <details> u HTML-u. Isti stil pokriva oba.
 */
.entry-content details {
	background-color: var(--color-surface);
	border-radius: var(--radius-md);

	/* Hover na zaglavlju ne smije viriti izvan zaobljenja. */
	overflow: hidden;
}

/* Stavke accordiona stoje bliže nego obični blokovi sadržaja. */
.entry-content details + details {
	margin-top: 0.625rem;
}

.entry-content summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9375rem 1.25rem;
	cursor: pointer;
	font-weight: 700;
	color: var(--color-primary);

	/* Gasi zadanu strelicu preglednika; zamjenjuje je znak ispod. */
	list-style: none;
	transition: background-color var(--transition);
}

.entry-content summary::-webkit-details-marker {
	display: none;
}

.entry-content summary:hover {
	background-color: var(--color-border);
}

.entry-content summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--color-accent-dark);
}

.entry-content details[open] summary::after {
	content: "–";
}

.entry-content details[open] summary {
	border-bottom: 1px solid var(--color-border);
}

/*
 * Sadržaj panela. Razmak ide marginom, ne paddingom, jer su odlomci
 * izravna djeca <details> — nemaju vlastiti omotač.
 */
.entry-content details > :not(summary) {
	margin-inline: 1.25rem;
}

.entry-content details > * + * {
	margin-top: 1rem;
}

.entry-content details > :last-child {
	margin-bottom: 1.25rem;
}

/* ---------- 25. Kontakt obrazac ---------- */

.kontakt {
	padding: clamp(1.25rem, 3vw, 2rem);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
}

.kontakt__title {
	margin: 0 0 1.25rem;
	font-size: var(--fs-h3);
}

/* --- Poruke nakon slanja --- */

.kontakt__notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding: 0.875rem 1.125rem;
	border-radius: var(--radius-sm);
	font-size: 0.9375rem;
}

.kontakt__notice .icon {
	flex: 0 0 auto;
	margin-top: 0.125rem;
}

.kontakt__notice--ok {
	background-color: var(--color-surface-cool);
	color: var(--color-primary-dark);
}

.kontakt__notice--err {
	background-color: #fbf0ee;
	color: var(--color-error);
}

.kontakt__notice p + p {
	margin-top: 0.25rem;
}

/* --- Polja --- */

.kontakt__form {
	display: grid;
	gap: 1rem;
}

.kontakt__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.kontakt__field {
	display: grid;
	gap: 0.375rem;
	margin: 0;
	min-width: 0;
}

.kontakt__field label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-primary);
}

.kontakt__req {
	color: var(--color-accent-dark);
}

.kontakt__opt {
	font-weight: 400;
	color: var(--color-muted);
}

.kontakt__field input,
.kontakt__field textarea {
	width: 100%;
	min-height: var(--tap-target);
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-bg);
	color: var(--color-text);
	transition: border-color var(--transition);
}

.kontakt__field textarea {
	min-height: 9rem;
	resize: vertical;
}

.kontakt__field input:hover,
.kontakt__field textarea:hover {
	border-color: var(--color-muted);
}

.kontakt__field input:focus-visible,
.kontakt__field textarea:focus-visible {
	border-color: var(--color-primary);
}

/* --- Privola --- */

.kontakt__agree {
	margin: 0;
}

.kontakt__agree label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-muted);
}

.kontakt__agree input {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	accent-color: var(--color-primary);
}

.kontakt__actions {
	margin: 0.25rem 0 0;
}

/*
 * Honeypot — mora biti nedostupan i nevidljiv, ali NE `display: none`:
 * dio botova preskače polja koja su tako sakrivena.
 */
.kontakt__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 40rem) {
	.kontakt__row {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- 26. Liste zapisa (novosti, kategorije, pretraga) ---------- */

/*
 * Kartice su iste .entry-card komponente kao na naslovnici — ovdje se
 * definira samo mreža, sažetak i paginacija.
 */
.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.entry-card__excerpt {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-muted);
}

/*
 * Lista bez slika (pretraga). Ostaje jedan stupac na svim širinama —
 * pravilo je izvan media queryja, pa nadjačava mrežu ispod.
 */
.post-grid--list {
	grid-template-columns: 1fr !important;
	gap: 0.75rem;
}

/* Bez naslovnice red je nizak i širok, pa naslov podnosi malo više. */
.post-grid--list .entry-card__title {
	font-size: 1.0625rem;
}

.post-grid--list .entry-card__body {
	padding: 1rem 1.125rem;
}

.post-grid__empty,
.archive-intro {
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.archive-intro {
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.search-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.search-summary__text {
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.search-summary .search-form {
	display: flex;
	gap: 0.5rem;
}

.search-summary .search-field {
	min-height: var(--tap-target);
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg);
}

.search-summary .search-submit {
	min-height: var(--tap-target);
	padding-inline: 1.25rem;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --- Paginacija --- */

.pagination {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: var(--tap-target);
	height: var(--tap-target);
	padding-inline: 0.75rem;
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: var(--color-primary);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}

.pagination a.page-numbers:hover {
	background-color: var(--color-border);
	color: var(--color-primary-dark);
}

.pagination .page-numbers.current {
	background-color: var(--color-primary);
	color: var(--color-on-dark);
}

/* Trotočje nije gumb — ne smije izgledati kao da se može kliknuti. */
.pagination .page-numbers.dots {
	background: none;
	color: var(--color-muted);
}

@media (min-width: 48rem) {
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- 27. 404 ---------- */

.error-404 {
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
}

.error-404__text {
	font-size: var(--fs-lead);
	color: var(--color-muted);
}

.error-404__actions {
	margin-top: 1.5rem;
}

.error-404__search {
	margin-top: 2rem;
}

/* Ista polja kao u pretrazi; ovdje samo centrirana. */
.error-404__search .search-form {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.error-404__search .search-field {
	flex: 1 1 14rem;
	max-width: 20rem;
	min-height: var(--tap-target);
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg);
}

.error-404__search .search-submit {
	min-height: var(--tap-target);
	padding-inline: 1.25rem;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary);
	color: var(--color-on-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ── Podijeli ───────────────────────────────────────────────────────
 * Obične poveznice na share dijalog, bez ikakvog vanjskog skripta,
 * pa nema ni kolačića ni praćenja. Izgled prati ostale okrugle gumbe.
 */
.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border);
}

.share__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-muted);
}

.share__list {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.share__link {
	display: grid;
	place-items: center;
	width: var(--tap-target);
	height: var(--tap-target);
	border-radius: 50%;
	background-color: var(--color-surface);
	color: var(--color-primary);
	transition: background-color var(--transition), color var(--transition);
}

.share__link:hover,
.share__link:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-on-dark);
}

/* ---------- Zaštita od vodoravnog prelijevanja ---------- */

/*
 * Uvezeni tekstovi sadrže duge nepovezive nizove — URL-ove, e-mail adrese,
 * nazive datoteka. Bez prelamanja takav niz razvuče karticu, a preko nje i
 * cijelu stranicu; na pretrazi je jedan sažetak bio širok 2959 px.
 *
 * `anywhere` (a ne `break-word`) je bitan tamo gdje je tekst u gridu ili
 * flexu, jer jedini smanjuje i min-content širinu, pa se stavka smije
 * stisnuti ispod duljine te riječi.
 */
.entry-content {
	overflow-wrap: break-word;
}

.entry-card__title,
.entry-card__excerpt,
.news-item__title,
.page-header__title,
.book__title,
.book__author {
	overflow-wrap: anywhere;
}

/*
 * Strelice karusela namjerno vire 1.25rem izvan okvira — u kartici na
 * naslovnici to upije njezin padding. U sadržaju objave tog paddinga nema,
 * pa su gurale stranicu 20 px u širinu. Tu stoje uz sam rub trake.
 */
.entry-content .carousel__btn--prev {
	left: 0;
}

.entry-content .carousel__btn--next {
	right: 0;
}

/*
 * <input type="search"> ima urođenu širinu od dvadesetak znakova i kao flex
 * stavka se ne smije stisnuti ispod nje, pa je forma na 375 px bila 32 px
 * preširoka. Prelamanje u novi red plus min-width:0 to rješava.
 */
.search-summary .search-form,
.error-404__search .search-form {
	flex-wrap: wrap;
	max-width: 100%;
}

/*
 * WordPress polje pretrage omata u <label>, pa je flex stavka labela, a ne
 * input — zato flex vrijednosti moraju ići na nju.
 */
.search-summary .search-form > label,
.error-404__search .search-form > label {
	flex: 1 1 10rem;
	min-width: 0;
}

.search-summary .search-field,
.error-404__search .search-field {
	width: 100%;
	min-width: 0;
	max-width: none;
}