/* ============================================================
   A11Y-SCMS — design system

   V TEJ DATOTEKI NI NOBENE BARVE. Vse barve so žetoni, ki jih generira
   CMS v /theme.css (App\Core\Theme). Vsak žeton je ali nastavljiv v
   uredništvu ali izpeljan iz nastavljivih tako, da doseže zahtevano
   kontrastno razmerje — Videz → Barve pokaže oboje skupaj z razmerji.

   Enako velja za tipografijo, razmike in oblike: nastavlja jih Videz
   (App\Core\Style, prav tako prek /theme.css); tu so le rezervne
   vrednosti v var(--…, rezerva), če /theme.css ni dosegljiv.
   ============================================================ */

:root {
  --bg: #f9f9fc; --surface: #fdfdfe; --surface-alt: #efeff2; --surface-mute: #e7e7ea;
  --text: #2d3339; --text-muted: #64676c;
  --primary: #255dad; --primary-hover: #1d4a8a; --on-primary: #ffffff;
  --primary-soft: #e0e6f3; --primary-line: #255dad;
  --band: #112a4e; --on-band: #ffffff;
  --link: #255dad; --link-hover: #1e4c8e; --link-visited: #562fa3;
  --accent: #8a3ffc; --accent-text: #873ef7; --accent-soft: #e9dffc;
  --border: #87888a; --border-strong: #5f6266;
  --focus-outer: #255dad; --focus-inner: #ffffff;
  --info: #0b5e8a; --info-soft: #d8e3ec;
  --success: #08652a; --success-soft: #d9e7e1;
  --warning: #a05e03; --warning-soft: #ede3d9;
  --danger: #9b1520; --danger-soft: #efdbdf;
  --shadow-color: #0d0d0f;
  --scrim: #07111f; --on-scrim: #ffffff;
  --shadow: 0 2px 10px rgb(13 13 15 / .10);
  --shadow-lg: 0 6px 24px rgb(13 13 15 / .16);
  --radius: 0.75rem;
  --font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono-fallback: ui-monospace, Consolas, Monaco, "Courier New", monospace;
  --maxw: 72rem;
}

/* ---------------- Ponastavitev ---------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Odmik ob skoku na sidro. Pri lepljivi glavi ga main.js nastavi na njeno
   izmerjeno višino (--header-h), sicer velja rezerva 4 rem kot doslej. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 4rem) + 1rem); }
body {
  margin: 0;
  font-family: var(--font-body, var(--font));
  font-size: var(--fs-base, 1.0625rem);
  line-height: var(--lh, 1.6);
  letter-spacing: var(--ls-body, normal);
  word-spacing: var(--ws-body, normal);
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
img, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-heading, inherit);
  letter-spacing: var(--ls-heading, normal);
  line-height: var(--lh-heading, 1.25);
  margin: 0 0 .6em; text-wrap: balance;
}
h1 { font-size: var(--h1-size, clamp(1.8rem, 1.4rem + 2vw, 2.6rem)); font-weight: var(--heading-w, 800); }
h2 { font-size: var(--h2-size, clamp(1.4rem, 1.2rem + 1vw, 1.9rem)); font-weight: var(--heading-w2, 700); }
h3 { font-size: var(--h3-size, 1.25rem); font-weight: var(--heading-w2, 700); }
h4 { font-size: var(--h4-size, 1.1rem); font-weight: var(--heading-w2, 700); }
p { margin: 0 0 var(--p-space, 1em); }
a { color: var(--link); }
a:hover {
  color: var(--link-hover);
  text-decoration-thickness: var(--link-hover-width, 2px) !important;
  text-decoration-style: var(--link-hover-style, solid) !important;
  text-shadow: var(--link-hover-shadow, none);
}
hr { border: 0; border-top: var(--divider-w, 1px) solid var(--border-strong); margin: 1.5rem 0; }
button { font: inherit; }
.mono { font-family: var(--font-mono, var(--font-mono-fallback)); }

/* Poudarek naslovov H2 (Videz → Oblika): črta v glavni barvi pod naslovi razdelkov.
   Izrisana je kot podlaga, zato »kratka« različica ne potrebuje dodatnega elementa. */
h2.block-heading, .prose h2 {
  padding-bottom: var(--h2-accent-pad, 0px);
  background: linear-gradient(var(--heading-line, transparent), var(--heading-line, transparent))
    bottom left / var(--h2-accent-len, 0px) var(--h2-accent-w, 0px) no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- Fokus (dvojni obroč po CGP) ----------------
   Zunanji obroč skrbi za podlage strani, notranji za navigacijsko vrstico:
   na vsaki podlagi je viden vsaj eden (žetona izbere Theme). Theme::rules()
   ima za pasico pravilo mode 'either' — poročilo o kontrastih torej DOVOLI,
   da eden od obročev pade, ker računa na drugega. Zato notranji obroč ne sme
   izginiti nikjer.

   PRAVILO ZA NOVE KOMPONENTE: notranji obroč nosi box-shadow. Vsaka
   fokusabilna komponenta, ki si nastavi lasten box-shadow (senca, dvig,
   inset obroba), ga s tem prepiše in obroč izgine brez opozorila. Taka
   komponenta MORA imeti pravilo :focus-visible, ki obroč doda nazaj:

       .nekaj:focus-visible { box-shadow: var(--focus-ring), var(--shadow); }

   Žeton je vedno prvi v seznamu, da se izriše nad senco. Spodaj so vse
   take komponente v tej datoteki. */
:root { --focus-ring: 0 0 0 2px var(--focus-inner); }

:focus-visible {
  outline: var(--focus-w, 3px) solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* ---------------- Pripomočki ---------------- */
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.icon {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  flex: 0 0 auto;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
}
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }

.skip-link {
  position: absolute;
  inset-inline-start: -100vw;
  top: 0;
  z-index: 100;
  padding: .8rem 1.4rem;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus-visible { inset-inline-start: 0; }
.skip-target {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-target:focus {
  position: absolute;
  z-index: 1;
  inset-block-start: .5rem;
  inset-inline-start: max(1.25rem, calc((100% - var(--maxw)) / 2 + 1.25rem));
  display: block;
  width: fit-content;
  height: auto;
  margin: 0;
  padding: .45rem .7rem;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  background: var(--focus-outer);
  color: var(--focus-inner);
  font-weight: 700;
  outline: var(--focus-w, 3px) solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* ---------------- Gumbi ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px;
  padding: .55em 1.25em;
  border-radius: var(--btn-radius, calc(var(--radius) * .8));
  border: 2px solid transparent;
  font-family: var(--font-ui, inherit);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary, .btn--on-image { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover, .btn--on-image:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn--secondary { background: transparent; color: var(--link); border-color: var(--primary-line); }
.btn--secondary:hover { color: var(--link-hover); background: var(--primary-soft); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-hover); color: var(--on-accent); }
/* Na poudarni podlagi globalni notranji obroč (--focus-inner) lahko pade;
   on-accent po izpeljavi ne more, zato je notranji obroč tu on-accent. */
.btn--accent:focus-visible { box-shadow: 0 0 0 2px var(--on-accent); }
/* »Prozoren« gumb: barvo in obrobo podeduje od podlage (currentColor), zato
   deluje na kateri koli sekciji — tudi na temni pasici (band, primary). */
.btn--ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 55%, transparent); }
.btn--ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }

/* ---------------- Obvestila ----------------
   Levi rob je oglat in poudarjen (5 px), obroba naokoli je v barvi obvestila;
   zaokrožena je samo desna stran. Enako obliko ima predloga glave »obvestilo«. */
.notice {
  padding: .8rem 1.1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-inline-start-width: 5px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice > :last-child, .notice .prose > :last-child { margin-bottom: 0; }
/* Podlaga je nastavljiva (Videz → Oblika): --notice-bg je 'initial' (obarvana
   podlaga -soft) ali 'transparent' (samo rob in obroba v barvi obvestila). */
.notice--info { background: var(--notice-bg, var(--info-soft)); border-color: var(--info); }
.notice--ok { background: var(--notice-bg, var(--success-soft)); border-color: var(--success); }
.notice--warn { background: var(--notice-bg, var(--warning-soft)); border-color: var(--warning); }
.notice--error { background: var(--notice-bg, var(--danger-soft)); border-color: var(--danger); }

/* Uvod obvestila (Videz → Oblika): ikona vrste in/ali vidni opis (notice_intro()).
   Barvo nosi žeton <vrsta>-text — 4,5 : 1 na vseh podlagah, s čimer vsebinska
   ikona preseže 3 : 1 (SC 1.4.11), vidni opis pa doseže zahtevo za besedilo. */
.notice__intro { font-family: var(--font-ui, inherit); }
.notice__icon {
  width: 1.4em; height: 1.4em; margin-inline-end: .45em; vertical-align: -.32em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Viden opis stoji v svoji vrstici nad sporočilom. Ob ikoni ta visi v levem
   žlebu: levi rob sporočila je poravnan z opisom, ne z ikono
   (1,85 em = ikona 1,4 em + presledek 0,45 em). */
.notice__intro--label { display: block; margin-block-end: .3em; }
.notice:has(.notice__intro--label .notice__icon) { padding-inline-start: calc(1.1rem + 1.85em); }
.notice:has(.notice__intro--label .notice__icon) .notice__intro--label,
.pageheader--notice:has(.notice__intro--label .notice__icon) .notice__intro--label { margin-inline-start: -1.85em; }
.pageheader--notice:has(.notice__intro--label .notice__icon) { padding-inline-start: calc(1.75rem * var(--space, 1) + .95rem * 1.85); }
.pageheader__kind .notice__intro--label { margin-block-end: 0; }
.notice--info .notice__intro, .pageheader--notice-info .notice__intro { color: var(--info-text); }
.notice--ok .notice__intro, .pageheader--notice-success .notice__intro { color: var(--success-text); }
.notice--warn .notice__intro, .pageheader--notice-warning .notice__intro { color: var(--warning-text); }
.notice--error .notice__intro, .pageheader--notice-danger .notice__intro { color: var(--danger-text); }

/* ================= GLAVA ================= */
/* Ogrodja glave (App\Core\Header, katalog: A11Y-SCMS-glave.md). Vse barve so
   žetoni: temna vrstica z znamko leži na --primary / --on-primary, pas menija
   in tanek zgornji pas na --band / --on-band, svetla vrstica na --surface.
   Vrstice se pri ožjih zaslonih prelomijo (flex-wrap) — meni ni nikoli skrit
   za »hamburgerjem«, razen pri ogrodju z gumbom Meni (predal). */
.site-header, .breadcrumbs, .site-footer { font-family: var(--font-ui, inherit); }

/* ---------------- Lepljiva glava (Videz → Postavitev) ----------------
   Vklopi jo žeton --header-pos (App\Core\Style, polje `sticky_header`);
   privzeto je `static` in tale razdelek ne stori ničesar.

   Trije pogoji, brez katerih glava ne sme ostati na zaslonu:

   1. **JavaScript.** `scroll-padding-top` mora biti vsaj tolikšen kot glava,
      sicer sidro (in fokus, ki mu sledi) pristane pod njo — SC 2.4.11. Višine
      glave strežnik ne pozna: odvisna je od logotipa, dolžine menija in preloma.
      Zato je lepljivost pod `html.js`, main.js pa izmerjeno višino zapiše v
      --header-h. Brez JavaScripta glava ostane na svojem mestu in ničesar ne prekriva.
   2. **Dovolj visoko okno.** V nizkem oknu (in pri 400-odstotni povečavi, kjer se
      glava prelomi v več vrstic) bi lepljiva glava pojedla velik del prostora za
      vsebino — SC 1.4.10. Razred .is-tall postavi main.js, ko glava preseže
      tretjino višine okna; medijsko vprašanje ujame nizko okno še pred meritvijo.
   3. **Neprosojna podlaga.** Ogrodja glave barvajo svoje pasove (.topstrip,
      .navbar), ne pa ovoja — pri lepljivi glavi bi vsebina prosevala skozi
      morebitno vrzel med njimi, zato dobi ovoj podlago strani.

   Skip-link (z-index 100) ostane nad glavo; predali in modalna okna (200) prav tako. */
@media (min-height: 34rem) {
  html.js .site-header {
    position: var(--header-pos, static); top: 0; z-index: 45;
    background: var(--bg);
  }
  html.js .site-header.is-tall { position: static; }
}

html:not(.dark) .ico-sun { display: none; }
html.dark .ico-moon { display: none; }

/* ---------------- Tanek zgornji pas (ogrodje top-strip) ---------------- */
.topstrip { background: var(--band); color: var(--on-band); font-size: .9rem; }
.topstrip__in { display: flex; justify-content: flex-end; align-items: center; gap: .25rem 1rem; flex-wrap: wrap; }
.topstrip__nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.topstrip a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .8em; color: var(--on-band); }
.topstrip .langswitch a { color: var(--on-band); }
.topstrip .langswitch a:hover { background: color-mix(in srgb, var(--on-band) 14%, transparent); }
.topstrip .langswitch a[aria-current] { background: var(--on-band); color: var(--band); }
.topstrip__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-width: 40px; min-height: 40px; padding: 0 .5em;
  background: none; border: 0; color: var(--on-band); cursor: pointer;
  border-radius: 4px; font: inherit;
}
.topstrip a:hover, .topstrip__btn:hover { background: color-mix(in srgb, var(--on-band) 14%, transparent); }
/* Ikonska oblika orodja v traku (elementa sitemap/theme): kvadratna tarča z obrobo. */
.topstrip a.topstrip__ico {
  justify-content: center; min-width: 40px; padding: 0;
  border: 2px solid color-mix(in srgb, var(--on-band) 45%, transparent);
  border-radius: calc(var(--radius) * .8);
}

/* ---------------- Vrstica z znamko ---------------- */
.navbar { box-shadow: var(--shadow); }
.navbar--dark { background: var(--primary); color: var(--on-primary); }
.navbar--light { background: var(--surface); color: var(--text); box-shadow: none; border-bottom: var(--divider-w, 1px) solid var(--border); }
.navbar__in { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; padding-block: .6rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.brand__logo { height: 44px; width: auto; }
.brand__mono {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  font-weight: 800; font-size: 1rem;
  border-radius: calc(var(--radius) * .8);
}
.navbar--dark .brand__mono { background: var(--on-primary); color: var(--primary); }
.navbar--light .brand__mono { background: var(--primary); color: var(--on-primary); }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-weight: 800; font-size: 1.2rem; letter-spacing: .01em; }
.brand__tagline { font-size: .85rem; font-weight: 400; }
.brand:hover .brand__name { text-decoration: underline; }

/* Orodja ob znamki: zemljevid strani, poimenovane povezave, jeziki, iskalnik, tema. */
.navbar__tools { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-inline-start: auto; }
.navbar__toollink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6em; color: inherit; }
.navbar__links ul { display: flex; align-items: center; gap: .25rem .5em; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.navbar__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5em; color: inherit; }
.navbar--dark .navbar__toollink:hover,
.navbar--dark .navbar__links a:hover { color: var(--on-primary); }
.navbar--light .navbar__links a { color: var(--link); }
.navbar--light .navbar__links a:hover { color: var(--link-hover); }
.hdr-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-width: 44px; min-height: 44px; padding: 0 .4em;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
  border: 2px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: calc(var(--radius) * .8);
}
.navbar--dark .hdr-tool:hover { background: var(--primary-hover); }
/* Na svetli podlagi obroba iz žetona s kontrastnim pravilom 3 : 1 (SC 1.4.11). */
.navbar--light .hdr-tool { color: var(--link); border-color: var(--primary-line); }
.navbar--light .hdr-tool:hover { background: var(--primary-soft); }

/* Poudarjen gumb v glavi (element cta): žetoni glavne barve, na temni vrstici obrnjeno. */
.hdr-cta {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: .45em 1.1em;
  background: var(--primary); color: var(--on-primary);
  border-radius: calc(var(--radius) * .8);
  text-decoration: none; font-weight: 700;
}
.hdr-cta:hover { background: var(--primary-hover); color: var(--on-primary); text-decoration: underline; }
.navbar--dark .hdr-cta { background: var(--on-primary); color: var(--primary); }
.navbar--dark .hdr-cta:hover { color: var(--primary); }

/* Preklopnik jezikov: seznam povezav (en klik, deluje brez JS), ne spustni meni. */
.langswitch ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.langswitch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: .1em .5em;
  color: var(--text); text-decoration: none;
  text-transform: uppercase; font-weight: 600; font-size: .85rem;
  border-radius: 6px;
}
.langswitch a:hover { background: var(--surface-mute); text-decoration: underline; }
.langswitch a[aria-current] { background: var(--primary); color: var(--on-primary); }
.navbar--dark .langswitch a { color: var(--on-primary); }
.navbar--dark .langswitch a:hover { background: var(--primary-hover); color: var(--on-primary); }
.navbar--dark .langswitch a[aria-current] { background: var(--on-primary); color: var(--primary); }

