/* =====================================================================
   СОМОТ – podrazumevani dizajn (prema dizajnu „Sajt pozorišta“, Claude Design)
   Tamna sala, zlatni akcenat, bordo „somot“ za dugmad.
   Naslovi: Cormorant Garamond (rezervno Noto Serif), tekst: Inter (rezervno Noto Sans).
   Paleta i veličine su u theme.json; ovde su komponente.
   Zona banera i kajron se NE stilizuju – njih daje dodatak Ministarstva (Smernice 6).
   Kontrasti (WCAG AA): tekst #F3EDE4 / #B9AEA3 / zlato #D9B866 na #100D0C ≥ 8:1;
   #FBF6EE na bordo #8A1C24 ≈ 9:1.
   ===================================================================== */

/* ---------- Fontovi (lokalno, SIL OFL 1.1 – assets/fonts/OFL-*.txt; izvor: Fontsource 5.3.0) ---------- */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../../assets/fonts/cormorant-garamond-cyrillic-wght-normal.woff2") format("woff2");
	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../../assets/fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../../assets/fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../../assets/fonts/cormorant-garamond-cyrillic-wght-italic.woff2") format("woff2");
	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../../assets/fonts/cormorant-garamond-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../../assets/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../assets/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../assets/fonts/inter-cyrillic-wght-italic.woff2") format("woff2");
	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../assets/fonts/inter-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../assets/fonts/inter-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =====================================================================
   СОМОТ – raspored i komponente prema dizajnu „Sajt pozorišta“ (Claude Design).
   Tamna sala, zlatni akcenat, bordo „somot“. Naslovi: Cormorant Garamond, tekst: Inter.
   Zona banera i kajron se NE stilizuju – njih daje dodatak Ministarstva (Smernice 6).
   Kontrasti (WCAG AA): #F3EDE4 / #B9AEA3 / zlato #D9B866 na #100D0C ≥ 8:1; #FBF6EE na #8A1C24 ≈ 9:1.
   ===================================================================== */

:root {
	--pk-page-max: 90rem;
	--pk-gutter: clamp(1rem, 3vw, 2rem);
	--pk-radius: 2px;
	--pk-promo-width: clamp(18.75rem, 22vw, 22.5rem);
	--pk-bg: #100D0C;
	--pk-bg-deep: #0B0908;
	--pk-surface: #1A1513;
	--pk-surface-2: #221A17;
	--pk-line: #2E2622;
	--pk-line-img: #3A2F29;
	--pk-line-strong: #5A4C42;
	--pk-ink: #F3EDE4;
	--pk-ink-2: #E8E0D6;
	--pk-soft: #D6CCC0;
	--pk-muted: #B9AEA3;
	--pk-faint: #8F8379;
	--pk-gold: #D9B866;
	--pk-gold-2: #F0D58E;
	--pk-velvet: #8A1C24;
	--pk-velvet-2: #A3242E;
	--pk-on-velvet: #FBF6EE;
	--pk-on-velvet-2: #F1DFD8;
	--pk-serif: "Cormorant Garamond", "Noto Serif", Georgia, serif;
	--pk-sans: Inter, "Noto Sans", system-ui, sans-serif;
}

body {
	background: var(--pk-bg);
	color: var(--pk-ink);
	font-family: var(--pk-sans);
	line-height: 1.6;
}

::selection {
	background: var(--pk-gold);
	color: var(--pk-bg);
}

a {
	color: var(--pk-gold);
}

a:hover {
	color: var(--pk-gold-2);
}

h1, h2, h3 {
	font-family: var(--pk-serif);
	font-weight: 600;
	line-height: 1.05;
	text-wrap: balance;
}

[hidden] {
	display: none !important;
}

/* ---------- Opšti elementi ---------- */

.eyebrow {
	margin: 0;
	font-family: var(--pk-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--pk-gold);
}

.eyebrow--small {
	letter-spacing: 0.2em;
}

.badge {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 0.25rem 0.75rem;
	background: var(--pk-velvet);
	color: var(--pk-on-velvet);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.25rem;
	padding: 0 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--pk-radius);
	font: 600 0.875rem/1.2 var(--pk-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.button--small {
	min-height: 2.75rem;
	min-width: 7.5rem;
	padding: 0 1.375rem;
	font-size: 0.8125rem;
}

.button--accent {
	border-color: var(--pk-velvet);
	background: var(--pk-velvet);
	color: var(--pk-on-velvet);
}

.button--accent:hover {
	border-color: var(--pk-velvet-2);
	background: var(--pk-velvet-2);
	color: var(--pk-on-velvet);
}

.button--light {
	border-color: var(--pk-line-strong);
	background: transparent;
	color: var(--pk-ink);
	font-weight: 500;
}

.button--light:hover {
	border-color: var(--pk-ink);
	color: var(--pk-ink);
}

.button--gold-outline {
	border-color: var(--pk-gold);
	background: transparent;
	color: var(--pk-gold);
}

.button--on-velvet {
	background: var(--pk-on-velvet);
	color: var(--pk-bg);
}

.button--on-velvet:hover {
	background: #fff;
	color: var(--pk-bg);
}

.button--outline-light {
	border-color: var(--pk-on-velvet-2);
	color: var(--pk-on-velvet);
	font-weight: 500;
}

.button--outline-light:hover {
	background: rgb(255 255 255 / 0.08);
	color: var(--pk-on-velvet);
}

[aria-disabled="true"][data-pk-inert] {
	cursor: default;
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--pk-line-strong);
	border-radius: var(--pk-radius);
	background: transparent;
	color: var(--pk-ink);
	cursor: pointer;
}

