/* Home page styles from design/gibanje/prva-stran.html (GORJE-023/034), without the review panel. */
  html { scroll-padding-top: calc(var(--glava-h-html) + 1rem); background: var(--sneg); }
  html[data-gibanje="da"] { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html, html[data-gibanje="da"] { scroll-behavior: auto; } } /* GORJE-126 */
  body { margin: 0; }
  [hidden] { display: none !important; }

  .razdelek { padding-block: 0 var(--med-razdelki); }
  .razdelek-naslov { display: grid; gap: 0.5rem; margin-bottom: 2rem; }

  /* first screen */
  /* GORJE-034/059: prvi zaslon - gozd in proga proti nam (ilustracija UI, brez Pokljuke), Svizec desno */
  /* GORJE-253: pod živim Svizcem risba iste Pokljuke (svinčnik in akvarel, risba UI 28. 10. 2026, design/prva-253): isti kader kot
     fotografija prej, namesto ljudi v daljavi trenirajo Svizci. Ista velikost 2880 x 1280 in isti izrez za telefon, zato položaji ostanejo. */
  .prvi { position: relative; min-height: 40rem; display: flex; align-items: flex-end; overflow: hidden; color: var(--bela); isolation: isolate; background: #cfe0ee; }
  /* telefon: besedilo zgoraj na temnem gozdu, linearni prehod od zgoraj */
  .prvi::before { content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(30,52,68,.76) 0%, rgba(30,52,68,.7) 42%, rgba(30,52,68,0) 58%); }
  .prvi .vsebina { position: relative; z-index: 2; padding-block: 1.5rem calc(var(--svizec-h) + 0.5rem); align-self: flex-start; }
  .prvi .vsebina { pointer-events: none; }
  .prvi-gib { display: grid; gap: 1.25rem; max-width: 47.5rem; pointer-events: auto; }
  .prvi-gumbi { display: flex; flex-wrap: wrap; gap: 1rem; }
  /* GORJE-273b: video čez ves prvi zaslon - Svizci pridejo iz gozda in odsmučajo desno dol, mimo besedila. Plakat (prva sličica)
     je ozadje odra, zato ga vidi tudi, kdor varčuje s podatki ali ima zmanjšano gibanje (video se takrat ne naloži ali stoji). */
  .prvi { --svizec-w: min(92vw, 25rem); --svizec-h: calc(var(--svizec-w) * 542 / 666); }
  .prvi-svizec { position: absolute; z-index: -1; inset: 0;
    background: url("svizec/svizci-mirno-1920.webp") 75% 100% / cover no-repeat; }  /* GORJE-380d: one still frame of the Kling video until the animation is finished */
  .prvi-svizec video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 75% 100%; }
  /* pavza: Svizec tece brez konca, zato gumb za ustavitev stoji tik ob njem (WCAG 2.2.2) */
  .prvi-pavza { position: absolute; z-index: 3; left: 1rem; bottom: 1rem; width: 3rem; height: 3rem; display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 50%; background: rgba(30,52,68,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--bela); cursor: pointer;
    transition: background-color 160ms ease, scale calc(120ms * var(--gib, 1)) var(--ease-out, ease); -webkit-tap-highlight-color: transparent; }
  .prvi-pavza:active { scale: .94; }
  .prvi-pavza:focus-visible { outline: 3px solid var(--bela); outline-offset: 2px; }
  .prvi-pavza svg { width: 1.125rem; height: 1.125rem; }
  .prvi-pavza .ik-tece { display: none; }
  .prvi-pavza[aria-pressed="true"] .ik-tece { display: block; }
  .prvi-pavza[aria-pressed="true"] .ik-pavza { display: none; }
  @media (hover: hover) and (pointer: fine) { .prvi-pavza:hover { background: rgba(30,52,68,.88); } }
  html[data-gibanje="ne"] .prvi-pavza { display: none; }
  /* telefon in tablica: besedilo zgoraj, Svizec spodaj, tekači na progi vmes */
  .prvi { min-height: 47.5rem; background-position: 92% 100%; }
  /* GORJE-059: telefon - prvi zaslon je visok kot zaslon pod glavo, Svizec dobi prostor pod gumbi in je vedno cel
     (prej je bil prvi zaslon 760 px in je Svizca na telefonu odrezal spodnji rob zaslona) */
  @container (max-width: 47.9375rem) {
    /* GORJE-087: telefon dobi pokončen izrez iste slike (1170 x 1280 iz 2880, 181 KB namesto 663 KB). Izrez x = 0,92 * (2880 - 1170),
       zato je pri istem položaju 92 % 100 % na zaslonu točno isti del slike kot prej */
    .prvi { min-height: calc(100svh - var(--prvi-vrh, var(--glava-h))); flex-direction: column; align-items: stretch; }  /* --prvi-vrh: header + every strip above it, prva.js (Kir 23. 10. 2026) */
    .prvi .vsebina { padding-bottom: 0; align-self: auto; }
    /* telefon: pokončen izrez istega videa (644 x 1072, proga-tel.mp4 prek <source media>), Svizci v spodnji polovici pod besedilom */
    .prvi-svizec { background-image: url("svizec/svizci-mirno-tel.webp"); background-position: 50% 100%; }
    .prvi-svizec video { object-position: 50% 100%; }
    /* drugi gumb lahko pade na svetel sneg: steklena podlaga samo pod gumbom, fotografija drugje ostane ostra */
    .prvi .gumb--drugotni.na-temnem { background: rgba(30,52,68,.42); -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4); }
    /* GORJE-382e (Kir 7. 11.): the phone gets the same drawn Pokljuka race, redrawn by ChatGPT as a tall picture: Triglav and the far forest on
       top, clean snow under them for the text (no veil, dark text), the race at the bottom. GORJE-382g/h (8. 11.): built from the exact pixels of the
       computer picture (382f, nothing redrawn), the race moved down, plain snow of the same field under the forest (design/svizec-382/telefon-382h.png,
       1024 x 1851 = 1 : 1.808, tools/gorje382h/sestavi_visoko.py): the text needs ~39 % of the drawing on tall phones.
       "cover" pinned to the bottom: the drawing is the screen's height or 1.808 x its width, whichever is larger (S), a short screen loses sky on top.
       The snow starts at --tel-sneg of the drawing, so the text starts at --tel-sneg x S - (S - H) + 1rem. */
    /* GORJE-382j (Kir 8. 11.: «как будто ты на дроне поднялся… они не едут на тебя, а едут мимо»): the tall picture is no longer cut and filled in
       the middle - ChatGPT redrew the same approved scene from a higher camera (design/svizec-382/telefon-382j.png, 1024 x 1536 = 1 : 1.5), the coach
       put back as his exact pixels (tools/gorje382j/trener_zamenjaj.py).
       "cover": the drawing is the screen's height or 1.5 x its width (S), pinned to the bottom, 40 % of the cut sides on the left (320 px keeps the
       coach's pole). The big spruces start at 75.2 % of the drawing's width (.5016 S), the text column ends before them (only the button may lie
       over them). Clean snow on the left from 20.5 % to ~61 % (the far Svizci's heads): the text block is ~16rem high, so the first screen is
       at least 42rem (on short screens, Safari with its bars, it goes a little below the window - as the old tall picture did at 175cqw). */
    .prvi { --prvi-h: max(42rem, 150cqw, calc(100svh - var(--prvi-vrh, var(--glava-h)))); min-height: var(--prvi-h);
      --prvi-s: max(150cqw, var(--prvi-h)); --tel-sneg: .205; color: var(--noc); }
    .prvi::before { display: none; }
    .prvi-svizec { background-image: url("svizec/svizci-pokljuka-telefon-j.webp"); background-position: 40% 100%; }  /* 382j: new picture, new name (browsers keep a picture 7 days) */
    .prvi .vsebina { padding-top: calc(var(--prvi-s) * var(--tel-sneg) - (var(--prvi-s) - var(--prvi-h)) + 1rem); }
    .prvi-gib > :not(.prvi-gumbi) { max-width: calc(var(--prvi-s) * .5016 - .4 * (var(--prvi-s) * .6667 - 100cqw) - 2rem); }  /* 382j: title and line stay on the snow, left of the spruces */
    /* on a low screen (Safari with its bars, small phones) the text gets a little tighter */
    @media (max-height: 45rem) { .prvi-gib { gap: 1rem; } .prvi h1 { font-size: 2.5rem; } }
  }
  /* GORJE-382k (Kir 8. 11.): on the phone the text block stands in the middle between the forest edge (20.5 % of the drawing) and the heads of the
     far Svizci (61 %): as much snow above the title as under the button, on any phone height (it was pinned under the forest with a big empty
     field under the button). The drawing is S high and pinned to the bottom, so the forest edge is H - .795 S from the top and the Svizci are
     .39 S above the bottom. The button is as wide as its text, at the left edge (Kir: full width «ужасно выглядит, ещё на ёлку заезжает»). */
  @container (max-width: 35.9375rem) {
    .prvi .vsebina { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center;
      padding-block: calc(var(--prvi-h) - var(--prvi-s) * .795 + .75rem) calc(var(--prvi-s) * .39 + .75rem); }
    .prvi .prvi-gumb { width: auto; padding-inline: 1.5rem; }
  }
  @container (max-width: 24.9375rem) { .prvi .prvi-gumb { padding-inline: 1.125rem; } }  /* 320 px: the button stays left of the spruces */
  @container (max-width: 24.9375rem) { .prvi-gib { gap: 1rem; } .prvi h1 { font-size: 2.5rem; } }  /* 382j: narrow phones - the text column ends at the spruces, so a 52 px title in 2 lines + 3 lines of text reach the far Svizci */
  @container (min-width: 36rem) and (max-width: 63.9375rem) {  /* GORJE-382e: the hero takes the tablet look from 576 px (see below), the rest of the page from 768 */
    .prvi { min-height: max(50rem, calc(100svh - var(--prvi-vrh, var(--glava-h)))); --svizec-w: 50vw; background-position: 84% 100%; }  /* GORJE-284: as high as the screen under the header */
    .prvi-svizec { background-position: 90% 100%; }  /* GORJE-380d: the still is tall here, so more of its right side: the child with bib 3 stays whole */
    .prvi .vsebina { padding-top: 2.5rem; }
    .prvi::before { background: linear-gradient(180deg, rgba(30,52,68,.76) 0%, rgba(30,52,68,.62) 30%, rgba(30,52,68,0) 46%); }
    .prvi-gib { max-width: 37.5rem; }
    /* GORJE-315f: the pause stays bottom left as on the phone: bottom right it lay under Svizec's fixed button (svizec.css) */
    /* GORJE-382e (Kir 7. 11.): the tablet gets the same drawn Pokljuka race as the computer, redrawn by ChatGPT as a square (design/svizec-382/
       tablica-382e-grb.png) and widened on the left with its own empty snow, forest and sky to 1.55 : 1 (tablica-382e-siroka.png, sestavi.py): Triglav
       and the far forest on top, clean snow under them for the text (no veil, dark text), the race in the lower third. A portrait tablet shows the
       square part, a landscape window (small laptops with a scroll bar land here too) the whole width. 1.8 : 1 showed everything but made the
       Svizci too small on 1009 x 700 (Kir: «сильный зум-аут… подувеличить»), so 1.55 : 1 and the cut part goes 70 % to the sky above the summit
       and 30 % to the snow under the coach's skis: from about 1.5 : 1 windows the summit and the skis stay whole. The first screen is the window's
       height under the header (38rem floor), the drawing "cover" pinned to the right: its height is the screen's height or the width / 1.55,
       whichever is larger (S). The snow starts at 26.7 % of the drawing, so the text starts at .267 S - .7 (S - H) + 2.75rem (Kir: a little lower). */
    .prvi { --prvi-h: max(38rem, calc(100svh - var(--prvi-vrh, var(--glava-h)))); min-height: var(--prvi-h); --prvi-s: max(64.516cqw, var(--prvi-h)); color: var(--noc); }
    .prvi::before { display: none; }
    .prvi-svizec { background-image: url("svizec/svizci-pokljuka-tablica-j.webp"); background-position: 75% 70%; }  /* 382k: the same scene drawn whole at 1.55 : 1 by ChatGPT (design/svizec-382/tablica-382k.png) - no cloned strips on the left (Kir: «колхоз»), a new name. A portrait tablet sees about half of its width: 75 % of the cut part on the left keeps the whole race and the coach, and the spruces start only at (.78 - .75 (1 - W / 1.55 S)) of the window instead of covering the text's right half */
    @container (max-width: 42.9375rem) { .prvi .t-lg { font-size: 1.0625rem; } }  /* 382k: 576-687 sees the least snow left of the spruces: the longer English line still fits */
    .prvi-gib > :not(.prvi-gumbi) { max-width: none; }  /* 382k: the phone's «left of the spruces» width is not for 576-767 (the title broke into 2 lines and pushed the button onto the girl with 3) */
    .prvi .vsebina { padding-block: calc(var(--prvi-s) * .25 - (var(--prvi-s) - var(--prvi-h)) * .7 + 1.5rem) 2rem; }  /* 382j: the snow of tablica-382j-siroka.png runs 25 - 55 % */  /* the old bottom room for the Svizec layer goes */
    /* Kir 7. 11.: the title and the line under it closer together; the second sentence («Skupaj. Za Gorje.», «Together. For Gorje.») on its own line,
       so the line is shorter and the block taller */
    .prvi-gib { gap: .625rem; } .prvi-gumbi { margin-top: .875rem; }
    .prvi-dalje { display: block; }  /* the second sentence on its own line (its own span in zgradi.py, inline everywhere else) */
    .prvi .prvi-gumb { width: auto; }  /* 576-767: the page is still a phone (full-width buttons), the hero button is not (Kir 2. 11.: full width on a phone only) */
    /* GORJE-382k (Kir 8. 11.): a landscape window (small laptops at 1009, tablets on their side) gets the same picture as the portrait tablet:
       its race lies in the lower half, so the text has the whole wide snow field above it (the old wide picture was the computer one widened
       left with copies of its own strips, and the line under the title ran onto the boy with 5 at 1000 px). The text is bigger here. */
    @media (min-aspect-ratio: 6/5) and (min-width: 52.5rem) {
      .prvi h1 { font-size: 4.25rem; line-height: .86; }
      .prvi .t-lg { font-size: 1.25rem; }
      .prvi .prvi-gumb { height: 3rem; padding-inline: 1.5rem; }
    }
  }
  @container (min-width: 64rem) {
    /* računalnik: besedilo spodaj levo na svetlem snegu, zato temno (noč), pod njim svetel prehod samo v spodnjem delu */
    .prvi { min-height: 40rem; --svizec-w: min(40.8125rem, 45.4vw); background-position: 72% 100%; color: var(--noc); }
    .prvi::before { background: linear-gradient(90deg, rgba(247,248,250,.82) 0%, rgba(247,248,250,.72) 40%, rgba(247,248,250,0) 70%); /* GORJE-126: .6 -> .72, 64 -> 70 %: the line under the title reaches 4.5 : 1 on the worst snow */
      -webkit-mask-image: linear-gradient(180deg, transparent calc(100% - var(--tekst-dno) - 22.4rem), #000 calc(100% - var(--tekst-dno) - 14.4rem));
      mask-image: linear-gradient(180deg, transparent calc(100% - var(--tekst-dno) - 22.4rem), #000 calc(100% - var(--tekst-dno) - 14.4rem)); }  /* GORJE-126: the light starts above the title (= 34/54 % at 4rem); 273c: it rises with the text */
    .prvi .gumb--drugotni.na-temnem { box-shadow: inset 0 0 0 1.5px var(--noc); color: var(--noc); }
    /* GORJE-273c (Kir 30. 10.): the text stands on the flat snow under the trees, not on the cut-up track. The video is "cover", so on a wide
       screen it grows and the tree line rises (trees end 488 px of 1072 above the bottom of the video): the text rises with it, 2.5rem under
       the trees. At 1440 and below it stays at 4rem (it is already just under the trees). */
    .prvi { --tekst-dno: max(4rem, calc(25.4cqw - 15.6rem)); }
    /* GORJE-284 (Kir 30. 10.): the video fills the whole screen under the header, «Prvi trening v treh korakih» starts only after
       scrolling. 40rem stays the floor on low windows. When the screen is higher than the video at this width (1072 / 1920), "cover"
       scales the video by height and the tree line sits at 45.5 % of the height, so the text follows the higher of the two. */
    .prvi { --prvi-h: max(40rem, calc(100svh - var(--prvi-vrh, var(--glava-h)))); min-height: var(--prvi-h);
      --tekst-dno: max(4rem, calc(max(25.4cqw, var(--prvi-h) * .455) - 15.6rem)); }
    .prvi .vsebina { align-self: flex-end; padding-block: 4rem var(--tekst-dno); }
    .prvi-gib { max-width: 47.5rem; }
    .prvi-pavza { left: max(1rem, calc((100% - 90rem) / 2 + 1rem)); }
    /* GORJE-382c/382k: the computer gets the drawn biathlon race on Pokljuka, 2.4 : 1, "cover", pinned to the right (design/svizec-382/
       racunalnik-382k.png: ChatGPT drew the whole wide picture itself - 08.11 the left part was cloned strips of the same picture, Kir: «колхоз»).
       S = the drawing's height = the first screen's height or 41.667cqw (width / 2.4), whichever is larger; 48 % of the cut part is on top.
       Kir 8. 11.: the text never runs onto the track or a Svizec, always on the white snow; title and line go to 2 lines earlier. So the text
       box is measured on the drawing (tools/gorje382k/meri.mjs): the clean snow starts at 40.5 % of its height (--sneg), the track wall and the
       boy with 5 never come further left than 62.5 % of its width down to 84 % of its height (--meja = 100cqw - .375 x 2.4 S), lower the
       front wall turns left (--dno). The block stands in the middle between --sneg and --dno (never above --sneg), its right edge 4rem before --meja. */
    .prvi { --prvi-s: max(var(--prvi-h), 41.667cqw); --sneg: calc(var(--prvi-s) * .405 - (var(--prvi-s) - var(--prvi-h)) * .48);
      --dno: calc(var(--prvi-s) * .84 - (var(--prvi-s) - var(--prvi-h)) * .48); --meja: calc(100cqw - var(--prvi-s) * .9);
      --levo: max(var(--rob), (100cqw - var(--vsebina-max)) / 2); --sirina: calc(var(--meja) - var(--levo) - 4rem); }
    .prvi-svizec { background-image: url("svizec/svizci-pokljuka-racunalnik-j.webp"); background-position: 100% 48%; }  /* GORJE-474 (Kir 12.11.2026, Domen): -j = biathletes 2, 4, 6 with rifles, cross-country 5 and 3 without, the youngest girl 7 (no rifle ever) ahead of the coach - keep her and every Svizec right of the text on every width. 382k: new picture, new name (browsers keep a picture 7 days) */
    .prvi::before { display: none; }
    .prvi .vsebina { align-self: stretch; display: flex; align-items: safe center; padding-block: calc(var(--sneg) + 1rem) calc(var(--prvi-h) - var(--dno)); }
    /* the title goes to 2 lines when one line does not fit the box (its longest line «Doma smo v» is 4.4 x the font size), the second sentence
       («Skupaj. Za Gorje.») always on its own line; the title shrinks rather than reach the track */
    .prvi-gib { max-width: var(--sirina); gap: clamp(1.25rem, 1.1cqw, 2rem); }
    .prvi h1 { line-height: .86; font-size: min(clamp(4.25rem, 5.5cqw, 10rem), var(--sirina) / 4.6); }
    .prvi-dalje { display: block; }
    .prvi .t-lg { font-size: clamp(1.25rem, 1.32cqw, 2.25rem); max-width: none; }
    .prvi .prvi-gumb { height: 3.3rem; padding-inline: 1.65rem; font-size: 1.1rem; }
    /* GORJE-382k: a computer window close to 4 : 3 (1024 x 768, iPad on its side) gets the tablet picture: the race lies in its lower half, so
       the text has the wide snow under the forest (on the 2.4 : 1 picture the race took 2/3 of such a window). S = the screen's height or the
       width / 1.55; the snow from 25.5 %, the text block down to 58 % (left of the race), the big spruces from 78 % of the width. */
    @media (max-aspect-ratio: 29/20) {
      .prvi { --prvi-s: max(64.516cqw, var(--prvi-h)); --sneg: calc(var(--prvi-s) * .255 - (var(--prvi-s) - var(--prvi-h)) * .7);
        --dno: calc(var(--prvi-s) * .58 - (var(--prvi-s) - var(--prvi-h)) * .7); --meja: calc(100cqw - var(--prvi-s) * .341); }
      .prvi-svizec { background-image: url("svizec/svizci-pokljuka-tablica-j.webp"); background-position: 100% 70%; }
      .prvi h1 { font-size: min(clamp(4.25rem, 5.5cqw, 10rem), var(--sirina) / 7.6); }  /* one line here: the snow band is wide and low */
    }
  }
  /* GORJE-382d: the ranges are in rem and 1 rem grows to 18 px from 1440 px (sistem.css --osnova), and a classic scroll bar takes 15 px, so the
     edges sit well away from the named widths: 75rem = 1290-1350 px, 100rem = 1800 px, 130rem = 2340 px. 1024-1279: smaller line and button */
  @container (min-width: 64rem) and (max-width: 74.9375rem) {
    .prvi .prvi-gumb { height: 3rem; padding-inline: 1.5rem; font-size: var(--t-gumb); }
  }
  /* GORJE-382d/382k: 1920 and wider - the block stands in the middle of the white snow left of the race: as much snow on its left (the window
     edge) as on its right (up to --meja), and the button grows with the text */
  @container (min-width: 100rem) {
    .prvi .vsebina { justify-content: center; max-width: none; margin: 0; width: calc(var(--meja) - 1.5rem); }
    .prvi { --levo: var(--rob); --sirina: calc(var(--meja) - 1.5rem - 2 * var(--rob)); }
    .prvi h1 { font-size: min(5.75cqw, 10rem, var(--sirina) / 4.6); } .prvi .t-lg { font-size: min(1.38cqw, 2.25rem); }
    .prvi .prvi-gumb { height: 4rem; padding-inline: 2.125rem; font-size: 1.375rem; }
  }
  @container (min-width: 130rem) { .prvi .prvi-gumb { height: 4.75rem; padding-inline: 2.75rem; font-size: 1.625rem; } .prvi .prvi-gumb .ravnovesje { width: 1.5rem; height: 1.5rem; } .prvi .prvi-gumb svg { width: 1.5rem; height: 1.5rem; } }  /* GORJE-382d: 2560 - the button grows with the text */
  @media (prefers-reduced-motion: reduce) { .prvi-pavza { display: none; } }
  /* GORJE-059: 1024-1279 px - manjši Svizec, da rep ne seže v naslov */
  @container (min-width: 64rem) and (max-width: 74.9375rem) { .prvi { --svizec-w: 40vw; } }  /* GORJE-382k: the title size comes from the text box now */
  .podpis { padding-top: 0.75rem; color: var(--megla); }

  /* intro */
  .uvod { padding-block: 4rem var(--med-razdelki); }
  .uvod-vrsta { display: grid; gap: 1.5rem; }
  .uvod-besedilo { display: grid; gap: 1.5rem; justify-items: start; }
  @container (min-width: 64rem) { .uvod { padding-block: 6rem; } .uvod-vrsta { grid-template-columns: minmax(0, 1fr) minmax(0, 39rem); gap: 6rem; } }  /* minmax(0): GORJE-260, at a 1024-1060 window the row ran 8-30 px off the screen */

  /* this week */
  .teden { display: grid; gap: 1rem; align-items: start; }
  @container (min-width: 64rem) { .teden { grid-template-columns: minmax(0, 816fr) minmax(0, 400fr); gap: 1.5rem; } }
  .urnik { padding: 1.25rem; display: grid; gap: 0.75rem; }
  @container (min-width: 48rem) { .urnik { padding: 1.75rem; } }
  .urnik-glava { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
  .dan { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.25rem 0.75rem; padding: 0.75rem 1rem; background: var(--led); border-radius: var(--r-polje); }
  .dan .stevilka:first-child { min-width: 2.125rem; }
  .dan-kaj { grid-column: 1 / -1; }
  .dan-kje { grid-column: 1 / -1; color: var(--megla); }
  .danes { display: inline-flex; align-items: center; height: 1.8125rem; padding: 0 0.75rem; border-radius: var(--r-gumb); background: var(--gradient); font-size: var(--t-oznaka); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; justify-self: start; }
  @container (min-width: 48rem) {
    .dan { grid-template-columns: 3.375rem 5.75rem 1fr auto auto; padding: 0.875rem 1.25rem; gap: 1.25rem; min-height: 3.1875rem; }
    .dan-kaj, .dan-kje { grid-column: auto; }
    .dan-kje { text-align: right; }
    .dan .danes { order: 4; }
  }
  .prazno { padding: 1.5rem; display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: center; }
  .prazno img { width: 4rem; height: auto; }
  .prazno-besedilo { display: grid; gap: 0.375rem; justify-items: start; }
  .opomba { margin-top: 1rem; color: var(--megla); }

  /* GORJE-308 (Kir, PDF p. 26, 05.11.2026): the 8 sections as equals, 3 x 3 bento, coloured-pencil still lifes (no people, no Svizci) */
  .bento { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
  .bento-k { display: flex; flex-direction: column; min-width: 0; }
  .bento-slika { position: relative; aspect-ratio: 4 / 3; background: var(--led); overflow: hidden; }
  .bento-slika img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 45%); scale: var(--zoom, 1); transform-origin: var(--fokus, 50% 45%); } /* the subject sits in the middle of each drawing, so it stays whole in wide, square and tall cards; zgradi.py SEKCIJE_KADER evens out the scale (Kir 05.11) */
  .bento-besedilo { flex: 1; display: flex; flex-direction: column; gap: 0.375rem; padding: 1.125rem 1.25rem 1.25rem; }
  .bento-dno { margin-top: auto; padding-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--jezero); }
  .bento-k--prvi .bento-slika { aspect-ratio: 2 / 1; }
  @media (hover: hover) and (pointer: fine) { .bento-k:hover .pu, .bento-k.je-lebdenje .pu { translate: calc(4px * var(--gib)) 0; } }
  .bento-k .pu { transition: translate calc(var(--cas-odziv) * var(--k)) var(--ease-out); }
  /* phone: 2 small cards a row, tek and the last one across both (no orphan) */
  @container (min-width: 22rem) and (max-width: 47.4375rem) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .bento-k--prvi, .bento-k:last-child { grid-column: span 2; }
    .bento-k:last-child .bento-slika { aspect-ratio: 2 / 1; }
    .bento-slika { aspect-ratio: 1 / 1; }
    .bento-besedilo { padding: 0.875rem 0.875rem 1rem; }
    .bento-besedilo .t-xl { font-size: 1.125rem; }
    .bento-dno-besedilo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .bento-dno { padding-top: 0.5rem; }
  }
  /* tablet and computer: 3 x 3, tek na smučeh in biatlon tall over 2 rows (Kir chose B, 05.11) */
  @container (min-width: 47.5rem) {
    .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
    .bento-slika { aspect-ratio: auto; height: clamp(11rem, 19vw, 16.5rem); }
    .bento-k--prvi { grid-row: span 2; }
    .bento-k--prvi .bento-slika { flex: 1; height: auto; min-height: 20rem; }
    .bento-k--prvi .bento-besedilo { flex: none; }
    .bento-besedilo { padding: 1.25rem 1.5rem 1.5rem; }
  }
  .bento + .ne-ves { padding-top: 2rem; }
  .ne-ves { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; }
  .ne-ves p { flex: 1 1 16.25rem; }

  /* news */
  .novice-glava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
  .novice-glava > div { display: grid; gap: 0.5rem; }
  /* cards in one row are always as tall as the tallest one; the link sits at the bottom */
  .mreza-3 { display: grid; gap: 1.5rem; align-items: stretch; }
  @container (min-width: 48rem) { .mreza-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (min-width: 64rem) { .mreza-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .kartica-novica img { width: 100%; height: auto; aspect-ratio: 384 / 256; object-fit: cover; }
  .kartica-novica { display: flex; flex-direction: column; }
  .kartica-novica .k-vsebina { flex: 1; padding: 1.5rem; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.75rem; justify-items: start; }
  .meta { display: flex; align-items: center; gap: 0.75rem; }
  .kartica-novica h3 { font-size: var(--t-xl); line-height: 1.25; letter-spacing: -.03em; font-weight: 600; }
  .kartica-novica .k-povezava { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: var(--t-sm); font-weight: 600; }
  /* GORJE-186b (Kir 23. 10. 2026: «все четыре карточки по высоте должны влезать в мой экран»): on a computer the heading,
     the big story and the three cards fit one screen under the sticky header - photo heights follow the screen height,
     the lead is two lines. A phone scrolls as before. */
  @container (min-width: 64rem) {
    #novice .novice-glava { margin-bottom: 1.5rem; }
    #novice .kartica-novica img, #novice .kartica-novica .k-datum { aspect-ratio: auto; height: clamp(6.5rem, 17svh, 12.25rem); }  /* 17svh: GORJE-186c, the big story grew 15 % */
    #novice .kartica-novica .k-vsebina { padding: 1.25rem 1.5rem; gap: 0.625rem; }
    #novice .kartica-novica .k-vsebina > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    #novice .kartica-novica .k-povezava { min-height: 1.5rem; align-self: end; }  /* stays at the bottom when the lead is hidden */
    /* a laptop screen (about 800 high): the three cards show photo and title only; a short one (about 720): the big story too */
    @media (max-height: 56rem) { #novice .kartica-novica .k-vsebina { grid-template-rows: auto auto 1fr; } #novice .kartica-novica .k-vsebina > p { display: none; } }
    @media (max-height: 46rem) { #novice .glavna-novica .k-vsebina > p { display: none; } #novice .novice-glava { margin-bottom: 1rem; } #novice .kartica-novica img, #novice .kartica-novica .k-datum { height: 6.5rem; } }
  }

  /* results */
  .rezultati { background: var(--noc); color: var(--bela); padding-block: var(--med-razdelki); margin-bottom: var(--med-razdelki); }
  .rezultati-vrsta { display: grid; gap: 2rem; }
  @container (min-width: 64rem) { .rezultati-vrsta { grid-template-columns: 25rem 1fr; gap: 4rem; } }
  .rezultati-besedilo { display: grid; gap: 1.5rem; align-content: start; justify-items: start; }
  .rezultati-besedilo .t-base { color: var(--ivje); }
  .mreza-2 { display: grid; gap: 1.5rem; }
  @container (min-width: 48rem) { .mreza-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .kartica-rezultat { color: var(--noc); padding: 1.5rem; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1rem; }
  .uvrstitve { display: grid; }
  .uvrstitev { display: grid; grid-template-columns: 1.75rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.625rem 0; }
  .uvrstitev + .uvrstitev { border-top: 1px solid var(--crta); }
  .rezultati .opomba { color: var(--ivje); margin-top: 2rem; }

  /* history */
  .kartica-zgodovina { background: var(--noc); color: var(--bela); padding: 1.75rem; display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; justify-items: start; }
  .letnica { display: flex; align-items: flex-end; gap: 0.75rem; }
  .letnica .t-num { font-family: var(--f-glas); font-weight: 700; font-size: var(--t-4xl-num); line-height: 1; letter-spacing: -.01em; }
  .zgodovina-gumb { margin-top: 2rem; }

  /* sponsors */
  .pokrovitelji-ozadje { background: var(--bela); padding-block: var(--med-razdelki); }
  .mreza-4 { display: grid; gap: 1.5rem; }
  @container (min-width: 40rem) { .mreza-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (min-width: 64rem) { .mreza-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .pokrovitelj { display: grid; gap: 0.75rem; justify-items: start; }
  .mreza-5 { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  @container (min-width: 48rem) { .mreza-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @container (min-width: 64rem) { .mreza-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .pokrovitelj { align-content: start; }
  .logotip-pokrovitelja { display: flex; align-items: center; height: 4rem; }
  .logotip-pokrovitelja img { max-height: 4rem; max-width: 100%; width: auto; height: auto; object-fit: contain; }
  .pokrovitelj a.ime { font-size: var(--t-meni); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25rem; }
  @media (hover: hover) and (pointer: fine) { .pokrovitelj a.ime:hover { text-decoration-color: currentColor; } }
  .pokrovitelj strong { font-size: var(--t-meni); font-weight: 600; }
  .pokrovitelj .t-sm { color: var(--megla); }

  /* join */
  .pridi { background: var(--led); padding-block: 6rem; text-align: center; }
  .pridi .vsebina { display: grid; gap: 1.5rem; justify-items: center; }
  @container (min-width: 64rem) { .pridi { padding-block: 8rem; } }

  /* footer */
  .noga { position: relative; background: var(--noc); color: var(--bela); padding-block: 3rem 0; overflow: hidden; }
  .noga .vsebina { position: relative; z-index: 1; }
  .noga-zgoraj { display: grid; gap: 2rem; }
  @container (min-width: 40rem) { .noga-zgoraj { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (min-width: 64rem) { .noga { padding-top: 4.5rem; } .noga-zgoraj { grid-template-columns: 17rem repeat(3, minmax(0, 1fr)); gap: 4rem; } }
  @container (min-width: 80rem) { .noga-zgoraj { display: flex; column-gap: clamp(3rem, 5vw, 7.5rem); } .noga-klub { flex: none; margin-right: auto; } .noga-stolpec { flex: 0 1 auto; min-width: 0; } }  /* GORJE-215: logo left, the three columns together on the right, like the header; long English links wrap instead of being cut */
  .noga-klub { display: grid; gap: 1.25rem; align-content: start; }
  .noga-svizec { display: flex; align-items: center; gap: 0.875rem; color: var(--ivje); }
  .noga-svizec img { width: 3.625rem; height: auto; }
  .noga-stolpec { display: grid; gap: 0.75rem; align-content: start; }
  .noga-stolpec .oznaka { color: var(--ivje); }
  .noga-stolpec a { font-size: var(--t-meni); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25rem; transition: text-decoration-color calc(var(--cas-odziv) * var(--k)) ease; justify-self: start; }
  @media (hover: hover) and (pointer: fine) { .noga-stolpec a:hover { text-decoration-color: currentColor; } }
  .noga-crta { height: 1px; background: rgba(255,255,255,.35); margin-block: 3rem 1rem; }
  .noga-spodaj { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2rem; color: var(--ivje); }
  .noga-povezave { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2rem; }
  @container (min-width: 64rem) { .noga-povezave { margin-left: auto; } }  /* GORJE-215: © on the left, links and the switch together on the right (also when they wrap under ©) */
  .noga-spodaj a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .avtor { padding-block: 1rem 2rem; color: var(--ivje); }

/* GORJE-288c: four first screens for the club. The switch is the same small text links as the seasons on the athlete's page
   (.ot-sezone, otrok.css), white on a thin line of noč above the screen: photos, videos and the sky of Svizci all change under
   text, and over Svizci on a phone it would touch the title. prva.js measures this line as a strip above the first screen. */
.pz-vrh { background: var(--noc); }
.pz-izbor { display: flex; flex-wrap: wrap; gap: 0 1.1rem; padding-block: 0.25rem; }
.pz-izbor a { display: inline-flex; align-items: center; min-height: 32px; font-size: .875rem; font-weight: 700; color: var(--bela); opacity: .82; text-decoration: none; }
.pz-izbor a[aria-current] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
@media (hover: hover) { .pz-izbor a:hover { opacity: 1; } }
.pz-izbor a:focus-visible { outline: 3px solid var(--bela); outline-offset: 2px; border-radius: .3rem; }

/* screens 2-4, GORJE-303: the picture fills the first screen, the words lie on its bottom, the door closes it, on every screen. Phone: one
   gradient up from the doors; computer: the picture stands to the right and runs out into noč on the left. A poster is the video's first
   frame: it stays with reduced motion and save data, the video lies on top of it once it plays. --prvi-vrh (prva.js) keeps the door on the very bottom of the window, always (Kir 2. 11.): no strip of the next block under it, no upper limit on a tall screen. Svizec's button stands on the door while the page is at its top (--vrata-dvig, prva.js). */
.pb-prvi { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - var(--prvi-vrh, 8rem)); background: var(--noc); color: var(--bela); overflow: hidden; isolation: isolate; }
.pb-oder { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.pb-foto { position: absolute; inset: 0; z-index: -1; }
.pb-foto img, .pb-foto video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--noc) 0%, rgba(30, 52, 68, .92) 24%, rgba(30, 52, 68, .5) 42%, rgba(30, 52, 68, 0) 60%); }
.pb-oder > .vsebina { position: relative; z-index: 2; padding-block: 1.5rem; }
.pb-besedilo { display: grid; gap: 0.75rem; justify-items: start; }
.pb-besedilo p { color: var(--bela); }
@container (max-width: 47.99rem) { .pb-besedilo p { padding-right: 4.5rem; } }  /* the room of Svizec's button, it stands on the door here (312b) */
.pb-napis { position: absolute; z-index: 2; top: 0.75rem; right: 0.75rem; margin: 0; max-width: calc(100% - 1.5rem); padding: 0.25rem 0.625rem; border-radius: var(--r-mala); background: rgba(30, 52, 68, .78); color: var(--bela); text-align: right; }
.pb-napis a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
/* the same look as .prvi-pavza (WCAG 2.2.2) */
/* GORJE-373b: the site's round icon button (3rem), on a photo in dark glass */
.pb-pavza { position: absolute; z-index: 3; right: 0.75rem; top: 5rem; width: 3rem; height: 3rem; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: rgba(30, 52, 68, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--bela); cursor: pointer;
  transition: background-color 160ms ease, scale calc(120ms * var(--gib, 1)) var(--ease-out, ease); -webkit-tap-highlight-color: transparent; }
.pb-pavza:active { scale: .94; }
.pb-pavza:focus-visible { outline: 3px solid var(--bela); outline-offset: 2px; }
.pb-pavza svg { width: 1.125rem; height: 1.125rem; }
.pb-pavza .ik-tece { display: none; }
.pb-pavza[aria-pressed="true"] .ik-tece { display: block; }
.pb-pavza[aria-pressed="true"] .ik-pavza { display: none; }
@media (hover: hover) and (pointer: fine) { .pb-pavza:hover { background: rgba(30, 52, 68, .88); } }
html[data-gibanje="ne"] .pb-pavza { display: none; }
@media (prefers-reduced-motion: reduce) { .pb-pavza { display: none; } }
/* the wide files have a blurred strip on their left 8 %, for the gradient on a computer: without the gradient it stays out of the box */
@media (min-width: 48rem) {
  .pb-foto { overflow: hidden; }
  .pb-foto picture img, .pb-foto video { inset: 0 0 0 auto; width: 109%; }
}
@container (min-width: 64rem) {
  .pb-foto { inset: 0 0 0 auto; width: 87.5%; }
  .pb-foto picture img, .pb-foto video { width: 100%; }
  .pb-foto::after { background: linear-gradient(90deg, var(--noc) 0%, rgba(30, 52, 68, .96) 14%, rgba(30, 52, 68, .78) 30%, rgba(30, 52, 68, .3) 44%, rgba(30, 52, 68, 0) 56%); }
  .pb-oder { justify-content: center; }  /* GORJE-312: the middle of the picture on a computer; on a phone the sun and Miha's face stand there, the words stay at the bottom */
  .pb-oder > .vsebina { padding-block: 3rem; }
  .pb-besedilo { gap: 1.25rem; max-width: 30rem; }
  .pb-napis { top: auto; bottom: 1.25rem; right: max(9.25rem, calc((100% - 90rem) / 2 + 4.5rem)); max-width: 46rem; }
  .pb-pavza { top: auto; bottom: 0.75rem; right: max(5.75rem, calc((100% - 90rem) / 2 + 1rem)); }  /* left of Svizec's button standing on the door (312b), the caption left of the pause */
}
/* GORJE-312 (Kir 2. 11.): one door on the whole width. .vsebina puts the text on the title's line and the arrow on the right line of the content.
   Hover: jezero runs in from the left under the words (noč would melt into the picture), the words go white and stand still, only the arrow steps to the right. */
.vrata { position: relative; z-index: 2; }
.vrata-v { position: relative; display: block; isolation: isolate; overflow: hidden; background: var(--gradient); color: var(--noc); text-decoration: none;
  transition: color calc(var(--cas-stanje) * var(--k)) var(--ease-out), scale calc(var(--cas-pritisk) * var(--k)) var(--ease-out); }
.vrata-v::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--jezero); transform: scaleX(0); transform-origin: 0 50%; transition: transform calc(var(--cas-meni) * var(--k)) var(--ease-out); }
.vrata-v .vsebina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 7.5rem; padding-block: 1rem; }
.vrata-besedilo { display: grid; gap: 0.375rem; min-width: 0; }
.vrata-naslov { font-family: var(--f-glas); font-weight: 700; font-size: 1.875rem; line-height: 1; }
.vrata-opis { font-size: var(--t-sm); line-height: 1.3; }
.vrata-v .pu { flex: none; transition: translate calc(var(--cas-meni) * var(--k)) var(--ease-out); }
.vrata-v:focus-visible { outline: 3px solid currentColor; outline-offset: -5px; }
.vrata-v:active { scale: .995; }
@media (hover: hover) and (pointer: fine) {
  .vrata-v:hover { color: var(--bela); }
  .vrata-v:hover::before { transform: none; }
  .vrata-v:hover .pu { translate: 0.625rem 0; }
}
@container (min-width: 48rem) { .vrata-v .vsebina { min-height: 8.5rem; padding-block: 1.5rem; } .vrata-naslov { font-size: 2.75rem; } .vrata-opis { font-size: var(--t-base); } }
/* GORJE-312 (Kir 2. 11.): «Za športnike», three athlete cards scattered like a deck on the left, the words on the right; on a phone the deck stands between the title and the list.
   The panel at the bottom of a card is the page's own «Tvoja sekcija». The left card lies in front (Kir 2. 11.), the words of the others start after it, so every name stays readable.
   --p 0 = one pile, 1 = spread: prva.js follows the scroll, back up folds them again. Without it, or with motion off, they stay spread. */
.zs { background: var(--led); margin-top: calc(-1 * var(--med-razdelki)); padding-block: var(--med-razdelki); margin-bottom: var(--med-razdelki); }  /* -1: right under the dark results */
.zs-vrsta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.zs-glava { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.zs-spodaj { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.zs-kup { --p: 1; position: relative; display: block; height: 0; padding-bottom: 62%; color: var(--noc); text-decoration: none; scale: .87; }  /* GORJE-362 (Kir 5. 11.): the whole deck 13 % smaller around its own middle, so it keeps its place and has room from the text */
.zs-karta { position: absolute; top: 4%; left: 31%; width: 38%; aspect-ratio: 5 / 7; border-radius: var(--r-plosca); overflow: hidden; background: var(--bela); box-shadow: var(--senca-dvig); will-change: transform;
  transform: translate(calc(var(--kx) * var(--p)), calc(var(--ky) * var(--p))) rotate(calc(var(--r0) + var(--r1) * var(--p))); transition: translate calc(var(--cas-odziv) * var(--k)) var(--ease-out); }
.zs-karta:nth-child(1) { --kx: -76%; --ky: 4%; --r0: -3deg; --r1: -4deg; z-index: 3; }
.zs-karta:nth-child(2) { --kx: 0%; --ky: 0%; --r0: 2deg; --r1: -.5deg; z-index: 2; }
.zs-karta:nth-child(3) { --kx: 76%; --ky: 5%; --r0: -1deg; --r1: 9deg; z-index: 1; }
.zs-karta:not(:last-child) { box-shadow: 0.5rem 0.125rem 1.125rem -0.25rem rgba(20, 38, 51, .42), 0.125rem 0 0.25rem rgba(20, 38, 51, .16), var(--senca-dvig); }  /* a small shadow on the card behind, so the deck has depth */
.zs-ozadje { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.zs-karta:nth-child(2) .zs-ozadje { scale: -1 1; }
.zs-svizec { position: absolute; left: 7%; bottom: 29%; width: 86%; height: auto; }
.zs-karta:not(:first-child) .zs-svizec { left: 26%; width: 72%; }  /* GORJE-442: the drawings reach the square's edges (skis, poles, rifle) - the whole Svizec stays inside the visible part of the card; the card in front covers the left quarter of the next one */
.zs-podatki { position: absolute; left: 0.375rem; right: 0.375rem; bottom: 0.375rem; display: grid; padding: 0.4375rem 0.625rem; border-radius: var(--r-polje); background: rgba(255, 255, 255, .88); border: 1px solid var(--bela); font-size: 0.6875rem; line-height: 1.2; font-weight: 600; }
.zs-karta:not(:first-child) .zs-podatki { padding-left: 31%; padding-right: 0.25rem; }  /* the card in front lies on the left part of the panel: the words start after it */
.zs-podatki b { font-size: 0.875rem; font-weight: 800; }
.zs-kup-ovoj { margin-inline: calc(var(--rob) * -.5); }  /* phone: the deck takes half of each side margin */
.zs-seznam { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; font-weight: 700; }
.zs-seznam li { padding-block: 0.625rem; border-top: 1px solid var(--crta); }
.zs-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.zs-gumbi .gumb { max-width: 100%; white-space: normal; }
@container (max-width: 47.99rem) { .zs-gumbi .gumb { width: 100%; height: 3.5rem; } }  /* as wide as «Poišči» above it */
@container (min-width: 40rem) and (max-width: 63.99rem) { .zs-kup-ovoj { width: 100%; max-width: 36rem; margin-inline: auto; } }  /* a tablet: the deck stays within one screen. width: auto margins stop a grid item stretching and the deck has no height of its own, it was 0 wide (312b) */
@container (max-width: 17.5rem) { .zs-kup-ovoj { display: none; } }  /* a phone with very large text: the panels grow in rem, the cards do not, names were cut off (312b). The list and the buttons below say the same */
@media (hover: hover) and (pointer: fine) { .zs-karta:hover { translate: 0 -3%; } }
@container (min-width: 64rem) {
  .zs-vrsta { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 3.5rem; row-gap: 2rem; align-items: center; }
  .zs-kup-ovoj { grid-column: 1; grid-row: 1 / span 2; margin-inline: 0; }
  .zs-svizec { bottom: 23%; }
  .zs-glava { grid-column: 2; align-self: end; }
  .zs-spodaj { grid-column: 2; align-self: start; }
  .zs-karta { border-radius: var(--r-kartica); }
  .zs-podatki { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; }
  .zs-podatki b { font-size: 1rem; }
}
.sv-gumb, .sv-namig { translate: 0 calc(-1 * var(--vrata-dvig, 0px)); }  /* it rides up onto the door and back */
.sv-gumb { transition: translate calc(var(--cas-meni) * var(--k)) var(--ease-out), transform calc(var(--cas-odziv) * var(--k)) var(--ease-out), box-shadow calc(var(--cas-odziv) * var(--k)) ease; }
.sv-namig { transition: translate calc(var(--cas-meni) * var(--k)) var(--ease-out); }
/* GORJE-372 (Kir 5. 11.): on the home page only Gorje in Pokljuka keeps the big door (Kir shows the club both on 6. 11.); the other screens close with
   one ordinary main button under the line, the same one as on the Svizci screen. Without a script Pokljuka opens: the door, no button.
   Full width on a phone only (312b); on the photo screens it leaves the corner of the pause and Svizec's button free, as the line above it does. */
.pz[data-gumb]:not([data-zdaj="pokljuka"]) .vrata, .pz[data-zdaj="pokljuka"] .pb-gumb { display: none; }
.pb-besedilo .pb-gumb { margin-top: 0.5rem; }
.prvi-gumb { height: auto; min-height: 3rem; padding-block: 0.5rem; white-space: normal; text-align: center; line-height: 1.1; }  /* with large text (Aa) it may take 2 lines: tight leading, never cut */
@container (max-width: 47.99rem) {
  .prvi-gumb { width: 100%; }
  .pz[data-zasloni="prozorna"] .pb-gumb, body:has(.sv-gumb) .pb-gumb { width: calc(100% - 4.5rem); }
}
@supports not selector(:has(a)) { @container (max-width: 47.99rem) { .pb-gumb { width: calc(100% - 4.5rem); } } }
/* GORJE-380d (Kir 7. 11.): the newcomers' page closes its Svizci screen with the door back to the home page; the screen gives up the door's
   height, so the door still stands at the bottom of the first window and Svizci stay whole above it (the picture is anchored at its bottom) */
.prvi:has(+ .vrata) { --vrata-h: 7.5rem; }
@container (min-width: 48rem) { .prvi:has(+ .vrata) { --vrata-h: 8.5rem; } }
@container (max-width: 47.9375rem) { .prvi:has(+ .vrata) { min-height: max(30rem, calc(100svh - var(--prvi-vrh, var(--glava-h)) - var(--vrata-h))); } }
@container (min-width: 48rem) and (max-width: 63.9375rem) { .prvi:has(+ .vrata) { min-height: max(40rem, calc(100svh - var(--prvi-vrh, var(--glava-h)) - var(--vrata-h))); } }
@container (min-width: 64rem) { .prvi:has(+ .vrata) { --prvi-h: max(34rem, calc(100svh - var(--prvi-vrh, var(--glava-h)) - var(--vrata-h))); } }
/* the thin door at the end of the home page, for whoever scrolled past the big one */
.vrata-crta { display: block; background: var(--gradient); color: var(--noc); font-weight: 700; text-decoration: none; }
.vrata-crta .vsebina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
#teden, #uvod { scroll-margin-top: calc(var(--glava-h) - var(--glava-h-html) - 1rem); }  /* with scroll-padding-top the block starts right under the header, no strip of the first screen above it */
/* the version for partially sighted visitors: plain background, no pictures behind words */
html[data-vid] .pz-vrh { background: var(--vid-o) !important; }
html[data-vid] .pz-izbor a { color: var(--vid-b) !important; opacity: 1 !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
html[data-vid] .pz-izbor a[aria-current] { text-decoration-thickness: 4px; }
html[data-vid] .pb-prvi { background: var(--vid-o) !important; min-height: 0; }
html[data-vid] :where(.pb-prvi, .pb-prvi *) { color: var(--vid-b) !important; }
html[data-vid] :is(.pb-foto, .pb-napis, .pb-pavza) { display: none !important; }
html[data-vid] :is(.vrata-v, .vrata-crta) { background: var(--vid-o) !important; box-shadow: inset 0 0 0 3px var(--vid-b); }
html[data-vid] .vrata-v::before, html[data-vid] .zs-kup-ovoj { display: none; }
html[data-vid] .zs { background: var(--vid-o) !important; }
html[data-vid] :where(.vrata-v, .vrata-crta, .vrata-v *, .vrata-crta *) { color: var(--vid-b) !important; }

/* GORJE-315b: the first screen in use. Two photos fade into each other, the header lies on them see-through, its small logo steps aside and one big logo stands on the picture.
   Winter stays when motion is off. No radial darkening, no blur and no shadow on the logo: linear gradients from the edges only (Kir, GORJE-017). */
.pz { position: relative; display: flex; flex-direction: column; }
.pz[data-zasloni="prozorna"] { margin-top: calc(-1 * var(--glava-cela, calc(var(--glava-h) + 1px))); }
/* Kir 2. 11.: the switch leaves the first screen, very small under the door, until the club has chosen.
   GORJE-371 (Kir 5. 11.): the same on every screen (Športniki, Video sekcij, Svizci too), so the switch never jumps up into a dark strip */
.pz .pz-vrh { order: 1; background: none; color: var(--noc); }
.pz .pz-izbor { gap: 0 0.75rem; padding-block: 0.125rem; }
.pz .pz-izbor a { min-height: 24px; font-size: .6875rem; font-weight: 600; color: var(--noc); opacity: .6; }
.pz .pz-izbor a[aria-current] { opacity: .8; text-decoration-thickness: 1px; }
.pz .pz-izbor a:focus-visible { outline-color: var(--noc); }
.pz[data-zasloni="prozorna"] .pb-oder { justify-content: flex-end; padding-top: calc(var(--glava-cela, 4rem) + 1rem); }  /* GORJE-315c: no big logo, the words sit low on the photo, clear of the header */
.pz[data-zasloni="prozorna"] .pb-foto::after { background: linear-gradient(0deg, var(--noc) 0%, rgba(30, 52, 68, .84) 22%, rgba(30, 52, 68, 0) 46%), linear-gradient(180deg, rgba(30, 52, 68, .72) 0%, rgba(30, 52, 68, .58) 24%, rgba(30, 52, 68, 0) 40%); }
.pb-foto .pb-sloj, .pb-sloj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus-tel, var(--fokus, 50% 50%)); }
.pb-sloj img { position: static; object-position: inherit; }
.pb-sloj { display: block; }
img.pb-sloj--2, .pb-napis-2 { opacity: 0; }
@keyframes pb-menjava { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pb-prva { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
html[data-gibanje="da"] img.pb-sloj--2, html[data-gibanje="da"] .pb-napis-2 { animation: pb-menjava 18s ease-in-out infinite; }
html[data-gibanje="da"] .pb-napis:has(.pb-napis-2) > :first-child { animation: pb-prva 18s ease-in-out infinite; }
.je-ustavljeno :is(.pb-sloj--2, .pb-napis > span) { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { html[data-gibanje="da"] :is(img.pb-sloj--2, .pb-napis-2, .pb-napis > :first-child) { animation: none !important; } }
.pb-napis:has(.pb-napis-2) { display: grid; }
.pb-napis:has(.pb-napis-2) > span { grid-area: 1 / 1; }
.pz[data-zasloni="prozorna"] .pb-oder > .vsebina { padding-bottom: 2.5rem; }
.pz[data-zasloni="prozorna"] .pb-napis { top: auto; bottom: 0.625rem; left: var(--rob); right: auto; text-align: left; }
@container (max-width: 63.99rem) { .pz[data-zasloni="prozorna"] .pb-napis { padding: 0; background: none; } }
.pz[data-zasloni="prozorna"] .pb-pavza { top: auto; bottom: 0.25rem; right: 0.75rem; }
/* the header on the picture: its own gradient from the top edge walks with it, so the words stay readable over the sun while scrolling */
html:not([data-vid]):has(.pz[data-zasloni="prozorna"]) .glava:not(.je-pod-sliko) { background: none; border-bottom-color: transparent; color: var(--bela); }
html:not([data-vid]):has(.pz[data-zasloni="prozorna"]) .glava:not(.je-pod-sliko)::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -2rem; background: linear-gradient(180deg, rgba(30, 52, 68, .66) 0%, rgba(30, 52, 68, .42) 58%, rgba(30, 52, 68, 0) 100%); pointer-events: none; }
html:not([data-vid]):has(.pz[data-zasloni="prozorna"]) .glava:not(.je-pod-sliko) :is(.gm-sk:not([open]) > .gm-g, a.gm-g, .isci-gumb, .jezik, .vid-gumb, .meni-gumb, .vv-gumb) { color: var(--bela); }
@media (hover: hover) and (pointer: fine) { html:not([data-vid]):has(.pz[data-zasloni="prozorna"]) .glava:not(.je-pod-sliko) :is(.gm-sk:not([open]) > .gm-g, a.gm-g):hover { background: rgb(255 255 255 / .18); } }  /* GORJE-431 */
html:not([data-vid]):has(.pz[data-zasloni="prozorna"]) .glava:not(.je-pod-sliko) .vv-gumb { border-color: rgba(255, 255, 255, .5); }
html:not([data-vid]):has(.pz[data-zasloni="prozorna"]) .glava { transition: background-color calc(var(--cas-odziv) * var(--k)) ease, border-color calc(var(--cas-odziv) * var(--k)) ease; }
@container (min-width: 48rem) { .pb-foto .pb-sloj, .pb-sloj img { object-position: var(--fokus, 50% 50%); } .pb-sloj img { object-position: inherit; } }
@container (min-width: 64rem) {
  .pz[data-zasloni="prozorna"] .pb-foto { width: 100%; }
  .pz[data-zasloni="prozorna"] .pb-foto::after { background: linear-gradient(90deg, rgba(30, 52, 68, .9) 0%, rgba(30, 52, 68, .8) 28%, rgba(30, 52, 68, .46) 48%, rgba(30, 52, 68, 0) 64%); }
  .pz[data-zasloni="prozorna"] .pb-oder { justify-content: center; gap: 1.75rem; padding-top: var(--glava-cela, 5.5rem); }
  .pz[data-zasloni="prozorna"] .pb-oder > .vsebina { padding-block: 0; }
  .pz[data-zasloni="prozorna"] .pb-napis { left: auto; right: max(9.25rem, calc((100% - 90rem) / 2 + 4.5rem)); bottom: 1.25rem; text-align: right; }
  .pz[data-zasloni="prozorna"] .pb-pavza { bottom: 0.75rem; right: max(5.75rem, calc((100% - 90rem) / 2 + 1rem)); }
}
/* GORJE-315e: at the top of the page Svizec's button stands on the door and covered the pause (phone, tablet); on a computer his «Vprašaj me!» balloon lay on it for 9 s.
   While Svizec is on, the pause stands right above his button (svizec.css: 4rem round, max(1rem, safe area) from the corner), on every width; the heading keeps the room the words below already keep */
body:has(.sv-gumb) .pz[data-zasloni="prozorna"] .pb-pavza { right: calc(max(1rem, env(safe-area-inset-right, 0px)) + 0.625rem); bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 4.75rem + var(--vrata-pod, 0px)); }
@container (max-width: 47.99rem) { body:has(.sv-gumb) .pz[data-zasloni="prozorna"] .pb-besedilo h1 { padding-right: 52px; } }  /* px: the pause's left edge at 100 %; in rem a large text broke «Doma smo» into 3 lines */
@container (min-width: 64rem) { body:has(.sv-gumb) .pb-prvi .pb-pavza { right: calc(max(1rem, env(safe-area-inset-right, 0px)) + 0.625rem); bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 4.75rem + var(--vrata-pod, 0px)); } }
/* GORJE-315f: the caption stands left of the «Vprašaj me!» balloon (svizec.css: 5.75rem from the corner, up to about 9rem wide in Slovenian); at 1440 the balloon lay on «Potočnik.» for 9 s */
@container (min-width: 64rem) { body:has(.sv-gumb) .pb-prvi .pb-napis { right: max(15.5rem, calc((100% - 90rem) / 2 + 4.5rem)); } }
/* GORJE-315f: a browser without :has (iPhone before iOS 15.4, older Firefox) cannot tell whether Svizec's button is there, so the pause always keeps its place above it */
@supports not selector(:has(a)) {
  .pz[data-zasloni="prozorna"] .pb-pavza { right: calc(max(1rem, env(safe-area-inset-right, 0px)) + 0.625rem); bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 4.75rem + var(--vrata-pod, 0px)); }
  @container (min-width: 64rem) { .pb-prvi .pb-pavza { right: calc(max(1rem, env(safe-area-inset-right, 0px)) + 0.625rem); bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 4.75rem + var(--vrata-pod, 0px)); }
    .pb-prvi .pb-napis { right: max(15.5rem, calc((100% - 90rem) / 2 + 4.5rem)); } }
}
/* GORJE-315e: zgradi.py draws this screen before prva.js runs: the door stands where it will stay (--prvi-vrh is 0 under the see-through header, not 8rem),
   and the dark logo shows white until prva.js puts in the white file (its slash in colour) */
html:not([data-vid]) .pz[data-zasloni="prozorna"] .pb-prvi { min-height: calc(100svh - var(--prvi-vrh, 0px)); }
html:not([data-vid]):has(.pz[data-zasloni="prozorna"]) .glava:not(.je-pod-sliko) .logo[src*="kratki-noc"] { filter: brightness(0) invert(1); }
html[data-vid] .pz[data-zasloni] { margin-top: 0; }
html[data-vid] .pz .pz-vrh { position: static; }

/* GORJE-315c, copy only (variant 5 for the club meeting): Gorje, then our children, our racer, biathlon on Pokljuka; 6 s each, 24 s round */
.pb-foto img.pb-g, .pb-napis-g .pb-g { opacity: 0; }
@keyframes pb-g { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }
html[data-gibanje="da"] .pb-g, html[data-gibanje="da"] .pb-napis-g .pb-g1 { animation: pb-g 24s ease-in-out infinite both; }
html[data-gibanje="da"] .pb-g2 { animation-delay: 6s; }
html[data-gibanje="da"] .pb-g3 { animation-delay: 12s; }
html[data-gibanje="da"] .pb-g4 { animation-delay: 18s; }
html[data-gibanje="da"] .pb-napis-g .pb-g1 { opacity: 0; }
.je-ustavljeno :is(.pb-g, .pb-g1) { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { html[data-gibanje="da"] :is(.pb-g, .pb-g1) { animation: none !important; } html[data-gibanje="da"] .pb-napis-g .pb-g1 { opacity: 1; } }
.pb-napis-g { display: grid; }
.pb-napis-g > span { grid-area: 1 / 1; }