/* Izbira jezika kot meni (APG disclosure): brez JS je gumb skrit, seznam stalno viden. */
.langmenu { position: relative; }
.langmenu__toggle {
  display: inline-flex; align-items: center; gap: .35em;
  min-width: 44px; min-height: 40px; padding: 0 .6em;
  background: transparent; color: inherit; cursor: pointer;
  border: 2px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: calc(var(--radius) * .8);
  font: inherit; font-weight: 600; font-size: .85rem; text-transform: uppercase;
}
.langmenu__toggle:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.langmenu__toggle svg { transition: transform .2s; }
.langmenu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
html:not(.js) .langmenu__toggle { display: none; }
html.js .langmenu__panel { display: none; }
html.js .langmenu__toggle[aria-expanded="true"] + .langmenu__panel { display: block; }
html.js .langmenu__panel {
  position: absolute; top: calc(100% + .4rem); inset-inline-end: 0; z-index: 30;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .4rem;
}
html.js .langmenu__panel .langswitch ul { flex-direction: column; }
html.js .langmenu__panel .langswitch a { color: var(--link); justify-content: flex-start; }
html.js .langmenu__panel .langswitch a:hover { background: var(--primary-soft); color: var(--link-hover); }
html.js .langmenu__panel .langswitch a[aria-current] { background: var(--primary); color: var(--on-primary); }

/* --- Prijava in račun v glavi (element »account«) ------------------------------
   Isti disclosure vzorec kot izbira jezika: brez JS je gumb skrit in okence s
   prijavno masko stalno vidno; z JS gumb okence odpre/zapre (main.js).           */
.acctmenu { position: relative; }
html:not(.js) .acctmenu__toggle { display: none; }
html.js .acctmenu__panel { display: none; }
html.js .acctmenu__toggle[aria-expanded="true"] + .acctmenu__panel { display: block; }
html.js .acctmenu__panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + .4rem); z-index: 40;
  min-width: 17rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
/* Brez JS okence stoji v toku vrstice glave — dobi ploskev, da je berljivo na pasu. */
html:not(.js) .acctmenu__panel {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin: .4rem 0;
}
.acctmenu__field { margin: 0 0 .7rem; display: flex; flex-direction: column; gap: .3rem; }
.acctmenu__field label { font-family: var(--font-ui, inherit); font-weight: 700; font-size: .9rem; }
.acctmenu__field input {
  box-sizing: border-box; width: 100%; min-height: 44px; padding: .4em .7em;
  border: 1px solid var(--border-strong); border-radius: calc(var(--radius) * .7);
  background: var(--surface); color: var(--text); font: inherit;
}
.acctmenu__actions { margin: 0 0 .6rem; }
.acctmenu__alt { margin: 0; font-size: .95rem; line-height: 1.6; }
.acctmenu__alt a { color: var(--link); }

/* ---------------- Glavni meni (v vrstici ali v pasu) ---------------- */
.navbar .main-nav { flex: 1 1 20rem; }
.menuband { background: var(--band); color: var(--on-band); position: relative; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; flex-wrap: wrap; gap: .1rem; }
.main-nav li { position: relative; }
.main-nav a {
  display: flex; align-items: center;
  min-height: 44px; padding: .5em .9em;
  color: inherit; text-decoration: none; font-weight: 600;
  border-radius: 8px;
}
.main-nav a:hover { color: inherit; text-decoration: underline; }
/* Vrsta 1 (split): postavka brez lastnega cilja (golo združevanje podmenija)
   nadomesti povezavo z nekliknljivo oznako iste velikosti/tipografije. */
.main-nav__label {
  display: flex; align-items: center;
  min-height: 44px; padding: .5em .9em;
  font-weight: 600;
}
.menuband .main-nav__label { min-height: 48px; }
.main-nav a[aria-current], .main-nav .is-current-ancestor > a,
.main-nav .is-current-ancestor > .sub-toggle--label,
.main-nav .is-current-ancestor > .main-nav__label {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.main-nav a[aria-current] { font-weight: 800; }
.menuband .main-nav a, .menuband .sub-toggle { min-height: 48px; }
.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; color: inherit; cursor: pointer;
  border-radius: 8px;
}
/* Vrsti 2 in 3: gumb nosi vidno oznako in nadomesti povezavo prve ravni. */
.sub-toggle--label {
  gap: .4em; padding: .5em .9em;
  font: inherit; font-weight: 600;
}
.sub-toggle--label:hover { text-decoration: underline; }
.sub-toggle svg { transition: transform .2s; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Podmeni: prekrivno okence na ploskvi (na vseh širinah); brez JS je razgrnjen
   v toku, a obdrži podlago ploskve — barve povezav zato nikoli ne padejo. */
.submenu {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 30;
  min-width: 15rem; max-width: calc(100vw - 2rem);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .4rem;
}
html.js .submenu { display: none; }
html.js .sub-toggle[aria-expanded="true"] + .submenu { display: block; }
html:not(.js) .submenu { position: static; min-width: 0; box-shadow: none; }
.submenu a { color: var(--link); }
.submenu a:hover { color: var(--link-hover); background: var(--primary-soft); }
.submenu a[aria-current] { color: var(--link-hover); background: var(--primary-soft); }
/* Globlje ravni znotraj odprtega podmenija (vrsti 2 in 3) */
.main-nav .submenu-nested { padding-inline-start: 1rem; }

/* ---------------- Iskalnik: gumb z okencem ---------------- */
.site-search { position: relative; }
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: var(--primary-hover); color: var(--on-primary);
  /* Obroba je zbledelo besedilo gumba — brez trdo zapisane bele. */
  border: 2px solid color-mix(in srgb, var(--on-primary) 45%, transparent);
  border-radius: calc(var(--radius) * .8);
  font: inherit; cursor: pointer;
}
/* Brez JS: gumb ne more odpreti panela, zato je skrit, panel pa stalno viden. */
html:not(.js) .search-toggle { display: none; }
html.js .site-search__panel { display: none; }
html.js .search-toggle[aria-expanded="true"] + .site-search__panel { display: block; }
.site-search__panel {
  margin-top: .5rem; padding: .75rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
}
/* Z JS je panel prekrivno okence pod gumbom, poravnano na končni rob orodij. */
html.js .site-search__panel {
  position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; z-index: 30;
  margin-top: 0;
  width: min(24rem, calc(100vw - 2rem));
  box-shadow: var(--shadow-lg);
}
.site-search__label { display: block; margin-bottom: .35rem; font-weight: 600; }
.site-search__row { display: flex; gap: .5rem; }
.site-search__field { position: relative; flex: 1; }
.site-search__field input {
  width: 100%; min-height: 44px; padding: .4em 2.6em .4em .8em;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .8);
  font: inherit;
}
.site-search__clear {
  position: absolute; inset-inline-end: .3rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em;
  background: transparent; color: var(--text);
  border: 0; border-radius: calc(var(--radius) * .6);
  cursor: pointer;
}
.site-search__clear:hover { background: var(--primary-soft); }
/* Brez JS gumb za čiščenje ne deluje. */
html:not(.js) .site-search__clear { display: none; }
.site-search__submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .4em 1em;
  background: var(--primary-hover); color: var(--on-primary);
  border: 2px solid color-mix(in srgb, var(--on-primary) 45%, transparent);
  border-radius: calc(var(--radius) * .8);
  font: inherit; cursor: pointer;
}

/* ---------------- Iskalnik: stalno vidno polje (ogrodji tasks, top-strip) ---------------- */
.hdr-search { display: flex; gap: .5rem; flex: 1 1 15rem; max-width: 26rem; }
.hdr-search input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 .8em;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .8);
  font: inherit;
}
.navbar--dark .hdr-search input { border-color: var(--surface); }
.hdr-search__submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1em; flex: none;
  background: var(--primary-hover); color: var(--on-primary);
  border: 2px solid color-mix(in srgb, var(--on-primary) 45%, transparent);
  border-radius: calc(var(--radius) * .8);
  font: inherit; font-weight: 700; cursor: pointer;
}
.navbar--light .hdr-search__submit { background: var(--primary); }

/* ---------------- Predal (ogrodje menu-button) ---------------- */
.nav-toggle {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: .4em .9em;
  background: transparent; color: inherit;
  border: 2px solid currentColor; border-radius: calc(var(--radius) * .8);
  cursor: pointer; font: inherit; font-weight: 700;
}
/* Brez JS gumb ne more nič — skrije se, predal pa ostane razgrnjen. */
html:not(.js) .nav-toggle--drawer { display: none; }
html.js .menu-drawer { display: none; }
html.js .menu-drawer.open { display: block; }
.menu-drawer {
  background: var(--surface); color: var(--text);
  border-bottom: var(--divider-w, 1px) solid var(--border);
  box-shadow: var(--shadow-lg);
}
.menu-drawer__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem 2rem; padding-block: 1.5rem;
}
.menu-drawer__title { margin: 0 0 .3rem; font-weight: 700; }
.menu-drawer ul { list-style: none; margin: 0; padding: 0; }
.menu-drawer a {
  display: inline-flex; align-items: center;
  min-height: 42px; padding: .2em .5em; margin-inline-start: -.5em;
  color: var(--link); text-decoration: none; border-radius: 8px;
}
.menu-drawer a:hover { background: var(--primary-soft); text-decoration: underline; }
.menu-drawer a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.menu-drawer .submenu-nested { padding-inline-start: 1rem; }

/* ---------------- Pas bližnjic (ogrodje tasks) ---------------- */
.quickband { background: var(--surface-alt); border-bottom: var(--divider-w, 1px) solid var(--border); }
.quickband__in { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-block: .5rem; }
.quickband__label { font-weight: 600; font-size: .95rem; }
.quickband a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 .9em;
  background: var(--surface); color: var(--link);
  border: 1px solid var(--primary-line); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .95rem;
}
.quickband a:hover { background: var(--primary); color: var(--on-primary); text-decoration: underline; }

/* ---------------- Ogrodje top-strip: višja vrstica z veliko znamko ---------------- */
.site-header--top-strip { --band: var(--primary); --on-band: var(--on-primary); }
.site-header--top-strip .navbar__in { padding-block: 17.5px; gap: 1rem 1.5rem; }
.site-header--top-strip .brand__name { font-size: 1.55rem; }
.site-header--top-strip .brand__logo { height: 80px; }
.site-header--top-strip .brand__mono { width: 80px; height: 80px; border-radius: 50%; font-size: 1.15rem; }
.site-header--top-strip .navbar__tools { gap: .5rem 1rem; }
.site-header--top-strip .hdr-search { flex: 0 0 17.25rem; max-width: 17.25rem; gap: 0; }
.site-header--top-strip .hdr-search input {
  min-height: 51px;
  border-color: var(--primary);
  border-radius: 5px 0 0 5px;
  font-size: .9rem;
}
.site-header--top-strip .hdr-search__submit {
  min-height: 51px;
  margin-inline-start: -2px;
  border-color: var(--primary);
  border-radius: 0 5px 5px 0;
  font-size: .9rem;
  font-weight: 400;
  text-transform: uppercase;
}
.site-header--top-strip .main-nav > ul { gap: 0; }
.site-header--top-strip .main-nav > ul > li {
  flex: 1 1 0;
  min-width: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--on-band) 55%, transparent);
}
.site-header--top-strip .main-nav > ul > li:last-child {
  border-inline-end: 1px solid color-mix(in srgb, var(--on-band) 55%, transparent);
}
.site-header--top-strip .main-nav > ul > li > a,
.site-header--top-strip .main-nav > ul > li > .main-nav__label,
.site-header--top-strip .main-nav > ul > li > .sub-toggle--label {
  width: 100%;
  border-radius: 0;
  font-size: .925rem;
  font-weight: 400;
  text-transform: uppercase;
}
.site-header--top-strip .main-nav > ul > .has-sub > a { width: calc(100% - 44px); }
.site-header--top-strip .main-nav > ul > .has-sub > .sub-toggle:not(.sub-toggle--label) { border-radius: 0; }
@media (min-width: 64rem) {
  .site-header--top-strip .navbar__tools { flex: 0 0 auto; flex-wrap: nowrap; }
  .site-header--top-strip .navbar__links ul { flex-wrap: nowrap; }
}

/* ---------------- Ogrodje strip-cta: trak, svetla znamka, meni ob znamki, poziv ----------------
   Aktivna postavka menija dobi podčrtaj v poudarni barvi — podčrtaj je okrasna
   okrepitev ob aria-current in teži 800, zato poudarna barva tu kontrastno ne šteje. */
.site-header--strip-cta .navbar__in { gap: .75rem 1.25rem; }
.site-header--strip-cta .main-nav a[aria-current] { text-decoration-color: var(--accent); }
/* Pot na vsebino ostane na levi, orodja (zemljevid strani, jeziki, tema) na desni;
   samodejni odmik deluje tudi, kadar poti v traku ni (tedaj so orodja pri desnem robu). */
.site-header--strip-cta .topstrip__nav { margin-inline-end: auto; }

/* ---------------- Mega meni (vrsta 3, po zgledu w3.org) ----------------
   Pano se razgrne čez celotno širino svojega pasu (sidro je .navbar oz.
   .menuband); na ozkih zaslonih se stolpci sesujejo v enega. */
