/* ŠD Gorje - components + motion system (GORJE-018 prototype, 10. 10. 2026)
   Tokens = codex-paket/tokens.css (v1) + the motion block below.
   Motion switch: --gib is 1 (motion on) or 0 (off). --hitrost multiplies every duration (1 = normal, 4 = slow review).
   prefers-reduced-motion and Anže's switch («Ustavi gibanje») both set --gib: 0. */

:root {
  --sneg: #F7F8FA; --bela: #FFFFFF; --led: #EDF4F8; --crta: #CBD1D6; --noc: #1E3444;
  --megla: #586973; --jezero: #126B89; --ivje: #B4C9D0; --napaka: #A32E25; --uspeh: #246E62;
  --gradient-1: #30B5DB; --gradient-2: #76D4C5; --gradient-3: #B9E995;
  --gradient: linear-gradient(120deg, var(--gradient-1), var(--gradient-2) 55%, var(--gradient-3));
  --fokus-temno: #30B5DB;
  --dogodek-tekma: #D6F0F8; --dogodek-nasi: #E4F6F3; --dogodek-drustvo: #E6E8EA;
  --podlaga-okna: rgba(20, 38, 51, .48);

  --f-tekst: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-glas: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;

  --t-xs: 13px; --t-sm: 15px; --t-base: 17px; --t-lg: 19px; --t-xl: 22px; --t-2xl: 26px;
  --t-3xl: 32px; --t-4xl: 40px; --t-4xl-num: 40px; --t-5xl: 52px;
  --t-gumb: 16px; --t-meni: 15px; --t-oznaka: 13px; --t-stevilka: 17px;

  --vsebina-max: 1240px;
  --rob: clamp(20px, 6vw, 100px);
  --med-razdelki: 64px;
  --r-gumb: 999px; --r-polje: 12px; --r-kartica: 24px;
  --senca-kartica: 0 16px 44px -24px rgba(39, 66, 84, .28), 0 2px 8px rgba(39, 66, 84, .04);
  --senca-dvig: 0 22px 48px -22px rgba(39, 66, 84, .42), 0 4px 12px rgba(39, 66, 84, .06);
  --senca-okno: 0 24px 64px -16px rgba(20, 38, 51, .35);
  --glava-h: 64px;

  /* Motion: 3 curves, 6 durations. Exit is always faster than entry. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);        /* everything that appears or answers */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);    /* things that move on screen (rubrike, FLIP) */
  --ease-predal: cubic-bezier(.32, .72, 0, 1);     /* phone menu */
  --cas-pritisk: 120ms;   /* press */
  --cas-odziv: 160ms;     /* hover: arrow, colour, card shadow */
  --cas-stanje: 240ms;    /* tabs, rubrike, month */
  --cas-okno: 260ms;      /* window open (close: --cas-okno-zapri) */
  --cas-okno-zapri: 180ms;
  --cas-meni: 320ms;      /* phone menu open (close: --cas-meni-zapri) */
  --cas-meni-zapri: 220ms;
  --cas-pojav: 420ms;     /* card group appears once */
  --zamik-pojav: 50ms;    /* between cards of one group, max 4 steps */
  --gib: 1;
  --hitrost: 1;
}
@media (min-width: 768px) {
  :root { --t-lg: 20px; --t-xl: 24px; --t-2xl: 32px; --t-3xl: 44px; --med-razdelki: 96px; --glava-h: 88px; }
}
@media (min-width: 1024px) {
  :root { --t-4xl: 60px; --t-4xl-num: 60px; --t-5xl: 96px; --med-razdelki: 96px; }
}
@media (prefers-reduced-motion: reduce) { :root { --gib: 0; } }
html[data-gibanje="ne"] { --gib: 0; }

/* duration helper: calc(var(--cas-x) * var(--k)) */
* { --k: calc(var(--hitrost) * var(--gib)); }

