/* Teatar Titanija, site styles.
   Layout concept: the site reads like a printed theatre programme. White pages carry the words
   (white and off-white instead of the brand book's cream: owner, 10 Nov 2026; ivory stays as the text
   colour on dark), dark cherry "house" bands carry the photos, gold hairlines with a diamond divide the acts.
   Colors and fonts follow brand_kits/source/BRAND_SPEC.md. One deliberate look, no dark mode. */
:root {
  --papir: #FFFFFF;      /* page and header: white */
  --podloga: #F7F5F2;    /* every second band: off-white */
  --slonovaca: #F3E6C8;
  --bordo: #5C1326;
  --tresnja: #3A0B17;
  --zlato: #C9A15A;
  --svetlo-zlato: #E2C48A;
  --tinta: #2A0A12;
  --siva: #6B4A50;
  --linija: rgba(92, 19, 38, 0.18);
  --linija-tamna: rgba(226, 196, 138, 0.28);

  /* 'Marcellus SC' is loaded with only Đ and đ (see layout.html): Cinzel's own Đ has its bar above the letter. */
  --f-display: 'Marcellus SC', 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --f-glas: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --f-tekst: 'Mulish', 'Helvetica Neue', Arial, sans-serif;

  --t-display: clamp(2.6rem, 1.4rem + 5.2vw, 4.75rem);
  --t-h1: clamp(2.2rem, 1.4rem + 3.2vw, 3.5rem);
  --t-h2: clamp(1.8rem, 1.3rem + 2vw, 2.5rem);
  --t-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  --t-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-small: 0.9375rem;
  --t-label: 0.75rem;

  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --sekcija: clamp(64px, 5vw + 40px, 120px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papir);
  color: var(--tinta);
  font-family: var(--f-tekst);
  font-size: var(--t-body);
  line-height: 1.65;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--papir);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bordo); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tresnja); }
:focus-visible { outline: 2px solid var(--zlato); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bordo); color: var(--papir); padding: 10px 16px; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- Layout ---------- */
.wrap { max-width: 1200px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.wrap--usko { max-width: 820px; }
.band { padding-block: var(--sekcija); }
.band--slonovaca { background: var(--podloga); }
.band--tamno { background: var(--tresnja); color: var(--slonovaca); }
.band--bordo { background: var(--bordo); color: var(--slonovaca); }
.band--tamno a:not(.btn), .band--bordo a:not(.btn) { color: var(--svetlo-zlato); }
.band--tamno a:not(.btn):hover, .band--bordo a:not(.btn):hover { color: var(--slonovaca); }
.stack { display: grid; gap: 20px; }
.stack--lg { gap: 32px; }
.split { display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--siroko-levo { grid-template-columns: 1.2fr 1fr; }
  .split--siroko-desno { grid-template-columns: 1fr 1.2fr; }
  .split--obrnuto > :first-child { order: 2; }
}
.split > * { min-width: 0; }

/* ---------- Type ---------- */
.label {
  font-family: var(--f-tekst); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--bordo);
}
.band--tamno .label, .band--bordo .label, .hero .label { color: var(--svetlo-zlato); }
.display { font-family: var(--f-display); font-size: var(--t-display); line-height: 1.04; letter-spacing: 0.04em; font-weight: 600; }
.h1 { font-family: var(--f-display); font-size: var(--t-h1); line-height: 1.1; letter-spacing: 0.04em; }
.h2 { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.15; letter-spacing: 0.05em; color: var(--bordo); }
.band--tamno .h2, .band--bordo .h2 { color: var(--slonovaca); }
.h3 { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.2; letter-spacing: 0.05em; color: var(--bordo); }
.band--tamno .h3, .band--bordo .h3 { color: var(--svetlo-zlato); }
.lead { font-family: var(--f-glas); font-style: italic; font-size: var(--t-lead); line-height: 1.4; font-weight: 500; }
.prose { display: grid; gap: 1.1em; max-width: 64ch; }
p.prose { display: block; } /* a single paragraph: as a grid, a link or span inside it would drop to its own row */
.prose--siva { color: var(--siva); }
.band--tamno .prose--siva, .band--bordo .prose--siva { color: var(--slonovaca); opacity: 0.86; }
.small { font-size: var(--t-small); line-height: 1.55; }
.muted { color: var(--siva); }
.band--tamno .muted, .band--bordo .muted { color: var(--svetlo-zlato); opacity: 0.9; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* gold hairline with a centre diamond */
.rule { display: flex; align-items: center; gap: 14px; color: var(--zlato); }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: 0.9; }
.rule i { width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; flex: none; }
.rule--kratko { max-width: 180px; }
.rule--levo::before { flex: 0 0 0; display: none; }