.icon-button:hover {
	border-color: var(--pk-ink);
	color: var(--pk-ink);
}

.more-link {
	display: inline-block;
	padding: 0.75rem 0;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.empty-note {
	margin: 0;
	padding: 1.5rem 0;
	color: var(--pk-muted);
}

.empty-box {
	padding: 4rem 1.5rem;
	border: 1px dashed var(--pk-line-strong);
	text-align: center;
	color: var(--pk-muted);
}

.empty-box p {
	margin: 0.25rem 0;
}

.placeholder-box {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 7;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface);
	color: var(--pk-faint);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	padding: 1rem;
}

/* Pilule (filteri) i segmentni prekidač */
.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pill {
	min-height: 2.75rem;
	padding: 0 1.125rem;
	border: 1px solid var(--pk-line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--pk-ink-2);
	font: 400 0.8125rem/1 var(--pk-sans);
	letter-spacing: 0.04em;
	cursor: pointer;
}

.pill[aria-pressed="true"] {
	border-color: var(--pk-gold);
	background: var(--pk-gold);
	color: var(--pk-bg);
}

.pill[aria-disabled="true"] {
	opacity: 0.75;
}

.segmented {
	display: inline-flex;
	border: 1px solid var(--pk-line-strong);
	border-radius: var(--pk-radius);
}

.segmented button {
	min-height: 2.75rem;
	padding: 0 1.25rem;
	border: 0;
	background: transparent;
	color: var(--pk-ink-2);
	font: 400 0.8125rem/1 var(--pk-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.segmented button[aria-pressed="true"] {
	background: var(--pk-ink);
	color: var(--pk-bg);
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 1rem 0;
	border-block: 1px solid var(--pk-line);
}

.toolbar--filters {
	justify-content: flex-start;
	gap: 0.75rem 2rem;
	padding: 0;
	border: 0;
}

.toolbar--form {
	align-items: flex-end;
	padding: 1.25rem 0;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	flex: 1 1 13rem;
}

.field--grow {
	flex: 3 1 16rem;
}

.field label,
.toolbar--form label {
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pk-muted);
}

.contact-form .field label {
	font-size: 0.875rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pk-ink-2);
}

input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea {
	min-height: 3rem;
	padding: 0 1rem;
	border: 1px solid var(--pk-line-strong);
	border-radius: var(--pk-radius);
	background: var(--pk-surface);
	color: var(--pk-ink);
	font: inherit;
}

textarea {
	padding: 0.75rem 1rem;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--pk-faint);
}

.field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
}

.field--check input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.125rem 0 0;
	accent-color: var(--pk-gold);
}

.field--check label {
	font-size: 0.875rem;
	color: var(--pk-muted);
}

/* ---------- Traka za pristupačnost ---------- */

.a11y-bar {
	background: var(--pk-bg-deep);
	color: var(--pk-muted);
	border-bottom: 1px solid var(--pk-line);
}

.a11y-bar__inner {
	max-width: var(--pk-page-max);
}

.a11y-bar__btn {
	border-radius: var(--pk-radius);
	color: var(--pk-ink-2);
}

.a11y-bar__btn[aria-pressed="true"] {
	background: var(--pk-gold);
	color: var(--pk-bg);
}

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

.site-header {
	background: var(--pk-bg);
	border-bottom: 1px solid var(--pk-line);
}

.site-header__inner {
	gap: 1rem 2rem;
	padding-block: 1.25rem;
}

.site-branding__link {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	color: var(--pk-ink);
	text-decoration: none;
}

.site-branding .custom-logo {
	width: auto;
	max-height: 4.5rem;
}

.site-title {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: var(--pk-serif);
	line-height: 1.1;
}

.site-title__name {
	font-size: 1.625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--pk-ink);
}

.site-title__city {
	font-family: var(--pk-sans);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--pk-muted);
}

.menu-toggle {
	min-height: 2.75rem;
	border: 1px solid var(--pk-line-strong);
	border-radius: var(--pk-radius);
	background: transparent;
	color: var(--pk-ink);
}

.menu a {
	padding: 0.75rem 0;
	border-bottom: 1px solid transparent;
	color: var(--pk-ink-2);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
	text-decoration: none;
}

.menu a:hover,
.menu .current-menu-item > a,
.menu [aria-current="page"] {
	border-bottom-color: var(--pk-gold);
	color: var(--pk-gold);
	text-decoration: none;
}

.header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.75rem;
}

.header-cta {
	min-height: 2.75rem;
	padding: 0 1.375rem;
	letter-spacing: 0.06em;
}

.lang-switch {
	position: relative;
}

.lang-switch__toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid var(--pk-line-strong);
	border-radius: var(--pk-radius);
	background: transparent;
	color: var(--pk-ink);
	font: 600 0.8125rem/1 var(--pk-sans);
	letter-spacing: 0.06em;
	cursor: pointer;
}

.lang-switch__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 60;
	width: 15rem;
	padding: 1rem;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface);
	box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.5);
}

.lang-switch__label {
	margin: 0 0 0.5rem;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pk-muted);
}

.lang-switch__opts {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.875rem;
}

.lang-switch__opts + .lang-switch__label {
	padding-top: 0.75rem;
	border-top: 1px solid var(--pk-line);
}