/* ---------- base ---------- */
.gorje, .gorje * { box-sizing: border-box; }
.gorje { font-family: var(--f-tekst); color: var(--noc); background: var(--sneg); font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.gorje :where(h1, h2, h3, h4, p) { margin: 0; }
.gorje :where(a) { color: inherit; text-decoration: none; }
.gorje :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.gorje :where(img) { display: block; max-width: 100%; }
.gorje :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--jezero); outline-offset: 3px; border-radius: 6px; }
.gorje .temno :where(a, button):focus-visible { outline-color: var(--fokus-temno); }
.vsebina { width: 100%; max-width: calc(var(--vsebina-max) + 2 * var(--rob)); margin-inline: auto; padding-inline: var(--rob); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-xs { font-size: var(--t-xs); line-height: 1.45; font-weight: 500; }
.t-sm { font-size: var(--t-sm); line-height: 1.5; }
.t-lg { font-size: var(--t-lg); line-height: 1.5; }
.t-xl { font-size: var(--t-xl); line-height: 1.25; letter-spacing: -.03em; font-weight: 600; }
.t-2xl { font-size: var(--t-2xl); line-height: 1.2; letter-spacing: -.03em; font-weight: 600; }
.t-3xl { font-size: var(--t-3xl); line-height: 1.1; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; }
.t-4xl { font-size: var(--t-4xl); line-height: 1.05; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; }
.t-5xl { font-family: var(--f-glas); font-size: var(--t-5xl); line-height: .95; letter-spacing: -.01em; font-weight: 700; text-wrap: balance; }
.stevilka { font-family: var(--f-glas); font-size: var(--t-stevilka); font-weight: 600; font-variant-numeric: tabular-nums; }
.oznaka { font-size: var(--t-oznaka); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.megla { color: var(--megla); }

/* ---------- arrow (one symbol, four directions) ---------- */
.pu { width: 18px; height: 18px; flex: none; display: block; }
.pu-24 { width: 24px; height: 24px; }

/* ---------- buttons: glavni, drugotni, povezava ---------- */
.gumb { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 48px; padding: 0 24px; border-radius: var(--r-gumb); font-size: var(--t-gumb); font-weight: 600; line-height: 1; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: scale calc(var(--cas-pritisk) * var(--k)) var(--ease-out), background-position calc(var(--cas-odziv) * 2 * var(--k)) var(--ease-out), background-color calc(var(--cas-odziv) * var(--k)) ease, color calc(var(--cas-odziv) * var(--k)) ease; }
.gumb .ravnovesje { width: 18px; height: 18px; flex: none; }
.gumb > span:not(.ravnovesje) { padding-inline: 6px; }
.gumb--glavni { background-image: linear-gradient(120deg, var(--gradient-1), var(--gradient-2) 40%, var(--gradient-3) 70%, var(--gradient-2)); background-size: 150% 100%; background-position: 0% 50%; color: var(--noc); }
.gumb--drugotni { box-shadow: inset 0 0 0 1.5px var(--noc); color: var(--noc); }
.temno .gumb--drugotni, .gumb--drugotni.na-temnem { box-shadow: inset 0 0 0 1.5px var(--bela); color: var(--bela); }
.gumb--majhen { height: 40px; padding: 0 12px; }
.gumb:active, .gumb.je-pritisk { scale: calc(1 - .03 * var(--gib)); }
@media (hover: hover) and (pointer: fine) {
  .gumb--glavni:hover, .gumb--glavni.je-lebdenje { background-position: 60% 50%; }
  .gumb--drugotni:hover, .gumb--drugotni.je-lebdenje { background-color: rgba(30, 52, 68, .06); }
  .temno .gumb--drugotni:hover, .temno .gumb--drugotni.je-lebdenje { background-color: rgba(255, 255, 255, .1); }
}

.povezava { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t-sm); font-weight: 600; color: var(--noc); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color calc(var(--cas-odziv) * var(--k)) ease, color calc(var(--cas-odziv) * var(--k)) ease; }
.temno .povezava { color: var(--bela); }
.povezava .pu, .vrstica-sport .pu, .kartica-sport .pu { transition: translate calc(var(--cas-odziv) * var(--k)) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .povezava:hover, .povezava.je-lebdenje { text-decoration-color: currentColor; }
  .povezava:hover .pu, .povezava.je-lebdenje .pu,
  .vrstica-sport:hover .pu, .vrstica-sport.je-lebdenje .pu { translate: calc(3px * var(--gib)) 0; }
  .kartica-sport:hover .pu, .kartica-sport.je-lebdenje .pu { translate: calc(2px * var(--gib)) calc(-2px * var(--gib)); }
}

/* ---------- cards: one hover (shadow), one press ---------- */
.kartica { position: relative; background: var(--bela); border-radius: var(--r-kartica); box-shadow: var(--senca-kartica); overflow: hidden; isolation: isolate;
  transition: scale calc(var(--cas-pritisk) * var(--k)) var(--ease-out); }
.kartica::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--senca-dvig); opacity: 0; pointer-events: none; z-index: -1;
  transition: opacity calc(var(--cas-odziv) * 1.4 * var(--k)) ease; }
