/* GORJE-358: «Najdi svoj šport» (sporti.html) - a row of big bright cards that scrolls sideways, the sport names above it.
   Built by zgradi.py sporti(); sporti.js moves the row with the buttons and marks the name of the card in front.
   Each card has its own step of the club gradient (--sp, barva_gradienta in zgradi.py); text is --noc on all of them. Kir's rules kept: cards in the row
   are the same height and the link sits at the bottom; on hover only the arrow moves; no colour line under a card. */

.sp-glava { padding-block: 2.5rem 1.25rem; }

/* the row starts at the left edge of the content and runs out to the right edge of the window */
.sp-oder { --sp-zacetek: max(var(--rob), calc((100% - var(--vsebina-max)) / 2)); padding-bottom: 1.5rem; }
.sp-vodilo { padding-bottom: 1.25rem; }

/* the sport names: one line that scrolls on a phone, wraps on a computer */
.sp-cipi-ovoj { min-width: 0; margin-inline: calc(-1 * var(--rob)); padding-inline: var(--rob); overflow-x: auto; scrollbar-width: none; }
.sp-cipi-ovoj::-webkit-scrollbar { display: none; }
.sp-cipi { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0.25rem 0; width: max-content; }
/* .sp-cip: the one chip of the site (orodja/stran.css, GORJE-373b, Kir 05.11 «Везде A»: the chosen one dark, not in the sport's
   colour); the sport's colour stays in the dot, white on the chosen one */
.sp-cip { padding-left: 1rem; }
.sp-cip::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--sp); box-shadow: inset 0 0 0 1px rgba(30, 52, 68, .18); flex: none; }
.sp-cip[aria-current="true"]::before { background: var(--bela); box-shadow: none; }

/* the 2 arrows (computer only) stand to the right of the sport names, above the row - never on a card (GORJE-364, Kir 05.11.2026:
   «кнопка прям посередине карточки - полный отстой»: on the row they covered the picture of the next card) */
.sp-tir-ovoj { position: relative; }
.sp-gumba { display: none; }
/* .sp-gumb: the one round icon button of the site, orodja/stran.css (GORJE-373b) */
.sp-gumb .pu { width: 1.25rem; height: 1.25rem; }

/* the row of cards */
.sp-tir { position: relative; display: flex; align-items: stretch; gap: 1rem; list-style: none; margin: 0; padding: 0.5rem var(--sp-zacetek) 2rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-zacetek); scrollbar-width: none; }
.sp-tir::-webkit-scrollbar { display: none; }
.sp-tir:focus-visible { outline: 3px solid var(--fokus-temno); outline-offset: -3px; border-radius: var(--r-kartica); }

.sp-k.kartica { flex: 0 0 min(86%, 22rem); display: flex; flex-direction: column; scroll-snap-align: start; background: var(--sp); }
.sp-slika { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--led); }
.sp-slika img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transition: scale calc(var(--cas-pojav) * var(--k)) var(--ease-out); }
.sp-slika .sp-svizec { object-fit: contain; padding: 1.5rem; }
@media (hover: hover) and (pointer: fine) { .sp-k:hover .sp-slika img { scale: calc(1 + .04 * var(--gib)); } }

.sp-besedilo { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.375rem 1.25rem; min-width: 0; }
.sp-ime { margin: 0; font-family: var(--f-glas); font-weight: 600; font-size: 2.375rem; line-height: 0.9; letter-spacing: -0.005em; text-transform: uppercase; color: var(--noc); text-wrap: balance; }
.sp-ime--dolgo { font-size: 2rem; }
/* no underline on the sport name, not even on hover (GORJE-364, Kir 05.11.2026): the shadow and the arrow show the card is a link */
.sp-ime .razteg { color: inherit; text-decoration: none; }
.sp-geslo { margin: 0; font-size: var(--t-base); font-weight: 600; line-height: 1.35; color: var(--noc); }

/* the 3 facts: label left, value right, thin lines between them in the card's own dark */
.sp-dejstva { display: grid; margin: 0.25rem 0 0; }
.sp-dejstva > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid rgba(30, 52, 68, .16); }
.sp-dejstva dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--noc); padding-top: 0.125rem; }  /* GORJE-427: was 78 % night, 3.6:1 on the blue card (WCAG 4.5:1); the token also follows the low-vision versions */
.sp-dejstva dd { margin: 0; font-size: var(--t-sm); line-height: 1.4; color: var(--noc); }

.sp-dno { margin: auto 0 0; padding-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); font-weight: 700; color: var(--noc); }
.sp-dno .pu { width: 1.5rem; height: 1.5rem; transition: translate calc(var(--cas-odziv) * var(--k)) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sp-k:hover .sp-dno .pu { translate: calc(4px * var(--gib)) 0; } }

.sp-konec { padding-top: 0; }

@container (min-width: 48rem) {
  .sp-k.kartica { flex-basis: 23rem; }
  .sp-ime { font-size: 2.75rem; }
  .sp-besedilo { padding: 1.5rem 1.625rem 1.5rem; }
  .sp-tir { gap: 1.25rem; }
}
@container (min-width: 64rem) {
  /* on a computer the names wrap and the arrows sit to the right of them */
  .sp-cipi-ovoj { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .sp-cipi { flex-wrap: wrap; width: auto; }
  .sp-vodilo { display: flex; align-items: flex-end; gap: 1.5rem; }
  .sp-cipi-ovoj { flex: 1; }
  .sp-gumba:not([hidden]) { display: flex; gap: 0.5rem; flex: none; }
  .sp-glava { gap: 0.75rem; padding-top: 1.75rem; }
  .sp-glava .t-lg { max-width: none; }
  /* a computer screen is wide and low: the card lies on its side - the scene left (its own 4:3 crop, shown whole),
     the colour and the facts right, so the whole card and its link fit in the first screen and the next card peeks in */
  .sp-k.kartica { flex-basis: min(56rem, 80%); flex-direction: row; }
  .sp-slika { flex: 0 0 57%; aspect-ratio: 4 / 3; align-self: stretch; }
  .sp-besedilo { padding: 1.75rem 1.875rem 1.5rem; gap: 0.75rem; }
  .sp-ime { font-size: 3rem; }
  .sp-ime--dolgo { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) { .sp-tir { scroll-behavior: auto; } }

/* GORJE-429 (Anže 10.11.2026): «Vodi» with the 2rem face (.obraz, the list size) - the label stands on the middle of the face and
   the name, the row stays one line and only as tall as the face */
.sp-dejstva > div:has(.ob-ime) { align-items: center; padding: 0.375rem 0; }
.sp-dejstva > div:has(.ob-ime) dt { padding-top: 0; }