.lang-switch__opt {
	flex: 1 1 0;
	min-height: 2.75rem;
	border: 1px solid var(--pk-line-strong);
	border-radius: var(--pk-radius);
	background: transparent;
	color: var(--pk-ink-2);
	font: 400 0.8125rem/1 var(--pk-sans);
	cursor: pointer;
}

/* Izbor pisma su linkovi (ćirilica / latinica) – izgledaju kao dugmad. */
a.lang-switch__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.lang-switch__opt[aria-pressed="true"],
.lang-switch__opt[aria-current="true"] {
	border-color: var(--pk-gold);
	background: var(--pk-gold);
	color: var(--pk-bg);
	font-weight: 600;
}

@media (min-width: 64rem) {
	.primary-menu,
	.js .primary-menu:not(.is-open) {
		flex: 1 1 auto;
		justify-content: space-between;
		gap: 1rem 2rem;
	}

	.menu {
		flex-wrap: wrap;
		gap: 0.25rem 1.75rem;
	}

	.header-actions {
		padding: 0;
	}
}

@media (max-width: 63.99rem) {
	.header-actions {
		border-top: 1px solid var(--pk-line);
	}

	.lang-switch__panel {
		left: 0;
		right: auto;
	}
}

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

.site-layout {
	gap: 3rem;
	padding-top: 2.5rem;
	padding-bottom: 4.5rem;
}

/* ---------- Putanja i zaglavlje strane ---------- */

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--pk-muted);
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--pk-faint);
}

.breadcrumbs a {
	color: var(--pk-muted);
}

.breadcrumbs [aria-current] {
	color: var(--pk-ink-2);
}

.page-head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.page-head--album {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.page-head__title {
	margin: 0;
	font-size: clamp(3rem, 6vw, 5rem);
	line-height: 1;
}

.page-head__lead {
	max-width: 60ch;
	margin: 0;
	color: var(--pk-muted);
}

.page-intro {
	margin-bottom: 2rem;
}

.page-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	margin: 0 0 2.5rem;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.page-toc a {
	padding: 0.625rem 0;
	text-decoration: none;
}

/* ---------- Naslovi sekcija ---------- */

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.section-head > div {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.section-head__title {
	margin: 0;
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	line-height: 1;
}

.section-head__count {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--pk-muted);
}

.home-section {
	padding: 4.5rem 0;
	border-bottom: 1px solid var(--pk-line);
}

/* ---------- Početna: istaknuta predstava ---------- */

.feature {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3.5rem;
	padding: 1rem 0 4.5rem;
	border-bottom: 1px solid var(--pk-line);
}

.feature__text {
	display: flex;
	flex: 1 1 27rem;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.feature__title {
	margin: 0;
	font-size: clamp(3.25rem, 7vw, 6rem);
	line-height: 0.95;
	letter-spacing: -0.01em;
}

.feature__title a {
	color: var(--pk-ink);
	text-decoration: none;
}

.feature__title a:hover {
	color: var(--pk-gold-2);
}

.feature__author,
.feature-card__author,
.play-head__author {
	margin: 0;
	font-family: var(--pk-serif);
	font-size: 1.5rem;
	font-style: italic;
	color: var(--pk-soft);
}

.feature__desc {
	max-width: 46ch;
	margin: 0;
	color: var(--pk-muted);
}

.feature__actions,
.feature-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding-top: 0.5rem;
}

.feature__media {
	position: relative;
	flex: 1 1 30rem;
	min-width: 0;
	aspect-ratio: 4 / 5;
	max-height: 40rem;
	overflow: hidden;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface-2);
}

.feature__curtain {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.feature__img {
	position: absolute;
	inset: 2.5rem 0 0;
	width: 100%;
	height: calc(100% - 2.5rem);
	object-fit: cover;
}

/* ---------- Redovi repertoara ---------- */

.show-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pk-line);
}

.show-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--pk-line);
}

.show-row p {
	margin: 0;
}

.show-row__when {
	flex: 0 0 7.5rem;
}

.show-row__when time {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.show-row__day {
	font-family: var(--pk-serif);
	font-size: 2rem;
	font-weight: 600;
	font-variant-numeric: lining-nums;
}

#pk-rep-lista .show-row__day,
[data-pk-rep] .show-row__day {
	font-size: 2.75rem;
}

.home-section .show-row__day {
	font-size: 1.875rem;
}

.show-row__weekday {
	font-size: 0.8125rem;
	color: var(--pk-muted);
}

.show-row__title {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
	font-family: var(--pk-serif);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.15;
}

.show-row__title a {
	color: var(--pk-ink);
	text-decoration: none;
}

.show-row__title a:hover {
	color: var(--pk-gold-2);
}

.show-row__sub {
	font-family: var(--pk-sans);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--pk-muted);
}

.show-row__meta {
	display: flex;
	flex: 0 0 9.5rem;
	flex-direction: column;
	line-height: 1.4;
}

.show-row__stage {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pk-gold);
}

.show-row__time {
	font-size: 0.875rem;
	color: var(--pk-ink-2);
}

.show-row__status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 7.5rem;
	min-height: 2.75rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pk-muted);
}

/* ---------- Kartice predstava ---------- */

.play-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 2.5rem 1.75rem;
}

.play-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
	gap: 2rem;
}

.play-grid--small {
	grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
	gap: 1.5rem;
}

.play-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.play-card__media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface-2);
}

.play-grid--small .play-card__media {
	aspect-ratio: 4 / 3;
}

.play-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}