.kartica--klik:has(.razteg:active), button.kartica--klik:active, .kartica--klik.je-pritisk { scale: calc(1 - .012 * var(--gib)); }
@media (hover: hover) and (pointer: fine) {
  .kartica--klik:hover::after, .kartica--klik.je-lebdenje::after { opacity: 1; }
  .kartica--klik:hover .razteg, .kartica--klik.je-lebdenje .razteg { text-decoration-color: currentColor; }
}
.razteg { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color calc(var(--cas-odziv) * var(--k)) ease; }
.razteg::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- header ---------- */
.glava { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bela); border-bottom: 1px solid transparent; transition: border-color calc(var(--cas-odziv) * var(--k)) ease; }
.glava.je-pomaknjena { border-bottom-color: var(--crta); }
.glava .vsebina { height: var(--glava-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: block; width: 135px; height: auto; }
@media (min-width: 768px) { .logo { width: 184px; } }
.glava-meni { display: none; gap: 32px; }
.glava-meni a { font-size: var(--t-meni); font-weight: 600; padding: 8px 0 6px; border-bottom: 2px solid transparent; transition: color calc(var(--cas-odziv) * var(--k)) ease, border-color calc(var(--cas-odziv) * var(--k)) ease; }
@media (hover: hover) and (pointer: fine) { .glava-meni a:hover { color: var(--jezero); } }
.glava-desno { display: flex; align-items: center; gap: 8px; }
.meni-gumb { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; font-size: var(--t-meni); font-weight: 600; }
@media (min-width: 1024px) { .glava-meni { display: flex; } .meni-gumb { display: none; } }
@media (max-width: 389px) { .glava .vsebina { gap: 12px; } .glava-desno { gap: 4px; } .meni-gumb { padding: 0 4px; } } /* 375 px phones: header fits */

/* ---------- phone menu (full screen, opaque) ---------- */
.meni { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); border: 0; background: var(--bela); color: var(--noc); overflow-y: auto; }
.meni::backdrop { background: transparent; }
.meni-vrh { height: 64px; display: flex; align-items: center; justify-content: space-between; padding-inline: 20px; }
.meni-povezave { list-style: none; margin: 0; padding: 16px 20px; }
.meni-povezave a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; border-bottom: 1px solid var(--led); }
.meni-povezave a[aria-current] { color: var(--jezero); }
.meni-spodaj { display: grid; gap: 16px; padding: 24px 20px; justify-items: start; }

/* ---------- window ---------- */
.okno { width: min(560px, calc(100vw - 32px)); padding: 32px; border: 0; border-radius: var(--r-kartica); background: var(--bela); color: var(--noc); box-shadow: var(--senca-okno); }
.okno::backdrop { background: var(--podlaga-okna); }
.okno-vrh { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.zapri { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-meni); font-weight: 600; flex: none; }
.okno-gumbi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 480px) { .okno { padding: 24px; } }

/* ---------- appear once (JS adds .caka only below the fold) ---------- */
[data-pojav] > * { transition: opacity calc(var(--cas-pojav) * var(--k)) var(--ease-out), translate calc(var(--cas-pojav) * var(--k)) var(--ease-out); }
[data-pojav] > .caka { opacity: 0; translate: 0 calc(8px * var(--gib)); }

/* ---------- first screen (once per load) ---------- */
@keyframes prvi { from { opacity: 0; translate: 0 calc(12px * var(--gib)); } }
.prvi-gib > * { animation: prvi calc(560ms * var(--k)) var(--ease-out) both; }
.prvi-gib > :nth-child(2) { animation-delay: calc(70ms * var(--k)); }
.prvi-gib > :nth-child(3) { animation-delay: calc(140ms * var(--k)); }

/* ---------- toast ---------- */
.obvestilo { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 60; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px; background: var(--noc); color: var(--bela); font-size: var(--t-sm); box-shadow: var(--senca-okno);
  transition: opacity calc(200ms * var(--k)) var(--ease-out), translate calc(200ms * var(--k)) var(--ease-out); }
.obvestilo.skrito { opacity: 0; translate: -50% calc(8px * var(--gib)); pointer-events: none; transition-duration: calc(150ms * var(--k)); }

/* ---------- switch «Ustavi gibanje» ---------- */
.stikalo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t-xs); font-weight: 500; color: var(--bela); }
.stikalo-tir { position: relative; width: 36px; height: 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ivje); transition: background-color calc(var(--cas-odziv) * var(--hitrost)) ease; }
.stikalo-tir::after { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ivje); transition: translate calc(var(--cas-odziv) * var(--hitrost)) var(--ease-out), background-color calc(var(--cas-odziv) * var(--hitrost)) ease; }
.stikalo[aria-checked="true"] .stikalo-tir { background: var(--ivje); }
.stikalo[aria-checked="true"] .stikalo-tir::after { translate: 16px 0; background: var(--noc); }

/* ---------- snow (once, footer) ---------- */
.sneg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }