/* GORJE-038: pieces the copy «v196 v novi podobi» adds on top of sistem.css and strani.css (prototype GORJE-023).
   Same tokens, no new colours. Rules of Kir: cards in a row have one height, link at the bottom; no Vzpon «Λ»;
   photos with straight edges (no blurred or masked edges); native scroll. */

/* preview strip above the header (scrolls away, the header stays) */
.predogled { background: var(--noc); color: var(--ivje); }
.predogled .vsebina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; min-height: 2.5rem; padding-block: 0.375rem; font-size: var(--t-xs); font-weight: 500; line-height: 1.45; }
.predogled a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; color: var(--bela); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.predogled .pu { width: 1rem; height: 1rem; }

/* logo Različica 1 as a picture: kratki in the header (min. 133 px on screen), polni in the footer (GORJE-121c: min. 243 px) */
.logo { height: auto; aspect-ratio: 1079 / 251; }
.noga-logo { display: block; width: 17rem; height: auto; }

/* GORJE-121c: Zgodovina - the club's emblem, the gymnast. A dark block under the page title; the gymnast is big on the
   left since GORJE-121d (PRAVILA.md, design/logo-pravila-121). */
.znak-drustva { display: grid; gap: 2rem; align-items: center; margin-block: 3rem 4rem; padding: 2.5rem 1.5rem; border-radius: 1rem; background: var(--noc); color: var(--bela); }
.znak-besedilo { display: grid; gap: 1rem; max-width: 60ch; }
.znak-besedilo .oznaka { color: var(--ivje); }
.znak-besedilo .t-base { color: var(--ivje); }
.znak-logo { display: grid; gap: 0.75rem; margin: 0; }
.znak-logo img { display: block; width: min(100%, 22.5rem); height: auto; }
.znak-logo figcaption { color: var(--ivje); }
/* GORJE-121d: the gymnast big on the left (Kir 20.10: as he is now, until Kir redraws him), text and the full logo on the right */
.znak-desno { display: grid; gap: 2rem; }
.znak-telovadec { display: block; width: clamp(7.5rem, 40vw, 11.25rem); height: auto; justify-self: center; }
@container (min-width: 48rem) { .znak-drustva { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 2.5rem; padding: 3rem 2.5rem; } .znak-telovadec { width: 100%; } }
@container (min-width: 64rem) { .znak-drustva { grid-template-columns: 16.25rem minmax(0, 1fr); gap: 4rem; padding: 3.5rem 4rem; } }

/* shared */
.mreza-2 { display: grid; gap: 1.5rem; align-items: stretch; }
@container (min-width: 48rem) { .mreza-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mreza-4 { display: grid; gap: 1.5rem; align-items: stretch; }
@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)); } }
.t-num { font-family: var(--f-glas); font-weight: 700; font-size: var(--t-4xl-num); line-height: 1; letter-spacing: -.01em; }
.clanek-glava { display: grid; gap: 1rem; justify-items: start; }
.opozorilo-kopija { padding: 0.75rem 1rem; border-radius: var(--r-polje); background: var(--led); color: var(--noc); }
.kartica-ena { max-width: 25rem; display: grid; }
.naslov-strani .oznaka { margin-bottom: -0.25rem; }

/* result card on a dark band: text dark */
.temno .kartica-rezultat { color: var(--noc); }
.kartica-rezultat .uvrstitev .t-sm { min-width: 0; }

/* article: sources, quote, facts */
.viri { list-style: none; margin: -0.5rem 0 0; padding: 0; display: grid; }
.viri .povezava { text-decoration-color: currentColor; }
.citat { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--jezero); font-weight: 600; max-width: 40rem; }
.dejstva { padding: 1.5rem; display: grid; gap: 1rem; max-width: 40rem; }
.dejstva dl { margin: 0; display: grid; gap: 0; }
.dejstva dl > div { display: grid; gap: 2px; padding: 0.75rem 0; border-top: 1px solid var(--crta); }
.dejstva dt { font-size: var(--t-lg); }
.dejstva dd { margin: 0; color: var(--megla); }
@container (min-width: 40rem) { .dejstva dl > div { grid-template-columns: 11.25rem 1fr; gap: 1rem; align-items: baseline; } }

/* sports list with Svizec family */
.sekcija--svizec { grid-template-columns: 4rem minmax(0, 1fr) 1.5rem; gap: 0.25rem 1.25rem; }
.sekcija--svizec > img { width: 4rem; height: 4rem; object-fit: contain; grid-column: 1; grid-row: 1; }
.sekcija--svizec > div { grid-column: 2; grid-row: 1; display: grid; gap: 0.25rem; min-width: 0; }
.sekcija--svizec .t-base { color: var(--noc); grid-column: auto; }
.sekcija--svizec .pu { grid-column: 3; grid-row: 1; }
@container (min-width: 48rem) { .sekcija--svizec { grid-template-columns: 6rem minmax(0, 1fr) 1.5rem; gap: 0.25rem 2rem; } .sekcija--svizec > img { width: 6rem; height: 6rem; } }