.play-card:hover .play-card__media img {
	opacity: 0.88;
}

.play-card__title {
	margin: 0;
	font-size: clamp(1.75rem, 2.2vw, 2rem);
	line-height: 1.1;
}

.play-grid--list .play-card__title {
	font-size: 1.875rem;
}

.play-grid--small .play-card__title {
	font-size: 1.625rem;
}

.play-card__title a {
	color: var(--pk-ink);
	text-decoration: none;
}

.play-card__title a:hover {
	color: var(--pk-gold-2);
}

.play-card__credits {
	margin: 0;
	font-size: 0.875rem;
	color: var(--pk-soft);
}

.play-card__desc {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--pk-muted);
}

.play-card__more {
	padding: 0.5rem 0;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.play-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: auto 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--pk-line);
	font-size: 0.875rem;
	color: var(--pk-ink-2);
}

.play-card__foot a {
	padding: 0.625rem 0;
	letter-spacing: 0.06em;
	text-decoration: none;
}

/* Istaknuta premijera (lista predstava) */
.feature-card {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
}

.feature-card__media {
	position: relative;
	flex: 1 1 20rem;
	min-height: 22.5rem;
	background: var(--pk-surface-2);
}

.feature-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.badge--overlay {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
}

.feature-card__body {
	display: flex;
	flex: 1 1 21rem;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	padding: 2.5rem;
}

.feature-card__title {
	margin: 0;
	font-size: clamp(2.5rem, 4.5vw, 3.75rem);
	line-height: 1;
}

.feature-card__title a {
	color: var(--pk-ink);
	text-decoration: none;
}

.feature-card__author {
	font-size: 1.375rem;
}

.feature-card__desc {
	margin: 0;
	color: var(--pk-muted);
}

/* ---------- Podaci (dl) ---------- */

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
	gap: 1.75rem;
	margin: 0;
}

.facts--compact {
	grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
	gap: 0.75rem 1.5rem;
	font-size: 0.875rem;
}

.facts--stack {
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.facts div {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.facts dt,
.play-facts dt,
.info-panel__label,
.tile__label,
.velvet-band__label {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pk-muted);
}

.facts dd {
	margin: 0;
}

.facts__big {
	font-family: var(--pk-serif);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.25;
}

/* ---------- Pojas „somot“ ---------- */

.velvet-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin: 4.5rem 0 0;
	padding: 3rem 2.5rem;
	background: var(--pk-velvet);
	color: var(--pk-on-velvet);
}

.velvet-band--wide {
	margin: 0 0 4rem;
	align-items: flex-start;
}

.velvet-band__text {
	display: flex;
	flex: 1 1 26rem;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.velvet-band h2 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--pk-on-velvet);
}

.velvet-band p {
	max-width: 52ch;
	margin: 0;
	color: var(--pk-on-velvet-2);
}

.velvet-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.velvet-band__contact {
	display: flex;
	flex: 0 1 17.5rem;
	flex-direction: column;
	gap: 0.5rem;
}

.velvet-band__contact a {
	color: var(--pk-on-velvet);
}

.velvet-band__label {
	color: var(--pk-on-velvet-2);
}

/* ---------- Kontakt na početnoj, mapa, newsletter ---------- */

.home-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 3.5rem;
}

section.home-contact {
	padding: 4.5rem 0;
}

.home-contact__info {
	display: flex;
	flex: 1 1 22.5rem;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
}

.map-box {
	display: flex;
	flex: 1 1 26rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-width: 0;
	min-height: 22.5rem;
	padding: 1.5rem;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface);
	color: var(--pk-muted);
	text-align: center;
}

.map-box p {
	margin: 0;
	max-width: 40ch;
	font-size: 0.875rem;
}

.map-box__icon {
	color: var(--pk-gold);
}

.map-box__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.25rem;
}

.map-box:has(.info-mapa__frame) {
	padding: 0;
}

.map-box .info-mapa__frame {
	width: 100%;
	min-height: 22.5rem;
	flex: 1 1 auto;
	border: 0;
}

.newsletter {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	max-width: 30rem;
}

.newsletter label {
	font-size: 0.875rem;
	color: var(--pk-ink-2);
}

.newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.newsletter input {
	flex: 1 1 13.75rem;
}

.newsletter .button {
	min-height: 3rem;
}

/* ---------- Stranica predstave ---------- */

.play-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 2.5rem;
	margin-bottom: 2rem;
}

.play-head__main {
	display: flex;
	flex: 1 1 22.5rem;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.play-head__title {
	margin: 0;
	font-size: clamp(3.25rem, 6.5vw, 5.75rem);
	line-height: 0.95;
}

.play-head__author {
	font-size: 1.625rem;
}

.play-head__next {
	display: flex;
	flex: 0 1 18.75rem;
	flex-direction: column;
	gap: 0.75rem;
}

.play-head__label {
	margin: 0;
	font-size: 0.875rem;
	color: var(--pk-muted);
}

.play-head__date {
	margin: 0;
	font-family: var(--pk-serif);
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 1.1;
}

.play-hero {
	margin: 0 0 2rem;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface-2);
}

.play-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-hero--poster {
	aspect-ratio: auto;
	max-height: 48rem;
	display: flex;
	justify-content: center;
}

.play-hero--poster img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 48rem;
	object-fit: contain;
}

.play-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
	gap: 1.25rem 2rem;
	margin: 0 0 2rem;
	padding: 1.5rem 0;
	border-block: 1px solid var(--pk-line);
}

