/* Klasična stran — na Dobre zgodbe Design System (/ds/styles.css).
   Ploske barve, tanke obrobe 1 px, mehke plastne sence, Apertura, azurna kot edini poudarek. */

body { background: var(--color-canvas); font-size: var(--text-body-fluid); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.skrito { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tiho { color: var(--color-text-muted); }
.nadnaslov { display: block; font-size: var(--font-eyebrow-size); font-weight: var(--font-eyebrow-weight); letter-spacing: var(--font-eyebrow-tracking); text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 var(--space-3); }
.vodilo { font-size: var(--text-lead); color: var(--color-text-muted); max-width: var(--measure); line-height: 1.5; }
.st { font-weight: var(--weight-bold); color: var(--color-accent-text); font-variant-numeric: tabular-nums; font-size: 14px; }
.osnutek-pas { background: var(--dz-yellow); color: var(--dz-ink); text-align: center; padding: 8px 16px; font-weight: var(--weight-medium); }
.ploscica { display: block; aspect-ratio: 1; overflow: hidden; }
.ploscica svg { display: block; width: 100%; height: 100%; }

/* --- Gumbi --- */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; text-decoration: none; white-space: nowrap;
  font-weight: var(--weight-medium); line-height: 1; border: var(--border-hair) solid transparent; border-radius: var(--radius-pill);
  padding: 14px 24px; font-size: 16px; cursor: pointer; background: var(--color-accent); color: var(--color-on-accent);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.gumb:hover { text-decoration: none; }
.gumb:active { transform: translateY(1px); transition-duration: var(--dur-instant); }
.gumb-azuren { background: var(--color-accent); color: var(--color-on-accent); }
.gumb-azuren:hover { background: var(--color-accent-hover); color: var(--color-on-accent); box-shadow: var(--shadow-accent); }
.gumb-obroba { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.gumb-obroba:hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.gumb-crn { background: var(--color-text); color: var(--color-bg); }
.gumb-crn:hover { background: color-mix(in srgb, var(--color-text) 82%, var(--color-bg)); color: var(--color-bg); }
.gumb-majhen { padding: 9px 16px; font-size: 14px; }
.gumbi { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--space-7); }
.gumb-velik { padding: 18px 30px; font-size: 18px; }
.puscica { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-medium); color: var(--color-link); white-space: nowrap; }
.puscica span { transition: transform var(--dur-base) var(--ease-standard); }
.puscica:hover { text-decoration: none; }
.puscica:hover span { transform: translateX(4px); }
.povezava-gumb { border: 0; background: none; padding: 0; color: var(--color-link); cursor: pointer; font-weight: var(--weight-medium); }
.povezava-gumb:hover { text-decoration: underline; }

/* --- Glava (vedno temno modra) --- */
.glava {
  position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: var(--space-6);
  height: var(--header-h-lg); padding: 0 var(--gutter-fluid); background: var(--dz-indigo); border-bottom: var(--border-hair) solid rgba(26, 26, 26, .28);
}
.znak, .znak:hover { color: #ffffff; display: flex; flex: none; }
.znak svg { height: 34px; width: auto; display: block; }
.meni { display: flex; align-items: center; gap: var(--space-5); margin-right: auto; }
.meni > a { position: relative; color: #ffffff; font-weight: var(--weight-medium); padding: 6px 0; white-space: nowrap; }
.meni > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #ffffff; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.meni > a:hover { color: #ffffff; text-decoration: none; }
.meni > a:hover::after { transform: scaleX(1); }
.meni > a[aria-current="page"]::after { transform: scaleX(1); height: 3px; background: var(--dz-azure); }
.meni-dodatno { display: none; }
.glava-gumbi { display: flex; gap: 8px; align-items: center; }
.glava .gumb-obroba { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .6); }
.glava .gumb-obroba:hover { background: #ffffff; color: var(--dz-indigo); border-color: #ffffff; }
.nacin { display: inline-flex; padding: 3px; gap: 2px; border: var(--border-hair) solid rgba(255, 255, 255, .6); border-radius: var(--radius-pill); }
.nacin a { padding: 6px 13px; border-radius: var(--radius-pill); color: #ffffff; font-size: 14px; font-weight: var(--weight-medium); line-height: 1.1; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.nacin a:hover { background: rgba(255, 255, 255, .16); color: #ffffff; text-decoration: none; }
.nacin a[aria-current="page"] { background: #ffffff; color: var(--dz-indigo); }
.burger { display: none; width: 44px; height: 44px; border: var(--border-hair) solid rgba(255, 255, 255, .6); border-radius: 50%; background: transparent; cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: #ffffff; transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast); }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Razdelki --- */
.pas { padding: var(--space-section) 0; }
.pas-bel { background: var(--color-surface); }
.pas-temen { background: var(--color-bg); color: var(--color-text); }
.okvir-razdelka { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter-fluid); }
.okvir-ozek { max-width: 920px; }
.glava-razdelka { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-stack); }
.glava-razdelka h2 { font-size: var(--text-h2); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: 1.08; max-width: 18em; text-wrap: balance; }
.glava-razdelka .vodilo { margin-top: var(--space-4); }
.razdelek, .oseba-stran { max-width: var(--container); margin: 0 auto; padding: var(--space-section-sm) var(--gutter-fluid); }
.razdelek h2 { font-size: var(--text-h2); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-stack); }

/* --- Junak (uvod strani) --- */
.junak { background: var(--color-canvas); border-bottom: var(--stroke); }
.junak-notranjost { max-width: var(--container); margin: 0 auto; padding: var(--space-section) var(--gutter-fluid); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; }
.junak h1 { font-size: var(--text-display); font-weight: var(--weight-regular); line-height: 1.03; letter-spacing: var(--tracking-tight); max-width: 13em; text-wrap: balance; }
.junak .vodilo { margin-top: var(--space-6); }
.junak-podstran .junak-notranjost { padding-top: var(--space-section-sm); padding-bottom: var(--space-section-sm); }
.junak-podstran h1 { font-size: var(--text-h1); max-width: 20em; line-height: 1.08; }
.junak-vzorec { display: grid; grid-template-columns: repeat(3, clamp(64px, 8vw, 120px)); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.junak-vzorec .ploscica { opacity: 0; transform: scale(.6); animation: ploscica var(--dur-slower) var(--ease-out) forwards; }
.junak-vzorec .ploscica:nth-child(2) { animation-delay: 60ms; } .junak-vzorec .ploscica:nth-child(3) { animation-delay: 120ms; }
.junak-vzorec .ploscica:nth-child(4) { animation-delay: 180ms; } .junak-vzorec .ploscica:nth-child(5) { animation-delay: 240ms; }
.junak-vzorec .ploscica:nth-child(6) { animation-delay: 300ms; } .junak-vzorec .ploscica:nth-child(7) { animation-delay: 360ms; }
.junak-vzorec .ploscica:nth-child(8) { animation-delay: 360ms; } .junak-vzorec .ploscica:nth-child(9) { animation-delay: 360ms; }
.junak-vzorec-mali { grid-template-columns: repeat(2, clamp(56px, 6vw, 92px)); }
@keyframes ploscica { to { opacity: 1; transform: none; } }
.manifest-odstavek { margin-top: var(--space-5); max-width: var(--measure); color: var(--color-text-muted); }
.skoki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-7); }
.skoki a { border: var(--stroke-strong); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 14px; font-weight: var(--weight-medium); color: var(--color-text); background: var(--color-surface); transition: background var(--dur-fast), color var(--dur-fast); }
.skoki a:hover { background: var(--color-text); color: var(--color-bg); text-decoration: none; }

/* Pozicija */
.pozicija { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-4) var(--space-8); }
.pozicija .nadnaslov { grid-row: span 2; margin-top: 10px; }
.pozicija-stavek { font-size: var(--text-h2); line-height: 1.15; letter-spacing: var(--tracking-tight); text-wrap: balance; }

/* --- Izbirnik (izzivi, tipični projekti): seznam levo, podrobnosti desno --- */
.izbirnik { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.izbirnik-seznam { display: flex; flex-direction: column; border-top: var(--stroke); }
.izbirnik-seznam button {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; text-align: left;
  padding: var(--space-4) var(--space-3); border: 0; border-bottom: var(--stroke); background: none; cursor: pointer; line-height: 1.35;
  transition: background var(--dur-fast) var(--ease-standard), padding var(--dur-base) var(--ease-standard);
}
.izbirnik-seznam button:hover { background: var(--color-surface); }
.izbirnik-seznam button[aria-selected="true"] { background: var(--color-surface); padding-left: var(--space-5); box-shadow: inset 3px 0 0 var(--color-accent); font-weight: var(--weight-medium); }
.pas-bel .izbirnik-seznam button:hover, .pas-bel .izbirnik-seznam button[aria-selected="true"] { background: var(--color-canvas); }
.izbirnik-plosca { scroll-margin-top: calc(var(--header-h) + var(--space-4)); position: sticky; top: calc(var(--header-h-lg) + var(--space-5)); background: var(--color-surface); border: var(--stroke); border-radius: 18px; padding: var(--space-stack); box-shadow: var(--shadow-md); }
.pas-bel .izbirnik-plosca { background: var(--color-canvas); box-shadow: none; }
.izbirnik-plosca.prihaja { animation: prihod var(--dur-slow) var(--ease-out) both; }
.izbirnik-plosca h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: 1.2; }
.izbirnik-plosca .vodilo { margin-top: var(--space-3); font-size: var(--text-base); }
.izbirnik-plosca h4 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); }
.izbirnik-plosca .gumb { margin-top: var(--space-6); }
.koraki-mini { list-style: none; counter-reset: k; padding: 0; margin: var(--space-5) 0; display: grid; gap: 6px; }
.koraki-mini li { counter-increment: k; display: grid; grid-template-columns: 32px 1fr; gap: 8px; }
.koraki-mini li::before { content: counter(k, decimal-leading-zero); color: var(--color-accent-text); font-weight: var(--weight-bold); font-size: 14px; }
@keyframes prihod { from { opacity: 0; transform: translateY(var(--motion-shift-md)); } }