/* sport page: Svizec in place of the invented photo */
.sport-svizec { margin: 0; display: grid; place-items: center; aspect-ratio: 560 / 420; border-radius: var(--r-kartica); background: var(--led); }
.sport-svizec img { width: min(62%, 20.625rem); height: auto; }
.sport-zgodba { display: grid; gap: var(--med-razdelki); }
.sport-zgodba .o-sekciji { max-width: 42.5rem; gap: 1rem; }

/* people page */
.kartica-sekcija { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.25rem; align-items: start; }
.kartica-sekcija img { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.kartica-sekcija .k-vsebina { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.25rem; justify-items: start; height: 100%; }
.vodstvo { padding: 1.75rem; display: grid; gap: 0.75rem; max-width: 47.5rem; }
.kartica-olimpijec { padding: 1.5rem; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 0.375rem; }
.kartica-olimpijec .leta { color: var(--jezero); }
.kartica-olimpijec .dosezek { padding-top: 0.75rem; margin-top: 0.375rem; border-top: 1px solid var(--crta); align-self: end; }

/* weekly schedule rows: the sport is a link */
.dan-kaj { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .dan-kaj:hover { text-decoration-color: currentColor; } }

/* ---------- home page additions (v196 content that the prototype did not have) ---------- */
.prvi-gib .oznaka { opacity: .9; }
.uvod-levo { display: grid; gap: 1rem; align-content: start; }
.uvod-stevilke { display: flex; flex-wrap: wrap; gap: 1rem 3rem; padding-block: 0.5rem; }
.uvod-stevilke > div { display: grid; gap: 0.25rem; }
.uvod-stevilke .t-sm { color: var(--megla); }
.napoved-tekme { padding: 1.25rem; display: grid; gap: 1rem; align-content: start; justify-items: start; }
@container (min-width: 48rem) { .napoved-tekme { padding: 1.75rem; } }
.termin-kartica { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: start; }
.datum-kocka { display: grid; place-items: center; align-content: center; width: 4rem; height: 4.5rem; border-radius: var(--r-polje); background: var(--dogodek-tekma); line-height: 1; }
.datum-kocka .stevilka { font-size: 1.875rem; font-weight: 700; }
.datum-kocka .t-xs { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.termin-kartica > div { display: grid; gap: 0.25rem; }
.dan .danes[hidden] { display: none !important; }
.urnik > .t-xs { margin-top: 0.25rem; }

/* history: 25 cards in one row, scrolled with a finger or the trackpad (native scroll, snap to cards). Card widths are
   shares of the row, so the last visible card always shows about 40 % («there is more»), never a thin cut edge (Kir 23. 10. 2026).
   With prva.js: arrows under the row, drag with the mouse, the grey scrollbar hidden (.trak--js). */
.zgodovina-trak { list-style: none; margin: 0; padding: 0.25rem 0.25rem 1.25rem; display: grid; grid-auto-flow: column; grid-auto-columns: 80%;
  gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0.25rem; align-items: stretch; }
.zgodovina-trak:focus-visible { outline: 3px solid var(--jezero); outline-offset: 2px; border-radius: var(--r-kartica); }
.zgodovina-trak .kartica-zgodovina { scroll-snap-align: start; padding: 1.5rem; display: grid; grid-template-rows: auto auto 1fr; gap: 0.75rem; align-content: start; }
.zgodovina-trak .kartica-zgodovina .t-sm { color: var(--ivje); }
.trak--js { scrollbar-width: none; }
.trak--js::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .trak--js { cursor: grab; user-select: none; } }
.trak--js.je-vlecenje { cursor: grabbing; scroll-snap-type: none; }
.trak-spodaj { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.25rem; }
.trak-gumbi { display: flex; gap: 0.5rem; flex: none; }
.trak-gumbi[hidden] { display: none; }
.gumb.trak-gumb { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; border-radius: 50%; }  /* two classes: vid.css «.gumb { min-height: 3rem }» loads later and made the circle 44 × 48, an oval (Kir 23. 10. 2026) */
.trak-gumb:disabled { opacity: .35; cursor: default; }
.trak-gumb[data-trak-smer="1"] .pu { translate: -0.28rem 0; }  /* the arrow symbols sit off-centre in their 18 × 18 box */
.trak-gumb[data-trak-smer="-1"] .pu { translate: 0.28rem 0; }
@container (min-width: 40rem) { .zgodovina-trak { grid-auto-columns: calc((100% - 2rem) / 2.4); } }
@container (min-width: 64rem) { .zgodovina-trak { grid-auto-columns: calc((100% - 3rem) / 3.4); } }