.play-facts dd {
	margin: 0;
}

.split-section {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3.5rem;
	margin-bottom: 3.5rem;
}

.split-section__title {
	flex: 0 0 13.75rem;
	margin: 0;
	font-family: var(--pk-serif);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.05;
}

div.split-section__title h2 {
	margin: 0 0 0.75rem;
	font-size: 2.5rem;
}

div.split-section__title p {
	margin: 0;
	font-family: var(--pk-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--pk-muted);
}

.split-section__body {
	flex: 1 1 22.5rem;
	min-width: 0;
	max-width: 68ch;
}

.entry-content {
	color: var(--pk-soft);
	font-size: 1.0625rem;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content h2 {
	margin: 2rem 0 0.75rem;
	font-size: 1.75rem;
	color: var(--pk-ink);
}

.entry-content blockquote {
	margin: 0.5rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--pk-gold);
	font-family: var(--pk-serif);
	font-size: 1.625rem;
	font-style: italic;
	line-height: 1.3;
	color: var(--pk-ink);
}

.entry-content--page {
	max-width: 72ch;
}

.play-section {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 3.5rem;
}

.play-section__title {
	margin: 0;
	font-size: 2.5rem;
	line-height: 1.05;
}

.play-section__note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--pk-muted);
}

.show-list--play .show-row__title {
	font-size: 1.75rem;
}

.credits {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	margin-bottom: 3.5rem;
}

.credits__col {
	display: flex;
	flex: 1 1 19rem;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.credits__list {
	margin: 0;
}

.credits__list > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--pk-line);
}

.credits__list dt {
	color: var(--pk-muted);
}

.credits__list dd {
	margin: 0;
	text-align: right;
}

.credits__list dd.credits__solo {
	text-align: left;
}

.play-gallery__stage {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface-2);
}

.play-gallery__stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.play-gallery__count {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.125rem 0.625rem;
	background: var(--pk-bg);
	font-size: 0.75rem;
	color: var(--pk-ink);
}

.play-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
	gap: 0.5rem;
}

.play-gallery__thumb {
	aspect-ratio: 4 / 3;
	min-height: 2.75rem;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface-2);
	cursor: pointer;
}

.play-gallery__thumb[aria-pressed="true"] {
	outline: 2px solid var(--pk-gold);
	outline-offset: -2px;
}

.play-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-video iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.play-related {
	padding-top: 2.5rem;
	border-top: 1px solid var(--pk-line);
}

.play-related .section-head {
	align-items: baseline;
	margin-bottom: 0;
}

/* ---------- Repertoar: mesec, kalendar, info ---------- */

.month-nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.month-nav__label {
	min-width: 12.5rem;
	margin: 0;
	font-size: 1.875rem;
	text-align: center;
}

.toolbar--filters {
	margin-bottom: 2rem;
}

.cal-scroll {
	overflow-x: auto;
}

.cal {
	width: 100%;
	min-width: 40rem;
	table-layout: fixed;
	border-collapse: collapse;
	border: 1px solid var(--pk-line);
}

.cal th {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--pk-line);
	background: #17120F;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-align: left;
	text-transform: uppercase;
	color: var(--pk-muted);
}

.cal td {
	height: 7rem;
	padding: 0.5rem;
	border: 1px solid var(--pk-line);
	vertical-align: top;
}

.cal td.cal__empty {
	background: var(--pk-bg-deep);
}

.cal td.is-today {
	box-shadow: inset 0 0 0 2px var(--pk-ink);
}

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

.is-today .cal__num {
	color: var(--pk-ink);
}

.cal__chip {
	display: block;
	margin-top: 0.375rem;
	padding: 0.25rem 0.375rem;
	border-radius: var(--pk-radius);
	background: var(--pk-velvet);
	color: var(--pk-on-velvet);
	font-size: 0.6875rem;
	line-height: 1.3;
	text-decoration: none;
}

a.cal__chip:hover {
	color: var(--pk-on-velvet);
	background: var(--pk-velvet-2);
}

.cal__chip--mala {
	border: 1px solid var(--pk-gold);
	background: transparent;
	color: var(--pk-gold);
}

.cal__chip-title {
	display: block;
	overflow: hidden;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cal__chip-meta {
	display: block;
	opacity: 0.85;
}

.cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--pk-muted);
}

.cal-legend li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cal-legend__swatch {
	width: 0.875rem;
	height: 0.875rem;
	background: var(--pk-velvet);
}

.cal-legend__swatch--mala {
	border: 1px solid var(--pk-gold);
	background: transparent;
}

.cal-legend__swatch--today {
	border: 2px solid var(--pk-ink);
	background: transparent;
}

.info-panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
	gap: 1.5rem;
	margin: 3rem 0 1.5rem;
	padding: 2rem;
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
}

.info-panel p {
	margin: 0.25rem 0 0;
}

.ekultura-note {
	font-size: 0.875rem;
	color: var(--pk-muted);
}

/* ---------- Pločice, cene, koraci ---------- */

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
	gap: 1px;
	margin-bottom: 4rem;
	border: 1px solid var(--pk-line);
	background: var(--pk-line);
}

.play-section .tiles {
	margin-bottom: 0;
}

.tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.75rem;
	background: var(--pk-surface);
}

.tile > svg {
	color: var(--pk-gold);
}

.tile p {
	margin: 0;
}

.tile__label--gold {
	color: var(--pk-gold);
}

.tile__big {
	font-family: var(--pk-serif);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.2;
}