.navbar { position: relative; }
.main-nav--mega .has-sub { position: static; }
.main-nav--mega .submenu--mega {
  inset-inline: 0; top: 100%;
  min-width: 0; max-width: none; padding: 0;
  border-radius: 0; border-inline: 0;
  border-top: 1px solid var(--border);
}
.megamenu { display: grid; gap: 1rem; padding-block: 1rem; }
.main-nav .megamenu__feature-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  border-radius: var(--radius);
  text-decoration: none;
  padding: 1rem 1.1rem;
  background: var(--surface-alt);
  color: var(--link);
}
.megamenu__feature-link:hover { background: var(--primary-soft); }
.megamenu__feature-link:hover .megamenu__feature-label { text-decoration: underline; }
.megamenu__icon { width: 40px; height: 40px; object-fit: contain; }
.megamenu__feature-label { font-weight: 800; font-size: 1.1rem; }
.megamenu__feature-desc { font-weight: 400; font-size: .95rem; color: var(--text-muted); }
.megamenu__cols { display: grid; gap: .5rem; }
.megamenu__col > ul { margin: 0; padding: 0; }
.megamenu__group {
  margin: .75rem 0 .1rem; padding-inline: .9em;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
@media (min-width: 64rem) {
  .megamenu { grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; padding-block: 1.5rem; }
  .megamenu__cols { gap: 2rem; align-content: start; }
  .megamenu__cols[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .megamenu__cols[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .megamenu__group:first-child { margin-top: 0; }
}
/* Brez JavaScripta pano ni prekrivni sloj, ampak navaden razdelek v toku:
   postavka s podmenijem se raztegne čez vso vrstico, pano se izriše pod njo. */
html:not(.js) .main-nav--mega .submenu--mega { position: static; border: 0; }
html:not(.js) .main-nav--mega > ul { flex-wrap: wrap; }
html:not(.js) .main-nav--mega .has-sub { flex-basis: 100%; }

/* ---------------- Drobtine ---------------- */
.breadcrumbs { background: var(--surface-alt); border-bottom: var(--divider-w, 1px) solid var(--border); font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: .55rem 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .25rem; }
.breadcrumbs li + li::before { content: "›" / ""; color: var(--text-muted); padding-inline: .25rem; }
.breadcrumbs a { color: var(--text); }
.breadcrumbs a:hover { color: var(--link-hover); }
.breadcrumbs [aria-current] { color: var(--text-muted); }

/* ================= POSTAVITVE ================= */
.site-main { position: relative; container-type: inline-size; padding-block: calc(2rem * var(--space, 1)) calc(3rem * var(--space, 1)); }
/* Cilj skoka je zaceten del glavne vsebine; okvir mora ostati viden tudi po
   programskem fokusu, ne glede na nacin aktivacije povezave. */
.site-main:focus {
  outline: var(--focus-w, 3px) solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
/* Polnoširinska glava (temna/mehka pasica) se drži glave spletišča — brez zgornjega odmika. */
.site-main--bleed { padding-block-start: 0; }

.layout { display: grid; gap: calc(2.5rem * var(--space, 1)); align-items: start; }
@media (min-width: 64rem) {
  .layout--aside-right { grid-template-columns: minmax(0, 1fr) 21rem; }
  .layout--aside-left  { grid-template-columns: 21rem minmax(0, 1fr); }
  .layout--aside-left .layout__main  { grid-column: 2; grid-row: 1; }
  .layout--aside-left .layout__aside { grid-column: 1; grid-row: 1; }
}
.layout__aside {
  background: var(--surface-alt);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
  padding: calc(1.5rem * var(--space, 1));
}
.layout__aside > :first-child { margin-top: 0; }
.aside-band { background: var(--surface-alt); border-block: 1px solid var(--border); padding-block: 2.5rem; margin-top: 1rem; }
.aside-band > .container > :first-child { margin-top: 0; }

.page-title { margin-bottom: .8rem; }
.page-lead { font-size: 1.15rem; color: var(--text-muted); max-width: 46em; }

/* ================= GLAVA STRANI (predloge) =================
   Pasica na vrhu strani po izbrani predlogi (App\Core\PageTemplates); drobtine
   so del glave. Vse barve so žetoni: temna pasica in pano hero predloge ležita
   na --band / --on-band (odtenek glavne barve, izpeljano na ≥ 7 : 1), hero s
   polno sliko na senčenju (--scrim / --on-scrim, ker pod njim preseva slika),
   mehke pa na izpeljanih podlagah (--primary-soft, --accent-soft, --*-soft),
   kjer besedilo doseže 4,5 : 1. */
.pageheader { margin-bottom: calc(2rem * var(--space, 1)); }
.pageheader__crumbs { font-size: .9rem; margin-bottom: 1rem; font-family: var(--font-ui, inherit); }
.pageheader__crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.pageheader__crumbs li { display: inline-flex; align-items: center; gap: .25rem; }
.pageheader__crumbs li + li::before { content: "›" / ""; padding-inline: .25rem; }
.pageheader__crumbs a { color: var(--text); }
.pageheader__crumbs [aria-current],
.pageheader__crumbs li + li::before { color: var(--text-muted); }
.pageheader__title { margin: 0 0 .35em; }
.pageheader__kicker {
  margin: 0 0 .6rem;
  font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  font-family: var(--font-ui, inherit);
}
.pageheader__lead { font-size: 1.15rem; max-width: 46em; margin: 0; }
.pageheader__meta { margin: 0 0 1rem; font-size: .95rem; color: var(--text-muted); }
.pageheader__ctarow { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.pageheader--center { text-align: center; }
.pageheader--center .pageheader__crumbs ol { justify-content: center; }
.pageheader--center .pageheader__lead { margin-inline: auto; }

/* Vsebinska stran: drobtine nad naslovom, ločnica pod glavo */
.pageheader--plain { padding-bottom: calc(1.25rem * var(--space, 1)); border-bottom: var(--divider-w, 1px) solid var(--border); }
.pageheader--plain .pageheader__lead { color: var(--text-muted); }

/* Objava ali članek: nadnaslov v poudarni barvi, poudarjen uvod */
.pageheader--article .pageheader__kicker { color: var(--accent-text); }
.pageheader--article .pageheader__lead { color: var(--text); font-weight: 600; }

/* Prosta stran: glava nosi le skrit naslov, zato nima višine. Postavitev jo
   izpiše zunaj .container in <main> pusti brez zgornjega odmika, tu odpade še
   odmik pod glavo in nad prvim blokom — vsebina se stika z menijem. */
.pageheader--bare { margin-bottom: 0; }
/* Blok »Odmik« z negativno velikostjo je izjema: njegov negativni zgornji rob
   je namenoma nastavljen, zato ga tu ne izničimo. */
.pageheader--bare + .container > :first-child:not(.spacer--neg),
.pageheader--bare + .container .page-article > :first-child:not(.spacer--neg) { margin-top: 0; }

/* Pristajalne strani: polnoširinski pas (sekcija ali dvostolpčni uvod) kot prvi
   blok pod polnoširinsko glavo strani se glave drži brez presledka — izniči
   spodnji odmik glave (pasovi se stikajo, kot se stikata glava spletišča in
   pasica). Velja le za prvi blok; navadna vsebina obdrži običajni odmik. */
.pageheader--bleed + .container .page-article > :first-child:is(.blocksection--bleed, .introcols) {
  margin-top: calc(-2rem * var(--space, 1));
}

/* Pasice: temna in mehka sta polnoširinski (barva od roba do roba, kot
   navigacijska vrstica) in se držita glave spletišča; vsebina znotraj je v
   .container. Drobtine na podlagi pasice podedujejo njeno barvo besedila
   (zajamčena kombinacija). */
.pageheader--band { padding: calc(1.75rem * var(--space, 1)) calc(1.75rem * var(--space, 1)) calc(2rem * var(--space, 1)); border-radius: var(--radius); }
.pageheader--band .pageheader__crumbs { margin-bottom: .75rem; }
.pageheader--band .pageheader__crumbs a,
.pageheader--band .pageheader__crumbs [aria-current],
.pageheader--band .pageheader__crumbs li + li::before { color: inherit; }
.pageheader--bleed { border-radius: 0; padding-inline: 0; }
.pageheader--band-dark { background: var(--band); color: var(--on-band); }
.pageheader--band-soft { background: var(--primary-soft); color: var(--text); }
.pageheader--band-accent { background: var(--accent-soft); }
/* Polni poudarni ton: naročnikova druga barva nespremenjena kot ploskev.
   Notranji fokusni obroč je on-accent — glej opombo pri .btn--accent. */
.pageheader--band-accent-full { background: var(--accent); color: var(--on-accent); }
.pageheader--band-accent-full :focus-visible { box-shadow: 0 0 0 2px var(--on-accent); }

/* Hero dodatki za vse glave strani: nadnaslov, do dva gumba, slika v drugem
   stolpcu. Nadnaslov na --band nosi žeton accent-band-text (zajamčen), na
   odtenku glavne barve on-primary, na svetlih glavah accent-text. */
.pageheader--plain .pageheader__kicker { color: var(--accent-text); }
.pageheader--band-dark .pageheader__kicker { color: var(--accent-band-text); }
.pageheader--band-primary { background: var(--primary); color: var(--on-primary); }
.pageheader--band-primary .pageheader__kicker { color: var(--on-primary); }
.pageheader__grid { display: grid; gap: calc(2rem * var(--space, 1)); align-items: center; }
@media (min-width: 56rem) {
  .pageheader__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
}
.pageheader__gridmedia img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}

/* Predloga »obvestilo«: enaka oblika kot komponenta .notice — oglat, poudarjen
   levi rob (7 px) in obroba naokoli v barvi obvestila; zaokrožena desna stran. */
.pageheader--notice {
  color: var(--text);
  border: 1px solid var(--border);
  border-inline-start-width: 7px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pageheader__kind { margin: 0 0 .3rem; font-size: .95rem; font-family: var(--font-ui, inherit); }
.pageheader--notice-info { background: var(--notice-bg, var(--info-soft)); border-color: var(--info); }
.pageheader--notice-success { background: var(--notice-bg, var(--success-soft)); border-color: var(--success); }
.pageheader--notice-warning { background: var(--notice-bg, var(--warning-soft)); border-color: var(--warning); }
.pageheader--notice-danger { background: var(--notice-bg, var(--danger-soft)); border-color: var(--danger); }

/* Hero s sliko: fotografija ob panoju na temni pasici. Brez fotografije ostane
   pano čez vso širino (enak videz kot temna pasica z gumbom). */
.pageheader__hero {
  display: grid;
  border-radius: var(--radius); overflow: hidden;
  background: var(--band); color: var(--on-band);
  box-shadow: var(--shadow);
}
@media (min-width: 48rem) {
  .pageheader__hero:not(.pageheader__hero--noimg) { grid-template-columns: 1.15fr 1fr; }
  .pageheader--media-end .pageheader__media { order: 2; }
}
.pageheader__media { position: relative; }
/* Razmerje kot najmanjša višina celice; pano jo lahko razširi, slika pokrije vse. */
.pageheader__media::before { content: ""; display: block; padding-top: 75%; }
.pageheader__media--r169::before { padding-top: 56.25%; }
.pageheader__media--r11::before { padding-top: 100%; }
.pageheader__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pageheader__panel { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-self: center; }

/* Gumb na temni podlagi: obrnjen par --on-band / --band (isto zajamčeno razmerje
   ≥ 7 : 1); enako berljiv tudi na senčenju hero predloge s polno sliko. */
.pageheader__cta { background: var(--on-band); color: var(--band); }
.pageheader__cta:hover { background: color-mix(in srgb, var(--on-band) 85%, var(--band)); color: var(--band); }

/* Hero s polno sliko: besedilo leži na senčenju, ne na sliki — enak vzorec kot
   vrtiljak »slika čez celotno površino« (glej komentar pri .carousel--overlay). */
.pageheader__overlay {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--radius); overflow: hidden;
  background: var(--scrim); color: var(--on-scrim);
  box-shadow: var(--shadow);
}
.pageheader__overlay--low { min-height: clamp(13rem, 30vw, 20rem); }
.pageheader__overlay--med { min-height: clamp(18rem, 44vw, 28rem); }
.pageheader__overlay--high { min-height: clamp(24rem, 58vw, 38rem); }
.pageheader__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pageheader__overlay::before {
  content: "";
  position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--scrim) 6%, transparent) 0%,
    color-mix(in srgb, var(--scrim) 24%, transparent) 48%,
    color-mix(in srgb, var(--scrim) 68%, transparent) 100%
  );
}
.pageheader__caption { position: relative; z-index: 2; padding: 2.5rem clamp(1.25rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.5rem); }
.pageheader__caption::before {
  content: "";
  position: absolute; inset: -3rem auto -1rem -1rem;
  width: min(56rem, calc(100% + 2rem));
  background: radial-gradient(
    ellipse at left bottom,
    color-mix(in srgb, var(--scrim) 92%, transparent) 0%,
    color-mix(in srgb, var(--scrim) 78%, transparent) 48%,
    transparent 78%
  );
}
.pageheader__caption > * { position: relative; }
.pageheader__caption .pageheader__title {
  max-width: 26ch;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  text-shadow: 0 2px 8px var(--shadow-color);
  text-wrap: balance;
}
.pageheader__caption .pageheader__lead { text-shadow: 0 1px 6px var(--shadow-color); }

/* ---------------- Vsebina (prose) ---------------- */
.prose { max-width: var(--prose-maxw, 70ch); }
.layout__aside .prose, .card .prose { max-width: none; }
/* Podčrtaj je privzet; če ga urednik izklopi, mora povezavo od besedila ločiti
   barva (3 : 1, G183) — poročilo v Videzu to takrat preverja. Ob prehodu miške
   in fokusu se podčrtaj vrne v vsakem primeru (SC 1.4.1). */
.prose a {
  text-decoration: var(--prose-underline, underline);
  /* Podčrtaj označuje povezavo, zato pri barvni različici (Videz → Fokus in povezave)
     barvo nosi izpeljanka --accent-line (3 : 1 na svetlih podlagah), ne surova barva. */
  text-decoration-color: var(--underline-color, currentColor);
}
.prose a:hover, .prose a:focus-visible { text-decoration-line: underline; }
.prose a:visited { color: var(--link-visited); }
.link-meta { white-space: nowrap; font-size: .88em; }
.icon.link-meta, .icon--after { margin-inline-start: .25em; }
.link-meta--domain { color: var(--text-muted); }
.link-meta--new-tab, .link-meta--contact { font-weight: 700; }
.prose ul, .prose ol { padding-inline-start: 1.4em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose blockquote {
  margin: 1.25em 0; padding: .5em 1.25em;
  border-inline-start: 4px solid var(--accent);
  background: var(--surface-alt); border-radius: 0 var(--radius) var(--radius) 0;
}
.block-heading { margin-top: 1.5em; }
.block-cta { margin-block: 1.5rem; }

/* Dvostolpčni uvod: pas sega do robov okna, vsebina pa ostane poravnana z
   običajnim kontejnerjem. Podlaga je isti žeton kot pri svetli nogi. */
.introcols {
  width: 100cqw;
  margin-inline: calc(50% - 50cqw);
  background: var(--surface-alt);
  color: var(--text);
}
.introcols__grid {
  display: grid;
  gap: calc(2.5rem * var(--space, 1));
  padding-block: calc(2.5rem * var(--space, 1));
}
.introcols__col { max-width: none; min-width: 0; }
.introcols__col > :first-child { margin-top: 0; }
.introcols__col > :last-child { margin-bottom: 0; }
@media (min-width: 48rem) {
  .introcols--60-40 .introcols__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .introcols--50-50 .introcols__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .introcols--40-60 .introcols__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* ================= SEKCIJE (blok section) =================
   Pas z ozadjem, ki vase zajame vse bloke do naslednje sekcije. Podlage so
   izključno žetoni: svetle jamčijo 4,5 : 1 za besedilo, temni (band, primary)
   nosita svoj on-* par — nabor blokov v temnih sekcijah omeji izris
   (BlockRenderer::SECTION_DARK_ALLOW). Prelita širina uporabi isti prijem kot
   dvostolpčni uvod (100cqw glede na .site-main), zato ne posega v postavitev. */
.blocksection--bleed { width: 100cqw; margin-inline: calc(50% - 50cqw); }
/* Ob pasici sekcija ostane v stolpcu vsebine — čez pasico se ne preliva. */
.layout .blocksection--bleed { width: auto; margin-inline: 0; border-radius: var(--radius); }
.blocksection__in { padding-block: calc(2.5rem * var(--space, 1)); }
.blocksection--pad-l .blocksection__in { padding-block: calc(4rem * var(--space, 1)); }
.blocksection--boxed { border-radius: var(--radius); margin-block: calc(1.5rem * var(--space, 1)); }
.blocksection--boxed .blocksection__in { padding: calc(1.75rem * var(--space, 1)); }
.blocksection--boxed.blocksection--bg-none .blocksection__in { padding-inline: 0; }

/* Podlage */
.blocksection--bg-surface { background: var(--surface); border-block: var(--divider-w, 1px) solid var(--border); }
.blocksection--bg-alt { background: var(--surface-alt); }
.blocksection--bg-primary-soft { background: var(--primary-soft); }
.blocksection--bg-accent-soft { background: var(--accent-soft); }
.blocksection--bg-band { --sec-bg: var(--band); --sec-fg: var(--on-band); }
.blocksection--bg-primary { --sec-bg: var(--primary); --sec-fg: var(--on-primary); }
.blocksection--dark { background: var(--sec-bg); color: var(--sec-fg); }

/* Vsebina na temni podlagi: povezave in zbledela besedila dovoljenih blokov
   preslikane na on-* par (isti prijem kot noga --dark); gumb »primary« je
   obrnjen par kot pri glavi strani (.pageheader__cta). */
.blocksection--dark :is(.prose, .block-list, .quote, .block-image) a { color: var(--sec-fg); }
.blocksection--dark :is(.block-list__desc, .block-list__meta, .block-image figcaption, .blocksection__lead) {
  color: color-mix(in srgb, var(--sec-fg) 88%, var(--sec-bg));
}
.blocksection--dark .btn--primary { background: var(--sec-fg); color: var(--sec-bg); }
.blocksection--dark .btn--primary:hover { background: color-mix(in srgb, var(--sec-fg) 85%, var(--sec-bg)); color: var(--sec-bg); }
.blocksection--dark .btn--secondary { color: inherit; border-color: color-mix(in srgb, currentColor 55%, transparent); }
.blocksection--dark .btn--secondary:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }

/* Glava sekcije */
.blocksection__head { margin-bottom: calc(1.5rem * var(--space, 1)); }
.blocksection__head > :last-child { margin-bottom: 0; }
.blocksection__kicker {
  margin: 0 0 .6rem;
  font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-text);
  font-family: var(--font-ui, inherit);
}
/* Nadnaslov na temnem: na pasici žeton accent-band-text (zajamčen na --band),
   na glavni barvi on-primary — poudarni ton tam ni zajamčen. */
.blocksection--bg-band .blocksection__kicker { color: var(--accent-band-text); }
.blocksection--bg-primary .blocksection__kicker { color: var(--on-primary); }
.blocksection__title { margin: 0 0 .35em; }
.blocksection__lead { font-size: 1.15rem; margin: 0; max-width: 60ch; }

/* Stolpci */
.blocksection__cols { display: grid; gap: calc(2rem * var(--space, 1)); }
.blocksection__col { min-width: 0; }
.blocksection__col > :first-child { margin-top: 0; }
.blocksection__col > :last-child { margin-bottom: 0; }
@media (min-width: 56rem) {
  .blocksection__cols { gap: calc(2.5rem * var(--space, 1)); }
  .blocksection__cols--50-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blocksection__cols--55-45 { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  .blocksection__cols--45-55 { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
  .blocksection__cols--60-40 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .blocksection__cols--40-60 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .blocksection__cols--33-33-33 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blocksection__cols--50-25-25 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .blocksection__cols--25-50-25 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
}

/* Hero videz sekcije: večji naslov in uvod (raven ostane H2/H3 — H1 nosi glava
   strani); velikost naslova je žeton H1, zato sledi nastavitvam tipografije. */
.blocksection--hero .blocksection__title { font-size: var(--h1-size); line-height: var(--lh-heading, 1.25); }
.blocksection--hero .blocksection__lead { font-size: 1.2rem; }
.blocksection--hero .blocksection__head { max-width: none; }

/* Gumbi (blok Gumb) v sekciji se postavijo v vrsto — vzorec hero pasu. */
.blocksection__col > .block-cta { display: inline-flex; margin: 1rem .8rem 0 0; }

/* Povezava na dnu pasu */
.blocksection__ctarow { margin: calc(1.5rem * var(--space, 1)) 0 0; }
.blocksection__cta {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 44px;
  font-weight: 700; font-family: var(--font-ui, inherit);
}
.blocksection--dark .blocksection__cta { color: var(--sec-fg); }

/* ============ DEKORATIVNA OZADJA SEKCIJ (designs/SCMS - Ozadja.md) ============
   SVG-predloge so MASKE: sloj ::before (vzorec) in ::after (dodatni motiv) sta
   obarvana z žetonom palete (--bgp-ink), zato dekoracija sledi CGP naročnika in
   temni shemi brez dodatnih datotek. URL-je predlog po ključih kataloga izpiše
   App\Core\Backgrounds::css() v /theme.css (.bg-pattern--*, .section-divider--*,
   .bg-accent--*); tu je samo mehanika.

   Dostopnost: sloja ležita pod vsebino (z-index -1, isolation), nista fokusabilna
   (pointer-events none), separator nosi aria-hidden. Prosojnosti (--bgp-alpha) so
   nizke namenoma in usklajene z Backgrounds::ALPHA — poročilo o kontrastu meri
   besedilo proti sestavu podlage in najizrazitejše dekoracije. Brez podpore za
   maske dekoracije preprosto ni (@supports); v načinu prisilnih barv prav tako. */
.bg-deco { position: relative; isolation: isolate; }
.bg-color--primary { --bgp-ink: var(--primary); }
.bg-color--accent { --bgp-ink: var(--accent); }
.bg-color--neutral { --bgp-ink: var(--text); }
.blocksection--dark.bg-deco { --bgp-ink: var(--sec-fg); }

/* Ista števila kot Backgrounds::ALPHA (PHP) — ob spremembi uskladite oboje. */
.bg-intensity--soft { --bgp-alpha: .05; --bgp-size: 7rem; }
.bg-intensity--normal { --bgp-alpha: .09; --bgp-size: 9rem; }
.bg-intensity--bold { --bgp-alpha: .16; --bgp-size: 13rem; }

@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  /* Vzorec: ploščica 320 × 160, ponovljiva vodoravno. Brez razreda intenzivnosti
     je sloj neviden (--bgp-alpha brez rezerve) — ročno pripet razred bg-pattern
     v surovem HTML tako ne more obarvati cele sekcije. */
  .bg-pattern::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; pointer-events: none;
    background: var(--bgp-ink, var(--primary));
    opacity: var(--bgp-alpha, 0);
    -webkit-mask-image: var(--bgp-img); mask-image: var(--bgp-img);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: left bottom; mask-position: left bottom;
    -webkit-mask-size: auto var(--bgp-size, 9rem); mask-size: auto var(--bgp-size, 9rem);
  }
  .bg-pos--top::before { -webkit-mask-position: left top; mask-position: left top; }
  .bg-pos--top-bottom::before {
    -webkit-mask-image: var(--bgp-img), var(--bgp-img); mask-image: var(--bgp-img), var(--bgp-img);
    -webkit-mask-position: left top, left bottom; mask-position: left top, left bottom;
  }
  .bg-pos--left::before {
    -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y;
    -webkit-mask-position: left top; mask-position: left top;
  }
  .bg-pos--right::before {
    -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y;
    -webkit-mask-position: right top; mask-position: right top;
  }
  .bg-pos--full::before { -webkit-mask-repeat: repeat; mask-repeat: repeat; }

  /* Dodatni motiv: en večji okras v zgornjem desnem kotu, rahlo izrazitejši od
     vzorca, a navzgor omejen — nikoli ne postane ploskev. */
  .bg-accent::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: calc(1.25rem * var(--space, 1)); right: clamp(1rem, 4vw, 3.5rem);
    width: var(--bga-size, 8rem); height: var(--bga-size, 8rem);
    background: var(--bgp-ink, var(--primary));
    opacity: min(calc(var(--bgp-alpha, 0) * 1.8), .2);
    -webkit-mask-image: var(--bga-img); mask-image: var(--bga-img);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .bg-intensity--bold.bg-accent::after { --bga-size: 11rem; }

  /* Prehod v naslednjo sekcijo. Privzeto »izrez«: pas v barvi ozadja strani z
     oblikovanim zgornjim robom zaključi podlago sekcije (viden le, kadar ima
     sekcija svojo podlago). --ink različice (notno črtovje, val z notami,
     zvočni val) se narišejo v barvi dekoracije. Brez podpore za maske ostane
     element prazen in brez višine — nič se ne pokvari. */
  .section-divider {
    height: var(--sdiv-h, 3rem);
    background: var(--bg);
    -webkit-mask-image: var(--sdiv-img); mask-image: var(--sdiv-img);
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: left bottom; mask-position: left bottom;
    -webkit-mask-size: auto 100%; mask-size: auto 100%;
  }
  .section-divider--ink {
    background: color-mix(in srgb, var(--bgp-ink, var(--primary)) 45%, transparent);
  }
  .blocksection--dark .section-divider--ink {
    background: color-mix(in srgb, var(--sec-fg) 55%, transparent);
  }
}

/* Prisilne barve (Windows High Contrast): dekoracija bi se izrisala v sistemski
   barvi podlage in bi bila v najboljšem primeru šum — zato je ni. */
@media (forced-colors: active) {
  .bg-pattern::before, .bg-accent::after, .section-divider { display: none; }
}

/* Seznami (blok) */
.block-list { margin: 0 0 1.5rem; padding-inline-start: 1.4em; max-width: var(--prose-maxw, 70ch); }
.block-list__title { margin: 0 0 .75rem; }
.block-list > li { margin-bottom: .4em; }
.block-list > li.block-list__item--gap { margin-top: calc(.9rem * var(--space, 1)); }
.block-list__desc { display: block; font-size: .92rem; color: var(--text-muted); }
.block-list__meta { font-weight: 400; color: var(--text-muted); }
/* Dostopna alternativa datoteke — ločena povezava ob nedostopnem izvirniku. */
.block-list__alt { margin-inline-start: .6em; font-size: .92rem; }
.block-list--links, .block-list--files { list-style: none; padding-inline-start: 0; }
.block-list--links > li, .block-list--files > li {
  margin: 0; padding: .6rem .25rem;
  border-bottom: var(--divider-w, 1px) solid var(--border);
}
.block-list--links > li:first-child, .block-list--files > li:first-child { border-top: var(--divider-w, 1px) solid var(--border); }
.block-list--links a, .block-list--files a {
  font-weight: 600;
  display: inline-flex; flex-wrap: wrap; gap: .35em; align-items: baseline;
  min-height: 24px;
}
.layout__aside :is(.block-list, .block-list__inline),
.aside-band :is(.block-list, .block-list__inline) { max-width: none; }

/* Kljukice, koraki in oznake (blok Seznam). Kljukica in številka sta okrasni
   (aria-hidden); pri korakih vrstni red nosi <ol>. */
.block-list--check, .block-list--check-cards, .block-list--steps, .block-list--chips {
  list-style: none; padding-inline-start: 0;
}
.block-list--check > li, .block-list--check-cards > li {
  display: flex; gap: .7rem; align-items: flex-start;
  line-height: 1.5; margin-bottom: .7rem;
}
.block-list__ico { flex: none; margin-top: 3px; color: var(--accent-text); }
.blocksection--dark .block-list__ico { color: var(--sec-fg); }
.block-list__more { font-weight: 400; }
.block-list--check-cards > li {
  background: var(--surface); color: var(--text);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.2rem; margin-bottom: .9rem;
}
.block-list--steps { display: grid; gap: 1rem; max-width: none; margin: 1.5rem 0; }
@media (min-width: 48rem) {
  .block-list--steps { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}
.block-list--steps > li {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: 0; padding: 1.2rem;
  background: var(--surface); color: var(--text);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
  line-height: 1.5;
}
.block-list__num {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  font-family: var(--font-ui, inherit); font-weight: 800;
}
.block-list--steps strong { display: block; margin-bottom: .25rem; }
.block-list--steps .block-list__more { display: block; color: var(--text-muted); }
.block-list--chips { display: flex; gap: .6rem; flex-wrap: wrap; max-width: none; }
.block-list--chips > li {
  display: inline-flex; align-items: center;
  margin: 0; padding: .4em 1em; min-height: 40px;
  background: var(--surface); color: var(--text);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: 999px;
  font-weight: 600; font-size: .95rem;
}

/* Oblika oznake pred postavko (blok Seznam, polje »marker«). Polna pika, prazna
   pika in kvadratek ostanejo pravi markerji <li> — bralnik zaslona jih obravnava
   kot vsak drug seznam. Pomišljaj, puščica in ikone so <span aria-hidden> v sami
   postavki, ker jih list-style-type ne izriše poravnano z besedilom; ker s tem
   pade privzeti marker, tak seznam dobi role="list". */
.block-list--mk-disc   { list-style-type: disc; }
.block-list--mk-circle { list-style-type: circle; }
.block-list--mk-square { list-style-type: square; }
.block-list--nomark, .block-list--marked { list-style: none; padding-inline-start: 0; }
/* Seznam povezav in datotek je privzeto brez oznake in brez zamika; ko oznako
   izbere urednik, mora marker dobiti prostor, sicer ga odreže rob postavke. */
:is(.block-list--links, .block-list--files):is(.block-list--mk-disc, .block-list--mk-circle, .block-list--mk-square) {
  padding-inline-start: 1.4em;
}
.block-list--marked > li { display: flex; gap: .6em; align-items: flex-start; line-height: 1.5; }
.block-list__mark { flex: none; color: var(--accent-text); font-weight: 700; }
.blocksection--dark .block-list__mark { color: var(--sec-fg); }
.block-list--marked .block-list__body { min-width: 0; }

/* Oštevilčenje z vodilno ničlo — atribut type oštevilčenega seznama te oblike
   ne pozna, zato je edina pot slog; vse druge (a, A, i, I) so v atributu in
   ostanejo prave tudi brez CSS. */
.block-list--num0 { list-style-type: decimal-leading-zero; }

/* Vrstični seznam — postavke tečejo v besedilu, ločilo je znak v kodi
   (aria-hidden), seznam pa ostane seznam (role="list" / role="listitem"). */
.block-list__inline { margin: 0 0 1.5rem; max-width: var(--prose-maxw, 70ch); line-height: 1.6; }
.block-list__intro { font-weight: 600; }
.block-list--inline {
  display: inline; list-style: none;
  margin: 0; padding: 0; max-width: none;
}
.block-list--inline > li { display: inline; margin: 0; }

/* Poudarjene ploščice: mehka poudarna podlaga z izrazito levo obrobo — vzorec
   obvestil in oznak dogodkov, kjer barvna podlaga JE del sporočila. */
.cards--accent .card {
  background: var(--accent-soft);
  border-inline-start: 4px solid var(--accent);
  box-shadow: none;
}

/* ================= CENIK (blok pricing) =================
   Kartice ponudb: cena je besedilo v barvi povezav (zajamčeno 4,5 : 1 na
   ploskvi), vključene postavke so <ul> s kljukicami, poudarjena ponudba ima
   močnejšo obrobo in neobvezno vidno oznako. */
.pricing__list {
  list-style: none; margin: 1.5rem 0; padding: 0;
  display: grid; gap: 1.2rem;
}
@media (min-width: 48rem) {
  .pricing--cols-2 .pricing__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing--cols-3 .pricing__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pricing__card {
  box-sizing: border-box; height: 100%;
  background: var(--surface); color: var(--text);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: calc(1.8rem * var(--space, 1));
  display: flex; flex-direction: column; gap: .7rem;
}
.pricing__card--featured { border: 2px solid var(--primary-line); box-shadow: var(--shadow-lg); }
.pricing__badge {
  margin: 0; align-self: flex-start;
  padding: .2em .9em; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
  font-family: var(--font-ui, inherit); font-weight: 700; font-size: .85rem;
}
.pricing__title {
  margin: 0;
  font-size: .85rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
  font-family: var(--font-ui, inherit);
}
.pricing__price {
  margin: 0;
  font-size: 2.2rem; font-weight: 800; line-height: 1.15;
  color: var(--link);
}
.pricing__suffix { font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.pricing__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pricing__features li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.5; }
.pricing__ico { flex: none; margin-top: 3px; color: var(--accent-text); }
.pricing__note { margin: auto 0 0; font-size: .9rem; color: var(--text-muted); }
.pricing__cta { margin: 0; }

/* ================= OBRAZEC (blok form) =================
   Obrazec je kartica na --surface: oznake nad polji, polja v mreži (polovična
   širina velja od 40 rem, ožje je vse v celi vrstici), napake v --danger-text
   ob polju in v povzetku role="alert" (fokus mu ob nalaganju da main.js).
   Past za robote (_hp) je umaknjena z odsekom, ne z display:none. */
.blockform { margin: 1.5rem 0; }
.blockform__form {
  background: var(--surface); color: var(--text);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: calc(1.8rem * var(--space, 1));
}
.blockform__note { margin: 0 0 1.1rem; font-size: .9rem; color: var(--text-muted); }
.blockform__grid { display: grid; gap: 1.1rem; }
.blockform__field { grid-column: 1 / -1; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
@media (min-width: 40rem) {
  .blockform__grid { grid-template-columns: 1fr 1fr; }
  .blockform__field--half { grid-column: auto; }
}
.blockform__field > label, .blockform__field--radio > legend {
  font-family: var(--font-ui, inherit); font-weight: 700; font-size: .95rem;
}
.blockform__field input, .blockform__field select, .blockform__field textarea {
  box-sizing: border-box; width: 100%;
  min-height: 44px; padding: .5em .8em;
  border: 1px solid var(--border-strong); border-radius: calc(var(--radius) * .7);
  background: var(--surface); color: var(--text);
  font: inherit;
}
.blockform__field textarea { line-height: 1.5; resize: vertical; }
.blockform__field--error {
  /* Rob+odmik segata v levi žleb (kartica/stolpčna vrzel), zato se besedilo
     polja ne premakne glede na polja brez napake — enak vzorec kot GOV.UK
     Design System uporablja za to isto težavo. Debelino določa žeton
     (Videz → Oblika in obrobe → »Črta ob napaki polja«); izklopljena črta
     (0px) obe vrednosti izniči, zato polje ostane na mestu tudi brez nje. */
  margin-inline-start: calc(-1 * (var(--form-error-line-w) + .5rem));
  border-inline-start: var(--form-error-line-w) solid var(--danger); padding-inline-start: .5rem;
}
.blockform__field--error input, .blockform__field--error select, .blockform__field--error textarea {
  border-color: var(--danger); border-width: 2px;
}
.blockform__err { display: block; color: var(--danger-text); font-size: .95rem; }
/* Ikona ob črti ali namesto nje (Videz → Oblika in obrobe, neodvisni nastavitvi):
   okrasna, pomen nosi skrito besedilo ob njej (Icon::withText), zato se ne podvaja. */
.blockform__err-icon { margin-inline-end: .35em; vertical-align: -.15em; }
/* Skupina izbirnih gumbov: fieldset brez okvirja, gumbi v stolpcu. */
.blockform__field--radio { border: 0; padding: 0; }
.blockform__field--radio > legend { padding: 0; margin-bottom: .35rem; }
.blockform__radios { display: flex; flex-direction: column; gap: .5rem; }
.blockform__radio { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; min-height: 24px; }
.blockform__radio input { width: auto; min-height: 0; margin: .25em 0 0; }
.blockform__actions { margin: 1.4rem 0 0; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.blockform__privacy { font-size: .95rem; }
/* Povzetek napak in potrditev oddaje — barvni par vrste je jamčen žeton. */
.blockform__errors {
  background: var(--danger-soft); border: 1px solid var(--danger);
  border-inline-start: 4px solid var(--danger);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1.1rem;
}
.blockform__errors-title { margin: 0; font-weight: 700; font-family: var(--font-ui, inherit); }
.blockform__errors p { margin: .35rem 0 0; }
.blockform__errors ul { margin: .5rem 0 0; padding-inline-start: 1.2rem; }
.blockform__errors li { margin: .25rem 0; }
.blockform__errors a { color: var(--danger-text); }
.blockform--done {
  background: var(--success-soft); border: 1px solid var(--success);
  border-inline-start: 4px solid var(--success);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
}
.blockform--done > :first-child { margin-top: 0; }
.blockform--done > :last-child { margin-bottom: 0; }
.blockform__hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0;
}

.block-image { margin: 1.5rem 0; }
.block-image--w100 { width: 100%; }
.block-image--w75 { width: 75%; }
.block-image--w50 { width: 50%; }
.block-image--w40 { width: 40%; }
.block-image--w30 { width: 30%; }
.block-image__link { display: block; color: inherit; text-decoration: none; }
.block-image img { border-radius: var(--radius); display: block; max-width: 100%; }
/* Odstotna/privzeta širina: slika zapolni celoten okvir figure. Pri ročni
   velikosti v pikslih (.block-image--px) width/height NISO tu določena, da
   HTML atributa width/height na <img> dejansko odločata o velikosti — slog
   bi ju sicer povozil (avtorsko pravilo vedno prevlada nad atributom, tudi
   z vrednostjo "auto"). Manjkajoča stran (samo width ali samo height vnesen)
   ostane brez atributa in jo brskalnik izračuna iz razmerja stranic slike. */
.block-image:not(.block-image--px) img { width: 100%; height: auto; }
/* Poravnava: pri odstotni širini ima izrecno širino figure (poravnava nanjo),
   pri ročni velikosti v pikslih pa je ožja od figure sama slika. */
.block-image--align-center { margin-left: auto; margin-right: auto; }
.block-image--align-end { margin-left: auto; margin-right: 0; }
.block-image--px.block-image--align-center img { margin-left: auto; margin-right: auto; }
.block-image--px.block-image--align-end img { margin-left: auto; margin-right: 0; }
.block-image figcaption { font-size: .9rem; color: var(--text-muted); margin-top: .5rem; }
/* Navedba avtorja je ločena vrstica pod podnapisom — ne del stavka. */
.block-image__credit { display: block; font-size: .85rem; opacity: .9; }
/* Podroben opis je dostopen vsem. Brez JS je odprt, z JS pa ga nadgradi majhna disclosure kontrola. */
.block-image__long { margin-top: .75rem; }
.block-image__long-button {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 24px;
  padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; font-weight: 700;
}
.block-image__long-icon {
  display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: .72rem; line-height: 1;
}
.block-image__long-icon::before { content: 'v'; }
.block-image__long-button[aria-expanded="true"] .block-image__long-icon::before { content: '^'; }
.block-image__long-button:hover { color: var(--link); text-decoration: underline; }
.block-image__long-button:focus-visible { outline: var(--focus-w, 3px) solid var(--focus-outer); outline-offset: 2px; }
.block-image__long .prose { margin-top: .75rem; }

/* ================= GALERIJA SLIK (maske G1–G4) =================
   Tri oblike istega seznama povezav na izvorne datoteke slik; JS klik prestreže
   in odpre celozaslonski pregled (spodaj), brez JS povezava odpre datoteko.
   Vse barve so žetoni: pregled leži na --scrim/--on-scrim (isti par kot senčenje
   vrtiljaka), zato kontrast drži v svetli in temni shemi. */
.gallery { margin-block: 1.5rem; }
.gallery__list { list-style: none; margin: 0; padding: 0; }
.gallery__item { display: block; border-radius: calc(var(--radius) * .7); }
.gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.gallery__item:hover img { opacity: .88; }

/* G2: mreža — enotno razmerje 4∶3, slike se obrežejo (izrez iz knjižnice slik) */
.gallery__list--grid { display: grid; gap: .9rem; grid-template-columns: repeat(2, 1fr); }
.gallery__list--grid .gallery__item { aspect-ratio: 4 / 3; }
@media (min-width: 40rem) {
  .gallery__list--cols-3, .gallery__list--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
  .gallery__list--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* G1: ena vrsta, enaka višina, vodoravno drsenje. Drsnik je skrit, ker drsenje
   ponujajo gumba ‹ › (pokaže ju JS le ob preveliki vsebini), poteg na dotiku in
   Tab po slikah — brskalnik ob fokusu vrstico pomakne sam. */
.gallery__strip { position: relative; }
.gallery__list--row {
  display: flex; gap: .75rem;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  padding: 2px; /* prostor za fokusni obroč, ki bi ga overflow sicer odrezal */
}
.gallery__list--row::-webkit-scrollbar { display: none; }
.gallery__list--row li { flex: 0 0 auto; }
.gallery__list--row .gallery__item { height: 11.5rem; }
.gallery__list--row .gallery__item img { width: auto; max-width: 22rem; }
@media (prefers-reduced-motion: reduce) { .gallery__list--row { scroll-behavior: auto; } }
.gallery__scroll {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 50%;
  box-shadow: var(--shadow); cursor: pointer;
}
.gallery__scroll:hover { background: var(--primary); color: var(--on-primary); }
/* Lasten box-shadow bi prepisal notranji fokusni obroč — glej pravilo pri :focus-visible. */
.gallery__scroll:focus-visible { box-shadow: var(--focus-ring), var(--shadow); }
.gallery__scroll--prev { inset-inline-start: -10px; }
.gallery__scroll--next { inset-inline-end: -10px; }

/* G3: mozaik — tri navpični stolpci, v vsakem slike druga pod drugo (brez skupne
   mreže vrstic, ki bi puščala luknje); višine polj določi izris s cikličnim
   vzorcem (a–d), par je dve sliki drugo ob drugi. Pas --wide je samostojna
   vrstica čez celotno širino pod stolpci. */
.gallery__cols { display: flex; gap: .7rem; }
.gallery__col { display: flex; flex-direction: column; gap: .7rem; flex: 1; min-width: 0; }
.gallery__pair { display: flex; gap: .7rem; }
.gallery__pair .gallery__item { flex: 1; min-width: 0; }
.gallery__m, .gallery__pair { height: var(--g-h, 9.5rem); }
.gallery__m .gallery__item, .gallery__pair .gallery__item { height: 100%; }
/* Zadnje polje stolpca zapolni preostanek do najvišjega stolpca — dna so
   poravnana, mozaik pa brez lukenj tudi, kadar se višine ne iztečejo. */
.gallery__col > :last-child { flex-grow: 1; }
.gallery__m--a { --g-h: 14rem; }
.gallery__m--b { --g-h: 16.5rem; }
.gallery__m--c { --g-h: 9.5rem; }
.gallery__m--d { --g-h: 12rem; }
.gallery__m--wide { margin-top: .7rem; --g-h: 11.5rem; }
@media (max-width: 40rem) {
  /* Na ozkem zaslonu se stolpci zložijo enega pod drugega — vrstni red ostane
     vrstni red v kodi, torej isti, kot ga bere bralnik zaslona. */
  .gallery__cols { flex-direction: column; }
  .gallery__col { width: 100%; }
}

/* G4: celozaslonski pregled (zgradi ga main.js). Razpored po maski: števec zgoraj
   levo, prenos in zapiranje zgoraj desno, puščici ob robovih, napis/vir lebdi
   spodaj levo nad sliko, vrstica sličic spodaj — aktivna z okvirjem v --on-scrim. */
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  /* Neprosojna podlaga: kontrast para --scrim/--on-scrim je zajamčen (Theme),
     vsebina strani pa skozi pregled ne sme sevati. */
  background: var(--scrim);
  color: var(--on-scrim);
}
.gallery-lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.25rem;
}
.gallery-lightbox__count { font-size: .95rem; }
.gallery-lightbox__actions { display: flex; gap: .6rem; }
.gallery-lightbox__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: color-mix(in srgb, var(--on-scrim) 10%, transparent);
  color: var(--on-scrim);
  border: 1px solid color-mix(in srgb, var(--on-scrim) 45%, transparent);
  border-radius: calc(var(--radius) * .7);
  cursor: pointer;
}
.gallery-lightbox__btn:hover { background: color-mix(in srgb, var(--on-scrim) 26%, transparent); }
.gallery-lightbox__main {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  padding: 0 .9rem;
}
.gallery-lightbox__arrow { border-radius: 50%; width: 52px; height: 52px; }
.gallery-lightbox__figure {
  flex: 1; min-width: 0; max-width: 70rem; height: 100%;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  margin: 0;
}
.gallery-lightbox__media {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Slika je v celoti vidna, brez obrezovanja (object-fit: contain). */
.gallery-lightbox__figure img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gallery-lightbox__caption {
  max-width: 100%;
  margin-top: .75rem;
  padding: .7rem .9rem;
  font-size: .95rem;
  background: color-mix(in srgb, var(--scrim) 82%, transparent);
  border-radius: calc(var(--radius) * .5);
}
.gallery-lightbox__alt,
.gallery-lightbox__meta { margin: 0; }
.gallery-lightbox__meta {
  margin-top: .35rem;
  font-size: .9rem;
  color: color-mix(in srgb, var(--on-scrim) 82%, transparent);
}
.gallery-lightbox__thumbs {
  display: flex; gap: .5rem; justify-content: safe center;
  padding: .6rem 1.25rem 1rem;
  overflow-x: auto;
}
.gallery-lightbox__thumb {
  flex: none; width: 3.5rem; height: 2.5rem; padding: 0;
  background: none; border: 2px solid transparent; border-radius: calc(var(--radius) * .5);
  cursor: pointer; opacity: .7;
}
.gallery-lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.gallery-lightbox__thumb:hover { opacity: 1; }
.gallery-lightbox__thumb[aria-current] { border-color: var(--on-scrim); opacity: 1; }
/* Slike v pregledu ne bledijo — temna tema sicer pridušene slike (html.dark img) */
html.dark .gallery-lightbox img { opacity: 1; }

/* ================= SEZNAM PODATKOV =================
   Pari izraz–vrednost (blok »Seznam podatkov«). V vseh treh oblikah je v kodi
   en sam <dl> — postavitev je izključno stvar CSS, pomen pa oznak, zato bralnik
   zaslona povsod prebere isto: koliko parov je in kaj sodi h komu.

   Prazne vrstice med skupinama parov ni v kodi: ločuje ju razmik na naslednjem
   paru (--gap). Prazen <dt></dt> bi bil za bralnik zaslona par brez vsebine,
   razmik pa je zgolj videz — kadar sta skupini pomensko različni, sodi vmes
   naslov (SC 1.3.1). */
.datalist { margin-block: 1.5rem; max-width: var(--prose-maxw, 70ch); }
.datalist__title { margin: 0 0 .75rem; }
.datalist__pairs { margin: 0; }
.datalist__value { margin: 0; }
.layout__aside .datalist, .aside-band .datalist, .card .datalist { max-width: none; }

/* Dvostolpčno: en sam mrežni vsebnik, da so stolpci poravnani po vsem seznamu.
   Na ozkem zaslonu se vrednost postavi pod izraz — izraz zato nikoli ne stisne
   vrednosti v en znak na vrstico (SC 1.4.10). */
.datalist.datalist--rows .datalist__term { font-weight: 700; }
.datalist.datalist--rows .datalist__value { margin-bottom: .6em; }
.datalist.datalist--rows .datalist__term--gap { margin-top: calc(.9rem * var(--space, 1)); }
@media (min-width: 40rem) {
  .datalist.datalist--rows .datalist__pairs {
    display: grid; grid-template-columns: fit-content(8rem) minmax(0, 1fr);
    column-gap: calc(1.5rem * var(--space, 1)); row-gap: calc(.5rem * var(--space, 1));
  }
  .datalist.datalist--rows-10-90 .datalist__pairs { grid-template-columns: minmax(0, 1fr) minmax(0, 9fr); }
  .datalist.datalist--rows-20-80 .datalist__pairs { grid-template-columns: minmax(0, 2fr) minmax(0, 8fr); }
  .datalist.datalist--rows-30-70 .datalist__pairs { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
  .datalist.datalist--rows-40-60 .datalist__pairs { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .datalist.datalist--rows-50-50 .datalist__pairs { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); }
  .datalist.datalist--rows-60-40 .datalist__pairs { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .datalist.datalist--rows-70-30 .datalist__pairs { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .datalist.datalist--rows-80-20 .datalist__pairs { grid-template-columns: minmax(0, 8fr) minmax(0, 2fr); }
  .datalist.datalist--rows-90-10 .datalist__pairs { grid-template-columns: minmax(0, 9fr) minmax(0, 1fr); }
  .datalist.datalist--rows .datalist__value { margin-bottom: 0; }
  .datalist.datalist--rows .datalist__value--gap { margin-top: calc(.9rem * var(--space, 1)); }
}

/* Strnjeno, v vrstici — za nogo strani in stransko vrstico. Dvopičje za izrazom
   je pravo besedilo v <dt> in ne pseudoelement, zato ga bralnik zaslona prebere. */
.datalist--inline .datalist__pairs { display: flex; flex-direction: column; gap: .35em; }
.datalist--inline .datalist__pair { display: flex; flex-wrap: wrap; gap: .4em; }
.datalist--inline .datalist__term { font-weight: 700; }
.datalist--inline .datalist__pair--gap { margin-top: calc(.8rem * var(--space, 1)); }

/* Kartice: vsak par v svoji ploščici, a še vedno <dt>/<dd> v skupnem <dl>. */
.datalist--cards { max-width: none; }
.datalist--cards .datalist__pairs { display: grid; gap: calc(1rem * var(--space, 1)); }
@media (min-width: 40rem) {
  .datalist--cards .datalist__pairs { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.datalist--cards .datalist__pair {
  padding: calc(.9rem * var(--space, 1)) calc(1.1rem * var(--space, 1));
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
}
.datalist--cards .datalist__term {
  font-size: .85rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-muted);
}
.datalist--cards .datalist__value { margin-top: .25rem; }

/* ================= CITAT =================
   Izjava v <blockquote>, vir v <figcaption> istega <figure>. Narekovaj je okras
   (aria-hidden v izpisu) — bralnik zaslona bi osamljeni znak prebral kot besedo
   sredi stavka, pomen citata pa nosi že besedilo samo. */
.quote { margin-block: 1.5rem; max-width: var(--prose-maxw, 70ch); }
.quote__text { margin: 0; font-size: 1.1rem; line-height: 1.55; }
.quote__text p { margin: 0 0 .5em; }
.quote__text p:last-child { margin-bottom: 0; }
.quote__source { margin-top: .75rem; color: var(--text-muted); }
.quote__source strong { color: var(--text); }
.quote__mark { font-weight: 700; line-height: 1; color: var(--accent-text); }
.layout__aside .quote, .aside-band .quote { max-width: none; }

.quote--feature {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .5rem; border-radius: var(--radius); background: var(--surface-alt);
  padding: calc(2rem * var(--space, 1)) calc(1.5rem * var(--space, 1));
}
.quote--feature .quote__mark { font-size: 3rem; }
.quote--feature .quote__text { font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: 600; }

.quote--classic {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .6rem;
  padding: calc(1.25rem * var(--space, 1)) calc(1.5rem * var(--space, 1));
}
.quote--classic .quote__mark { font-size: 1.75rem; }
.quote--classic .quote__text { flex: 1 1 12rem; }
.quote--classic .quote__source {
  flex: 1 0 100%; margin-top: .25rem;
  margin-inline-start: calc(1.75rem + .6rem);
}

.quote--plain { padding-inline-start: 1.25rem; border-inline-start: 4px solid var(--accent); }
/* Ležeče je tu razlikovalni znak oblike; ker je citat kratek, ostane berljiv
   tudi bralcem z disleksijo — daljša besedila v tem spletišču ležeča niso. */
.quote--plain .quote__text { font-style: italic; }

.quote--portrait {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.25rem * var(--space, 1));
  padding: calc(1.25rem * var(--space, 1)) calc(1.5rem * var(--space, 1));
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
}
/* Portret je okras ob že napisanem imenu — v izpisu ima prazen ALT. */
.quote__img { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.quote--portrait .quote__body { flex: 1 1 14rem; }

/* ================= PLOŠČICE ================= */
.cards { margin-block: 1.5rem; }
.cards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(1.25rem * var(--space, 1)); }
@media (min-width: 40rem) {
  .cards--cols-2 .cards__list, .cards--cols-3 .cards__list, .cards--cols-4 .cards__list,
  .cards--cols-5 .cards__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .cards--cols-3 .cards__list { grid-template-columns: repeat(3, 1fr); }
  .cards--cols-4 .cards__list { grid-template-columns: repeat(4, 1fr); }
  /* Pet ploščic v vrstici ponudijo samo hitre povezave (blok Ploščice ima 2–4). */
  .cards--cols-5 .cards__list { grid-template-columns: repeat(5, 1fr); }
}
.cards__list > li { display: flex; }
.card {
  display: flex; flex-direction: column; width: 100%;
  background: var(--surface);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
  transition: box-shadow .15s, translate .15s;
}
a.card:hover { box-shadow: var(--shadow-lg); translate: 0 -2px; }
a.card:focus-visible { box-shadow: var(--focus-ring), var(--shadow); }
a.card:hover .card__title { text-decoration: underline; color: var(--link-hover); }
.card__img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.card__body { display: flex; flex-direction: column; gap: .5rem; padding: calc(1.25rem * var(--space, 1)); flex: 1; }
.card__title { margin: 0; font-size: 1.2rem; color: var(--link); }
.card__text { margin: 0; color: var(--text-muted); flex: 1; }
.card__meta { font-size: .875rem; color: var(--text-muted); }
.card__badge {
  align-self: flex-start; margin-top: auto;
  font-size: .8rem; font-weight: 700;
  padding: .25em .8em; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--text);
}
.cards--image:not(.cards--subnav-compact) .card {
  border: 0;
  border-radius: .5625rem;
  box-shadow: 0 9px 18px rgb(13 13 15 / .15);
}
.cards--image:not(.cards--subnav-compact) a.card:focus-visible {
  box-shadow: var(--focus-ring), 0 9px 18px rgb(13 13 15 / .15);
}
.cards--image:not(.cards--subnav-compact) .card__img { aspect-ratio: 4 / 3; }
.cards--image:not(.cards--subnav-compact) .card__body { padding: calc(1.5rem * var(--space, 1)); }
.cards--compact .card__body { padding: .9rem 1.1rem; }
.cards--compact .card__title { font-size: 1.05rem; }

/* ================= MENIJSKE PLOŠČICE (blok submenu) =================
   Navigacijske povezave na podrejene menijske postavke. Mrežni prikazi
   ponovno uporabijo ploščice (.cards/.card); naslov in opis sta <span>
   (ne naslov h3 — kartica je povezava, ne razdelek vsebine). */
.cards--subnav .card__title, .cards--links .card__title { display: block; font-weight: 700; }
.cards--subnav .card__text, .cards--links .card__text { display: block; }

/* Kompaktna ploščica: slika levo, besedilo desno */
.cards--subnav .card--row { flex-direction: row; align-items: stretch; }
.cards--subnav .card__img--side {
  width: 5.5rem; min-width: 5.5rem; height: auto; min-height: 100%;
  aspect-ratio: auto; object-fit: cover; flex: none;
}
.cards--subnav-compact .card__body { padding: .9rem 1.1rem; }
.cards--subnav-compact .card__title { font-size: 1.05rem; }

/* Poenostavljene ploščice s puščico */
.subnav-tiles { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: calc(.75rem * var(--space, 1)); }
@media (min-width: 40rem) {
  .subnav-tiles--cols-2, .subnav-tiles--cols-3, .subnav-tiles--cols-4,
  .subnav-tiles--cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .subnav-tiles--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .subnav-tiles--cols-4 { grid-template-columns: repeat(4, 1fr); }
  .subnav-tiles--cols-5 { grid-template-columns: repeat(5, 1fr); }
}
.subnav-tile {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 48px; padding: .8rem 1.1rem;
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; color: var(--link); font-weight: 700;
  transition: box-shadow .15s, translate .15s;
}
.subnav-tile:hover { box-shadow: var(--shadow-lg); translate: 0 -2px; color: var(--link-hover); }
.subnav-tile:focus-visible { box-shadow: var(--focus-ring), var(--shadow); }
.subnav-tile:hover span { text-decoration: underline; }
.subnav__arrow { flex: none; }

/* Horizontalni in vertikalni seznam */
.subnav-list { list-style: none; margin: 1.5rem 0; padding: 0; }
.subnav-list a {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; color: var(--link); text-decoration: none;
}
/* Podčrtan je samo naziv — opis je pojasnilo, ne del oznake povezave. */
.subnav-list__label { text-decoration: underline; text-underline-offset: .2em; }
.subnav-list a:hover { color: var(--link-hover); }
.subnav-list a:hover .subnav-list__label { text-decoration-thickness: 2px; }
.subnav-list__text { display: flex; flex-direction: column; gap: .15rem; }
.subnav-list__desc { color: var(--text-muted); font-size: .95rem; }
.subnav-list--h { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: .25rem; }
.subnav-list--v > li + li { border-top: 1px solid var(--border); }
.subnav-list--v a { justify-content: space-between; padding: .8rem .25rem; }
.subnav-list--v .subnav-list__label { font-weight: 700; }

/* ================= HITRE POVEZAVE (blok quicklinks) =================
   Kuriran pas navigacijskih povezav v šestih vrstah. Mrežne vrste si obliko
   delijo z bloki Ploščice (.cards/.card) in Menijske ploščice (.subnav-tiles),
   »Seznam povezav« pa z oznakami v vrsti iz bloka Seznam (.block-list--chips) —
   tu je samo tisto, kar je hitrim povezavam lastno: mreža ikon, velika okrasna
   ikona in poravnava. Ikona je vedno aria-hidden; podčrtana je oznaka, ker ta
   nosi pomen povezave. */
.quicklinks { margin-block: 0; }
.quicklinks__in { min-width: 0; }
.quicklinks__title { margin: 0 0 calc(1.25rem * var(--space, 1)); }
.quicklinks :is(.cards__list, .subnav-tiles, .block-list) { margin-block: 0; }

/* Širina in podlage: iste vloge kot pri sekciji, vendar brez gnezdenja blokov.
   Privzeto stanje ostane dosedanji pas v širini vsebine brez dodatnega ozadja. */
.quicklinks--width-bleed { width: 100cqw; margin-inline: calc(50% - 50cqw); }
.layout .quicklinks--width-bleed { width: auto; margin-inline: 0; border-radius: var(--radius); }
.quicklinks--width-bleed > .quicklinks__in { padding-inline: 0; }
.quicklinks--width-boxed.quicklinks--bg-none > .quicklinks__in { padding: 0; }
.quicklinks:not(.quicklinks--bg-none) > .quicklinks__in { padding-block: calc(2.5rem * var(--space, 1)); }
.quicklinks--width-boxed:not(.quicklinks--bg-none) {
  border-radius: var(--radius);
}
.quicklinks--width-boxed:not(.quicklinks--bg-none) > .quicklinks__in {
  padding: calc(1.75rem * var(--space, 1));
}

.quicklinks--bg-surface { background: var(--surface); border-block: var(--divider-w, 1px) solid var(--border); }
.quicklinks--bg-alt { background: var(--surface-alt); }
.quicklinks--bg-primary-soft { background: var(--primary-soft); }
.quicklinks--bg-accent-soft { background: var(--accent-soft); }
.quicklinks--bg-band { --sec-bg: var(--band); --sec-fg: var(--on-band); }
.quicklinks--bg-primary { --sec-bg: var(--primary); --sec-fg: var(--on-primary); }
.quicklinks--dark { background: var(--sec-bg); color: var(--sec-fg); }

/* Mreža ikonskih vrst: na najožjem zaslonu dve postavki v vrstici (ena sama
   bi pas raztegnila v neskončen stolpec), nato po izbiri urednika do pet. */
.quicklinks__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: calc(1.5rem * var(--space, 1));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) {
  .quicklinks__grid--cols-3, .quicklinks__grid--cols-4, .quicklinks__grid--cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .quicklinks__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quicklinks__grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* V ožjem stolpcu ob vsebini mreža nima kam — postavke gredo v en stolpec. */
.layout__aside .quicklinks__grid, .aside-band .quicklinks__grid { grid-template-columns: minmax(0, 1fr); }

.quicklink {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  height: 100%; min-height: 44px; padding: .5rem;
  color: var(--link); text-decoration: none;
}
.quicklinks--align-center .quicklink { text-align: center; }
.quicklinks--align-start .quicklink { align-items: flex-start; text-align: start; }
.quicklink__ico { width: 5em; height: 5em; }
:is(.quicklinks--icons, .quicklinks--icons-text) .quicklink__ico {
  width: var(--quicklink-icon-size, 5em);
  height: var(--quicklink-icon-size, 5em);
}
.quicklinks--imagetext .quicklink__imagebox {
  display: flex;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  width: var(--quicklink-icon-size, 3em);
  height: var(--quicklink-icon-size, 3em);
  max-width: 100%;
  margin: 0;
}
.quicklinks--imagetext .quicklink__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.quicklink__label { font-weight: 700; }
:is(.quicklinks--icons, .quicklinks--icons-text) .quicklink__label { font-size: var(--quicklink-text-size, 1em); }
.quicklink__desc { font-weight: 400; font-size: .95rem; color: var(--text-muted); }
.quicklinks--icons-text .quicklink__desc { font-size: var(--quicklink-text-size, .95rem); }
.quicklinks--imagetext .quicklink {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--quicklink-icon-size, 3em) auto auto;
  align-content: start;
  gap: .5rem;
  justify-items: center;
  padding: 0;
  text-align: center;
}
.quicklinks--imagetext .quicklink__iconbox {
  grid-row: 1;
  margin: 0;
}
.quicklinks--imagetext .quicklink__label {
  grid-row: 2;
  font-size: var(--quicklink-text-size, 1em);
}
.quicklinks--imagetext .quicklink__desc {
  grid-row: 3;
  font-size: var(--quicklink-text-size, 1em);
}
.quicklinks--imagetext.quicklinks--align-start .quicklink {
  justify-items: start;
  text-align: start;
}
.quicklinks--cards .card__title,
.quicklinks--cards .card__text { font-size: var(--quicklink-text-size, 1em); }

/* Ikonski pas sledi izvirni postavitvi: ikona je samostojen blok nad krepko
   oznako, razmiki pa niso odvisni od višine posamezne povezave. */
.quicklinks--icons .quicklinks__grid { gap: 1rem; }
.quicklinks--icons .quicklink { display: block; min-height: 44px; padding: 0; text-align: center; }
:is(.quicklinks--icons, .quicklinks--cards, .quicklinks--imagetext) .quicklink__iconbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--quicklink-icon-size, 5em);
  height: var(--quicklink-icon-size, 5em);
  margin: 0 auto 1rem;
}
:is(.quicklinks--icons, .quicklinks--cards, .quicklinks--imagetext) .quicklink__iconbox .quicklink__ico {
  width: 100%;
  height: 100%;
  font-size: 1rem;
}
.quicklinks--icons .quicklink__label { display: block; font-weight: 700; line-height: 1.45; }
.quicklinks--icons.quicklinks--align-start .quicklink { text-align: start; }
.quicklinks--icons.quicklinks--align-start .quicklink__iconbox { margin-inline: 0; }
@media (min-width: 48rem) {
  .quicklinks--icons .quicklinks__grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
:is(.quicklinks--icons, .quicklinks--icons-text, .quicklinks--links) .quicklink__label {
  text-decoration: underline; text-underline-offset: .2em;
}
a.quicklink:hover { color: var(--link-hover); }
a.quicklink:hover .quicklink__label { text-decoration-thickness: 2px; }
/* Postavka brez povezave (urednik je pozabil URL): vidna je, a ni videti klikljiva. */
.quicklink--nolink { color: inherit; }
.quicklink--nolink .quicklink__label { text-decoration: none; }
/* Ploščica in enostavna ploščica si barvo povezave nastavita sami (.card__title,
   .subnav-tile), zato jo je treba tu vzeti nazaj — sicer je postavka brez cilja
   videti klikljiva. */
.quicklink--nolink .card__title, .quicklink--nolink.subnav-tile { color: inherit; }
/* Puščica pomeni »pelje nekam«; brez cilja je ne izpišemo. */
.quicklink--nolink .subnav__arrow { display: none; }

/* Ploščice in slika + besedilo: ikona je manjša in stoji nad oznako. */
:is(.quicklinks--cards, .quicklinks--imagetext) .quicklink__ico { width: 2.25em; height: 2.25em; color: var(--accent-text); }
:is(.quicklinks--cards, .quicklinks--imagetext).quicklinks--align-center .card__body {
  align-items: center;
  text-align: center;
}
/* Kartica se v mreži raztegne do višine najvišje postavke; vsebino postavimo
   na sredino, da spodnji odmik ni več večji od zgornjega. */
:is(.quicklinks--cards, .quicklinks--imagetext) .card__body { justify-content: center; }
/* Kartice hitrih povezav so samo razporeditev vsebine: podlaga bloka naj
   ostane vidna tudi pri temnem pasu, namesto da bi se risale bele ploskve. */
.quicklinks:is(.quicklinks--cards, .quicklinks--imagetext) .card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.quicklinks:is(.quicklinks--cards, .quicklinks--imagetext) a.card:hover { box-shadow: none; }
.quicklinks:is(.quicklinks--cards, .quicklinks--imagetext) a.card:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Enostavne ploščice: ikona levo, oznaka, puščica na koncu vrstice. */
.quicklinks--simple .subnav-tile { justify-content: flex-start; }
.quicklinks--simple .quicklink__label { margin-inline-end: auto; }
.quicklinks--simple .quicklink__ico { width: 1.5em; height: 1.5em; }

/* Seznam povezav: notranji odmik in višina tarče gresta na povezavo, ne na
   postavko seznama — tarča naj bo vsa oznaka (SC 2.5.8), ne le besedilo. */
.quicklinks--links .block-list--chips > li { padding: 0; }
.quicklinks--links .quicklink--chip {
  display: inline-flex; flex-direction: row; align-items: center; gap: .45em;
  min-height: 40px; padding: .4em 1em;
  height: auto; border-radius: 999px;
}
.quicklinks--links .quicklink__ico { width: 1.2em; height: 1.2em; }

/* Na temni podlagi sekcije oziroma samega bloka so oznake povezav obrnjene. */
.blocksection--dark :is(.quicklinks--icons, .quicklinks--icons-text) a,
.quicklinks--dark:is(.quicklinks--icons, .quicklinks--icons-text) a { color: var(--sec-fg); }
.blocksection--dark .quicklinks--imagetext a,
.quicklinks--dark.quicklinks--imagetext a { color: var(--sec-fg); }
.blocksection--dark :is(.quicklinks--icons, .quicklinks--icons-text) .quicklink__desc,
.quicklinks--dark:is(.quicklinks--icons, .quicklinks--icons-text) .quicklink__desc {
  color: color-mix(in srgb, var(--sec-fg) 88%, var(--sec-bg));
}
.blocksection--dark :is(.quicklinks--cards, .quicklinks--imagetext) .card,
.quicklinks--dark:is(.quicklinks--cards, .quicklinks--imagetext) .card { color: var(--sec-fg); }
.blocksection--dark :is(.quicklinks--cards, .quicklinks--imagetext) .card__title,
.quicklinks--dark:is(.quicklinks--cards, .quicklinks--imagetext) .card__title { color: var(--sec-fg); }
.blocksection--dark :is(.quicklinks--cards, .quicklinks--imagetext) .card__text,
.quicklinks--dark:is(.quicklinks--cards, .quicklinks--imagetext) .card__text {
  color: color-mix(in srgb, var(--sec-fg) 88%, var(--sec-bg));
}
.blocksection--dark .quicklinks--links .quicklink--chip,
.quicklinks--dark.quicklinks--links .quicklink--chip { color: var(--link); }

/* ================= HARMONIKA ================= */
/* Brez overflow: hidden — ta bi odrezal fokusni obroč gumbov, ki segajo od roba do roba.
   Zaokrožitev vogalov zato prevzameta prvi in zadnji vidni gumb (glej spodaj). */
.accordion { margin-block: 1.5rem; border: var(--surface-border-w, 1px) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.accordion__heading { margin: 0; font-size: 1.05rem; }
.accordion__heading + .accordion__panel, .accordion__panel + .accordion__heading { border-top: 1px solid var(--border); }
.accordion__trigger {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: 100%; min-height: 48px; padding: calc(.9rem * var(--space, 1)) calc(1.25rem * var(--space, 1));
  background: none; border: 0; cursor: pointer;
  text-align: start; font-weight: 700; color: var(--text);
}
.accordion__trigger:hover { background: var(--primary-soft); color: var(--link-hover); }
.accordion__trigger[aria-expanded="true"] { background: var(--surface-alt); color: var(--link); }
.accordion__trigger svg { flex: none; transition: transform .2s; }
.accordion__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion > :first-child .accordion__trigger {
  border-start-start-radius: calc(var(--radius) - 1px); border-start-end-radius: calc(var(--radius) - 1px);
}
.accordion > :last-child .accordion__trigger,
.accordion__heading:has(+ .accordion__panel[hidden]:last-child) .accordion__trigger {
  border-end-start-radius: calc(var(--radius) - 1px); border-end-end-radius: calc(var(--radius) - 1px);
}
.accordion__content { padding: calc(1rem * var(--space, 1)) calc(1.25rem * var(--space, 1)); }
/* Vgrajeni bloki (harmonika, polje "refs"): isti vodoravni odmik kot besedilo
   zgoraj, bloki sami skrbijo za svoj notranji razmik in robove. */
.accordion__blocks { padding: 0 calc(1.25rem * var(--space, 1)) calc(1rem * var(--space, 1)); }
.accordion__blocks > :first-child { margin-top: 0; }
.accordion__blocks > :last-child { margin-bottom: 0; }

/* ================= ZAVIHKI ================= */
.tabs { margin-block: 1.5rem; }
.tabs__list { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--border-strong); margin-bottom: 1.25rem; }
.tabs__list [role="tab"] {
  min-height: 44px; padding: .5em 1.1em;
  background: none; border: 0; border-bottom: 4px solid transparent;
  margin-bottom: -2px;
  font-weight: 700; color: var(--text-muted); cursor: pointer;
  border-radius: 8px 8px 0 0;
}
.tabs__list [role="tab"]:hover { color: var(--link-hover); background: var(--primary-soft); }
.tabs__list [role="tab"][aria-selected="true"] { color: var(--link); border-bottom-color: var(--primary-line); }
.tabs__section[role="tabpanel"] { border-radius: var(--radius); }
.tabs__heading { margin-top: 1rem; }

/* ================= TABELA ================= */
.table-wrap { overflow-x: auto; margin-block: 1.5rem; border: var(--surface-border-w, 1px) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.table caption { text-align: start; font-weight: 700; padding: .9rem 1rem; font-size: 1.05rem; }
.table th, .table td { padding: calc(.65rem * var(--space, 1)) calc(1rem * var(--space, 1)); text-align: start; border-top: 1px solid var(--border); }
.table thead th { background: var(--surface-alt); border-bottom: 2px solid var(--border-strong); }
.table tbody tr:nth-child(even) { background: var(--surface-mute); }
.table tbody th { background: var(--surface-alt); font-weight: 700; }

/* ================= VRTILJAK ================= */
.carousel { margin-block: 1.5rem; position: relative; }
.carousel__controls { display: flex; gap: .5rem; justify-content: flex-end; margin-bottom: .6rem; }
html:not(.js) .carousel__controls, html:not(.js) .carousel__dots { display: none; }
.carousel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: var(--surface); color: var(--link);
  border: 2px solid var(--primary-line); border-radius: 50%;
  cursor: pointer;
}
.carousel__btn:hover { background: var(--primary); color: var(--on-primary); }
.carousel__btn--toggle .ico-play { display: none; }
.carousel__btn--toggle[data-state="paused"] .ico-play { display: block; }
.carousel__btn--toggle[data-state="paused"] .ico-pause { display: none; }

.carousel:not(.is-ready) .carousel__slide + .carousel__slide { margin-top: 1.25rem; }
.carousel__slide { border: var(--surface-border-w, 1px) solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.carousel__img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.carousel__caption { padding: 1.25rem 1.5rem 1.5rem; }
.carousel__kicker { margin: 0 0 .25rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text); }
.carousel__title { margin: 0 0 .4rem; font-size: 1.45rem; font-weight: 800; line-height: 1.25; }
.carousel__text { margin: 0 0 1rem; color: var(--text-muted); max-width: 60ch; }

/* Trenutni diapozitiv je polna tabletka, ostali so obrobljeni krogci — razlika je v
   obliki in ne le v barvi (SC 1.4.1). Polnilo je --primary-line, ker je edini žeton
   glavne barve, ki je zajamčeno 3 : 1 proti podlagam (SC 1.4.11). */
.carousel__dots { display: flex; gap: .4rem; justify-content: center; margin-top: .75rem; }
.carousel__dots button {
  width: 24px; height: 24px;
  border-radius: 999px; border: 2px solid var(--primary-line);
  background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.carousel__dots button::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.carousel__dots button:hover::after { background: var(--primary-hover); }
.carousel__dots button[aria-current] { width: 3rem; background: var(--primary-line); }
.carousel__dots button[aria-current]::after { background: transparent; }

/* Upravljanje leži znotraj diapozitiva — v kartici je dovolj prostora, zato se
   orodji le pomakneta vanjo (gumbi zgoraj desno, indikatorji spodaj na sredini).
   Oboje ima lastno neprosojno podlago in obrobo, zato razmerje 3 : 1 drži tudi
   nad sliko (SC 1.4.11). Prostor je zadržan s praznim robom napisa, da se
   besedilo z upravljanjem ne prekriva niti pri 200 % povečavi (SC 1.4.10).
   Postavitev velja šele, ko vrtiljak teče (.is-ready); brez JS ali pri enem
   diapozitivu ostane upravljanje v toku dokumenta. */
.carousel--split.is-ready .carousel__controls {
  position: absolute; z-index: 2;
  top: .9rem; inset-inline-end: .9rem;
  margin: 0; gap: .4rem;
}
.carousel--split.is-ready .carousel__btn { box-shadow: var(--shadow); }
.carousel--split.is-ready .carousel__btn:focus-visible { box-shadow: var(--focus-ring), var(--shadow); }
.carousel--split.is-ready .carousel__dots {
  position: absolute; z-index: 2; inset-inline: 0; bottom: .9rem;
  width: fit-content; margin: 0 auto;
  padding: .35rem .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.carousel--split.is-ready .carousel__caption { padding-bottom: 4rem; }
/* Diapozitiv brez slike: napis je prvi in sega do vrha, zato je treba zadržati
   še prostor za gumbe zgoraj. */
.carousel--split.is-ready .carousel__caption:first-child { padding-top: 4rem; }

@media (min-width: 48rem) {
  .carousel--split.is-ready .carousel__slide { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .carousel--split.is-ready .carousel__img { height: 100%; aspect-ratio: auto; min-height: 18rem; }
  /* Napis je v desnem stolpcu — pod gumbi zgoraj desno in nad indikatorji, ki jih
     pri več diapozitivih tabletka razširi tudi pod njegov stolpec. */
  .carousel--split.is-ready .carousel__caption { align-self: center; padding: 4rem 2rem; }
}

/* ---- Različica »slika čez celotno površino« ----
   Naslov, besedilo in gumb ležijo na sliki. Berljivosti ne sme določati slika,
   zato je pod besedilom senčenje (--scrim), ki je tam neprosojno 94 % in se šele
   nad besedilom zlije s sliko; razmerje --on-scrim : --scrim je izpeljano na 7 : 1,
   kar je rezerva za tistih 6 %, ki jih slika še prosveti (Videz → Barve to razmerje pokaže).
   Besedilo ostane v toku diapozitiva (slika je pod njim absolutno), zato se pri
   povečavi diapozitiv razteza in besedilo nikoli ne uide iz njega (SC 1.4.10). */
.carousel--overlay .carousel__slide {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(20rem, 52vw, 34rem);
  background: var(--scrim);
}
.carousel--overlay .carousel__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
}
.carousel--overlay .carousel__slide::before {
  content: "";
  position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--scrim) 6%, transparent) 0%,
    color-mix(in srgb, var(--scrim) 24%, transparent) 48%,
    color-mix(in srgb, var(--scrim) 68%, transparent) 100%
  );
}
.carousel--overlay .carousel__caption {
  position: relative; z-index: 2;
  padding: 2.5rem clamp(1.25rem, 3vw, 2.75rem) clamp(3.75rem, 4vw, 4.5rem);
}
/* Močnejše senčenje je omejeno na območje vsebine in se proti prostemu delu
   slike postopoma izgubi. */
.carousel--overlay .carousel__caption::before {
  content: "";
  position: absolute; inset: -3rem auto -1rem -1rem;
  width: min(56rem, calc(100% + 2rem));
  background: radial-gradient(
    ellipse at left bottom,
    color-mix(in srgb, var(--scrim) 92%, transparent) 0%,
    color-mix(in srgb, var(--scrim) 78%, transparent) 48%,
    transparent 78%
  );
}
.carousel--overlay .carousel__caption > * { position: relative; }
.carousel--overlay .carousel__kicker {
  display: inline-flex; width: fit-content;
  margin-bottom: .7rem; padding: .3rem .85rem;
  background: color-mix(in srgb, var(--on-scrim) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-scrim) 20%, transparent);
  color: var(--on-scrim);
  border-radius: 999px;
  backdrop-filter: blur(12px);
}
.carousel--overlay .carousel__title {
  max-width: 26ch;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
  color: var(--on-scrim);
  text-shadow: 0 2px 8px var(--shadow-color);
  text-wrap: balance;
}
.carousel--overlay .carousel__text { color: var(--on-scrim); }
.carousel--overlay .btn--on-image { border-color: var(--on-scrim); }
.carousel--overlay .btn--secondary {
  background: color-mix(in srgb, var(--on-scrim) 12%, transparent);
  border-color: color-mix(in srgb, var(--on-scrim) 45%, transparent);
  color: var(--on-scrim);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.carousel--overlay .btn--secondary:hover {
  background: color-mix(in srgb, var(--on-scrim) 22%, transparent);
  color: var(--on-scrim);
}

/* Steklena orodna vrstica sledi referenčnemu vzorcu carousel.html. */
.carousel--overlay .carousel__controls {
  position: absolute; z-index: 2; top: 1.25rem; inset-inline-end: 1.25rem;
  margin: 0; gap: .4rem; padding: .4rem;
  background: color-mix(in srgb, var(--scrim) 64%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-scrim) 45%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.carousel--overlay .carousel__btn {
  background: transparent; color: var(--on-scrim); border: 0;
  border-radius: calc(var(--radius) * .8);
  transition: background-color .2s ease, transform .2s ease;
}
.carousel--overlay .carousel__btn--toggle {
  background: color-mix(in srgb, var(--primary) 96%, transparent);
  color: var(--on-primary);
  box-shadow: inset 0 0 0 2px var(--on-scrim);
}
.carousel--overlay .carousel__btn--toggle:focus-visible {
  box-shadow: var(--focus-ring), inset 0 0 0 2px var(--on-scrim);
}
.carousel--overlay .carousel__btn:hover {
  background: color-mix(in srgb, var(--primary) 85%, transparent);
  color: var(--on-primary); transform: translateY(-1px);
}
.carousel--overlay .carousel__dots {
  position: absolute; z-index: 2; inset-inline: 0; bottom: 1.15rem; margin: 0;
  gap: .55rem;
}
/* Vidni indikator je manjši od 24-pikslovske klikovne tarče. */
.carousel--overlay .carousel__dots button { border: 0; }
.carousel--overlay .carousel__dots button::after {
  background: color-mix(in srgb, var(--on-scrim) 75%, transparent);
  box-shadow: 0 0 0 2px var(--scrim);
}
.carousel--overlay .carousel__dots button:hover::after { background: var(--on-scrim); }
.carousel--overlay .carousel__dots button[aria-current] { background: transparent; }
.carousel--overlay .carousel__dots button[aria-current]::after {
  width: 2.3rem; height: .75rem;
  border: 2px solid var(--on-scrim); border-radius: 999px;
  background: var(--on-scrim);
  box-shadow: 0 0 0 1px var(--scrim);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .carousel--overlay .carousel__controls {
    background: color-mix(in srgb, var(--scrim) 78%, transparent);
  }
}

@media (max-width: 47.99rem) {
  .carousel--overlay .carousel__caption {
    padding-top: 7.25rem;
  }
  .carousel--overlay .carousel__caption::before {
    inset-inline: 0;
    width: 100%;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--scrim) 72%, transparent) 0%,
      color-mix(in srgb, var(--scrim) 62%, transparent) calc(100% - 3rem),
      transparent 100%
    );
  }
}