/* ---------- Buttons ---------- */
.dugmad { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 2px; border: 1px solid transparent;
  font-family: var(--f-tekst); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn--bordo { background: var(--bordo); color: var(--papir); }
.btn--bordo:hover { background: var(--tresnja); color: var(--papir); }
.btn--zlato { background: var(--zlato); color: var(--tinta); }
.btn--zlato:hover { background: var(--svetlo-zlato); color: var(--tinta); }
.btn--okvir { border-color: var(--bordo); color: var(--bordo); background: transparent; }
.btn--okvir:hover { background: var(--bordo); color: var(--papir); }
.hero .btn--okvir, .band--tamno .btn--okvir, .band--bordo .btn--okvir { border-color: var(--svetlo-zlato); color: var(--svetlo-zlato); }
.hero .btn--okvir:hover, .band--tamno .btn--okvir:hover, .band--bordo .btn--okvir:hover { background: var(--svetlo-zlato); color: var(--tinta); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.strelica { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.12em; font-size: 0.85rem; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.strelica::after { content: "→"; font-family: var(--f-tekst); transition: transform .2s; }
.strelica:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.zaglavlje {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--linija);
  backdrop-filter: saturate(1.2) blur(6px);
}
.zaglavlje .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.znak { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bordo); }
.znak img { width: 46px; height: 46px; }
.znak b { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.16em; display: block; line-height: 1.1; }
.znak small { font-family: var(--f-glas); font-style: italic; font-size: 0.95rem; color: var(--siva); display: block; line-height: 1.2; }
.znak b { white-space: nowrap; }
@media (max-width: 560px) {
  .zaglavlje .wrap { min-height: 64px; }
  .znak img { width: 40px; height: 40px; }
  .znak b { font-size: 0.95rem; letter-spacing: 0.12em; }
  .zaglavlje .znak small { display: none; }
}
.meni { display: none; }
.meni ul { list-style: none; display: flex; gap: 4px; align-items: center; }
.meni a {
  display: block; padding: 10px 12px; text-decoration: none; color: var(--tinta);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.meni a:hover, .meni a[aria-current="page"] { color: var(--bordo); }
.meni a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--zlato); }
.meni .btn { margin-left: 10px; min-height: 42px; padding: 8px 18px; color: var(--papir); }
.meni .btn:hover { color: var(--papir); }
.meni-dugme {
  display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--linija);
  border-radius: 2px; padding: 10px 14px; min-height: 44px; color: var(--bordo); cursor: pointer;
  font: 700 0.75rem/1 var(--f-tekst); letter-spacing: 0.2em; text-transform: uppercase;
}
.meni-dugme span { display: grid; gap: 4px; }
.meni-dugme span i { display: block; width: 18px; height: 1.5px; background: currentColor; }
@media (min-width: 1080px) {
  .meni { display: block; }
  .meni-dugme { display: none; }
}
.panel {
  position: fixed; inset: 0; z-index: 70; background: var(--tresnja); color: var(--slonovaca);
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--gutter-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  display: flex; flex-direction: column; gap: 28px; overflow-y: auto;
}
.panel[hidden] { display: none !important; }
.panel__vrh { display: flex; justify-content: space-between; align-items: center; }
.panel__vrh .znak { color: var(--slonovaca); }
.panel__vrh .znak small { color: var(--svetlo-zlato); }
.panel ul { list-style: none; display: grid; }
.panel ul a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--linija-tamna); text-decoration: none;
  color: var(--slonovaca); font-family: var(--f-display); font-size: 1.45rem; letter-spacing: 0.06em;
}
.panel ul a[aria-current="page"] { color: var(--svetlo-zlato); }
.panel .meni-dugme { color: var(--svetlo-zlato); border-color: var(--linija-tamna); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--tresnja); color: var(--slonovaca); overflow: hidden; isolation: isolate; }
.hero__slika { position: absolute; inset: 0; z-index: -1; }
.hero__slika img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* The one gradient the brand book allows: a bottom fade behind text on a photo. It sits on the photo,
   Heroes without a photo stay a flat colour. */