.tile__note {
	font-size: 0.875rem;
	color: var(--pk-muted);
}

.table-wrap {
	overflow-x: auto;
	border: 1px solid var(--pk-line);
}

.price-table {
	width: 100%;
	min-width: 20rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.price-table thead th {
	padding: 0.875rem 1.25rem;
	background: #17120F;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-align: left;
	text-transform: uppercase;
	color: var(--pk-muted);
}

.price-table thead th:last-child,
.price-table td {
	text-align: right;
}

.price-table tbody th,
.price-table td {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--pk-line);
	font-weight: 500;
	text-align: left;
}

.price-table td {
	text-align: right;
	white-space: nowrap;
}

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--pk-gold);
}

.steps__num {
	font-family: var(--pk-serif);
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
	color: var(--pk-gold);
}

.steps__title {
	font-size: 1.125rem;
	font-weight: 600;
}

.steps__text {
	font-size: 0.9375rem;
	color: var(--pk-muted);
}

.hall-plan {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 1rem;
}

.hall-plan .section-head {
	align-items: center;
	margin: 0;
}

.hall-plan__title {
	margin: 0;
	font-size: 1.75rem;
}

.check-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.check-list li {
	display: flex;
	gap: 1rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--pk-line);
}

.check-list li::before {
	content: "";
	flex: 0 0 1.25rem;
	height: 1.25rem;
	margin-top: 0.1875rem;
	background: var(--pk-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Zaposleni ---------- */

.staff-group {
	margin-bottom: 3rem;
}

.staff-group .section-head {
	align-items: baseline;
	margin-bottom: 1.5rem;
}

.staff-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
	gap: 1.75rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.staff-grid--ensemble {
	grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
}

.staff-grid--lead {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
	gap: 1.5rem;
}

.person {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.person--lead {
	flex-direction: row;
	gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
}

.person__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface-2);
	font-family: var(--pk-serif);
	font-size: 2.25rem;
	font-weight: 600;
	color: var(--pk-faint);
}

.staff-grid--ensemble .person__photo {
	aspect-ratio: 3 / 4;
}

.person--lead .eyebrow {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	line-height: 1.4;
}

.person--lead .person__photo {
	flex: 0 0 5.5rem;
	aspect-ratio: 4 / 5;
}

.person__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.person__name {
	overflow-wrap: normal;
	font-family: var(--pk-serif);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.15;
}

.person--lead .person__name {
	font-size: 1.625rem;
}

.person__role {
	font-size: 0.8125rem;
	color: var(--pk-muted);
}

.cta-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-top: 2rem;
	padding: 2rem;
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
}

.cta-box > div {
	flex: 1 1 20rem;
	min-width: 0;
}

.cta-box p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--pk-muted);
}

.cta-box .cta-box__title {
	margin-bottom: 0.25rem;
	font-family: var(--pk-serif);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--pk-ink);
}

/* ---------- Galerija ---------- */

.album-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
	gap: 2.5rem 1.75rem;
}

.album {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.album__cover {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface-2);
}

.album__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.album__cover:hover img {
	transform: scale(1.03);
}

.album__count {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.125rem 0.625rem;
	background: var(--pk-bg);
	font-size: 0.75rem;
	color: var(--pk-ink);
}

.album__title {
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.1;
}

.album__title a {
	color: var(--pk-ink);
	text-decoration: none;
}

.album__sub {
	margin: 0;
	font-size: 0.875rem;
	color: var(--pk-muted);
}

.photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.photo-grid a {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface-2);
	cursor: zoom-in;
}

.photo-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 1rem 1.5rem 1.5rem;
	border: 0;
	background: rgb(8 6 5 / 0.96);
	color: var(--pk-ink);
}

.lightbox[open] {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.lightbox::backdrop {
	background: rgb(0 0 0 / 0.7);
}

.lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.lightbox__count {
	margin: 0;
	font-size: 0.875rem;
	color: var(--pk-muted);
}

.lightbox__stage {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 1rem;
	min-height: 0;
}

.lightbox__img {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 82vh;
	object-fit: contain;
}

.lightbox__caption {
	margin: 0;
	text-align: center;
	font-size: 0.875rem;
	color: var(--pk-muted);
}

/* ---------- Dokumenti ---------- */

.docs__group {
	margin: 2rem 0;
}

.docs__group.is-empty {
	display: none;
}

.docs__title {
	margin: 0 0 1rem;
	font-size: 2rem;
	line-height: 1.1;
}

.docs__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pk-line);
}

.doc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--pk-line);
}

.doc__icon {
	flex: 0 0 auto;
	color: var(--pk-gold);
}

.doc__text {
	flex: 1 1 17.5rem;
	min-width: 0;
}

.doc__text p {
	margin: 0;
}

.doc__title {
	font-weight: 500;
}

.doc__meta {
	font-size: 0.8125rem;
	color: var(--pk-muted);
}

/* ---------- Kontakt, O nama ---------- */

.inline-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inline-links a {
	display: inline-block;
	padding: 0.625rem 0;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.contact-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.125rem;
}

.contact-form .button {
	align-self: flex-start;
	padding: 0 2rem;
}

.form-note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--pk-muted);
}

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
	gap: 1px;
	margin: 0 0 3.5rem;
	padding: 0;
	list-style: none;
	border: 1px solid var(--pk-line);
	background: var(--pk-line);
}

.stats li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.75rem 1.5rem;
	background: var(--pk-surface);
}