/* ================= CARALT (alternativa vrtiljaku) ================= */
.caralt { margin-block: 1.5rem; }
.caralt__heading { margin-bottom: 1rem; }
.caralt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 64rem) {
  .caralt__list {
    grid-template-columns: 3fr 2fr;
    grid-template-rows: repeat(var(--caralt-side-count), minmax(0, 1fr));
  }
  .caralt__main { grid-row: 1 / span var(--caralt-side-count); }
  .caralt__side { grid-column: 2; }
}
.caralt__feature, .caralt__item {
  height: 100%;
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.caralt__feature-link, .caralt__item-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.caralt__feature-link:hover, .caralt__item-link:hover { outline: 2px solid var(--primary-line); outline-offset: -2px; }
/* Fokusni obroč nosi kartica, ne povezava: povezava je otrok kartice, ki ima overflow: hidden,
   zato bi bil obroč okoli povezave odrezan. Tako je obroč enak kot pri .card. */
.caralt__feature:has(.caralt__feature-link:focus-visible),
.caralt__item:has(.caralt__item-link:focus-visible) {
  outline: var(--focus-w, 3px) solid var(--focus-outer); outline-offset: 2px;
  box-shadow: var(--focus-ring), var(--shadow);
}
.caralt__feature-link:focus-visible, .caralt__item-link:focus-visible { outline: none; box-shadow: none; }
@supports not selector(:has(*)) {
  .caralt__feature:focus-within, .caralt__item:focus-within {
    outline: var(--focus-w, 3px) solid var(--focus-outer); outline-offset: 2px;
    box-shadow: var(--focus-ring), var(--shadow);
  }
}
.caralt__feature-link:hover .caralt__feature-title,
.caralt__item-link:hover .caralt__item-title { text-decoration: underline; color: var(--link-hover); }
.caralt__feature-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.caralt__feature-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.caralt__feature-title { margin: 0; font-size: 1.5rem; color: var(--link); }
.caralt__text { margin: 0; color: var(--text-muted); }
.caralt__more { margin-top: auto; padding-top: 1rem; }
.caralt__item { display: flex; align-items: stretch; }
.caralt__item-link { flex: 1; flex-direction: row; align-items: stretch; }
.caralt__item-media { flex: none; width: 7.5rem; }
.caralt__item-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caralt__item-body { padding: .9rem 1.1rem; }
.caralt__item-title { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--link); }
.caralt__item-body p { margin: 0; font-size: .95rem; color: var(--text-muted); }