/* --- Štiri ravni --- */
.ravni-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--grid-gap); }
.raven-karta {
  display: flex; flex-direction: column; gap: 6px; color: var(--color-text); background: var(--color-canvas); border: var(--stroke); border-radius: 18px; padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base);
}
.raven-karta:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--color-surface); text-decoration: none; color: var(--color-text); }
.raven-karta .nadnaslov { margin: 0; }
.raven-karta strong { font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: 1.2; }
.raven-pod { color: var(--color-text-muted); }
.raven-vprasanje { margin-top: auto; padding-top: var(--space-5); border-top: var(--stroke); line-height: 1.4; }

/* --- Kviz iz matrike --- */
.kviz { position: relative; background: var(--color-surface); border: var(--stroke); border-radius: 24px; box-shadow: var(--shadow-md); overflow: hidden; }
.pas-bel .kviz { background: var(--color-canvas); box-shadow: none; }
.kviz-napredek { height: 4px; background: var(--color-border); }
.kviz-napredek span { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width var(--dur-slow) var(--ease-out); }
.kviz-oder { padding: clamp(24px, 4.5vw, 64px); min-height: 460px; }
.kviz-korak { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "levo desno" "nav desno"; gap: 0 clamp(32px, 6vw, 96px); min-height: 100%; }
.kviz-levo { grid-area: levo; }
.kviz-desno { grid-area: desno; min-width: 0; }
.kviz-nav { grid-area: nav; align-self: end; display: flex; gap: var(--space-6); padding-top: var(--space-7); }
.kviz-st { font-size: 15px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; margin-bottom: var(--space-5); }
.kviz-st span { font-size: clamp(56px, 6vw, 96px); line-height: .85; letter-spacing: -0.04em; color: var(--color-text); }
.kviz-vprasanje { font-size: var(--text-h2); font-weight: var(--weight-regular); line-height: 1.08; letter-spacing: var(--tracking-tight); text-wrap: balance; outline: none; }
.kviz-namig { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-lead); }
.kviz-povezava { border: 0; background: none; padding: 4px 0; font-weight: var(--weight-medium); color: var(--color-text-muted); cursor: pointer; transition: color var(--dur-fast); }
.kviz-povezava:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }

.kviz-moznosti { border-top: var(--stroke); }
.kviz-moznost {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 26px; gap: var(--space-4); align-items: center;
  padding: 18px 4px; border-bottom: var(--stroke); cursor: pointer; isolation: isolate;
}
.kviz-moznost::before { content: ""; position: absolute; inset: 4px -12px; border-radius: 12px; background: var(--color-canvas); opacity: 0; z-index: -1; transition: opacity var(--dur-fast) var(--ease-standard); }
.pas-bel .kviz-moznost::before { background: var(--color-surface); }
.kviz-moznost:hover::before, .kviz-moznost:has(input:focus-visible)::before { opacity: 1; }
.kviz-moznost:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 8px; }
.kviz-moznost input { position: absolute; opacity: 0; pointer-events: none; }
.kviz-tipka { width: 26px; height: 26px; border-radius: 7px; border: var(--stroke-strong); display: grid; place-items: center; font-size: 13px; font-weight: var(--weight-medium); color: var(--color-text-muted); font-variant-numeric: tabular-nums; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.kviz-tipka-prazna { visibility: hidden; }
.kviz-ime { font-size: clamp(18px, 1.2vw + 12px, 22px); line-height: 1.25; transition: transform var(--dur-base) var(--ease-out); }
.kviz-ime small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--color-text-muted); }
.kviz-moznost:hover .kviz-ime { transform: translateX(4px); }
.kviz-znak { width: 24px; height: 24px; border-radius: 50%; border: var(--stroke-strong); justify-self: end; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.kviz-moznost:has(input[type=checkbox]) .kviz-znak { border-radius: 7px; }
.kviz-moznost:has(input:checked) .kviz-tipka { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.kviz-moznost:has(input:checked) .kviz-ime { font-weight: var(--weight-medium); }
.kviz-moznost:has(input:checked) .kviz-znak {
  background: var(--color-accent) no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  border-color: var(--color-accent); transform: scale(1.12);
}
/* Korak z veliko možnostmi: vprašanje zgoraj, odgovori v mreži čez celo širino. */
.kviz-korak-siroko { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "levo nav" "desno desno"; }
.kviz-korak-siroko .kviz-levo { margin-bottom: var(--space-6); }
.kviz-korak-siroko .kviz-st { display: inline-block; margin: 0 var(--space-4) 0 0; vertical-align: baseline; }
.kviz-korak-siroko .kviz-vprasanje { display: inline; }
.kviz-korak-siroko .kviz-namig { margin-top: var(--space-3); }
.kviz-korak-siroko .kviz-nav { align-self: start; padding-top: var(--space-3); }
.kviz-moznosti-vec { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); column-gap: var(--space-6); }
.kviz-moznosti-vec .kviz-moznost { grid-template-columns: minmax(0, 1fr) 24px; padding: 14px 4px; }
.kviz-moznosti-vec .kviz-tipka { display: none; }
.kviz-moznosti-vec .kviz-ime { font-size: 17px; }
.kviz-naprej { display: flex; justify-content: flex-end; margin-top: var(--space-6); }
.kviz-naprej .gumb:disabled { opacity: .35; cursor: default; }

/* Prihod koraka: vprašanje se dvigne, odgovori pridejo zaporedoma (60 ms), smer sledi premiku. */
.vstop-naprej .kviz-levo, .vstop-nazaj .kviz-levo { animation: kviz-gor var(--dur-slow) var(--ease-out) both; }
.vstop-naprej .kviz-moznost { animation: kviz-desno var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i) * 40ms + 60ms); }
.vstop-nazaj .kviz-moznost { animation: kviz-levo var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i) * 40ms + 60ms); }
.kviz-izid.vstop-naprej > *, .kviz-izid.vstop-nazaj > * { animation: kviz-gor var(--dur-slower) var(--ease-out) both; }
.kviz-izid.vstop-naprej > :nth-child(2) { animation-delay: 120ms; }
.kviz-izid.vstop-naprej > :nth-child(3) { animation-delay: 240ms; }
@keyframes kviz-gor { from { opacity: 0; transform: translateY(12px); } }
@keyframes kviz-desno { from { opacity: 0; transform: translateX(16px); } }
@keyframes kviz-levo { from { opacity: 0; transform: translateX(-16px); } }

/* Izid */
.kviz-izid-vrh { padding-bottom: var(--space-7); border-bottom: var(--stroke); }
.kviz-kombinacija { font-size: clamp(24px, 1.6vw + 16px, 38px); line-height: 1.3; letter-spacing: -0.015em; outline: none; max-width: 30em; }
.kviz-kombinacija button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; text-decoration-color: var(--color-border-strong); transition: text-decoration-color var(--dur-fast); }
.kviz-kombinacija button:hover { text-decoration-color: var(--color-accent); }
.kviz-kombinacija .krat { color: var(--color-accent-text); padding: 0 .28em; }
.kviz-kombinacij { margin-top: var(--space-4); color: var(--color-text-muted); }
.kviz-prazno { margin-top: var(--space-4); font-size: var(--text-lead); color: var(--color-text-muted); }
.kviz-predlog { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6) clamp(32px, 6vw, 96px); padding-top: var(--space-7); }
.kviz-predlog:has(.kviz-projekt[hidden]) { grid-template-columns: minmax(0, 1fr); }
.kviz-projekt h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: 1.2; }
.kviz-projekt h3 a { color: var(--color-text); }
.kviz-projekt h3 a:hover { color: var(--color-link); text-decoration: none; }
.kviz-projekt-izziv { margin-top: var(--space-3); color: var(--color-text-muted); line-height: 1.5; max-width: 34em; }
.kviz-projekt-koraki { list-style: none; counter-reset: korak; padding: 0; margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--space-6); }
.kviz-projekt-koraki li { counter-increment: korak; display: grid; grid-template-columns: 30px minmax(0, 1fr); line-height: 1.4; }
.kviz-projekt-koraki li::before { content: counter(korak, decimal-leading-zero); color: var(--color-accent-text); font-weight: var(--weight-bold); font-size: 13px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.kviz-tudi { margin-top: var(--space-6); font-size: 15px; color: var(--color-text-muted); }
.kviz-stranski .nadnaslov { margin-bottom: var(--space-3); }
.kviz-seznam { list-style: none; padding: 0; margin: 0 0 var(--space-6); border-top: var(--stroke); }
.kviz-seznam a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: var(--stroke); color: var(--color-text); line-height: 1.35; }
.kviz-seznam a span { color: var(--color-text-subtle); transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast); }
.kviz-seznam a:hover { text-decoration: none; color: var(--color-link); }
.kviz-seznam a:hover span { transform: translateX(4px); color: var(--color-link); }
.kviz-koncaj { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); }

.izid-seznam { display: flex; flex-wrap: wrap; gap: 6px; }
.izid-seznam a { font-size: 14px; padding: 6px 12px; border: var(--stroke); border-radius: var(--radius-pill); color: var(--color-text); background: var(--color-surface); line-height: 1.2; }
.izid-seznam a:hover { background: var(--color-text); color: var(--color-bg); text-decoration: none; }