.hero__slika::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(42, 10, 18, 0.94) 8%, rgba(42, 10, 18, 0.45) 55%, rgba(42, 10, 18, 0.25));
}
.hero .wrap { padding-block: clamp(140px, 22vw, 260px) clamp(48px, 7vw, 88px); display: grid; gap: 22px; }
.hero__pecat { width: clamp(84px, 9vw, 116px); height: auto; }
.hero h1 { max-width: 14ch; }
.hero .lead { max-width: 34ch; color: var(--slonovaca); }
.hero--strana .wrap { padding-block: clamp(110px, 14vw, 180px) clamp(40px, 5vw, 64px); }
.hero--strana h1 { max-width: 20ch; }
.hero--strana .lead { max-width: 46ch; }

/* ---------- Programme list (repertory with dotted leaders) ---------- */
.program { list-style: none; display: grid; border-top: 1px solid var(--linija); }
.program li { border-bottom: 1px solid var(--linija); }
.program a, .program .red {
  display: grid; grid-template-columns: 1fr; gap: 6px 28px; padding: 22px 0; text-decoration: none; color: inherit;
}
@media (min-width: 760px) {
  .program a, .program .red { grid-template-columns: 250px 1fr auto; align-items: baseline; }
}
.program__datum { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.06em; color: var(--bordo); }
.program__naslov { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: 0.05em; line-height: 1.25; }
.program__opis { display: block; font-family: var(--f-tekst); font-size: var(--t-small); color: var(--siva); letter-spacing: 0; margin-top: 4px; }
.program__vise { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bordo); white-space: nowrap; }
.program a:hover .program__naslov { color: var(--bordo); }
.program a:hover .program__vise { color: var(--tresnja); }
.band--tamno .program, .band--tamno .program li { border-color: var(--linija-tamna); }
.band--tamno .program__datum, .band--tamno .program__vise { color: var(--svetlo-zlato); }
.band--tamno .program__opis { color: var(--slonovaca); opacity: 0.8; }

/* ---------- Cast list (podela) ---------- */
.podela { list-style: none; display: grid; gap: 4px; }
.podela li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.podela .ime { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.08em; font-size: 1.1rem; color: var(--bordo); white-space: nowrap; }
.podela .tacke { flex: 1; border-bottom: 1px dotted var(--zlato); transform: translateY(-4px); min-width: 24px; }
.podela .uloga { font-family: var(--f-glas); font-style: italic; font-size: 1.15rem; color: var(--siva); text-align: right; }
@media (max-width: 560px) {
  .podela li { flex-wrap: wrap; gap: 0 12px; }
  .podela .tacke { display: none; }
  .podela .uloga { text-align: left; width: 100%; }
}

/* ---------- Photos ---------- */
.foto { position: relative; margin: 0; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--4x5 { aspect-ratio: 4 / 5; }
.foto--3x2 { aspect-ratio: 3 / 2; }
.foto--16x9 { aspect-ratio: 16 / 9; }
.foto--1x1 { aspect-ratio: 1; }
.foto--okvir::after {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(226, 196, 138, 0.55); pointer-events: none;
}
.foto figcaption { font-size: 0.8125rem; color: var(--siva); padding-top: 10px; font-style: italic; font-family: var(--f-glas); font-size: 1rem; }
.band--tamno .foto figcaption { color: var(--svetlo-zlato); }

/* ---------- Doors to the three offers ---------- */
.vrata { display: grid; gap: clamp(48px, 6vw, 96px); }
.vrata__tekst { display: grid; gap: 18px; align-content: center; }

/* ---------- Manifest quote ---------- */
.citat { display: grid; gap: 26px; justify-items: start; }
.citat blockquote { margin: 0; font-family: var(--f-glas); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); line-height: 1.28; max-width: 30ch; color: var(--slonovaca); }
.citat blockquote::before { content: "„"; }
.citat blockquote::after { content: "”"; }
.citat cite { font-style: normal; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--svetlo-zlato); }