/* ================= VIDEO IN ZVOK =================
   Bloka Video in Zvok imata isto ogrodje: naslov, predvajalnik (Able Player,
   lokalno v /vendor/), seznam poglavij in prepis. Barve predvajalnika so v
   ableplayer-theme.css, ki se naloži samo na straneh s takim blokom. */
.block-media { margin: 1.5rem 0; max-width: 60rem; }
.block-media__title { font-weight: 700; font-size: 1.1rem; margin-bottom: .6rem; }
.block-audio { max-width: 45rem; }

.block-media__chapters { margin-top: .8rem; }
.block-media__chapters:empty { display: none; }

.media-transcript { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.media-transcript summary { padding: .8rem 1.1rem; font-weight: 700; cursor: pointer; min-height: 44px; }
.media-transcript > div { padding: 0 1.1rem 1rem; }
/* Samodejni prepis napiše predvajalnik. Če se ni zgradil, vsebnik ostane prazen
   in razdelka ne obljubljamo — ročno vpisan prepis je tu vedno izpisan. */
.media-transcript--auto:has(> div:empty) { display: none; }

/* ================= ODMIK =================
   Prazen prostor med bloki (blok »Odmik«). Element ne nosi vsebine, zato ga
   bralnik zaslona ne napove — razmik je zgolj videz in ne sme biti edini
   nosilec pomena (SC 1.3.1); vsebino ločujejo naslovi. Višina raste z gostoto
   (--space, Videz → Gostota) in se ožjim zaslonom prilagodi s clamp(), da
   odmik ne odrine vsebine z zaslona in ostane smiseln tudi pri 200 % povečavi.
   Robovi sosednjih blokov se prištejejo — odmik jih ne nadomesti. */
.spacer { height: calc(var(--spacer-h, 2rem) * var(--space, 1)); }
.spacer--mini { --spacer-h: clamp(.35rem, .8vw, .6rem); }
.spacer--s  { --spacer-h: clamp(.75rem, 1.5vw, 1.25rem); }
.spacer--m  { --spacer-h: clamp(1.5rem, 3vw, 2.5rem); }
.spacer--l  { --spacer-h: clamp(2.5rem, 5vw, 4rem); }
.spacer--xl { --spacer-h: clamp(4rem, 8vw, 6.5rem); }

/* Negativni odmik: isti žeton stopnje, le da namesto višine potegne naslednji
   blok navzgor (npr. da se vrtiljak stakne z glavo strani). Zgornja meja je
   »velik«, spodnja meja clamp() pa poskrbi, da je pri ožjih zaslonih in pri
   200 % povečavi pritegnitev manjša in vsebina ostane cela (SC 1.4.10). */
.spacer--neg {
  height: 0;
  margin-block-start: calc(-1 * var(--spacer-h, 2rem) * var(--space, 1));
}

/* ================= OBJAVE ================= */
.post-meta { color: var(--text-muted); font-size: .95rem; }
.post-single__image { border-radius: var(--radius); margin-bottom: 1.25rem; }
.post-single__lead { font-size: 1.15rem; color: var(--text-muted); max-width: 46em; }

.cat-filter { margin-block: 1rem 1.5rem; }
.cat-filter ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.cat-filter a {
  display: inline-flex; align-items: center; gap: .3em;
  min-height: 40px; padding: .3em 1em;
  border: 2px solid var(--primary-line); border-radius: 999px;
  color: var(--link); text-decoration: none; font-weight: 600;
}
.cat-filter a:hover { background: var(--primary-soft); color: var(--link-hover); }
.cat-filter a[aria-current] { background: var(--primary); color: var(--on-primary); }
.cat-filter__count { font-weight: 400; }

.pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1.5rem 0; padding: 0; }
.pagination a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  border: 2px solid var(--primary-line); border-radius: calc(var(--radius) * .6);
  color: var(--link); text-decoration: none; font-weight: 700;
}
.pagination a:hover { background: var(--primary-soft); color: var(--link-hover); }
.pagination a[aria-current] { background: var(--primary); color: var(--on-primary); }