.stats__num {
	font-family: var(--pk-serif);
	font-size: 3.25rem;
	font-weight: 600;
	line-height: 1;
	color: var(--pk-gold);
}

.stats__label {
	font-size: 0.875rem;
	color: var(--pk-muted);
}

.link-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
}

.link-card {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.75rem;
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
	color: var(--pk-ink);
	text-decoration: none;
}

.link-card:hover {
	border-color: var(--pk-line-strong);
	color: var(--pk-ink);
}

.link-card__title {
	font-family: var(--pk-serif);
	font-size: 1.625rem;
	font-weight: 600;
}

.link-card__desc {
	font-size: 0.875rem;
	color: var(--pk-muted);
}

.link-card--velvet {
	border-color: var(--pk-velvet);
	background: var(--pk-velvet);
	color: var(--pk-on-velvet);
}

.link-card--velvet:hover {
	background: var(--pk-velvet-2);
	color: var(--pk-on-velvet);
}

.link-card--velvet .link-card__desc {
	color: var(--pk-on-velvet-2);
}

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

.site-footer {
	border-top: 1px solid var(--pk-line);
	background: var(--pk-bg);
	color: var(--pk-muted);
	font-size: 0.8125rem;
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	max-width: var(--pk-page-max);
	margin-inline: auto;
	padding: 2.5rem var(--pk-gutter);
}

.site-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.site-footer__logo {
	width: auto;
	height: 3rem;
	opacity: 0.8;
}

.site-footer__copy,
.site-footer__contact {
	margin: 0;
	font-style: normal;
}

.site-footer__contact {
	flex-basis: 100%;
}

.site-footer a {
	color: var(--pk-muted);
}

.site-footer a:hover {
	color: var(--pk-gold);
}

.site-footer__links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Vesti (lista i odeljak na početnoj) ---------- */

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
	gap: 2.5rem 2rem;
	margin-bottom: 2rem;
}

.news-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.news-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px solid var(--pk-line-img);
	background: var(--pk-surface-2);
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}

.news-card:hover .news-card__media img {
	opacity: 0.88;
}

.news-card__title {
	margin: 0;
	font-size: clamp(1.5rem, 2vw, 1.75rem);
	line-height: 1.15;
}

.news-card__title a {
	color: var(--pk-ink);
	text-decoration: none;
}

.news-card__title a:hover {
	color: var(--pk-gold-2);
}

.news-card__desc {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--pk-muted);
}

@media (prefers-reduced-motion: reduce) {
	.news-card__media img {
		transition: none;
	}
}

/* ---------- Stari delovi koji se još koriste (404, pretraga) ---------- */

.page-title,
.entry-title {
	font-size: clamp(3rem, 6vw, 5rem);
	line-height: 1;
}

.card {
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
}

.card__title a {
	color: var(--pk-ink);
}

/* ---------- Visok kontrast (crno-belo) ima prednost ---------- */

html.has-high-contrast body,
html.has-high-contrast .site-header,
html.has-high-contrast .site-footer,
html.has-high-contrast .a11y-bar {
	background: #fff;
	color: #000;
}

html.has-high-contrast {
	--pk-bg: #fff;
	--pk-bg-deep: #fff;
	--pk-surface: #fff;
	--pk-surface-2: #fff;
	--pk-line: #000;
	--pk-line-img: #000;
	--pk-line-strong: #000;
	--pk-ink: #000;
	--pk-ink-2: #000;
	--pk-soft: #000;
	--pk-muted: #000;
	--pk-faint: #000;
	--pk-gold: #000;
	--pk-gold-2: #000;
	--pk-velvet: #000;
	--pk-velvet-2: #000;
	--pk-on-velvet: #fff;
	--pk-on-velvet-2: #fff;
}

html.has-high-contrast .feature__curtain {
	display: none;
}

html.has-high-contrast .pill[aria-pressed="true"],
html.has-high-contrast .segmented button[aria-pressed="true"],
html.has-high-contrast .lang-switch__opt[aria-pressed="true"],
html.has-high-contrast .a11y-bar__btn[aria-pressed="true"] {
	background: #000;
	color: #fff;
}

html.has-high-contrast .button--on-velvet {
	background: #fff;
	color: #000;
}

/* =====================================================================
   Usklađivanje sa dizajnom (poređenje jedan pored drugog)
   ===================================================================== */

/* Zaglavlje: logo + naziv levo, meni desno u istom redu; jezik i „Купи карте“ u drugom redu (kao u dizajnu). */
.site-branding .custom-logo {
	max-height: 4.5rem;
	height: 4.5rem;
}

@media (min-width: 64rem) {
	.site-header__inner {
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem 2rem;
	}

	.primary-menu,
	.js .primary-menu:not(.is-open) {
		display: contents;
	}

	/* Kao u dizajnu: logo i naziv, pa meni odmah posle njih, a jezik i „Купи карте“ desno – sve u jednom redu. */
	.site-header__inner {
		flex-wrap: wrap; /* kad nema mesta, jezik i „Купи карте“ prelaze u drugi red (kao u dizajnu na 1440 px) */
		justify-content: flex-start;
		max-width: 100rem; /* ćirilični meni je širi od latiničnog u dizajnu – da stane u jedan red */
		gap: 1rem 3rem;
		padding-block: 1.25rem;
	}

	.primary-menu .menu {
		flex-wrap: nowrap;
		gap: 0.25rem 1.5rem;
		margin-left: 0;
	}

	.header-actions {
		flex-wrap: nowrap;
		margin-left: auto;
	}
}