/* --- Primeri --- */
.mreza-primerov { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--grid-gap); }
.kartica-primera {
  display: flex; flex-direction: column; color: var(--color-text); background: var(--color-surface); border: var(--stroke); border-radius: 18px; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.kartica-primera:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--color-text); text-decoration: none; }
.kartica-primera-slika { display: block; aspect-ratio: 5 / 3; background: var(--color-canvas); border-bottom: var(--stroke); overflow: hidden; }
.kartica-primera-slika img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease-out); }
.kartica-primera:hover .kartica-primera-slika img { transform: scale(1.03); }
.kartica-primera-telo { display: block; padding: var(--space-5); }
.kartica-primera .nadnaslov { margin-bottom: var(--space-2); display: flex; justify-content: space-between; gap: 12px; }
.kartica-primera .leto { color: var(--color-text-subtle); letter-spacing: 0; text-transform: none; font-weight: var(--weight-regular); white-space: nowrap; }
.kartica-primera-naslov { display: block; font-size: 20px; font-weight: var(--weight-medium); line-height: 1.25; }

/* --- Filter primerov --- */
.filter-primerov { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.filter-primerov .iskalnik { margin: 0; }
.izbirnik-filtra { position: relative; display: block; }
.izbirnik-filtra select {
  appearance: none; -webkit-appearance: none; font: inherit; font-weight: var(--weight-medium); color: var(--color-text); cursor: pointer;
  max-width: 280px; padding: 17px 46px 17px 22px; border: var(--stroke-strong); border-radius: var(--radius-pill); background: var(--color-surface);
  box-shadow: var(--shadow-sm); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.izbirnik-filtra::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px; pointer-events: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); color: var(--color-text-muted);
}
.izbirnik-filtra select:hover { border-color: var(--color-text); }
.izbirnik-filtra select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.izbirnik-filtra.izbran select { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.izbirnik-filtra.izbran::after { color: var(--color-bg); }
.filter-stanje { display: flex; align-items: baseline; gap: var(--space-5); margin: var(--space-5) 0 var(--space-6); color: var(--color-text-muted); }
.primer-celica { display: grid; }
.filter-prazno { padding: var(--space-stack); border: var(--stroke); border-radius: 18px; background: var(--color-canvas); }
.filter-prazno p { font-size: var(--text-lead); max-width: var(--measure); }
.filter-prazno .gumbi { margin-top: var(--space-5); }

/* --- Številke --- */
.stevilke-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-6); margin: 0; }
.stevilke-mreza > div { border-top: var(--stroke-heavy); padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.stevilke-mreza dt { font-size: var(--text-h1); line-height: 1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--color-link); }
.stevilke-mreza dd { margin: 0; color: var(--color-text-muted); }
.stevilke-mreza a { margin-top: auto; font-size: 14px; font-weight: var(--weight-medium); }

/* --- Načela --- */
.nacela-mreza { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); }
.nacela-mreza a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--space-5); border: var(--stroke); border-radius: 14px; color: var(--color-text); background: var(--color-surface); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.nacela-mreza a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--color-text); }
.nacela-mreza strong { font-size: var(--text-h3); font-weight: var(--weight-medium); }
.nacela-mreza span:last-child { color: var(--color-text-muted); font-size: 15px; line-height: 1.4; }

.naprej-povezava { margin-top: var(--space-7); }

/* --- Dobra komunikacija: manifest, preizkus zgodbe, načela --- */
.manifest-junak { background: var(--color-canvas); padding: var(--space-section) 0 var(--space-section-sm); }
.manifest-mreza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-8); align-items: start; }
.manifest-glava h1 { font-size: var(--text-display); font-weight: var(--weight-regular); line-height: 1.03; letter-spacing: var(--tracking-tight); }
.manifest-izjava { grid-column: 1 / -1; margin: var(--space-4) 0 0; max-width: 25em; font-size: clamp(26px, 1.9vw + 14px, 44px); line-height: 1.28; letter-spacing: -0.015em; text-wrap: pretty; }
.manifest-izjava .beseda { color: var(--color-text-subtle); transition: color var(--dur-slow) var(--ease-standard); }
.manifest-izjava .beseda.prizgana { color: var(--color-text); }