/* ================= DOGODKI =================
   Štirje prikazi po maskah designs/Dogodki - maske.dc.html: kartice (E2),
   podolgovate ploščice (E3), ploščice brez slike (E6) in seznam (E4). Zaporedje
   podatkov je povsod enako: datum → kategorija → naslov → kraj → opis → dejanje.
   Naslov (h3) je v DOM prvi element telesa (skok po naslovih pripelje do imena
   dogodka), vizualni vrstni red pa ureja `order` v flex stolpcu — zato imajo
   otroci telesa izrecne vrednosti order. Vse barve so žetoni. */

.ev-badge, .ev-flag, .ev-chip {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .8rem; font-weight: 700;
  padding: .15em .7em; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-ui, inherit);
}
/* Sprememba dogodka je označena z obliko (obroba, prečrtan datum) IN besedo —
   nikoli samo z barvo (SC 1.4.1). */
.ev-flag--cancelled { background: var(--danger-soft); border-color: var(--danger); }
.ev-flag--postponed { background: var(--warning-soft); border-color: var(--warning); }
.ev-chip { background: var(--primary); color: var(--on-primary); border-color: transparent; font-size: .85rem; }
.ev-chip--off { background: var(--danger-soft); color: var(--text); border-color: var(--danger); }

.ev-date { font-weight: 700; color: var(--link); font-family: var(--font-ui, inherit); }
.ev-date--off { text-decoration: line-through; color: var(--text-muted); }