/* Okvir „Величина текста“ na vrhu desne kolone; zona banera ispod njega. */
.a11y-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
}

.a11y-box__label {
	max-width: 8rem; /* kao u dizajnu: „Величина / текста“ u dva reda, dugmad desno */
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pk-muted);
}

.a11y-box__sizes {
	display: flex;
	border: 1px solid var(--pk-line-strong);
	border-radius: var(--pk-radius);
}

.a11y-box__size {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	color: var(--pk-ink-2);
	font: 600 1rem/1 var(--pk-sans);
	cursor: pointer;
}

.a11y-box__size--s {
	font-size: 0.8125rem;
}

.a11y-box__size--l {
	font-size: 1.25rem;
}

.a11y-box__size[aria-pressed="true"] {
	background: var(--pk-gold);
	color: var(--pk-bg);
}

.a11y-box__size:disabled {
	opacity: 0.45;
	cursor: default;
}

.a11y-box__contrast {
	flex: 1 0 100%;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--pk-line);
	background: transparent;
	color: var(--pk-ink-2);
	font: 400 0.8125rem/1 var(--pk-sans);
	letter-spacing: 0.06em;
	text-align: left;
	cursor: pointer;
}

.a11y-box__contrast[aria-pressed="true"] {
	color: var(--pk-gold);
	font-weight: 600;
}

@media (min-width: 64rem) {
	.site-layout:has(> .a11y-box) {
		grid-template-columns: minmax(0, 1fr) minmax(var(--pk-promo-min), var(--pk-promo-width));
		grid-template-rows: auto 1fr;
		align-items: start;
		column-gap: 3rem;
		row-gap: 2rem;
	}

	.site-layout > .a11y-box {
		grid-column: 2;
		grid-row: 1;
		margin-top: 1rem;
	}

	.site-layout > .site-main {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.site-layout > .promo-zone {
		grid-column: 2;
		grid-row: 2;
	}
}

/* Početna: fotografija predstave između zavesa (zavese iznad slike). */
.feature__img {
	inset: 0;
	height: 100%;
	z-index: 0;
}

.feature__curtain {
	z-index: 1;
	pointer-events: none;
}

html.has-high-contrast .a11y-box__size[aria-pressed="true"] {
	background: #000;
	color: #fff;
}

/* Oznaka izvođenja (Премијера, Прва реприза…) */
.show-row__badge {
	margin-bottom: 0.375rem;
	font-family: var(--pk-sans);
	line-height: 1.4;
}

.cal__chip-tag {
	display: block;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.9;
}

/* Odigrana izvođenja: iste boje kao u dizajnu, razlika je samo natpis „Одиграно“. */
.a11y-box {
	flex-wrap: nowrap;
}

/* Česta pitanja (Poseta i ulaznice) – <details>, radi i bez JavaScript-a */
.faq {
	border-top: 1px solid var(--pk-line);
}

.faq__item {
	border-bottom: 1px solid var(--pk-line);
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	padding: 1rem 0;
	color: var(--pk-ink);
	font-size: 1.0625rem;
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__sign::before {
	content: "+";
	font-size: 1.375rem;
	line-height: 1;
	color: var(--pk-gold);
}

.faq__item[open] .faq__sign::before {
	content: "−";
}

.faq__a {
	max-width: 68ch;
	margin: 0;
	padding: 0 0 1.25rem;
	color: var(--pk-muted);
}

/* „О нама“ – Хронологија (dizajn: Istorijat) */
.timeline-section {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-bottom: 3.5rem;
}

.timeline-section__title {
	margin: 0;
	font-family: var(--pk-serif);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.05;
}

.timeline {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.timeline__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.5rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--pk-line);
}

.timeline__year {
	flex: 0 0 9.5rem;
	font-family: var(--pk-serif);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1;
	color: var(--pk-gold);
	font-variant-numeric: lining-nums;
}

.timeline__body {
	display: flex;
	flex: 1 1 20rem;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.timeline__title {
	margin: 0;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.timeline__desc {
	margin: 0;
	color: var(--pk-muted);
}

/* „О нама“ – Наше сцене */
.scenes-section {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-bottom: 3.5rem;
}

.scenes-section__title {
	margin: 0;
	font-family: var(--pk-serif);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.05;
}

.scenes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
	gap: 2rem;
}

.scene-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.scene-card__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--pk-surface);
	border: 1px solid var(--pk-line);
}

.scene-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scene-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pk-muted);
}

.scene-card__title {
	margin: 0;
	font-family: var(--pk-serif);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.1;
}

.scene-card__seats {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pk-gold);
}

.scene-card__desc {
	margin: 0;
	color: var(--pk-muted);
}

/* „О нама“ – Фестивали и сарадња */
.line-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.line-list li {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--pk-line);
}

/* „Контакт“ – Подаци о установи (МБ, ПИБ, рачун) */
.org-data {
	margin-bottom: 3.5rem;
	padding: 1.75rem;
	background: var(--pk-surface);
	border: 1px solid var(--pk-line);
	font-size: 0.875rem;
}

.org-data__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
	gap: 1rem 2rem;
	margin: 0;
}

.org-data__list dt {
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pk-muted);
}

.org-data__list dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* „Посета“ – План сале kad je slika postavljena */
.hall-plan__img {
	margin: 0;
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
}

.hall-plan__img img {
	display: block;
	width: 100%;
	height: auto;
}