.manifest-naloge { background: var(--color-canvas); border-bottom: var(--stroke); padding: var(--space-section-sm) 0 var(--space-section); }
.naloge-pred { max-width: 34em; margin-bottom: var(--space-6); font-size: var(--text-lead); line-height: 1.55; color: var(--color-text-muted); }
.naloge-vrtiljak { display: flex; flex-wrap: wrap; gap: 0 .3em; font-size: var(--text-h2); line-height: 1.15; letter-spacing: var(--tracking-tight); }
.naloge-uvod { color: var(--color-text-muted); }
.naloge-okno { display: inline-grid; }
.naloga { grid-area: 1 / 1; color: var(--color-accent-text); opacity: 0; transform: translateY(.45em); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.naloga.zdaj { opacity: 1; transform: none; }
.naloga.odhaja { opacity: 0; transform: translateY(-.45em); }
.naloge-vrtiljak.vse .naloge-okno { display: grid; gap: .15em; flex-basis: 100%; }
.naloge-vrtiljak.vse .naloga { grid-area: auto; opacity: 1; transform: none; }
.naloge-sklep { margin-top: var(--space-6); font-size: var(--text-h2); line-height: 1.15; letter-spacing: var(--tracking-tight); }

.preizkus { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5) var(--space-6); padding: var(--space-stack); background: var(--color-canvas); border: var(--stroke); border-radius: 24px; }
.preizkus-glava { grid-column: 1 / -1; }
.preizkus-glava h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: 1.2; }
.preizkus-glava p { margin-top: 6px; color: var(--color-text-muted); }
.sestavine { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.sestavina {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "st znak" "ime ime" "opis opis"; align-content: start; gap: 6px;
  width: 100%; height: 100%; padding: var(--space-5); text-align: left; cursor: pointer; color: var(--color-text);
  background: var(--color-surface); border: var(--stroke); border-radius: 16px;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.sestavina:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sestavina-st { grid-area: st; font-size: 13px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; transition: color var(--dur-base); }
.sestavina-znak { grid-area: znak; position: relative; width: 26px; height: 26px; border-radius: 50%; border: var(--stroke-strong); transition: background var(--dur-base), border-color var(--dur-base); }
.sestavina-znak::after { content: ""; position: absolute; left: 8px; top: 4px; width: 7px; height: 12px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-base) var(--ease-out); }
.sestavina strong { grid-area: ime; margin-top: var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.2; }
.sestavina-opis { grid-area: opis; font-size: 15px; line-height: 1.45; color: var(--color-text-muted); transition: color var(--dur-base); }
.sestavina[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.sestavina[aria-pressed="true"] .sestavina-st, .sestavina[aria-pressed="true"] .sestavina-opis { color: color-mix(in srgb, var(--color-bg) 72%, transparent); }
.sestavina[aria-pressed="true"] .sestavina-znak { background: var(--color-accent); border-color: var(--color-accent); }
.sestavina[aria-pressed="true"] .sestavina-znak::after { transform: rotate(45deg) scale(1); }
.preizkus-izid { align-self: start; padding: var(--space-5); background: var(--color-surface); border: var(--stroke); border-radius: 16px; box-shadow: var(--shadow-sm); }
.merilo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.merilo span { height: 8px; border-radius: 4px; background: var(--color-border); transition: background var(--dur-slow) var(--ease-out); }
.merilo span.polno { background: var(--color-accent); }
.preizkus-ocena { margin-top: var(--space-4); font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: 1.25; }
.preizkus-manjka { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
.preizkus-manjka:empty { display: none; }
.preizkus-manjka li { padding-left: var(--space-4); border-left: 2px solid var(--color-border-strong); font-size: 15px; line-height: 1.45; color: var(--color-text-muted); animation: kviz-gor var(--dur-slow) var(--ease-out) both; }
.preizkus-manjka li strong { display: block; color: var(--color-text); font-weight: var(--weight-medium); }
.preizkus-vse p { margin: var(--space-3) 0 var(--space-5); color: var(--color-text-muted); }
.zgodba-besedilo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-5) var(--space-8); margin-top: var(--space-stack); }
.zgodba-besedilo p { font-size: var(--text-lead); line-height: 1.6; color: var(--color-text-muted); }

.nacela-uvod { max-width: 60rem; margin-bottom: var(--space-stack); }
.nacela-uvod h2 { font-size: var(--text-h2); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: 1.08; }
.nacela-stavek { margin-top: var(--space-5); font-size: clamp(22px, 1.2vw + 14px, 32px); line-height: 1.38; letter-spacing: -0.01em; color: var(--color-text-muted); text-wrap: pretty; }
.nacela-stavek a { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-color: var(--color-border-strong); transition: text-decoration-color var(--dur-fast); }
.nacela-stavek a:hover { color: var(--color-text); text-decoration-color: var(--color-accent); }
.nacela-postavitev { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.nacela-kazalo { position: sticky; top: calc(var(--header-h-lg) + var(--space-6)); }
.nacela-kazalo ol { list-style: none; padding: 0; margin: 0; border-left: var(--stroke); }
.nacela-kazalo a { display: flex; gap: 12px; align-items: baseline; margin-left: -1px; padding: 9px 0 9px var(--space-4); border-left: 2px solid transparent; font-weight: var(--weight-medium); color: var(--color-text-muted); transition: color var(--dur-fast), border-color var(--dur-base); }
.nacela-kazalo a span { font-size: 12px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.nacela-kazalo a:hover { color: var(--color-text); text-decoration: none; }
.nacela-kazalo a.aktivno { color: var(--color-text); border-left-color: var(--color-text); }
.nacela-seznam { display: grid; gap: var(--space-5); }
.nacelo-clanek { padding: var(--space-stack); background: var(--color-surface); border: var(--stroke); border-radius: 24px; box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h-lg) + var(--space-5)); }
.nacelo-vrh { display: flex; align-items: baseline; gap: var(--space-4); }
.nacelo-st { font-size: clamp(36px, 3vw, 56px); line-height: .9; letter-spacing: -0.04em; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.nacelo-vrh h3 { font-size: var(--text-h2); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: 1.05; }
.nacelo-vodilo { margin-top: var(--space-4); max-width: 30em; font-size: var(--text-h3); line-height: 1.3; text-wrap: pretty; }
.nacelo-opis { margin-top: var(--space-4); max-width: var(--measure); font-size: var(--text-lead); line-height: 1.55; color: var(--color-text-muted); }
.nacelo-primerjava { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.nacelo-brez, .nacelo-z { padding: var(--space-5); border-radius: 16px; }
.nacelo-brez { background: var(--color-canvas); border: var(--stroke); }
.nacelo-brez .nadnaslov { color: var(--color-text-subtle); }
.nacelo-z { background: var(--color-text); color: var(--color-bg); }
.nacelo-z .nadnaslov { color: var(--dz-azure); }
.nacelo-z h4 { color: var(--color-bg); }
.nacelo-brez h4, .nacelo-z h4 { margin-bottom: var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.25; }
.nacelo-html p, .nacelo-html li { font-size: 15px; line-height: 1.55; }
.nacelo-html p + p { margin-top: .6em; }
.nacelo-html ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.nacelo-brez .nacelo-html { color: var(--color-text-muted); }
.nacelo-z .nacelo-html { color: color-mix(in srgb, var(--color-bg) 80%, transparent); }
.nacelo-noga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--stroke); }
.nacelo-primeri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.nacelo-primeri-oznaka { font-size: 13px; color: var(--color-text-subtle); }
.nacelo-primeri ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nacelo-primeri a { display: grid; place-items: center; width: 116px; height: 70px; overflow: hidden; border: var(--stroke); border-radius: 10px; color: #ffffff; font-size: 11px; text-align: center; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.nacelo-primeri a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.nacelo-primeri img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.25); }

/* Plus za razširljive vrstice */
.plus { position: relative; width: 28px; height: 28px; border-radius: 50%; border: var(--stroke-strong); justify-self: end; align-self: center; transition: transform var(--dur-base) var(--ease-standard), background var(--dur-fast); flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > summary .plus { transform: rotate(45deg); background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

.besedilo-stolpca p { font-size: var(--text-lead); line-height: 1.55; }

/* --- Kaj delamo: kartice, katalog --- */
.mreza-kartic { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--grid-gap); }
.mala-kartica { display: flex; flex-direction: column; gap: 8px; padding: var(--space-6); border: var(--stroke); border-radius: 18px; background: var(--color-canvas); }
.pas:not(.pas-bel) .mala-kartica { background: var(--color-surface); }
.mala-kartica h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: 1.2; }
.mala-kartica p { color: var(--color-text-muted); line-height: 1.5; }

.iskalnik { display: flex; align-items: center; gap: 12px; background: var(--color-surface); border: var(--stroke-strong); border-radius: var(--radius-pill); padding: 0 8px 0 22px; margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-fast); }
.iskalnik:focus-within { box-shadow: var(--focus-ring), var(--shadow-md); }
.iskalnik svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; color: var(--color-text-muted); }
.iskalnik input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--text-lead); padding: 16px 0; color: var(--color-text); }
.iskalnik input:focus-visible { box-shadow: none; }
.zavihki-ravni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--stroke-heavy); margin-bottom: var(--space-7); }
.zavihki-ravni button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; text-align: left; padding: var(--space-4) var(--space-3) var(--space-4) 0; border: 0; background: none; cursor: pointer; position: relative; color: var(--color-text-muted); font-weight: var(--weight-medium); line-height: 1.25; }
.zavihki-ravni button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--color-text); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.zavihki-ravni button:hover { color: var(--color-text); }
.zavihki-ravni button[aria-selected="true"] { color: var(--color-text); }
.zavihki-ravni button[aria-selected="true"]::after { transform: scaleX(1); }
.zavihki-ravni .stevec { font-size: 13px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.katalog.iskanje .zavihki-ravni { opacity: .35; pointer-events: none; }
.raven-plosca { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); align-items: start; }
.raven-plosca.prihaja { animation: prihod var(--dur-slow) var(--ease-out) both; }
.raven-uvod { position: sticky; top: calc(var(--header-h-lg) + var(--space-6)); }
.raven-uvod blockquote { margin: 0; font-size: var(--text-h3); line-height: 1.3; letter-spacing: -0.01em; }
.raven-uvod blockquote::before { content: "»"; color: var(--color-accent-text); }
.raven-uvod blockquote::after { content: "«"; color: var(--color-accent-text); }
.raven-uvod .vodilo { margin-top: var(--space-5); font-size: var(--text-base); }
.katalog.iskanje .raven-plosca { grid-template-columns: 1fr; }
.katalog.iskanje .raven-uvod { display: none; }
.storitve-seznam { border-top: var(--stroke); }
.storitev { border-bottom: var(--stroke); scroll-margin-top: calc(var(--header-h-lg) + var(--space-6)); }
.storitev summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 4px var(--space-4); padding: var(--space-5) 0; }
.storitev summary::-webkit-details-marker { display: none; }
.storitev-ime { font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.3; }
.storitev-namen { grid-column: 1; color: var(--color-text-muted); font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.storitev .plus { grid-row: 1 / span 2; grid-column: 2; }
.storitev summary:hover .storitev-ime { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.storitev[open] .storitev-namen { display: block; -webkit-line-clamp: unset; color: var(--color-text); }
.storitev-telo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-5); padding: 0 0 var(--space-6); }
.storitev-telo h4, .dva-stolpca h4 { font-size: 13px; text-transform: uppercase; letter-spacing: var(--font-eyebrow-tracking); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.storitev-telo p { color: var(--color-text-muted); line-height: 1.5; }
.storitev-telo .gumb { justify-self: start; grid-column: 1 / -1; }
.storitev.poudarjena { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.ni-zadetkov { color: var(--color-text-muted); font-size: var(--text-lead); padding: var(--space-6) 0; }

.kljukice, .krizci, .vprasalnik { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kljukice li, .krizci li, .vprasalnik li { position: relative; padding-left: 30px; line-height: 1.45; }
.kljukice li::before, .krizci li::before, .vprasalnik li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent) no-repeat center / 13px; }
.kljukice li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.krizci li::before { background-color: transparent; border: var(--stroke-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3401a' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.vprasalnik li::before { content: "?"; background: transparent; border: var(--stroke-strong); color: var(--color-accent-text); font-size: 12px; font-weight: var(--weight-bold); line-height: 18px; text-align: center; }
.vprasalnik li { color: var(--color-text-muted); }
.dva-stolpca { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.cipi { display: flex; flex-wrap: wrap; gap: 6px; }
.cip { display: inline-flex; padding: 7px 13px; font-size: 14px; font-weight: var(--weight-medium); line-height: 1.2; border: var(--stroke); border-radius: var(--radius-pill); color: var(--color-text); background: var(--color-surface); transition: background var(--dur-fast), color var(--dur-fast); }
.cip:hover { background: var(--color-text); color: var(--color-bg); text-decoration: none; }

.potek { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.potek li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--space-4) var(--space-4) var(--space-3) 0; border-top: var(--stroke-heavy); line-height: 1.35; font-size: 15px; }
.potek li::after { content: ""; position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }

/* --- Kako delamo --- */
.koraki { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); counter-reset: korak; }
.koraki li { position: relative; padding: var(--space-6); border: var(--stroke); border-radius: 18px; background: var(--color-canvas); display: flex; flex-direction: column; gap: var(--space-3); }
.koraki .st { font-size: var(--text-h2); letter-spacing: var(--tracking-tight); font-weight: var(--weight-regular); line-height: 1; }
.koraki h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); }
.koraki p { color: var(--color-text-muted); line-height: 1.5; }
.trajanje { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); }
.trajanje-karta { padding: var(--space-6); border: var(--stroke); border-radius: 18px; background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-3); }
.trajanje-trak { height: 10px; border-radius: 10px; background: var(--color-canvas); overflow: hidden; margin-bottom: var(--space-4); }
.trajanje-trak span { display: block; height: 100%; width: var(--dolzina); background: var(--color-accent); border-radius: 10px; transform-origin: left; }
.razkrij .trajanje-trak span { transform: scaleX(0); transition: transform 900ms var(--ease-out) 200ms; }
.razkrij.vidno .trajanje-trak span { transform: none; }
.trajanje-karta h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); }
.trajanje-karta p { color: var(--color-text-muted); line-height: 1.5; }
.zaveze { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
.zaveze-da .kljukice { gap: var(--space-4); font-size: var(--text-lead); }
.zaveze-ne { padding: var(--space-6); border-radius: 18px; background: var(--color-canvas); border: var(--stroke); }
.zaveze-ne h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); margin-bottom: var(--space-5); }
.priprava { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); margin: 0; }
.priprava div { padding: var(--space-5); border: var(--stroke); border-radius: 14px; background: var(--color-surface); }
.priprava dt { font-weight: var(--weight-medium); display: flex; gap: 10px; align-items: baseline; font-size: var(--text-lg); }
.priprava dd { margin: 8px 0 0; color: var(--color-text-muted); line-height: 1.45; }
.vprasanja { border-top: var(--stroke); }
.vprasanje-odgovor { border-bottom: var(--stroke); }
.vprasanje-odgovor summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: var(--space-4); align-items: center; padding: var(--space-5) 0; font-size: var(--text-lg); font-weight: var(--weight-medium); }
.vprasanje-odgovor summary::-webkit-details-marker { display: none; }
.odgovor-telo { padding: 0 48px var(--space-6) 0; color: var(--color-text-muted); line-height: 1.55; }
.odgovor-telo p { margin: 0 0 .8em; }
.odgovor-naslov { color: var(--color-text); font-weight: var(--weight-medium); }
.odgovor-telo .gumb { margin-top: var(--space-2); }

/* --- Ekipa --- */
.mreza-ekipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--grid-gap); }
.oseba-karta { display: flex; flex-direction: column; color: var(--color-text); border: var(--stroke); border-radius: 18px; overflow: hidden; background: var(--color-canvas); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.oseba-karta:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; color: var(--color-text); }
.oseba-foto { display: block; aspect-ratio: 15 / 16; background: var(--color-canvas); overflow: hidden; }
.oseba-foto img { width: 100%; height: 100%; object-fit: cover; }
.oseba-telo { display: flex; flex-direction: column; gap: 4px; padding: var(--space-5); }
.oseba-telo strong { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.oseba-vloga { color: var(--color-text-muted); font-size: 15px; }
.oseba-moto { margin-top: var(--space-3); font-size: 15px; line-height: 1.4; padding-left: var(--space-3); border-left: var(--border-heavy) solid var(--color-accent); }
.ekipa-trak { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--space-5); }
.oseba { display: flex; flex-direction: column; gap: 4px; color: var(--color-text); }
.oseba img { aspect-ratio: 15 / 16; object-fit: cover; width: 100%; border-radius: 14px; margin-bottom: var(--space-3); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.oseba-foto { display: block; border-radius: 14px; overflow: hidden; margin-bottom: var(--space-3); }
.oseba-foto img { margin-bottom: 0; border-radius: 0; }
.oseba:hover { text-decoration: none; color: var(--color-text); }
.oseba:hover img { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.oseba strong { font-weight: var(--weight-medium); }
.oseba span { color: var(--color-text-muted); font-size: 14px; }
.oseba-stran .uvod h1 { font-size: var(--text-h1); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: 1.05; }
.oseba-stran .uvod .vodilo { margin: var(--space-3) 0 var(--space-stack); }
.oseba-vsebina { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-stack); align-items: start; }
.oseba-vsebina img { border-radius: 18px; }
.oseba-vsebina h2 { font-size: var(--text-h3); font-weight: var(--weight-regular); line-height: 1.3; padding-left: var(--space-4); border-left: var(--border-heavy) solid var(--color-accent); margin-bottom: var(--space-5); }
.oseba-vsebina p { margin: 0 0 1em; line-height: 1.6; }
.povezave { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* --- Poziv (temen pas) in noga --- */
.poziv-pas { background: var(--color-bg); color: var(--color-text); }
.poziv-notranjost { position: relative; max-width: var(--container); margin: 0 auto; padding: var(--space-section) var(--gutter-fluid); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-8); align-items: end; }
.poziv-notranjost h2 { font-size: var(--text-h1); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: 1.05; max-width: 15em; text-wrap: balance; }
.poziv-notranjost .vodilo { margin-top: var(--space-5); }
.poziv-gumbi { display: flex; gap: 10px; flex-wrap: wrap; }
.poziv-vzorec { position: absolute; top: var(--space-8); right: var(--gutter-fluid); display: grid; grid-template-columns: repeat(2, 56px); border-radius: 12px; overflow: hidden; }
.noga { background: var(--color-bg); color: var(--color-text); border-top: var(--stroke); }
.noga-notranjost { max-width: var(--container); margin: 0 auto; padding: var(--space-section-sm) var(--gutter-fluid) var(--space-7); display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr; gap: var(--space-6); }
.noga-stolpec { display: flex; flex-direction: column; gap: 6px; }
.noga-stolpec a { color: var(--color-text); }
.noga-stolpec a:hover { color: var(--color-link); }
.noga-stolpec span { color: var(--color-text-muted); }
.noga-znamka p { color: var(--color-text-muted); max-width: 30em; margin-top: var(--space-4); line-height: 1.5; }
.noga-znamka .znak { color: var(--color-text); }
.noga-email { font-size: var(--text-lg); color: var(--color-link) !important; }
.avtorske { grid-column: 1 / -1; color: var(--color-text-subtle); font-size: var(--text-sm); margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: var(--stroke); }

/* =================================================================
   Stran primera
   ================================================================= */
.primer { --siroko: 1200px; padding-bottom: var(--space-section); }
.primer-glava, .primer-naslovna, .primer-telo, .naslednji { max-width: var(--siroko); margin-left: auto; margin-right: auto; padding-left: var(--gutter-fluid); padding-right: var(--gutter-fluid); }
.primer-glava { padding-top: var(--space-7); }
.drobtine { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-section-sm); }
.drobtine a { color: var(--color-text-muted); }
.oseba-stran .drobtine { margin-bottom: var(--space-6); }
.primer-uvod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: end; }
.primer-uvod h1 { font-size: clamp(2.5rem, 3.4vw + 1.2rem, 4.75rem); font-weight: var(--weight-regular); line-height: 1.03; letter-spacing: var(--tracking-tight); text-wrap: balance; max-width: 14em; }
.primer-uvod .vodilo { margin-top: var(--space-5); }
.grozd { display: grid; grid-template-columns: repeat(2, 76px); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); }
.primer-podatki { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8); margin: var(--space-8) 0 0; padding: var(--space-5) 0; border-top: var(--stroke); border-bottom: var(--stroke); }
.primer-podatki dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.primer-podatki dd { margin: 2px 0 0; font-weight: var(--weight-medium); font-size: var(--text-lg); }

.okvir { display: block; border: var(--stroke); border-radius: 18px; overflow: hidden; background: var(--color-canvas); }
.primer-naslovna { margin-top: var(--space-stack); margin-bottom: 0; }
.primer-naslovna img { width: 100%; aspect-ratio: 21 / 9; object-fit: contain; }

.primer-telo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-section-sm); }
.kazalo { position: sticky; top: calc(var(--header-h-lg) + var(--space-6)); align-self: start; }
.kazalo ol { list-style: none; padding: 0; margin: 0; border-left: var(--stroke); }
.kazalo a { display: flex; gap: 10px; padding: 8px 0 8px 16px; color: var(--color-text-muted); margin-left: -1px; border-left: 3px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
.kazalo a span { font-variant-numeric: tabular-nums; color: var(--color-text-subtle); }
.kazalo a:hover { color: var(--color-text); text-decoration: none; }
.kazalo a.aktivno { color: var(--color-text); border-left-color: var(--color-accent); font-weight: var(--weight-medium); }
.primer-telo:not(:has(.kazalo)) { grid-template-columns: minmax(0, 1fr); }

.primer-vsebina { min-width: 0; }
.ozko { max-width: 720px; }
.blok { margin: 0 0 var(--space-stack); }
.blok-uvod { font-size: clamp(1.25rem, 0.8vw + 1rem, 1.6rem); line-height: 1.45; }
.blok-uvod p { margin: 0 0 .8em; }
.blok-naslov { font-size: var(--text-h2); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: 1.1; margin-top: var(--space-section-sm); scroll-margin-top: calc(var(--header-h-lg) + var(--space-5)); }
.blok-naslov .nadnaslov { margin-bottom: var(--space-2); }
.blok-besedilo { font-size: var(--text-lead); line-height: 1.6; }
.blok-besedilo p { margin: 0 0 1em; }
.slika { margin: 0; }
.slika img { width: 100%; }
figcaption { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-3); max-width: var(--measure); }

.galerija { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); }
.galerija button { padding: 0; cursor: zoom-in; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.galerija button:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.galerija img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.blok-galerija { margin-left: 0; margin-right: 0; }
.galerija-cele img { aspect-ratio: 1; object-fit: contain; background: #ffffff; }
.galerija-siroke { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.galerija-siroke img { aspect-ratio: var(--razmerje); }
dialog.povecava { border: var(--stroke); border-radius: 18px; padding: 0; max-width: min(1400px, 94vw); max-height: 92vh; background: var(--color-surface); box-shadow: var(--shadow-lg); }
dialog.povecava::backdrop { background: rgba(26, 26, 26, .82); }
dialog.povecava img { max-height: 92vh; width: auto; }
dialog.povecava .zapri { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: var(--stroke); background: var(--color-surface); font-size: 26px; line-height: 1; cursor: pointer; }

.blok-video { margin-left: 0; margin-right: 0; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: var(--shadow-lg); }
.video img, .video video, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video video { object-fit: contain; background: #000; }
.predvajaj { position: absolute; inset: 0; border: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); color: #fff; }
.predvajaj span { width: 96px; height: 96px; border-radius: 50%; background: var(--dz-azure); color: var(--dz-ink); display: grid; place-items: center; box-shadow: var(--shadow-accent); transition: transform var(--dur-base) var(--ease-standard); }
.predvajaj:hover span { transform: scale(1.06); }
.predvajaj svg { width: 34px; height: 34px; fill: currentColor; margin-left: 5px; }
.predvajaj em { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-5); font-style: normal; font-size: var(--text-lg); font-weight: var(--weight-medium); text-align: left; }

.blok-citat { margin-left: 0; padding-left: var(--space-6); border-left: var(--border-heavy) solid var(--color-accent); }
.blok-citat p { font-size: var(--text-h3); line-height: 1.3; margin: 0 0 var(--space-3); }
.blok-citat cite { font-style: normal; color: var(--color-text-muted); }

.blok-stevilke { background: var(--color-surface); border: var(--stroke); border-radius: 18px; padding: var(--space-stack); box-shadow: var(--shadow-sm); }
.blok-stevilke dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-6); margin: 0; }
.blok-stevilke dl > div { border-top: var(--stroke-heavy); padding-top: var(--space-4); }
.blok-stevilke dt { font-size: var(--text-h1); line-height: 1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.blok-stevilke dd { margin: var(--space-3) 0 0; color: var(--color-text-muted); }

.blok-graf h3, .blok-stebri h3, .blok-primerjava h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); margin-bottom: var(--space-5); }
.blok-graf ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.blok-graf li { display: grid; grid-template-columns: 160px minmax(0, 1fr) 110px; gap: var(--space-4); align-items: center; }
.graf-oznaka { font-weight: var(--weight-medium); }
.graf-oznaka small { display: block; font-weight: var(--weight-regular); color: var(--color-text-muted); font-size: var(--text-sm); }
.graf-tir { height: 44px; border: var(--stroke); border-radius: 8px; overflow: hidden; background: var(--color-surface); }
.graf-stolpec { display: block; height: 100%; width: var(--delez); transform-origin: left; }
.graf-vrednost { font-size: var(--text-h3); text-align: right; font-variant-numeric: tabular-nums; }
.barva-0 { background: var(--dz-indigo); } .barva-1 { background: var(--dz-pink); } .barva-2 { background: var(--dz-yellow); }
.barva-3 { background: var(--dz-sky); } .barva-4 { background: var(--dz-rust); }
.blok-graf .tiho { margin-top: var(--space-4); font-size: var(--text-sm); }

.blok-stebri ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--grid-gap); }
.blok-stebri li { position: relative; background: var(--color-surface); border: var(--stroke); border-radius: 18px; padding: var(--space-5); padding-top: 64px; box-shadow: var(--shadow-sm); overflow: hidden; }
.blok-stebri li .nadnaslov { position: absolute; top: var(--space-5); left: var(--space-5); }
.blok-stebri h4 { font-size: var(--text-lg); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.blok-stebri p { margin: 0; color: var(--color-text-muted); }

.preklop { display: inline-flex; border: var(--stroke-strong); border-radius: var(--radius-pill); padding: 4px; gap: 4px; margin-bottom: var(--space-5); background: var(--color-surface); flex-wrap: wrap; }
.preklop button { border: 0; background: none; border-radius: var(--radius-pill); padding: 10px 18px; font-weight: var(--weight-medium); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.preklop button[aria-selected="true"] { background: var(--color-text); color: var(--color-bg); }
.preklop button[data-stran="desno"][aria-selected="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.primerjava-plosci { position: relative; }
.plosca { list-style: none; margin: 0; padding: var(--space-stack); border: var(--stroke); border-radius: var(--radius-lg); display: grid; gap: var(--space-4); }
.plosca li { font-size: var(--text-h3); line-height: 1.25; padding-left: 44px; position: relative; }
.plosca li::before { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: var(--weight-bold); }
.plosca-levo { background: var(--color-canvas); }
.plosca-levo li { color: var(--color-text-muted); }
.plosca-levo li::before { content: "×"; border: var(--stroke-strong); color: var(--color-text); }
.plosca-desno { background: var(--dz-azure); color: var(--dz-ink); border-color: transparent; box-shadow: var(--shadow-md); }
.plosca-desno li::before { content: "✓"; background: var(--dz-ink); color: var(--dz-azure); }
.plosca.prihaja { animation: brisanje var(--dur-slower) var(--ease-in-out) both; }
@keyframes brisanje { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Zavihki v primerih: podčrtani zavihki (Design System: Tabs, underline), vsebina brez okvirja, številka koraka. */
.blok-zavihki h3 { margin-bottom: var(--space-5); }
.zavihki-gumbi {
  display: flex; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  border-bottom: var(--border-bold) solid var(--color-border); margin-bottom: var(--space-7);
}
.zavihki-gumbi::-webkit-scrollbar { display: none; }
.zavihki-gumbi.vec-desno { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
.zavihki-gumbi.vec-levo { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px); mask-image: linear-gradient(to right, transparent, #000 64px); }
.zavihki-gumbi.vec-levo.vec-desno { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.zavihki-gumbi button {
  position: relative; flex: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 12px 0 14px; font-weight: var(--weight-medium); color: var(--color-text-muted); transition: color var(--dur-fast);
}
.zavihki-gumbi button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--border-bold)); height: 3px; background: var(--color-text);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out);
}
.zavihki-gumbi button:hover { color: var(--color-text); }
.zavihki-gumbi button[aria-selected="true"] { color: var(--color-text); }
.zavihki-gumbi button[aria-selected="true"]::after { transform: scaleX(1); }
.zavihki-gumbi button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.zavihek-plosca { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-6); align-items: start; min-height: 8.5rem; }
.zavihek-plosca.prihaja { animation: kviz-gor var(--dur-slow) var(--ease-out) both; }
.zavihek-st { font-size: clamp(48px, 4vw, 72px); line-height: .85; letter-spacing: -0.04em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.zavihek-st span { display: block; margin-top: 10px; font-size: 14px; letter-spacing: 0; color: var(--color-text-subtle); }
.zavihek-poudarek { font-size: var(--text-h3); line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 var(--space-4); max-width: 30em; text-wrap: pretty; }
.zavihek-besedilo p { margin: 0 0 .8em; font-size: var(--text-lead); line-height: 1.55; color: var(--color-text-muted); max-width: var(--measure); }
.zavihek-besedilo p:last-child { margin-bottom: 0; }
.zavihki-nav { display: flex; justify-content: space-between; margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--stroke); }
.zavihki-nav button { border: 0; background: none; padding: 4px 0; font-weight: var(--weight-medium); color: var(--color-text); cursor: pointer; transition: color var(--dur-fast), opacity var(--dur-fast); }
.zavihki-nav button:hover:not(:disabled) { color: var(--color-link); }
.zavihki-nav button:disabled { opacity: .3; cursor: default; }

.blok-matrika > .tiho { margin: 0 0 var(--space-6); }
.blok-matrika dl { margin: 0; border-top: var(--stroke); }
.matrika-vrsta { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-3) var(--space-5); padding: var(--space-4) 0; border-bottom: var(--stroke); }
.matrika-vrsta dt { font-weight: var(--weight-medium); }
.matrika-vrsta dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.oznaka { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: 6px 12px; font-size: 14px; line-height: 1; border: var(--stroke); color: var(--color-text-subtle); }
.oznaka.izbrana { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }


.naslednji { padding-top: var(--space-section-sm); max-width: 560px; margin-left: max(var(--gutter-fluid), calc((100% - var(--siroko)) / 2 + var(--gutter-fluid))); }

/* =================================================================
   Kontakt in obrazec
   ================================================================= */
.kontakt-stran { max-width: var(--container); margin: 0 auto; padding: var(--space-section-sm) var(--gutter-fluid) var(--space-section); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-section-sm); align-items: start; }
.kontakt-uvod h1 { font-size: var(--text-h1); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: 1.05; margin-bottom: var(--space-4); }
.kontakt-podatki { margin: var(--space-7) 0; display: grid; gap: var(--space-5); }
.kontakt-podatki dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.kontakt-podatki dd { margin: 4px 0 0; font-size: var(--text-lg); }
.kontakt-uvod .grozd { width: max-content; }
.kontakt-obrazec { background: var(--color-surface); border: var(--stroke); border-radius: 18px; box-shadow: var(--shadow-md); padding: var(--space-stack); }
.obrazec { display: grid; gap: var(--space-4); }
.polje { display: grid; gap: 6px; }
.polje span { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.polje input, .polje textarea {
  width: 100%; font: inherit; color: var(--color-text); background: var(--color-surface); border: var(--stroke-strong); border-radius: var(--radius-md);
  padding: 12px 14px; transition: box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast);
}
.polje textarea { resize: vertical; min-height: 140px; }
.polje input:focus, .polje textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.skrito-polje { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.obrazec-opomba { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.obrazec .gumb { justify-self: start; }
.obrazec-napaka { margin: 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-danger-soft); color: var(--color-danger); font-weight: var(--weight-medium); }
.obrazec-hvala h2 { font-size: var(--text-h2); font-weight: var(--weight-regular); margin-bottom: var(--space-3); }

/* --- Razkritje ob drsenju (Design System: Reveal, 16 px, 480 ms, enkrat) --- */
.razkrij { opacity: 0; transform: translateY(var(--motion-shift-md)); transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out); transition-delay: var(--zamik, 0ms); }
.razkrij.vidno { opacity: 1; transform: none; }
.graf-stolpec { transform: scaleX(0); transition: transform 900ms var(--ease-out); }
.blok-graf.vidno .graf-stolpec { transform: scaleX(1); }
.blok-graf.vidno li:nth-child(2) .graf-stolpec { transition-delay: 120ms; }
.blok-graf.vidno li:nth-child(3) .graf-stolpec { transition-delay: 240ms; }
.blok-graf.vidno li:nth-child(4) .graf-stolpec { transition-delay: 360ms; }

/* --- Odzivnost --- */
@media (max-width: 1180px) {
  .meni { gap: var(--space-4); }
  .meni > a { font-size: 15px; }
}
@media (max-width: 1080px) {
  .burger { display: block; }
  .jezik-gumb { display: none; }
  .glava-gumbi { margin-left: auto; }
  .meni {
    position: fixed; left: 0; right: 0; top: var(--header-h-lg); bottom: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-5) var(--gutter-fluid) var(--space-8); background: var(--dz-indigo); overflow-y: auto;
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .meni.odprt { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--dur-slow) var(--ease-out), visibility 0s; }
  .meni > a { font-size: clamp(24px, 5vw, 32px); font-weight: var(--weight-regular); padding: var(--space-4) 0; border-bottom: var(--border-hair) solid rgba(255, 255, 255, .2); display: flex; justify-content: space-between; }
  .meni > a::after { display: none; }
  .meni > a::before { content: "→"; order: 2; opacity: .6; }
  .meni > a[aria-current="page"] { color: var(--dz-azure); }
  .meni-dodatno { display: flex; gap: var(--space-5); margin-top: var(--space-6); }
  .meni-dodatno a { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
  body.meni-odprt { overflow: hidden; }
  .primer-telo { grid-template-columns: minmax(0, 1fr); }
  .kazalo { display: none; }
  .filter-primerov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-primerov .iskalnik { grid-column: 1 / -1; }
  .izbirnik-filtra select { width: 100%; max-width: none; }
  .izbirnik { grid-template-columns: 1fr; }
  .izbirnik-plosca { position: static; }
  .raven-plosca { grid-template-columns: 1fr; gap: var(--space-6); }
  .raven-uvod { position: static; }
  .noga-notranjost { grid-template-columns: 1fr 1fr; }
  .noga-znamka { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .glava { height: var(--header-h); gap: 8px; padding: 0 12px; }
  .meni { top: var(--header-h); }
  .znak svg { height: 26px; }
  .glava-gumbi { gap: 6px; }
  .nacin a { padding: 6px 8px; font-size: 13px; }
  .burger { width: 40px; height: 40px; }
  .burger span { left: 11px; right: 11px; }
  .burger span:nth-child(1) { top: 13px; } .burger span:nth-child(2) { top: 19px; } .burger span:nth-child(3) { top: 25px; }
  .junak-notranjost { grid-template-columns: 1fr; }
  .junak-vzorec { grid-row: 1; justify-self: start; grid-template-columns: repeat(3, 44px); border-radius: 10px; }
  .junak-vzorec .ploscica:nth-child(n + 4) { display: none; }
  .junak-vzorec-mali { grid-template-columns: repeat(2, 40px); }
  .junak-vzorec-mali .ploscica:nth-child(n + 3) { display: none; }
  .glava-razdelka { flex-direction: column; align-items: flex-start; }
  .pozicija { grid-template-columns: 1fr; }
  .pozicija .nadnaslov { grid-row: auto; margin: 0; }
  .zavihki-ravni { grid-template-columns: 1fr 1fr; }
  .zavihek-plosca { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-height: 0; }
  .zavihek-st { font-size: 40px; display: flex; align-items: baseline; gap: 8px; }
  .zavihek-st span { display: inline; margin: 0; }
  .zavihki-gumbi { margin-right: calc(-1 * var(--gutter-fluid)); padding-right: var(--gutter-fluid); }
  .izbirnik-filtra select { padding: 14px 38px 14px 16px; font-size: 15px; }
  .izbirnik-filtra::after { right: 16px; }
  .kviz-oder { min-height: 0; padding: var(--space-6) var(--space-5); }
  .kviz-korak { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "levo" "desno" "nav"; }
  .kviz-levo { margin-bottom: var(--space-5); }
  .kviz-st { margin-bottom: var(--space-3); }
  .kviz-st span { font-size: 48px; }
  .kviz-nav { padding-top: var(--space-5); justify-content: space-between; }
  .kviz-ime small { display: none; }
  .kviz-moznost { padding: 14px 2px; }
  .kviz-korak-siroko { grid-template-columns: minmax(0, 1fr); grid-template-areas: "levo" "desno" "nav"; }
  .kviz-korak-siroko .kviz-levo { margin-bottom: var(--space-5); }
  .kviz-korak-siroko .kviz-st { display: block; margin-bottom: var(--space-3); }
  .kviz-korak-siroko .kviz-vprasanje { display: block; }
  .kviz-moznosti-vec { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .kviz-moznosti-vec .kviz-moznost { grid-template-columns: minmax(0, 1fr) 22px; gap: 8px; }
  .kviz-moznosti-vec .kviz-ime { font-size: 15px; hyphens: auto; overflow-wrap: anywhere; }
  .kviz-predlog, .kviz-projekt-koraki { grid-template-columns: minmax(0, 1fr); }
  .kviz-gumbi { flex-wrap: wrap; }
  .zaveze { grid-template-columns: 1fr; gap: var(--space-6); }
  .primer-uvod { grid-template-columns: 1fr; }
  .primer-uvod .grozd { display: none; }
  .primer-naslovna img { aspect-ratio: 5 / 3; }
  .blok-graf li { grid-template-columns: 1fr auto; }
  .graf-tir { grid-column: 1 / -1; grid-row: 2; height: 32px; }
  .matrika-vrsta { grid-template-columns: 1fr; }
  .poziv-notranjost { grid-template-columns: 1fr; }
  .poziv-vzorec { display: none; }
  .noga-notranjost { grid-template-columns: 1fr; }
  .manifest-mreza { grid-template-columns: minmax(0, 1fr); }
  .manifest-vzorec { grid-row: 1; }
  .naloge-vrtiljak, .naloge-sklep { font-size: var(--text-h3); }
  .preizkus { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
  .sestavine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nacelo-primerjava { grid-template-columns: minmax(0, 1fr); }
  .nacelo-clanek { padding: var(--space-5); border-radius: 18px; }
  .oseba-vsebina { grid-template-columns: 1fr; }
  .odgovor-telo { padding-right: 0; }
  .predvajaj span { width: 72px; height: 72px; }
  .predvajaj em { font-size: var(--text-base); }
  .kontakt-stran { grid-template-columns: 1fr; }
  .kontakt-uvod .grozd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .razkrij { opacity: 1; transform: none; }
  .graf-stolpec, .razkrij .trajanje-trak span { transform: none; }
  .junak-vzorec .ploscica { animation: none; opacity: 1; transform: none; }
  .vstop-naprej *, .vstop-nazaj *, .kviz-izid > * { animation: none !important; }
}

/* Dobra komunikacija: kazalo načel le na širokih zaslonih, sestavine v enem stolpcu na ozkih. */
@media (min-width: 768px) and (max-width: 1079px) {
  .preizkus { grid-template-columns: minmax(0, 1fr); }
  .sestavine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .nacela-postavitev { grid-template-columns: minmax(0, 1fr); }
  .nacela-kazalo { display: none; }
}
@media (max-width: 520px) {
  .sestavine { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================================================
   Gibanje iz Design Systema (components/motion): SplitText, MaskReveal, Parallax, Marquee, Magnetic,
   ScrollProgress, HorizontalScroll, StickyStack. Logika je v gibanje.js, prehod med stranmi v skupno/zastor.*.
   ===================================================================================================== */
.split-enota { display: inline-block; vertical-align: top; }
.split-enota.maska { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.split-notranja { display: inline-block; transform-origin: 0 100%; }
.split-beseda { display: inline-block; white-space: nowrap; }
[data-maska] { overflow: hidden; }
.maska-okno { height: 100%; }
.maska-notranja, .paralaksa-notranja { height: 100%; will-change: transform; }
.magnet { display: inline-block; }
.magnet > * { will-change: transform; }

.napredek { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.napredek span { display: block; height: 100%; background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(0); }


/* Marquee */
[data-trak] { overflow: hidden; }
.trak-proga { display: flex; width: max-content; will-change: transform; }
.trak-vsebina { display: flex; align-items: center; gap: var(--trak-razmik, 40px); padding-right: var(--trak-razmik, 40px); flex-shrink: 0; }

/* HorizontalScroll: brez JS (ali z zmanjšanim gibanjem) je to vrstica za podrsavanje. */
.vodoravno { background: var(--color-bg); color: var(--color-text); padding: var(--space-section) 0; }
.vodoravno-pripeto { display: flex; flex-direction: column; justify-content: center; gap: var(--space-7); }
.vodoravno-uvod { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding-inline: var(--gutter-fluid); max-width: calc(var(--container) + 2 * var(--gutter-fluid)); width: 100%; margin: 0 auto; }
.vodoravno-uvod h2 { font-size: clamp(36px, 5vw, 72px); font-weight: var(--weight-regular); letter-spacing: -0.03em; line-height: 1; }
.vodoravno-proga { display: flex; gap: 28px; padding-inline: var(--gutter-fluid); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vodoravno-proga::-webkit-scrollbar { display: none; }
.vodoravno-napredek { height: 2px; margin-inline: var(--gutter-fluid); background: var(--color-border); border-radius: 2px; overflow: hidden; }
.vodoravno-napredek span { display: block; height: 100%; background: var(--color-text); transform-origin: 0 50%; transform: scaleX(0); }
.vodoravno.pripni { position: relative; padding: 0; }
.vodoravno.pripni .vodoravno-pripeto { position: sticky; top: var(--header-h-lg); height: calc(100vh - var(--header-h-lg)); height: calc(100svh - var(--header-h-lg)); overflow: hidden; }
.vodoravno.pripni .vodoravno-proga { width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; }
.vodoravno:not(.pripni) .vodoravno-napredek { display: none; }
.vodoravno-karta { flex-shrink: 0; width: clamp(280px, 34vw, 460px); color: var(--color-text); scroll-snap-align: start; }
.vodoravno-karta:hover { color: var(--color-text); text-decoration: none; }
.vodoravno-slika { display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; }
.vodoravno-slika img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slower) var(--ease-expo); }
.vodoravno-karta:hover .vodoravno-slika img { transform: scale(1.04); }
.vodoravno-podatki { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: 18px; }
.vodoravno-narocnik { display: block; margin-bottom: 6px; font-size: 13px; color: var(--color-text-subtle); }
.vodoravno-naslov { display: block; font-size: 22px; line-height: 1.25; }
.vodoravno-st { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-subtle); }
.vodoravno-vsi { flex-shrink: 0; align-self: center; display: grid; place-items: center; width: clamp(180px, 20vw, 240px); aspect-ratio: 1; border-radius: 50%; background: var(--dz-azure); color: var(--dz-ink); font-size: 20px; font-weight: var(--weight-medium); text-align: center; transition: transform var(--dur-base) var(--ease-standard); }
.vodoravno-vsi:hover { color: var(--dz-ink); text-decoration: none; transform: scale(1.04); }

/* StickyStack */
.sklad { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 40px; }
.sklad > li { position: sticky; top: calc(var(--header-h-lg) + var(--space-5) + var(--i, 0) * 18px); }
.sklad-karta {
  display: grid; align-content: end; gap: var(--space-4); min-height: clamp(300px, 52vh, 440px); padding: clamp(28px, 4vw, 56px);
  border-radius: 24px; box-shadow: var(--shadow-lg); transform-origin: 50% 0; will-change: transform; text-decoration: none;
}
.sklad-karta:hover { text-decoration: none; }
.sklad-1 { background: var(--dz-indigo); color: #ffffff; }
.sklad-2 { background: var(--dz-azure); color: var(--dz-ink); }
.sklad-3 { background: var(--dz-yellow); color: var(--dz-ink); }
.sklad-4 { background: var(--dz-ink); color: #ffffff; }
.sklad-karta, .sklad-karta:hover { color: inherit; }
.sklad-1, .sklad-1:hover, .sklad-4, .sklad-4:hover { color: #ffffff; }
.sklad-2, .sklad-2:hover, .sklad-3, .sklad-3:hover { color: var(--dz-ink); }
.sklad-st { align-self: start; margin-bottom: clamp(40px, 8vh, 96px); font-family: var(--font-mono); font-size: 14px; opacity: .8; }
.sklad-ime { font-size: clamp(36px, 5vw, 72px); font-weight: var(--weight-regular); letter-spacing: -0.03em; line-height: 1; }
.sklad-opis { max-width: 32em; font-size: 18px; line-height: 1.5; opacity: .9; }
.sklad-povezava { font-weight: var(--weight-medium); }
.sklad-karta:hover .sklad-povezava { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================================================
   Naslovnica (ui_kits/website + Motion Lab)
   ===================================================================================================== */
.junak-domov { position: relative; background: var(--color-canvas); border-bottom: var(--stroke); min-height: calc(100svh - var(--header-h-lg)); display: flex; flex-direction: column; justify-content: center; }
.junak-domov-notranjost { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter-fluid)); margin: 0 auto; padding: var(--space-section) var(--gutter-fluid); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.junak-domov h1 { font-size: clamp(44px, 5.6vw, 80px); font-weight: var(--weight-regular); line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 24px; max-width: 13em; text-wrap: balance; }
.junak-domov .vodilo { max-width: 34em; }
.junak-domov-umetnina { position: relative; justify-self: end; width: min(100%, 440px); }
.gruca { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--stroke); border-radius: 14px; overflow: hidden; }
.oblacek-azuren { position: absolute; left: -22px; bottom: -22px; }
.oblacek-azuren span { display: block; padding: 12px 22px 16px; border-radius: 20px; background: var(--dz-azure); color: var(--dz-ink); font-size: 26px; font-weight: var(--weight-medium); line-height: 1; }
.oblacek-azuren svg { position: absolute; left: 26px; bottom: -13px; overflow: visible; }
.oblacek-azuren path { fill: var(--dz-azure); }
.junak-drsite { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--color-text-subtle); }
/* Reveal (play) za junaka: 16 px navzgor oziroma z desne, 640 ms. */
.vstopi { animation: vstop-gor 640ms var(--ease-out) var(--zamik, 0ms) both; }
.vstopi-levo { animation: vstop-levo 640ms var(--ease-out) var(--zamik, 0ms) both; }
@keyframes vstop-gor { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes vstop-levo { from { opacity: 0; transform: translate3d(32px, 0, 0); } }

.trakovi { padding-block: clamp(48px, 7vw, 96px); border-bottom: var(--stroke); overflow: hidden; }
.trak-besede { --trak-razmik: 40px; }
.trak-beseda { font-size: clamp(44px, 7vw, 104px); letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.trak-krog { display: block; width: clamp(40px, 5vw, 72px); flex-shrink: 0; border-radius: 999px; overflow: hidden; }
.trak-ploscice { --trak-razmik: 16px; margin-top: 20px; }
.trak-ploscica { display: block; width: 88px; flex-shrink: 0; border-radius: 12px; overflow: hidden; }

.manifest-domov-izjava { max-width: 18em; font-size: clamp(32px, 4.6vw, 64px); font-weight: var(--weight-regular); line-height: 1.12; letter-spacing: -0.025em; text-wrap: pretty; }
.manifest-domov-vodilo { margin-top: var(--space-6); max-width: 40em; }
.dejstva { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; margin: clamp(48px, 7vw, 96px) 0 0; padding-top: 32px; border-top: var(--stroke); }
.dejstva dt { font-size: clamp(56px, 7vw, 96px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dejstva dd { margin: 12px 0 0; font-size: 16px; color: var(--color-text-muted); }

@media (max-width: 900px) {
  .junak-domov-notranjost { grid-template-columns: minmax(0, 1fr); }
  .junak-domov-umetnina { justify-self: start; width: min(100%, 320px); margin-left: 22px; }
}
@media (max-width: 767px) {
  .junak-drsite { display: none; }
  .sklad > li { top: calc(var(--header-h) + var(--space-4) + var(--i, 0) * 14px); }
  .vodoravno.pripni .vodoravno-pripeto { top: var(--header-h); height: calc(100svh - var(--header-h)); }
}
@media (prefers-reduced-motion: reduce) {
  .vstopi, .vstopi-levo { animation: none; }
}

/* --- Moduli: izpostavljen stavek, časovnica, drsnik (Design System: SplitText, Slider) --- */
.blok-poudarek { padding-block: var(--space-6); }
.poudarek-izjava { margin: 0; max-width: 20em; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }

.blok-casovnica h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); margin-bottom: var(--space-6); }
.casovnica-okvir { position: relative; }
.casovnica-crta { position: absolute; left: 168px; top: 10px; bottom: 10px; width: 2px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.casovnica-crta span { display: block; height: 100%; background: var(--color-text); transform-origin: 50% 0; transform: scaleY(var(--napredek, 1)); }
.casovnica { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
.casovnica li { display: grid; grid-template-columns: 150px 38px minmax(0, 1fr); align-items: start; }
.casovnica-cas { padding-top: 2px; font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); text-align: right; padding-right: var(--space-3); }
.casovnica-tocka { justify-self: center; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-text); position: relative; z-index: 1; transition: background var(--dur-base) var(--ease-standard); }
.casovnica li.dosezeno .casovnica-tocka { background: var(--color-accent); border-color: var(--color-accent); }
.casovnica-vsebina strong { display: block; font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.3; }
.casovnica-vsebina p { margin: 6px 0 0; color: var(--color-text-muted); max-width: var(--measure); }

.blok-drsnik h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); margin-bottom: var(--space-5); }
.drsnik-proga { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; outline: none; }
.drsnik-proga::-webkit-scrollbar { display: none; }
.drsnik-proga.vlece { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.drsnik-proga:focus-visible { box-shadow: var(--focus-ring); border-radius: 12px; }
.drsnik-diapozitiv { flex: 0 0 clamp(260px, 40vw, 520px); min-width: 0; margin: 0; scroll-snap-align: start; }
.drsnik-diapozitiv img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--color-canvas); -webkit-user-drag: none; }
.drsnik-diapozitiv figcaption { margin-top: 10px; font-size: 14px; color: var(--color-text-muted); }
.drsnik-nadzor { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.drsnik-stevec { min-width: 64px; font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.drsnik-stevec b { font-weight: var(--weight-regular); color: var(--color-text); }
.drsnik-napredek { position: relative; flex: 1; height: 2px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.drsnik-napredek span { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--color-text); border-radius: 2px; }
.drsnik-gumbi { display: flex; gap: 10px; }
.drsnik-gumbi button { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 999px; border: var(--stroke-strong); background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), opacity var(--dur-fast); }
.drsnik-gumbi button:hover:not(:disabled) { background: var(--color-text); color: var(--color-bg); }
.drsnik-gumbi button:disabled { opacity: .35; cursor: default; }
.drsnik-gumbi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) {
  .casovnica-crta { left: 7px; }
  .casovnica li { grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--space-4); }
  .casovnica-cas { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 4px; }
  .casovnica-tocka { grid-column: 1; grid-row: 1 / span 2; }
  .casovnica-vsebina { grid-column: 2; }
  .drsnik-nadzor { gap: 14px; }
}