/* ---------- Class steps (a real sequence) ---------- */
.koraci { list-style: none; display: grid; gap: 0; counter-reset: korak; grid-template-columns: 1fr; border-top: 1px solid var(--linija); }
@media (min-width: 760px) { .koraci { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .koraci { grid-template-columns: repeat(4, 1fr); } }
.koraci li { counter-increment: korak; padding: 26px 24px 30px 0; border-bottom: 1px solid var(--linija); display: grid; gap: 10px; align-content: start; }
.koraci li::before { content: counter(korak, upper-roman) "."; font-family: var(--f-display); color: var(--zlato); font-size: 1.6rem; font-weight: 600; }
.koraci h3 { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: 0.06em; color: var(--bordo); }
.koraci p { color: var(--siva); font-size: var(--t-small); }

/* ---------- Offer grid on Škola glume ---------- */
.grupe { display: grid; gap: 1px; background: var(--linija); border: 1px solid var(--linija); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grupe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grupe { grid-template-columns: repeat(3, 1fr); } }
.grupe > div { background: var(--papir); padding: 26px 24px; display: grid; gap: 6px; align-content: start; }
.grupe b { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.04em; color: var(--bordo); }
.grupe span { color: var(--siva); font-size: var(--t-small); }

/* ---------- Ticket stub (open class, audition dates) ---------- */
.ulaznice { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ulaznice { grid-template-columns: repeat(2, 1fr); } }
.ulaznica {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 22px; align-items: center;
  background: var(--papir); color: var(--tinta); padding: 26px 26px 26px 0; border: 1px solid var(--zlato);
}
.ulaznica__datum {
  display: grid; justify-items: center; padding: 0 22px; border-right: 1px dashed var(--zlato); min-width: 108px;
}
.ulaznica__datum b { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--bordo); font-weight: 600; }
.ulaznica__datum span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--siva); }
.ulaznica h3 { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: 0.05em; color: var(--bordo); }
.ulaznica p { font-size: var(--t-small); color: var(--siva); margin-top: 4px; }
.ulaznica::before, .ulaznica::after {
  content: ""; position: absolute; left: 108px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--podloga); border: 1px solid var(--zlato); transform: translateX(-50%);
}
.ulaznica::before { top: -10px; clip-path: inset(50% 0 0 0); }
.ulaznica::after { bottom: -10px; clip-path: inset(0 0 50% 0); }
.band--tamno .ulaznica::before, .band--tamno .ulaznica::after { background: var(--tresnja); }
.band:not(.band--slonovaca):not(.band--tamno) .ulaznica::before,
.band:not(.band--slonovaca):not(.band--tamno) .ulaznica::after { background: var(--papir); }

/* ---------- Facts row ---------- */
.cinjenice { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--linija); }
@media (min-width: 760px) { .cinjenice { grid-template-columns: repeat(3, 1fr); } }
.cinjenice > div { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--linija); display: grid; gap: 4px; }
.cinjenice dt { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--siva); }
.cinjenice dd { margin: 0; font-family: var(--f-glas); font-weight: 600; font-size: 1.35rem; line-height: 1.3; color: var(--bordo); }
.band--tamno .cinjenice, .band--tamno .cinjenice > div { border-color: var(--linija-tamna); }
.band--tamno .cinjenice dt { color: var(--svetlo-zlato); }
.band--tamno .cinjenice dd { color: var(--slonovaca); }