/* ---- Kartice (E2) in ploščice brez slike (E6) ---- */
.ev-cards {
  list-style: none; margin: 1.5rem 0; padding: 0;
  display: grid; gap: calc(1.25rem * var(--space, 1));
}
@media (min-width: 40rem) { .ev-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ev-cards { grid-template-columns: repeat(3, 1fr); } }
.ev-cards > li { display: flex; }
.ev-card {
  display: flex; flex-direction: column; width: 100%;
  background: var(--surface);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.ev-card__img { order: -1; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ev-card__body { display: flex; flex-direction: column; gap: .5rem; padding: calc(1.25rem * var(--space, 1)); flex: 1; }
.ev-card__date { order: 1; margin: 0; }
.ev-card__cat, .ev-tile__badges { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.ev-card__cat { order: 2; margin: 0; }
.ev-card__title { order: 3; margin: 0; font-size: 1.15rem; }
.ev-card__place { order: 4; margin: 0; color: var(--text-muted); font-size: .95rem; }
.ev-card__desc { order: 5; margin: 0; color: var(--text-muted); }
.ev-card__more { order: 6; margin: auto 0 0; padding-top: .5rem; font-weight: 700; font-family: var(--font-ui, inherit); }

/* E6: pisana datumska glava namesto slike in nožica z uro */
.ev-card__datehead { order: 1; display: flex; flex-direction: column; }
.ev-card__bigdate { font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.ev-card__weekday { color: var(--text-muted); font-size: .95rem; }
.ev-card__foot {
  padding: .6rem calc(1.25rem * var(--space, 1));
  background: var(--surface-alt); border-top: 1px solid var(--border);
}

/* ---- Podolgovate ploščice (E3) ----
   Postavitev je mreža z imenovanimi območji: datumski blok je vizualno prvi,
   telo (z naslovom na začetku DOM) pa sredinsko — mreža loči vrstni red v kodi
   od vrstnega reda na zaslonu. */
.ev-tiles { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: calc(1rem * var(--space, 1)); }
.ev-tile {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  grid-template-areas: "date body action";
  background: var(--surface);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.ev-tile--img {
  grid-template-columns: 5.5rem 9rem minmax(0, 1fr) auto;
  grid-template-areas: "date img body action";
}
.ev-tile__img { grid-area: img; width: 100%; height: 100%; object-fit: cover; }
.ev-datebox {
  grid-area: date;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .75rem .4rem;
  background: var(--primary); color: var(--on-primary);
  text-align: center; font-family: var(--font-ui, inherit);
}
.ev-datebox--muted { background: var(--surface-mute); color: var(--text); }
.ev-datebox--cancelled { background: var(--danger-soft); color: var(--text); }
.ev-datebox__mon { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ev-datebox__day { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.ev-datebox__day--off { text-decoration: line-through; }
.ev-datebox__time { font-size: .8rem; opacity: .92; }
.ev-tile__body { grid-area: body; display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; min-width: 0; }
.ev-tile__badges { order: 1; margin: 0; }
.ev-tile__title { order: 2; margin: 0; font-size: 1.15rem; }
.ev-tile__place { order: 3; margin: 0; color: var(--text-muted); font-size: .95rem; }
.ev-tile__desc { order: 4; margin: 0; color: var(--text-muted); }
.ev-tile__action {
  grid-area: action;
  display: flex; align-items: center;
  padding: 1rem 1.1rem;
  border-inline-start: 1px solid var(--border);
  font-weight: 700; font-family: var(--font-ui, inherit);
  white-space: nowrap;
}
.ev-tile__offnote { color: var(--text-muted); font-weight: 400; }
@media (max-width: 47.99rem) {
  .ev-tile, .ev-tile--img { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "date body" "date action"; }
  .ev-tile__img { display: none; } /* slika je okrasna (alt=""), na ozkem zaslonu odpade */
  .ev-tile__action { border-inline-start: 0; padding-top: 0; align-items: flex-start; white-space: normal; }
}

/* ---- Seznam brez ploščic (E4) — meseci so naslovi, ne ploščice ---- */
.ev-list { margin: 1.5rem 0; }
.ev-list__month {
  margin: 1.5rem 0 .25rem; padding-bottom: .4rem;
  font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 2px solid var(--border-strong);
}
.ev-list__rows { list-style: none; margin: 0; padding: 0; }
.ev-list__row {
  display: flex; gap: .5rem 1rem; align-items: baseline; flex-wrap: wrap;
  padding: .7rem 0; border-bottom: var(--divider-w, 1px) solid var(--border);
}
.ev-list__date { flex: 0 0 11rem; }
.ev-list__main { flex: 1 1 14rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-weight: 600; }
.ev-list__place { flex: 0 1 auto; margin-inline-start: auto; color: var(--text-muted); font-size: .95rem; text-align: end; }

/* ---- Podatki o dogodku (podrobnost) ---- */
.ev-facts {
  margin: 0 0 1.5rem;
  background: var(--surface-alt);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.ev-facts dl { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.ev-facts__row { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: .15rem 1rem; }
.ev-facts dt { font-weight: 700; }
.ev-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .ev-facts__row { grid-template-columns: 1fr; } }

/* ---- Blok »Seznam dogodkov« ---- */
.ev-block { margin-block: 1.5rem; }
.ev-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ev-block__title { margin: 0; }
.ev-block__all { margin: 0; font-weight: 700; white-space: nowrap; font-family: var(--font-ui, inherit); }
.ev-block__all--bottom { margin-top: 1rem; white-space: normal; }
.ev-block .ev-cards, .ev-block .ev-tiles, .ev-block .ev-list { margin-block: 0; }

/* ---------------- Iskanje ---------------- */
.search-form { max-width: 34rem; margin-block: 1.5rem; }
.search-form label { display: block; font-weight: 700; margin-bottom: .4rem; }
.search-form__row { display: flex; gap: .6rem; }
.search-form input {
  flex: 1; min-height: 44px; padding: .4em .8em; font: inherit;
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .8);
  background: var(--surface); color: var(--text);
}
.search-form input:focus-visible { border-color: var(--primary-line); }
.search-count { font-weight: 700; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results > li { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.search-results a { font-weight: 700; font-size: 1.1rem; }
.search-results__type {
  margin-inline-start: .5em; font-size: .8rem; font-weight: 700;
  padding: .15em .7em; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--text);
}
.search-results p { margin: .35rem 0 0; color: var(--text-muted); }
/* Najdeni izraz v odlomku. Ista para barv kot oznaka vrste zadetka — torej
   kombinacija, ki je že v poročilu o kontrastih. */
.search-results mark {
  background: var(--accent-soft); color: var(--text); font-weight: 700;
  padding: 0 .15em; border-radius: calc(var(--radius) * .3);
}

/* ---------------- Zemljevid strani ---------------- */
.sitemap { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .sitemap { grid-template-columns: 1fr 1fr; } }
.sitemap ul { list-style: none; padding: 0; }
.sitemap li { padding: .25rem 0; }

/* ================= NOGA =================

  Pet postavitev (A11Y-SCMS-noge.md), štiri tudi v različici Primary. Barve so
  izključno žetoni: temna ogrodja ležijo na --band / --on-band (izpeljano ≥ 7 : 1),
  različice Primary na --primary / --on-primary, svetlo na --surface-alt / --text
  z zgornjo črto --primary-line (3 : 1), kartica na --surface, pasica dejanja na
  --primary-soft. Zato nobeno ogrodje ne more pasti na kontrastu in temna tema
  deluje brez posebnega urejanja.
   Stolpci so auto-fit/minmax: pri 320 px in pri 400 % povečavi se sesujejo v enega
   (SC 1.4.10). Povezave v stolpcih merijo ≥ 40 px, gumbi ≥ 44 px (SC 2.5.8, 2.5.5). */

.site-footer { margin-top: 2rem; }
.site-footer__main { padding-block: calc(2.2rem * var(--space, 1)); }
.site-footer__grid { display: grid; gap: calc(1.8rem * var(--space, 1)) 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.site-footer__grid--card { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.site-footer__col { display: flex; flex-direction: column; gap: .4rem; }
.site-footer__name { font-weight: 800; font-size: 1.1rem; margin: 0 0 .2rem; }
.site-footer address { font-style: normal; line-height: 1.7; margin: 0; }
.site-footer p { margin: 0; }
.site-footer__contactlinks { line-height: 1.9; }
.site-footer__coltitle { font-weight: 700; margin: 0 0 .35rem; }
.site-footer__collinks, .site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__collinks a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__cta { align-self: flex-start; margin-top: .5rem; }
.site-footer__free > :first-child { margin-top: 0; }

/* Podlage */
.site-footer--dark .site-footer__main,
.site-footer--split .site-footer__main { background: var(--band); color: var(--on-band); }
.site-footer--dark .site-footer__bottom,
.site-footer--split .site-footer__bottom { background: var(--band); color: var(--on-band); }
.site-footer--dark a, .site-footer--split .site-footer__main a, .site-footer--split .site-footer__bottom a { color: var(--on-band); }
.site-footer--primary .site-footer__main,
.site-footer--primary .site-footer__bottom { background: var(--primary); color: var(--on-primary); }
.site-footer--primary a { color: var(--on-primary); }
.site-footer--light { background: var(--surface-alt); border-top: 3px solid var(--primary-line); color: var(--text); }
.site-footer--light a { color: var(--link); }

/* Spodnja vrstica */
.site-footer__bottom { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.site-footer__bottomin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.2rem; padding-block: .7rem; }
.site-footer__copy { font-size: .9rem; }
.site-footer--light .site-footer__copy { color: var(--text-muted); }
.site-footer__legalnav .site-footer__links a { min-height: 40px; font-size: .9rem; }

/* 1a — kompaktna: kontakt in povezave v eni vrstici */
.site-footer--compact-row .site-footer__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; }
.site-footer__inline { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.site-footer__inlinetext { line-height: 1.5; }
.site-footer__mono {
  flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  font-weight: 800; font-size: .95rem;
  background: var(--on-band); color: var(--band); border-radius: var(--radius, .5rem);
}
.site-footer--primary .site-footer__mono { background: var(--on-primary); color: var(--primary); }
.site-footer--light .site-footer__mono { background: var(--primary); color: var(--on-primary); }
.site-footer__logo { flex: none; max-height: 2.6rem; width: auto; }

/* 1c — svetla: kontaktna kartica z pari podatkov */
.site-footer__card {
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, .75rem); padding: 1.1rem 1.2rem;
}
.site-footer__pairs { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; }
.site-footer__pairs dt { color: var(--text-muted); }
.site-footer__pairs dd { margin: 0; font-weight: 600; }

/* 1e — pasica dejanja nad nogo */
.site-footer__action { background: var(--primary-soft); color: var(--text); border-block: 1px solid var(--border); }
.site-footer__actionin { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 1.8rem; padding-block: calc(1.5rem * var(--space, 1)); }
.site-footer__actiontext { max-width: 48ch; display: flex; flex-direction: column; gap: .3rem; }
.site-footer__actiontitle { font-size: 1.2rem; font-weight: 800; }
.site-footer__action a { color: var(--link); }
.site-footer__form { display: grid; gap: .5rem; align-items: end; grid-template-columns: minmax(12rem, 18rem) auto; }
.site-footer__form .field { margin: 0; }
.site-footer__form .hint { grid-column: 1 / -1; }
@media (max-width: 30rem) { .site-footer__form { grid-template-columns: 1fr; } }

/* ---------------- Na vrh ---------------- */
.back-to-top {
  position: fixed; inset-inline-end: 1.25rem; bottom: 1.25rem; z-index: 50;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary);
  border: 2px solid color-mix(in srgb, var(--on-primary) 45%, transparent);
  border-radius: 50%;
  cursor: pointer; box-shadow: var(--shadow-lg);
}
.back-to-top:focus-visible { box-shadow: var(--focus-ring), var(--shadow-lg); }
.back-to-top:hover { background: var(--primary-hover); }

/* ---------------- Temna tema ----------------
   Barve prevzamejo žetoni (html.dark v /theme.css), zato je tu le
   blaženje slik, ki na temni podlagi sicer žarijo. */
html.dark img { opacity: .92; }

/* ---------------------------------------------------------------- Predogled nejavne vsebine

   Pasico vidi samo prijavljen urednik (Site::gate()). Barve so žetoni opozorila,
   zato je kontrast zagotovljen v svetli in temni shemi; pasica je prva v dokumentu,
   da je ne prezre ne oko ne bralnik zaslona.                                        */

/* Vrstica prijavljenega uporabnika (templates/_member-bar.php): nad glavo, na
   pasu --band/--on-band — jamčen kontrastni par, zato deluje v obeh temah.
   Urednik ima prvo postavko »Uredi« (poudarjena), član povezave do zaščitenih
   vsebin; odjava je gumb obrazca, oblikovan kot povezava.                       */
.member-bar { background: var(--band); color: var(--on-band); font-size: .9rem; }
.member-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.member-bar__who { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; font-weight: 700; }
.member-bar__links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; margin: 0; padding: 0; list-style: none; }
.member-bar__links a {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px; padding: 0 .8em; color: var(--on-band);
}
.member-bar__links a:hover { background: color-mix(in srgb, var(--on-band) 14%, transparent); }
.member-bar__edit { font-weight: 700; }
.member-bar__logout { margin-inline-start: auto; }
.member-bar__logout button {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px; padding: 0 .8em; border: 0; background: none;
  color: var(--on-band); font: inherit; text-decoration: underline; cursor: pointer;
}
.member-bar__logout button:hover { background: color-mix(in srgb, var(--on-band) 14%, transparent); }

/* Strani računa (templates/account/*): obrazci si sposodijo videz bloka Obrazec. */
.acct { max-width: 40rem; }
.acct__alt { margin: 1.1rem 0; }
.acct__logout { margin: 2rem 0 1rem; }
.acct .blockform__form { margin: 1.1rem 0; }

.preview-bar {
  background: var(--warning-soft);
  border-bottom: 2px solid var(--warning);
  padding: .6rem 0;
}
.preview-bar__in {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  justify-content: space-between;
}
.preview-bar strong { font-size: .95rem; }