/* ---------- Pedagogue blocks ---------- */
.pedagog { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .pedagog { grid-template-columns: 340px 1fr; } }
.portret {
  aspect-ratio: 4 / 5; background: var(--bordo); color: var(--svetlo-zlato); display: grid; place-items: center;
  position: relative; text-align: center; padding: 24px; max-width: 420px;
}
.portret::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(226, 196, 138, 0.5); }
.portret b { font-family: var(--f-display); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 600; letter-spacing: 0.08em; line-height: 1; }
.portret span { display: block; margin-top: 14px; font-family: var(--f-glas); font-style: italic; font-size: 1.05rem; color: var(--slonovaca); opacity: 0.85; }
.pedagog__ime { display: grid; gap: 6px; }
.pedagog__ime .lead { color: var(--siva); }

/* ---------- FAQ ---------- */
.pitanja { display: grid; border-top: 1px solid var(--linija); }
.pitanja details { border-bottom: 1px solid var(--linija); }
.pitanja summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--f-display); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--bordo); line-height: 1.35;
}
.pitanja summary::-webkit-details-marker { display: none; }
.pitanja summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 1.5px solid var(--zlato); border-bottom: 1.5px solid var(--zlato); transform: rotate(45deg); transition: transform .2s;
}
.pitanja details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pitanja .odgovor { padding: 0 0 26px; max-width: 66ch; color: var(--siva); display: grid; gap: 0.9em; }

/* ---------- Forms ---------- */
.forma { display: grid; gap: 22px; }
.forma__red { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .forma__red { grid-template-columns: 1fr 1fr; } }
.polje { display: grid; gap: 8px; min-width: 0; }
.polje > label, .polje > legend, .grupa-polja > legend {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta);
}
.polje .pomoc { font-size: 0.875rem; color: var(--siva); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(92, 19, 38, 0.35); border-radius: 2px;
  background: #FFFFFF; color: var(--tinta); font: 400 1rem/1.4 var(--f-tekst);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--zlato); outline-offset: 0; border-color: var(--bordo); }
.grupa-polja { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.izbori { display: flex; flex-wrap: wrap; gap: 10px; }
.izbor { position: relative; }
.izbor input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.izbor span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 10px 16px; border: 1px solid rgba(92, 19, 38, 0.35);
  border-radius: 2px; background: #FFFFFF; font-size: 0.95rem; cursor: pointer; transition: background-color .15s, color .15s;
}
.izbor input:checked + span { background: var(--bordo); color: var(--papir); border-color: var(--bordo); }
.izbor input:focus-visible + span { outline: 2px solid var(--zlato); outline-offset: 2px; }
.saglasnost { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 0.9375rem; color: var(--siva); }
.saglasnost input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bordo); }
.zamka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.poruka-forme { padding: 18px 20px; border-left: 3px solid var(--zlato); background: var(--podloga); font-size: 0.975rem; }
.poruka-forme--greska { border-left-color: var(--bordo); }
.poruka-forme[hidden] { display: none; }
.okvir-forme { background: var(--papir); border: 1px solid var(--linija); padding: clamp(22px, 4vw, 44px); position: relative; }
.band--slonovaca .okvir-forme { background: var(--papir); }
.napomena-roka { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 14px 18px; background: var(--podloga); border: 1px solid var(--zlato); font-size: 0.975rem; }
.napomena-roka b { font-family: var(--f-display); color: var(--bordo); letter-spacing: 0.06em; }

/* ---------- Contact block ---------- */
.kontakt-lista { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--linija-tamna); }
.kontakt-lista li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--linija-tamna); }
@media (min-width: 560px) { .kontakt-lista li { grid-template-columns: 140px 1fr; } }
.kontakt-lista span { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--svetlo-zlato); padding-top: 4px; }
.kontakt-lista b { font-weight: 600; color: var(--slonovaca); overflow-wrap: anywhere; }
.band:not(.band--tamno):not(.band--bordo) .kontakt-lista, .band:not(.band--tamno):not(.band--bordo) .kontakt-lista li { border-color: var(--linija); }
.band:not(.band--tamno):not(.band--bordo) .kontakt-lista span { color: var(--siva); }
.band:not(.band--tamno):not(.band--bordo) .kontakt-lista b { color: var(--tinta); }

/* ---------- Footer ---------- */
.podnozje { background: var(--tresnja); color: var(--slonovaca); padding-block: 72px calc(32px + env(safe-area-inset-bottom, 0px)); }
.podnozje a { color: var(--slonovaca); text-decoration: none; }
.podnozje a:hover { color: var(--svetlo-zlato); text-decoration: underline; }
.podnozje__mreza { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .podnozje__mreza { grid-template-columns: 1.4fr 1fr 1fr; } }
.podnozje__znak { display: grid; gap: 16px; justify-items: start; }
.podnozje__znak img { width: 96px; height: 96px; }
.podnozje__znak p { font-family: var(--f-glas); font-style: italic; font-size: 1.25rem; color: var(--svetlo-zlato); }
.podnozje__znak .podnozje__linija { font-family: var(--f-tekst); font-style: normal; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--slonovaca); }
.podnozje h2 { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--svetlo-zlato); margin-bottom: 14px; font-family: var(--f-tekst); }
.podnozje ul { list-style: none; display: grid; gap: 8px; font-size: var(--t-small); }
.podnozje__dno { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--linija-tamna); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 0.8125rem; color: var(--svetlo-zlato); }

/* ---------- Long reading pages (privacy policy) ---------- */
.prose ul { list-style: none; display: grid; gap: 0.55em; }
.prose ul li { position: relative; padding-left: 1.4em; }
.prose ul li::before { content: ""; position: absolute; left: 0.2em; top: 0.62em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--zlato); }
.clanak { display: grid; gap: 14px; padding-top: 28px; border-top: 1px solid var(--linija); }
.clanak:first-of-type { border-top: 0; padding-top: 0; }
.sazetak { display: grid; gap: 0; border: 1px solid var(--zlato); background: var(--podloga); }
.sazetak > div { padding: 16px 20px; border-bottom: 1px solid var(--linija); display: grid; gap: 2px; }
.sazetak > div:last-child { border-bottom: 0; }
.sazetak dt { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--siva); }
.sazetak dd { margin: 0; color: var(--tinta); }
/* Review note, shown only in a preview build (build.py --pregled). */
.nacrt { padding: 16px 20px; border: 1px dashed var(--bordo); background: #FFFFFF; color: var(--tinta); font-size: var(--t-small); display: grid; gap: 6px; }
.nacrt b { font-size: var(--t-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--bordo); }

/* ---------- Ways in: one card per kind of visitor (home page) ---------- */
.putevi { list-style: none; display: grid; gap: 1px; background: var(--linija); border: 1px solid var(--linija); grid-template-columns: 1fr; }
@media (min-width: 620px) { .putevi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .putevi { grid-template-columns: repeat(3, 1fr); } }
.putevi li { background: var(--papir); display: grid; }
.putevi a { display: grid; gap: 6px; align-content: start; padding: 24px 24px 26px; text-decoration: none; color: inherit; transition: background-color 0.2s; }
.putevi a:hover { background: var(--podloga); }
.putevi i { font-style: normal; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--siva); }
.putevi b { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.04em; line-height: 1.2; color: var(--bordo); }
.putevi b::after { content: " →"; font-family: var(--f-tekst); font-weight: 400; color: var(--zlato); }
.putevi span { color: var(--siva); font-size: var(--t-small); }

/* ---------- Jump links at the top of long pages ---------- */
.band--tanko { padding-block: clamp(28px, 3vw + 12px, 52px); }
.skok { display: flex; flex-wrap: wrap; gap: 10px; }
.skok a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(92, 19, 38, 0.35); border-radius: 2px; background: var(--papir); text-decoration: none; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bordo); }
.skok a:hover { background: var(--bordo); color: var(--papir); }
@media (max-width: 560px) { .skok { gap: 8px; } .skok a { min-height: 40px; padding: 6px 12px; font-size: 0.72rem; letter-spacing: 0.06em; } }
[id] { scroll-margin-top: 92px; }
.cinjenice dd a { color: inherit; }

/* ---------- Quick contact bar, phones only ---------- */
.brzo { display: none; }
@media (max-width: 760px) {
  .brzo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--tresnja); border-top: 1px solid var(--zlato); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .brzo a { display: grid; place-items: center; min-height: 52px; padding: 4px 2px; text-decoration: none; color: var(--slonovaca); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-left: 1px solid var(--linija-tamna); }
  .brzo a:first-child { border-left: 0; }
  .brzo .brzo__glavno { background: var(--zlato); color: var(--tinta); }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .kolacici { bottom: 0; z-index: 80; }
}

/* ---------- Blog article ---------- */
.tekst-bloga { display: grid; gap: 1.15em; }
.tekst-bloga > * { max-width: 68ch; }
.tekst-bloga h2 { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.25; letter-spacing: 0.04em; color: var(--bordo); margin-top: 0.9em; }
.tekst-bloga p, .tekst-bloga li { color: var(--siva); }
.tekst-bloga strong { color: var(--tinta); font-weight: 700; }
.tekst-bloga ul { list-style: none; display: grid; gap: 0.55em; }
.tekst-bloga ul li { position: relative; padding-left: 1.4em; }
.tekst-bloga ul li::before { content: ""; position: absolute; left: 0.2em; top: 0.62em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--zlato); }
.hero .label a { color: inherit; text-decoration: none; }
.hero .label a:hover { text-decoration: underline; }

/* ---------- Cookie notice (shown only when a Meta pixel id is set) ---------- */
.kolacici {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--papir); color: var(--tinta);
  border-top: 1px solid var(--zlato); box-shadow: 0 -8px 30px rgba(42, 10, 18, 0.12);
  padding: 18px var(--gutter-r) calc(18px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
}
.kolacici__tekst { flex: 1 1 320px; display: grid; gap: 4px; max-width: 72ch; font-size: var(--t-small); line-height: 1.55; color: var(--siva); }
.kolacici__tekst b { font-family: var(--f-display); letter-spacing: 0.06em; color: var(--bordo); font-size: 1rem; }
.kolacici__dugmad { display: flex; flex-wrap: wrap; gap: 10px; }
.kolacici .btn { min-height: 44px; padding: 10px 20px; }
.podnozje__veze { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.veza-dugme { background: none; border: 0; padding: 0; font: inherit; color: var(--slonovaca); cursor: pointer; }
.veza-dugme:hover { color: var(--svetlo-zlato); text-decoration: underline; }

/* ---------- Line icons (drawn in the brand's thin gold stroke) ---------- */
.ikona { width: 46px; height: 46px; fill: none; stroke: var(--zlato); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.koraci li .ikona { order: -1; margin-bottom: 4px; }
.svetlo { position: absolute; right: clamp(0px, 4vw, 60px); top: 50%; width: clamp(150px, 26vw, 300px); height: auto; transform: translateY(-50%); fill: none; stroke: var(--zlato); stroke-width: 1.2; stroke-linecap: round; opacity: 0.5; pointer-events: none; }
.citat { position: relative; }
.citat .rule { width: 180px; } /* the quote grid would otherwise shrink the hairline to its diamond */
.citat > :not(.svetlo) { position: relative; z-index: 1; }
@media (max-width: 760px) { .svetlo { opacity: 0.22; } }

/* ---------- Numbers row (pedagogue facts) ---------- */
.brojke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; margin: 0; border-block: 1px solid var(--linija); }
.brojke > div { display: grid; gap: 4px; padding: 18px 0; align-content: start; }
.brojke dd { order: -1; margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1; color: var(--bordo); font-variant-numeric: tabular-nums lining-nums; }
.brojke dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--siva); line-height: 1.4; }

/* ---------- "Read more" for long texts ---------- */
.vise > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; padding: 10px 0; min-height: 44px; font-family: var(--f-display); font-weight: 600; letter-spacing: 0.12em; font-size: 0.85rem; text-transform: uppercase; color: var(--bordo); }
.vise > summary::-webkit-details-marker { display: none; }
.vise > summary::after { content: "+"; font-family: var(--f-tekst); font-size: 1.15rem; line-height: 1; color: var(--zlato); }
.vise[open] > summary::after { content: "\2212"; }
.vise[open] > summary .zatvoreno, .vise:not([open]) > summary .otvoreno { display: none; }
.vise > .prose { margin-top: 0.6em; }

/* ---------- Curtain: the home page opens like a stage, once per visit ---------- */
.zavesa { position: fixed; inset: 0; z-index: 90; display: none; pointer-events: none; }
.zavesa i { flex: 1; background: var(--bordo); background-image: repeating-linear-gradient(90deg, rgba(42, 10, 18, 0.28) 0 1px, rgba(42, 10, 18, 0) 1px 54px); }
.zavesa i:first-child { border-right: 1px solid var(--zlato); }
.zavesa i + i { border-left: 1px solid var(--zlato); }
.zavesa img { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__slika img { animation: polako 18s ease-out both; }
  @keyframes polako { from { transform: scale(1.06); } to { transform: scale(1); } }

  /* page top: label, title, line and buttons step in one after another */
  .hero .wrap > * { animation: ulaz 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero .wrap > :nth-child(1) { animation-delay: 0.10s; }
  .hero .wrap > :nth-child(2) { animation-delay: 0.20s; }
  .hero .wrap > :nth-child(3) { animation-delay: 0.32s; }
  .hero .wrap > :nth-child(4) { animation-delay: 0.44s; }
  .hero .wrap > :nth-child(5) { animation-delay: 0.56s; }
  @keyframes ulaz { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* curtain on the home page */
  .zavesa { display: flex; }
  .bez-zavese .zavesa { display: none; }
  .zavesa i { animation: zavesa-levo 1.05s cubic-bezier(0.7, 0, 0.2, 1) 0.55s both; }
  .zavesa i + i { animation-name: zavesa-desno; }
  .zavesa img { animation: zavesa-pecat 0.45s ease 0.45s both; }
  @keyframes zavesa-levo { to { transform: translateX(-101%); } }
  @keyframes zavesa-desno { to { transform: translateX(101%); } }
  @keyframes zavesa-pecat { to { opacity: 0; transform: scale(0.92); } }
  html:not(.bez-zavese) .zavesa + .hero .wrap > :nth-child(1) { animation-delay: 0.95s; }
  html:not(.bez-zavese) .zavesa + .hero .wrap > :nth-child(2) { animation-delay: 1.05s; }
  html:not(.bez-zavese) .zavesa + .hero .wrap > :nth-child(3) { animation-delay: 1.17s; }
  html:not(.bez-zavese) .zavesa + .hero .wrap > :nth-child(4) { animation-delay: 1.29s; }
  html:not(.bez-zavese) .zavesa + .hero .wrap > :nth-child(5) { animation-delay: 1.41s; }

  /* content rises in when reached (site.js adds .otkrij below the first screen, then .vidi) */
  .otkrij { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--kasni, 0ms); }
  .otkrij.vidi { opacity: 1; transform: none; }
  .rule.otkrij { opacity: 1; transform: none; }
  .rule.otkrij::before, .rule.otkrij::after { transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s; }
  .rule.otkrij::before { transform-origin: right; }
  .rule.otkrij::after { transform-origin: left; }
  .rule.otkrij.vidi::before, .rule.otkrij.vidi::after { transform: scaleX(1); }

  /* line icons draw themselves */
  .anim .ikona [pathLength], .anim .svetlo [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s ease 0.2s; }
  .anim .ikona.vidi [pathLength], .anim .svetlo.vidi [pathLength] { stroke-dashoffset: 0; }

  /* opened answers and "read more" texts ease in */
  .pitanja details[open] .odgovor, .vise[open] > .prose { animation: ulaz 0.45s ease both; }

  .btn { transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
  .btn:hover { transform: translateY(-2px); }
  .foto img { transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .foto { overflow: hidden; }
  .foto:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
@media print { .otkrij { opacity: 1 !important; transform: none !important; } .zavesa { display: none !important; } }