/* ═══════════════════════════════════════════════
   HSHL — sections.css
   Sadržajni blokovi. Prepisuje se ekran po ekran (faza 2 — redizajn);
   neprepisani blokovi još stoje na tokenima faze 1 kroz most u base.css.
═══════════════════════════════════════════════ */

/* ═══════════ HERO ═══════════
   Dvije izvedbe iz istog predloška: hero naslovnice unutar tracka od 220svh sa
   sticky djetetom, i mirni hero podstranica. Koreografiju vozi js/pokret.js. */

/* Track dobiva visinu i pinanje tek uz skriptu. Bez nje bi 220svh značilo da
   posjetitelj skrola više od ekrana prikovanog, nepromijenjenog heroja
   prije nego dođe do sadržaja — a koreografija koja bi to opravdala ne radi.
   Klasu upisuje js/pokret.js, kao i `hero--vozi`. */
.hero-track { position: relative; background: var(--led); }
/* Bio je 380svh (i špil 340svh) — skrol do vijesti trajao je ~6 ekrana, što je
   Matej u rujnu 2026. ocijenio predugim. Koreografija je vezana uz udio
   tracka, pa kraći track sve samo ubrza. */
.hero-track--vozi { height: 220svh; }
.hero-track--vozi > .hero--track {
  position: sticky; top: 0;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}

.hero {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(88svh, 900px);
  padding: 0;
}

/* ── Pozadina ── */
.hero__video,
.hero__pozadina {
  position: absolute; inset: -4%;
  overflow: hidden;
  z-index: 0;
}
.hero__video video,
.hero__pozadina-slika {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Ken Burns: jednom, na dolasku. Gasi ga prefers-reduced-motion iz base.css. */
.hero--track .hero__video { animation: hero-zoom 12s ease-out both; }
@keyframes hero-zoom {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(11,13,20,.97) 6%,
    rgba(11,13,20,.62) 45%,
    rgba(11,13,20,.8) 100%);
}
.hero__crte {
  position: absolute; inset: 0; z-index: 1;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 14px, transparent 14px 28px);
}

/* ── Obris „HSHL" preko videa ──
   Postoji samo dok ga koreografija vozi. Bez skripte (ili uz reducirani pokret)
   nikad ne izblijedi, pa bi ostao stajati preko naslova — a oba su golema i
   verzalna, što je nečitljiva zbrka. Sloj je ukrasan i `aria-hidden`, pa se
   njegovim izostankom ne gubi nijedna informacija. */
.hero__oznaka { display: none; }
.hero--vozi .hero__oznaka {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero__oznaka svg { width: min(88vw, 1400px); overflow: visible; }
.hero__oznaka text {
  fill: none;
  stroke: rgba(237,241,247,.85);
  stroke-width: 4;
  stroke-linejoin: round;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: 240px;
  letter-spacing: .02em;
}

/* ── Poziv na skrol ──
   Isto kao obris: bez koreografije nema što najavljivati, a stajao bi preko
   uvodnog teksta. */
.hero__cue { display: none; }
.hero--vozi .hero__cue {
  position: absolute; left: 50%; bottom: 76px; z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  will-change: opacity;
}
.hero__cue span {
  font-family: var(--oznaka);
  font-size: .58rem;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.hero__cue i {
  display: block; width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(237,241,247,.5), transparent);
  animation: hero-cue 1.6s ease-in-out infinite;
}
@keyframes hero-cue {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ── Sadržaj ── */
.hero__inner {
  position: relative; z-index: 2;
  padding: 110px var(--pad-x) clamp(48px, 7vh, 96px);
  will-change: transform, opacity;
}
.hero__eyebrow { margin-bottom: 20px; }

.hero__title {
  display: flex; flex-direction: column;
  letter-spacing: -.01em;
  margin: 0;
}
/* Omotač reda reže ono što viri dok red putuje odozdo. `padding-bottom` je tu
   zbog descendera (j, g) — bez njega ih `overflow: hidden` odsiječe. */
.hero__linija { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__rijec  { display: block; will-change: transform; }

.hero__rep {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 28px;
  margin-top: 32px;
  will-change: opacity, transform;
}
.hero__lead {
  max-width: 52ch;
  font-size: 1.02rem;
  color: var(--tekst);
  margin: 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Početna stanja koreografije ──
   Postoje SAMO kad js/pokret.js upiše .hero--vozi, i to tek kad je siguran da
   će ih i maknuti. Bez skripte je hero statičan i potpuno čitljiv (pravilo 12). */
.hero--vozi .hero__eyebrow { opacity: 0; }
.hero--vozi .hero__rep     { opacity: 0; transform: translateY(36px); }
.hero--vozi .hero__rijec   { opacity: 0; transform: translateY(130%); }

@media (max-width: 920px) {
  .hero__oznaka text { stroke-width: 6; }
  .hero__cue { bottom: 56px; }
  .hero__inner { padding-top: 90px; }
  .hero__rep { flex-direction: column; align-items: flex-start; }
}

/* ═══════════ SAVEZ U BROJKAMA ═══════════
   Bez skripte je ovo obična mreža kartica — čitljiva, sve vidljivo, bez tracka
   i bez preklopa. Špil, pinanje i preklop s herojem uključuje tek klasa
   `statistika--vozi`, koju upisuje js/pokret.js (pravilo 12). */

/* Okomiti razmak dolazi iz `.razmak--*`, koje sekcija već nosi. */
.statistika { position: relative; }
.statistika__sticky { position: relative; }
.statistika__podloga,
.statistika__crte { display: none; }

.statistika__oznaka {
  display: block;
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.statistika__spil {
  display: grid;
  /* Mreža (bez špila) na telefonu: uz minmax 240px stane samo jedan stupac,
     pa kartica omjera 3:4 na 335px postane visoka 447px i gotovo prazna —
     na stranici Savez to je pet takvih kartica i ~2200px skrolanja kroz
     prazno. Dva uža stupca drže isti omjer i isti raspored. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 46%), 1fr));
  gap: 2px;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── Kartica ──
   Rezan gornji desni kut je trag klizaljke; donji rub nosi akcent selekcije.
   Omjer 3:4 vrijedi i u mreži i u špilu, pa prijelaz među njima ne mijenja
   proporciju. */
.statistika__kartica {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--panel-svj), var(--led));
  border: 1px solid rgba(255,255,255,.12);
  border-bottom: 4px solid var(--linija);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.statistika__kartica--crvena { border-bottom-color: var(--crvena); }
.statistika__kartica--plava   { border-bottom-color: var(--plava); }
.statistika__kartica--bijela  { border-bottom-color: var(--bijela); }

/* Pozadinska fotografija: pod sadržajem, prigušena i zatamnjena odozdo, gdje
   stoje broj i opis. Led na fotografijama je gotovo bijel, pa gradijent kod
   broja ide do .92 — tek tako prigušeni opis drži 4.5:1 i nad svijetlim ledom. */
.statistika__kartica--slika { overflow: hidden; }
.statistika__slika {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.7);
  z-index: 0;
}
.statistika__kartica--slika::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(8,9,15,.94) 0%, rgba(8,9,15,.88) 42%, rgba(8,9,15,.55) 75%, rgba(8,9,15,.4) 100%);
  pointer-events: none;
}
.statistika__kartica--slika > :not(.statistika__slika) { position: relative; z-index: 2; }

/* Oznaka kartice je 0.6rem, dakle sitna — crvena ide na --crvena-tekst. */
.statistika__oznaka-kartice {
  font-family: var(--oznaka);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.statistika__kartica--crvena .statistika__oznaka-kartice { color: var(--crvena-tekst); }
.statistika__kartica--plava   .statistika__oznaka-kartice { color: var(--plava); }
.statistika__kartica--bijela  .statistika__oznaka-kartice { color: var(--bijela); }

/* Kartica ima tri kata: oznaka gore, broj s opisom, fusnota dolje. Oznaka i
   fusnota su neobavezne, pa `space-between` sam po sebi ne drži raspored — s
   jednim djetetom bi broj ostao pri vrhu i ispod njega bi zjapila prazna
   ploha. `margin-top: auto` ga u tom slučaju spusti na dno, gdje i pripada. */
.statistika__jezgra { margin-top: auto; }

.statistika__broj {
  display: block;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: clamp(3.6rem, 6.5vw, 6rem);
  line-height: .9;
  color: var(--bijela);
  font-variant-numeric: tabular-nums;
}
.statistika__opis {
  display: block;
  margin-top: 12px;
  font-family: var(--oznaka);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.statistika__fusnota {
  font-family: var(--oznaka);
  font-size: .72rem;
  color: var(--tekst-prigusen);
}

/* Kartica s vlastitom stranicom je cijela poveznica: natpis je stvarni <a>, a
   njegov ::after prekriva karticu. `position: static` mora pobijediti
   `.statistika__kartica--slika > :not(...)`, inače bi se ::after mjerio od
   samog natpisa — zato je pravilo iza njega i iste specifičnosti. */
.statistika__kartica .statistika__veza {
  position: static;
  align-self: flex-start;
  margin-top: 14px;
  font-family: var(--oznaka);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--bijela);
  border-bottom: 2px solid currentColor;
  padding-bottom: 3px;
}
.statistika__veza::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 3;
}
.statistika__kartica:has(.statistika__veza:hover) .statistika__slika { filter: saturate(1); }
.statistika__veza:focus-visible { outline: none; }
.statistika__veza:focus-visible::after { outline: 2px solid var(--plava); outline-offset: -4px; }

/* ── Špil: samo uz skriptu ──
   Track je 220svh, a `margin-top: -100svh` ga NAMJERNO preklapa s herojem: dok
   hero na kraju svoje ljestvice blijedi, ovaj se već slaže iza njega, pa je
   prijelaz bešavan umjesto rez. Sticky dijete kreće nevidljivo i ulazi kroz
   `vIn` u js/pokret.js. */
.statistika--vozi {
  height: 220svh;
  margin-top: -100svh;
  padding-block: 0;
  background: transparent;
  z-index: 3;
}
.statistika--vozi .statistika__sticky {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.statistika--vozi .statistika__podloga {
  display: block;
  position: absolute; inset: 0;
  background: var(--led);
}
.statistika--vozi .statistika__crte {
  display: block;
  position: absolute; inset: 0;
}
.statistika--vozi .statistika__oznaka {
  position: absolute; top: 104px; left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}
.statistika--vozi .statistika__spil {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0;
}
/* Četveroznamenkasti broj u špilu: vidljivi pojas kartice je uži od same
   kartice, pa puna veličina ispadne pod susjednu. U mreži (bez skripte) nema
   preklopa i broj ostaje u punoj veličini. */
.statistika--vozi .statistika__kartica--dug .statistika__broj {
  font-size: clamp(2.8rem, 4.6vw, 4.2rem);
}

/* U špilu kartice leže jedna preko druge u sredini; pogon ih razlaže. */
.statistika--vozi .statistika__kartica {
  position: absolute; left: 50%; top: 50%;
  width: clamp(240px, 24vw, 340px);
  margin: calc(clamp(240px, 24vw, 340px) * -0.6667) 0 0 calc(clamp(240px, 24vw, 340px) / -2);
  will-change: transform;
  transform: translateY(120vh);
}

/* Mreža (bez špila) na telefonu ima dva stupca, dakle karticu od ~139px na
   ekranu od 320px; uz padding 28px ostaje 83px sadržaja, a „1935" na donjoj
   granici od 3.6rem traži 157px. Brojka je izlazila iz kartice i razvlačila
   dokument na 400px. Špil se ovoga ne tiče — njegove su kartice šire i imaju
   vlastitu granicu za četveroznamenkaste brojeve. */
@media (max-width: 920px) {
  .statistika:not(.statistika--vozi) .statistika__kartica { padding: 18px 16px; }
  .statistika:not(.statistika--vozi) .statistika__broj { font-size: clamp(2rem, 9vw, 6rem); }
  .statistika:not(.statistika--vozi) .statistika__opis { letter-spacing: .1em; }
}

@media (max-width: 920px) {
  .statistika--vozi .statistika__oznaka { top: 84px; }
  /* I `margin-top` mora pratiti mobilnu širinu, ne desktopsku: `clamp` na
     375px pada na svoju donju granicu (240px), pa je odmak bio -160px dok je
     polovica stvarne kartice 155px. Pogon računa položaj kaskade od sredine
     kartice, pa se ta razlika vidi kao pomak cijelog špila. */
  .statistika--vozi .statistika__kartica {
    width: min(62vw, 340px);
    margin: calc(min(62vw, 340px) * -0.6667) 0 0 calc(min(62vw, 340px) / -2);
  }

  /* Okomita kaskada, za razliku od vodoravne lepeze, pokriva DONJI dio svake
     kartice osim posljednje: na 375px je kartica visoka 310px, a pomak između
     njih ~107px, pa sljedeća proguta sve ispod toga. Zato u kaskadi sadržaj
     ide u vidljivi pojas na vrhu; fusnota ostaje na dnu, gdje smije nestati
     jer je dopuna, a ne podatak.

     Oznaka, broj I opis moraju stati u tih ~107px — desktopski razmaci i broj
     od 3.6rem daju 126px i opis („godina osnutka") ispadne pod sljedeću
     karticu. Zato su ovdje uži padding i manji broj; vidljivi pojas time drži
     cijeli podatak, a ne samo brojku bez značenja. */
  .statistika--vozi .statistika__kartica { justify-content: flex-start; padding: 18px 20px; }
  .statistika--vozi .statistika__jezgra { margin-top: 8px; }
  .statistika--vozi .statistika__broj,
  .statistika--vozi .statistika__kartica--dug .statistika__broj { font-size: 2.4rem; }
  .statistika--vozi .statistika__opis { margin-top: 8px; }
  .statistika--vozi .statistika__fusnota { margin-top: auto; }
  .statistika--vozi .statistika__veza { margin-top: auto; }

  /* Podatak je ovdje na VRHU kartice, pa se i zatamnjenje fotografije okreće:
     najtamnije gore, gdje stoje broj i opis. */
  .statistika--vozi .statistika__kartica--slika::before {
    background: linear-gradient(to bottom, rgba(8,9,15,.94) 0%, rgba(8,9,15,.88) 38%, rgba(8,9,15,.55) 75%, rgba(8,9,15,.4) 100%);
  }
}

/* ── Prorez naslova na telefonu ────────────────
   Dizajn je rađen na engleskim naslovima, gdje .88 izgleda zbijeno i točno.
   Hrvatski ima Č, Ć, Š, Ž i Đ — kvačica se diže IZNAD verzalne visine, pa na
   telefonu, gdje se isti naslov lomi u dva ili tri retka umjesto u jedan,
   udara u redak iznad sebe. Izmjereno na „Filip JARČOV": kvačica je sjedala
   na osnovnu liniju retka iznad. Diže se samo ono što se na telefonu doista
   lomi; jednoredni ukrasni brojevi (godina, broj dresa, vodeni žig) ostaju
   zbijeni jer nemaju u što udariti. */
@media (max-width: 920px) {
  .wc__head h2,
  .wc__card h3,
  .vijest__naslov,
  .arhiva__glava h1,
  .igrac__ime,
  .klub-profil__naslov,
  .sekcija-cta__naslov { line-height: .98; }
}

/* ═══════════ VIJESTI — MOZAIK ═══════════
   Mreža od 12 stupaca s razmakom od 2px: hairline podloga se vidi kroz fuge,
   pa pločice djeluju kao ploče na ledu, a ne kao kartice sa sjenama. */

.section__head {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(32px, 5vh, 56px);
}
/* `min-width: 0` po treći put: naslov je stavka flexa, a stavka se po zadanom
   ne smanjuje ispod svoje najduže riječi. Bez ovoga `overflow-wrap` iz base.css
   nikad ne dođe na red i „Reprezentacije" na ekranu od 320px viri iz okvira. */
.section__head h2 { margin: 0; min-width: 0; }
.section__more {
  font-family: var(--oznaka);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  border-bottom: 2px solid var(--crvena);
  padding-bottom: 5px;
  transition: color .25s ease;
}
.section__more:hover { color: #fff; }

.vijesti-mozaik {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 225px;
  gap: 2px;
}
/* Raspored „mreza": sve pločice jednake, bez velike i bez izmjene širina. */
.vijesti-mozaik--mreza { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.vijesti-mozaik--mreza .vijesti-mozaik__plocica { grid-column: auto; grid-row: auto; }

.vijesti-mozaik__plocica {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linija);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--panel-tam);
}
.vijesti-mozaik__plocica--glavna { grid-column: span 7; grid-row: span 2; }
.vijesti-mozaik__plocica--sirok  { grid-column: span 7; }
.vijesti-mozaik__plocica--uzak   { grid-column: span 5; }

.vijesti-mozaik__slika {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92);
  transition: transform .8s var(--krivulja), opacity .4s ease;
}
.vijesti-mozaik__slika--prigusena { opacity: .75; }
.vijesti-mozaik__plocica:hover .vijesti-mozaik__slika { transform: scale(1.04); }
.vijesti-mozaik__plocica:hover .vijesti-mozaik__slika--prigusena { transform: scale(1.05); opacity: .95; }

/* Scrim nosi tekst; bez njega naslov nad svijetlom fotografijom nestaje.

   Preljev mora biti gust kroz CIJELU visinu teksta, ne samo pri dnu. Na
   desktopu naslov stane u dva retka i ostaje u gustom dijelu; na telefonu je
   pločica uska, isti naslov ide u pet redaka i gornji su padali na prozirni
   kraj preljeva. Izmjereno na naslovnici: bijeli naslov preko grba saveza
   (svijetla naslovna slika) — ispod 4.5:1 iz pravila 13. Zato .92 sve do 70 %
   visine, a prozirno ostaje samo gornji pojas koji je ionako padding. */
.vijesti-mozaik__tijelo {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px;
  background: linear-gradient(to top,
    rgba(11,13,20,.97) 0%,
    rgba(11,13,20,.92) 70%,
    rgba(11,13,20,.70) 92%,
    rgba(11,13,20,0)   100%);
  pointer-events: none;
}
.vijesti-mozaik__plocica--glavna .vijesti-mozaik__tijelo {
  gap: 10px;
  padding: clamp(20px, 3vw, 36px);
}

.vijesti-mozaik__meta { display: flex; align-items: center; gap: 14px; }
.vijesti-mozaik__izdvojeno {
  font-family: var(--oznaka);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--crvena-tekst);
}
.vijesti-mozaik__tijelo time {
  font-family: var(--oznaka);
  font-size: .6rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.vijesti-mozaik__meta time { font-size: .64rem; }

.vijesti-mozaik__naslov {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .95;
  color: var(--bijela);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
}
.vijesti-mozaik__naslov--manji {
  font-stretch: var(--sirina-jaka);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.08;
}
.vijesti-mozaik__lead {
  font-size: .9rem;
  color: var(--tekst);
  max-width: 60ch;
}

/* ── Video pločica ── */
.vijesti-mozaik__plocica--video {
  align-items: center; justify-content: center;
  background-color: #0F121B;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 14px, transparent 14px 28px);
}
.vijesti-mozaik__oznaka {
  position: absolute; top: 14px; left: 16px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.vijesti-mozaik__pokreni { display: flex; align-items: center; gap: 16px; }
.vijesti-mozaik__pokreni b {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--bijela);
}
/* Jedini krug u temi: gumb za pokretanje. Rez klizaljke vrijedi za plohe, a
   simbol reprodukcije je univerzalno okrugao — kvadratni bi se čitao kao stop. */
.vijesti-mozaik__play {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: var(--crvena);
  color: #fff;
  font-size: .9rem;
  clip-path: circle(50%);
  animation: vijesti-mozaik-puls 2.2s ease-out infinite;
}
@keyframes vijesti-mozaik-puls {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(1.12); opacity: .82; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 920px) {
  .vijesti-mozaik { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .vijesti-mozaik__plocica,
  .vijesti-mozaik__plocica--glavna,
  .vijesti-mozaik__plocica--sirok,
  .vijesti-mozaik__plocica--uzak { grid-column: auto; grid-row: auto; min-height: 210px; }
}

/* ═══════════ REPREZENTACIJE ═══════════
   Popis punih redova od ruba do ruba. Bez numeracije — prototipski redni broj
   je sugerirao poredak po važnosti kojeg nema. */

.selekcije {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--linija);
}

/* Crveni wipe dolazi slijeva. Vozi ga `background-size`, ne pseudoelement s
   transformom: gradijent je već na elementu, pa se animira jedna vrijednost
   umjesto da se stvara dodatni sloj. */
.selekcija {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(18px, 2.6vw, 30px) var(--pad-x);
  border-bottom: 1px solid var(--linija);
  background-image: linear-gradient(90deg, rgba(200,16,46,.22), rgba(200,16,46,.04) 70%, transparent);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .55s cubic-bezier(.7, 0, .2, 1);
}
.selekcija:hover { background-size: 100% 100%; }

.selekcija__tekst { display: flex; flex-direction: column; gap: 6px; }
.selekcija__naziv {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  line-height: 1;
  color: var(--bijela);
}
.selekcija__opis {
  font-family: var(--oznaka);
  font-size: .76rem;
  color: var(--tekst-prigusen);
  max-width: 72ch;
}
.selekcija__strelica {
  font-family: var(--oznaka);
  font-size: 1.4rem;
  color: var(--crvena-tekst);
  transition: transform .3s var(--krivulja);
}
.selekcija:hover .selekcija__strelica { transform: translateX(6px); }

/* ═══════════ LJESTVICE ═══════════ */

/* Isti razlog: stavke grida moraju smjeti pasti ispod min-contenta tablice. */
.ljestvice { display: grid; gap: clamp(20px, 3vw, 40px); }
.ljestvica { min-width: 0; }
/* `table-layout: fixed` sprječava da tablica razvuče stranicu, ali bez zadanih
   širina dijeli sve stupce na jednako — šest po 48px na telefonu. Naziv kluba
   tada dobije 48px i „KHL Medveščak Admiral" se lomi u tri retka dok pokraj
   njega zjape prazni stupci od po 48px za jednu znamenku. Brojčani stupci
   dobivaju koliko im treba, naziv uzima ostatak. */
.ljestvica__tablica { table-layout: fixed; }
.ljestvica__tablica th:first-child { width: 2.2em; }
.ljestvica__tablica th:nth-child(n+3) { width: 3.4em; }
/* Naziv kluba je jedini stupac koji smije lomiti; brojevi ostaju u jednom redu. */
.ljestvica__klub { overflow-wrap: break-word; }
.ljestvice--dvije { grid-template-columns: 1fr 1fr; }

.ljestvica {
  background: var(--panel);
  border: 1px solid var(--linija);
  padding: clamp(22px, 2.6vw, 36px);
}
.ljestvica__glava {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--crvena);
}
.ljestvica__glava h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  margin: 0;
}
.ljestvica__sezona {
  font-family: var(--oznaka);
  font-size: .6rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  white-space: nowrap;
}

.ljestvica__tablica { width: 100%; border-collapse: collapse; }
.ljestvica__tablica th {
  font-family: var(--oznaka);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  padding: 8px 6px;
  text-align: center;
}
.ljestvica__tablica td {
  font-family: var(--oznaka);
  font-size: .82rem;
  color: var(--tekst-prigusen);
  padding: 13px 6px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ljestvica__tablica .t-left  { text-align: left; }
.ljestvica__tablica .t-right { text-align: right; }
.ljestvica__tablica tbody tr { transition: background .2s ease; }
.ljestvica__tablica tbody tr:hover { background: rgba(255,255,255,.03); }

.ljestvica__poz { font-weight: 700; }
/* Prvak: crveni redni broj i jači naziv — jedina razlika među redovima. */
.ljestvica__tablica .is-prvak .ljestvica__poz { color: var(--crvena-tekst); }
.ljestvica__tablica .is-prvak .ljestvica__klub { color: var(--bijela); }

.ljestvica__klub {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-stretch: var(--sirina-jaka);
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .03em; text-transform: uppercase;
  color: rgba(237,241,247,.75);
  transition: color .2s ease;
}
.ljestvica__klub:hover { color: var(--bijela); }

.ljestvica__tablica td b {
  font-size: .9rem; font-weight: 700;
  color: var(--bijela);
}

.ljestvica__napomena {
  margin-top: 14px;
  font-family: var(--oznaka);
  font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}

@media (max-width: 920px) {
  .ljestvice--dvije { grid-template-columns: 1fr; }
  .selekcija { gap: 16px; }
}

/* Telefon: tablica od 306px dijelila je ~90px nazivu kluba, pa se „KHL
   Medveščak Admiral" lomio u tri retka, a „Medveščak" (jedna riječ šira od
   stupca) prelazio u stupac s utakmicama. Oznaka vrste kluba otpada
   (`hshl_ut_naziv_ekipe_html()`), naziv gubi široki rez, a panel i stupci
   vraćaju po koji piksel — naziv tako dobiva ~120px i najdulji staje u dva
   retka. */
@media (max-width: 600px) {
  .ljestvica { padding: 18px 14px; }
  .ljestvica__tablica th,
  .ljestvica__tablica td { padding-left: 3px; padding-right: 3px; }
  .ljestvica__tablica td { padding-top: 11px; padding-bottom: 11px; }
  .ljestvica__tablica th:first-child { width: 1.4rem; }
  .ljestvica__tablica th:nth-child(n+3) { width: 1.9rem; }
  .ljestvica__tablica th { letter-spacing: .12em; }
  .ljestvica__klub {
    gap: 8px;
    font-stretch: 100%;
    font-size: .8rem;
    letter-spacing: .01em;
    line-height: 1.25;
  }
  .naziv__kratica { display: none; }
}

/* ═══════════ WC 2027 HUB ═══════════
   Jedina sekcija s gradijentom u podlozi: od tamne prema navyju, kao da se
   spušta u dubinu. Ukras je isključivo dijagonalna crta — radial glow je
   izbačen odlukom iz redizajna. */

.wc {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #0D1019, var(--navy-tam) 85%);
  border-top: 1px solid var(--linija);
  padding: var(--pad-y) var(--pad-x);
}
.wc__crte { position: absolute; inset: 0; pointer-events: none; }

.wc__head {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(36px, 5vh, 64px);
}
.wc__head .eyebrow { display: block; margin-bottom: 16px; }
.wc__head h2 { font-size: clamp(3rem, 7.5vw, 6.4rem); line-height: .88; margin: 0; }

/* ── Odbrojavanje ── */
.wc__odbrojavanje {
  position: relative;
  display: flex; flex-wrap: wrap;
  align-items: stretch; justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  margin-bottom: clamp(40px, 6vh, 72px);
}
/* Četiri kućice, a na telefonu u red stanu tri — zadnja ostane sama ispod.
   Mreža 2×2 je uredna i na 320px. */
@media (max-width: 560px) {
  .wc__odbrojavanje {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
  }
}

.wc__kucica {
  display: flex; flex-direction: column; align-items: center;
  min-width: clamp(72px, 10vw, 116px);
  padding: 18px 12px 14px;
  background: rgba(11,13,20,.7);
  border: 1px solid rgba(255,255,255,.1);
  border-bottom: 3px solid var(--crvena);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.wc__broj {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  color: var(--bijela);
  /* Bez tabularnih brojki znamenke skaču u širini svake sekunde. */
  font-variant-numeric: tabular-nums;
}
.wc__oznaka {
  margin-top: 8px;
  font-family: var(--oznaka);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}

/* ── Kartice turnira ── */
.wc__split {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}
.wc__card {
  position: relative;
  display: flex; align-items: center;
  gap: clamp(18px, 2.5vw, 34px);
  padding: clamp(28px, 3.5vw, 46px);
  border: 1px solid rgba(255,255,255,.12);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rez-l)), calc(100% - var(--rez-l)) 100%, 0 100%);
  transition: transform .35s ease;
}
.wc__card:hover { transform: translateY(-6px); }
.wc__card--sisak  { background: linear-gradient(140deg, var(--navy) 0%, var(--navy-tam) 80%); }
.wc__card--zagreb { background: linear-gradient(140deg, var(--bordo) 0%, var(--bordo-tam) 80%); }

/* Logotipi turnira su rađeni za svijetlu podlogu — na tamnoj se gube, pa
   dobivaju vlastitu bijelu plohu s istim rezom kao kartica. */
/* `height: auto` je nužan: WordPress ispisuje atribute width="200"
   height="300", pa je bez njega slika ostajala visoka 300px dok joj CSS
   sužava širinu — logo je bio razvučen (100×300 na telefonu, 144×300 na
   desktopu, umjesto 2:3). */
.wc__logo {
  width: clamp(100px, 10vw, 150px);
  height: auto;
  flex-shrink: 0;
  background: #fff;
  padding: 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.wc__card-body { display: flex; flex-direction: column; gap: 10px; }
.wc__card-tag {
  font-family: var(--oznaka);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(237,241,247,.62);
  margin: 0;
}
.wc__card h3 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: .92;
  margin: 0;
}
.wc__card-motto {
  font-family: var(--oznaka);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(237,241,247,.78);
  margin: 0;
}
.wc__card-link { align-self: flex-start; margin-top: 6px; font-size: .68rem; }
/* Na bordo kartici crvena crta ispod poveznice nestaje u podlozi. */
.wc__card--zagreb .wc__card-link { border-bottom-color: var(--bijela); }

@media (max-width: 920px) {
  .wc__split { grid-template-columns: 1fr; }
  .wc__card { flex-direction: column; align-items: flex-start; }
}
}

/* ═══════════ KLUBOVI ═══════════ */
.clubs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: var(--linija);
  border: 1px solid var(--linija);
}
.club {
  background: var(--panel);
  padding: 30px 24px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .3s ease;
}
.club:hover { background: var(--panel-svj); }
.club:hover .club__mono { transform: rotate(45deg) scale(1.08); }
/* Grb zauzima istu visinu kao monogram, da kartice s grbom i bez njega ostanu
   jednako visoke. Klub bez grba i dalje dobiva monogram. */
.club__grb {
  height: 52px;
  display: flex; align-items: center; justify-content: flex-start;
  margin: 8px 0 22px;
}
.club__slika {
  max-height: 52px; width: auto; max-width: 100%;
  object-fit: contain;
  transition: transform .35s ease;
}
.club:hover .club__slika { transform: scale(1.08); }
.club b {
  font-family: var(--display);
  font-size: 1.12rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--bijela);
  line-height: 1.05;
}
.club span:last-child {
  font-size: .72rem; letter-spacing: .06em;
  color: rgba(255,255,255,.4);
}
.clubs__register {
  margin-top: clamp(28px, 4vh, 44px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  background: linear-gradient(120deg, var(--panel), var(--panel-svj));
  border: 1px solid var(--linija);
  border-left: 4px solid var(--crvena);
  padding: 28px 32px;
}
.clubs__register h3 { font-size: 1.5rem; margin-bottom: 6px; }
.clubs__register p { max-width: 520px; font-size: .88rem; }

.contact__list a:hover { color: #ff5470; }

.contact__social { display: flex; gap: 10px; margin-top: 26px; }
/* Oznaka mreže je puna riječ („Facebook", „Instagram"), ne dvoslovna kratica
   kao u prototipu — fiksnih 46px širine tekst je izbacivalo izvan okvira. */
.contact__social a {
  min-width: 46px; height: 46px; padding: 0 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: .82rem; font-weight: 800; letter-spacing: .08em;
  color: var(--bijela);
  border: 1px solid var(--linija);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.contact__social a:hover { background: var(--crvena); border-color: var(--crvena); transform: translateY(-3px); }

.contact__form {
  background: rgba(18,21,42,.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--linija);
  border-top: 3px solid var(--crvena);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 18px;
}
.contact__form-note {
  font-size: .8rem; color: var(--plava);
  min-height: 1.2em;
}

/* ═══════════ RESPONSIVE (sadržajni blokovi) ═══════════ */
@media (max-width: 1180px) {
  .teams { grid-template-columns: 1fr 1fr; }
  .clubs { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .hero__match { justify-self: start; margin-top: 44px; }
}

@media (max-width: 900px) {
  .wc__split { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .contact__inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .teams { grid-template-columns: 1fr; }
  .clubs { grid-template-columns: 1fr 1fr; }
  .wc__card { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════
   SEKCIJE IZ FLEXIBLE CONTENTA (zadatak 12)
   Sve ostalo iznad je prijenos prototipa; ovo su blokovi koje urednik slaže.
═══════════════════════════════════════════════ */

/* ── Hero: pozadinska fotografija ──────────────
   Prototip je hero imao bez fotografije, samo s gradijentima i šahovnicom.
   Fotografija je neobavezna i ide ispod svega, s dovoljno prigušenja da naslov
   ostane čitljiv (kontrast teksta ne smije pasti pod 4.5:1). */
.hero__pozadina {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__pozadina-slika {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .28;
}

/* ── Sekcija: tekst ────────────────────────── */
/* ── Vodeni žig ──
   Golema riječ u obrisu iza sadržaja. Sloj je ukrasan i `aria-hidden`; paralaks
   ga pomiče, a bez skripte mirno stoji. Sadržaj mu je uvijek iznad (z-index),
   pa žig ni u jednom trenutku ne smeta čitanju. */
.sekcija-tekst--zig { position: relative; overflow: hidden; }
.sekcija-tekst__zig {
  position: absolute; right: -3vw; bottom: -6vw;
  pointer-events: none; user-select: none;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: clamp(10rem, 26vw, 26rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(237,241,247,.06);
}
.sekcija-tekst__zig span { display: block; }
.sekcija-tekst--zig .sekcija-tekst__unutra { position: relative; z-index: 2; }

.sekcija-tekst__naslov { margin-bottom: 28px; }
.sekcija-tekst__sadrzaj > * + * { margin-top: 1em; }
.sekcija-tekst__sadrzaj h3,
.sekcija-tekst__sadrzaj h4 { margin-top: 1.7em; }
.sekcija-tekst__veza { margin-top: 32px; }

/* base.css resetira list-style na svim listama; unutar uredničkog teksta
   oznake su dio sadržaja, pa se vraćaju. */
.tekst ul, .tekst ol { padding-left: 1.4em; }
.tekst ul { list-style: disc; }
.tekst ol { list-style: decimal; }
.tekst a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Sekcija: poziv na akciju ──────────────── */
.sekcija-cta__unutra {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
}
.sekcija-cta__tekst { flex: 1 1 420px; }
.sekcija-cta__naslov { font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: .9; }
.sekcija-cta__tekst p {
  margin-top: 10px;
  max-width: 62ch;
  font-family: var(--oznaka);
  font-size: .9rem;
}

/* Traka je niža od ostalih sekcija: jedan redak poruke i gumb, ne blok teksta. */
.sekcija-cta.razmak--s,
.sekcija-cta.razmak--m,
.sekcija-cta.razmak--l { padding-block: clamp(36px, 5vw, 64px); }

/* Na crvenoj plohi tekst ide bijel; naslov to već dobiva iz base.css. */
.ploha--crvena .sekcija-cta__tekst p { color: rgba(255,255,255,.85); }
.ploha--crvena .btn--white:hover { transform: translateY(-2px); }

/* ── Sekcija: tekst i slika ─────────────────── */
.sekcija-tekst-slika__unutra {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
/* Slika je u HTML-u uvijek druga (redoslijed čitanja), a CSS je po potrebi
   premješta ispred teksta. */
.sekcija-tekst-slika--lijevo .sekcija-tekst-slika__slika { order: -1; }
.sekcija-tekst-slika__img { width: 100%; height: auto; }
.sekcija-tekst-slika__tekst h2 { margin-bottom: 22px; }

/* ── Sekcija: akordeon ─────────────────────── */
/* Akordeon radi bez ijedne linije JS-a — nosi ga <details>. */
.akordeon { display: flex; flex-direction: column; gap: 2px; }
.akordeon__stavka {
  background: var(--panel);
  border: 1px solid var(--linija);
}
.akordeon__pitanje {
  cursor: pointer;
  list-style: none;
  padding: 22px 26px;
  font-family: var(--display);
  font-stretch: var(--sirina-jaka);
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--bijela);
  display: flex; align-items: center; gap: 18px;
}
.akordeon__pitanje::-webkit-details-marker { display: none; }
.akordeon__pitanje::before {
  content: '+';
  flex-shrink: 0;
  font-family: var(--oznaka);
  font-size: 1.2rem; line-height: 1;
  color: var(--crvena-tekst);
}
.akordeon__stavka[open] .akordeon__pitanje::before { content: '−'; }
/* Odgovor je uvučen do razine pitanja, ne do ruba kartice. */
.akordeon__odgovor {
  padding: 0 26px 26px 60px;
  font-size: .95rem;
  color: var(--tekst);
  max-width: 80ch;
}

/* ── Sekcija: video ────────────────────────── */
.video { position: relative; }
.video__veza {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  border: 1px solid var(--linija);
  overflow: hidden;
}
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video__gumb {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px;
  background: var(--crvena);
  font-family: var(--display);
  font-size: .92rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bijela);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background .25s ease;
}
.video__veza:hover .video__gumb { background: var(--crvena-hover); }
.video__ikona { font-size: 1.1rem; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* ── Sekcija: dokumenti ────────────────────── */
.dokumenti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
}
.dokument__veza {
  display: flex; flex-direction: column; gap: 10px;
  height: 100%;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--linija);
  transition: background .3s ease;
}
.dokument__veza:hover { background: #10141F; }
.dokument__glava { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dokument__tip {
  font-family: var(--oznaka);
  font-size: .56rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--crvena-tekst);
}
.dokument__naslov {
  font-family: var(--display);
  font-stretch: var(--sirina-jaka);
  font-size: 1rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
  line-height: 1.15;
  color: var(--bijela);
}
.dokument__opis { font-size: .86rem; color: var(--tekst); }
.dokument__datum {
  margin-top: auto;
  font-family: var(--oznaka);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}

/* ── Sekcija: sponzori ─────────────────────── */
.sponzori {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
}
.sponzor { display: flex; align-items: center; justify-content: center; }
.sponzor__veza { display: flex; align-items: center; justify-content: center; width: 100%; }
.sponzor__logo {
  max-height: 64px; width: auto;
  filter: grayscale(1) opacity(.75);
  transition: filter .3s ease, transform .3s ease;
}
.sponzor__veza:hover .sponzor__logo { filter: none; transform: translateY(-2px); }
.sponzor__naziv {
  font-family: var(--display);
  font-size: .92rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ── Dopune postojećih blokova ─────────────── */

@media (max-width: 900px) {
  .sekcija-tekst-slika__unutra { grid-template-columns: 1fr; }
  .sekcija-tekst-slika--lijevo .sekcija-tekst-slika__slika { order: 0; }
}

/* ═══════════════════════════════════════════════
   ARHIVA I POJEDINAČNA VIJEST (zadatak 14)
═══════════════════════════════════════════════ */

/* Zaglavlje arhive: dijagonalne crte u podlozi, hairline crta na dnu, veliki
   naslov s jednom obrisnom riječi. Isti okvir dijele svih šest arhiva. */
.arhiva__glava {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linija);
  background-image: repeating-linear-gradient(115deg, transparent 0 42px, rgba(255,255,255,.03) 42px 43px);
}
/* Razmak je namjerno asimetričan: zaglavlje diše odozgo, ali se prema filtrima
   i mreži steže — inače između gumba „Filtriraj" i prve kartice zjapi prazan
   ekran. Nadjačava `.razmak--*`, koje sekcija nosi zbog zajedničkog sustava. */
.arhiva__glava.razmak--s,
.arhiva__glava.razmak--m,
.arhiva__glava.razmak--l {
  padding-top: clamp(56px, 9vh, 110px);
  padding-bottom: clamp(36px, 5vh, 56px);
}
.arhiva.razmak--s,
.arhiva.razmak--m,
.arhiva.razmak--l { padding-block: clamp(48px, 7vw, 96px); }
/* Dok js/main.js dohvaća nove rezultate, stari se stišaju — znak da je klik
   primljen, jer poslužitelj stranicu slaže nekoliko sekundi. */
.arhiva { transition: opacity .2s ease; }
.arhiva[aria-busy="true"] { opacity: .45; pointer-events: none; }
.arhiva__glava > .wrap { position: relative; }
.arhiva__glava .eyebrow { display: block; margin-bottom: 16px; }
.arhiva__glava h1 { font-size: clamp(3rem, 8vw, 7rem); line-height: .88; }
.arhiva__opis { margin-top: 20px; max-width: var(--mjera); }

/* Bez podloge i okvira na samoj mreži: kod jedne ili dvije kartice ostatak reda
   inače izgleda kao prazna kartica (izmjereno snimkom arhive). Rub nose kartice. */
.arhiva__mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px;
}
.kartica-vijest { border: 1px solid var(--linija); }
.arhiva__prazno { font-size: 1.02rem; }

/* ── Meta red vijesti ──────────────────────────
   Oznaka kategorije i datum. Klasa je preimenovana iz prototipske `news__meta`
   kad je mozaik prepisan; partial je jedini korisnik. */
.vijest-meta {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.vijest-meta time {
  font-family: var(--oznaka);
  font-size: .62rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}

/* ── Kartica vijesti ───────────────────────── */
.kartica-vijest {
  display: flex; flex-direction: column;
  background: var(--panel);
  transition: background .3s ease;
}
.kartica-vijest:hover { background: #10141F; }

.kartica-vijest__medij { display: block; overflow: hidden; }
.kartica-vijest__medij img {
  width: 100%; height: 220px;
  object-fit: cover;
  transition: transform .7s var(--krivulja);
}
.kartica-vijest:hover .kartica-vijest__medij img { transform: scale(1.04); }

.kartica-vijest__tijelo { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 26px; height: 100%; }
.kartica-vijest__naslov {
  font-family: var(--display);
  font-stretch: var(--sirina-jaka);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.08;
}
.kartica-vijest__naslov a:hover { color: #fff; }
.kartica-vijest__lead { font-size: .88rem; }
.kartica-vijest .textlink { margin-top: auto; font-size: .68rem; }
.kartica-vijest--velika { grid-column: span 2; }

/* ── Filtri ────────────────────────────────── */
.filtri {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 16px;
  margin-top: clamp(24px, 4vh, 40px);
}
.filtri__polje { min-width: 180px; flex: 0 1 220px; }
.filtri label {
  font-family: var(--oznaka);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.filtri select,
.filtri input {
  font-family: var(--oznaka);
  font-size: .86rem;
  color: var(--bijela);
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.12);
  padding: 13px 16px;
  outline: none;
  transition: border-color .25s ease;
}
.filtri select:focus,
.filtri input:focus { border-color: var(--crvena); }
.filtri__gumb { padding: 14px 28px; font-size: .78rem; }
.filtri__gumb { flex: 0 0 auto; }
.filtri__reset { flex: 0 0 auto; align-self: center; font-size: .72rem; }

/* Telefon: pet polja od 220px slagalo se jedno ispod drugog uz prazan desni
   dio ekrana — filtar je bio dulji od ekrana. Dva stupca preko cijele širine,
   gumb preko oba. */
@media (max-width: 600px) {
  .filtri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; }
  .filtri__polje { min-width: 0; }
  .filtri select,
  .filtri input { width: 100%; padding: 12px 12px; font-size: .8rem; }
  .filtri__gumb { grid-column: 1 / -1; justify-content: center; }
  .filtri__reset { grid-column: 1 / -1; justify-self: start; }
}

/* ── Paginacija ────────────────────────────── */
.paginacija {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(28px, 5vh, 48px);
}
.paginacija .page-numbers {
  font-family: var(--oznaka);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em;
  padding: 11px 17px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--tekst);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.paginacija .page-numbers:hover { border-color: var(--crvena); color: #fff; }
.paginacija .page-numbers.current {
  background: var(--crvena);
  border-color: var(--crvena);
  color: #fff;
}

/* ── Pojedinačna vijest ────────────────────── */
.vijest__glava {
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(115deg, transparent 0 42px, rgba(255,255,255,.03) 42px 43px);
}
.vijest__glava.razmak--s,
.vijest__glava.razmak--m,
.vijest__glava.razmak--l {
  padding-top: clamp(56px, 9vh, 110px);
  padding-bottom: clamp(36px, 5vh, 56px);
}
.vijest__uvod { position: relative; max-width: 980px; }

/* Putanja, kategorija i datum stoje u jednom redu. */
.vijest__putanja {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-family: var(--oznaka);
  font-size: .66rem;
  letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: 18px;
}
.vijest__putanja a { color: var(--tekst-prigusen); transition: color .2s ease; }
.vijest__putanja a:hover { color: #fff; }

/* Bez uske mjere: širinu drži omotač (.vijest__uvod, 980px), kao u dizajnu.
   Uz `max-width: 22ch` se naslov lomio u šest redaka i gutao zaglavlje. */
.vijest__naslov {
  font-size: clamp(2.2rem, 5.5vw, 4.6rem);
  line-height: .92;
  margin: 0;
}

/* Istaknuta slika se kadrira na 16:9. Bez toga uspravna slika — a 16 vijesti
   nosi grb saveza kao istaknutu — naraste preko cijelog ekrana. */
.vijest__medij {
  margin-top: clamp(28px, 4vh, 48px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.vijest__slika { width: 100%; height: 100%; object-fit: cover; }
.vijest__lead {
  font-family: var(--oznaka);
  font-size: 1.04rem;
  max-width: 64ch;
  color: var(--tekst);
  margin-top: 22px;
}

.vijest__sadrzaj { max-width: var(--mjera); }

/* ═══════════════════════════════════════════════
   REPREZENTACIJE (zadatak 15)
═══════════════════════════════════════════════ */

.reprezentacija__glava { position: relative; overflow: hidden; }
.reprezentacija__naslov { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 14px 0 18px; }
.reprezentacija__opis { max-width: var(--mjera); font-size: 1.04rem; color: var(--bijela); }
.reprezentacija__medij { margin-top: clamp(28px, 5vh, 48px); }
.reprezentacija__slika { width: 100%; height: auto; }

/* ── Popis kadra ───────────────────────────── */
.popis + .popis { margin-top: clamp(40px, 6vh, 72px); }
.popis__glava {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linija);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.popis__naziv { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.popis__prazno { color: rgba(255,255,255,.55); }
.popis__grupa + .popis__grupa { margin-top: clamp(24px, 4vh, 40px); }
.popis__pozicija {
  font-family: var(--display);
  font-size: .74rem; font-weight: 800;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--plava);
  margin-bottom: 14px;
}

.igraci {
  display: grid;
  /* `min()` je ovdje nužan: 2×170px + fuga je 342px, a telefon od 375px daje
     335px, pa bi auto-fill pao na JEDAN stupac i portret 3:4 bi na punoj
     širini bio visok 447px — jedna kartica po ekranu, a igrača je preko sto.
     Uz postotak kao donju granicu ostaju dva stupca do najuže širine. */
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 47%), 1fr));
  gap: 2px;
}

/* ── Kartica igrača ────────────────────────── */
.kartica-igrac { border: 1px solid var(--linija); }
.kartica-igrac__veza {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--panel);
  transition: background .3s ease;
}
.kartica-igrac__veza:hover { background: #10141F; }

/* Niska ploha 2:1, ne portret 3:4: fotografija većine igrača neće stići, a
   prazan okvir 3:4 bio je pola kartice bez sadržaja. Ploha nosi grb kluba i
   broj dresa; fotografija, kad postoji, reže se od vrha (lice ostaje). */
.kartica-igrac__medij {
  position: relative; display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--panel-tam);
}
.kartica-igrac__medij--prazan { background-color: #0F121B; }
.kartica-igrac__grb {
  position: absolute; left: 14px; bottom: 12px;
  z-index: 2;
  display: flex;
}
.kartica-igrac__foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .5s ease; }
.kartica-igrac__veza:hover .kartica-igrac__foto { transform: scale(1.05); }

/* Broj dresa je obris, ne puna bijela: preko fotografije bi puna ploha broja
   pojela lice, a obris se čita i na svijetlom i na tamnom kadru. */
.kartica-igrac__broj {
  position: absolute; right: 10px; bottom: 6px;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(237,241,247,.4);
}

.kartica-igrac__tijelo { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 18px; }
.kartica-igrac__ime {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--display);
  font-stretch: var(--sirina-jaka);
  font-size: .92rem; font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--bijela);
}
.kartica-igrac__kapetan { padding: 2px 7px; }
.kartica-igrac__meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--oznaka);
  font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
/* Pozicija je „živi" podatak — ide ledeno plavom, kao rezultati. */
.kartica-igrac__pozicija { color: var(--plava); }
/* Inozemni klub nema grb u bazi, pa ide tekstom ispod pozicije i godišta. */
.kartica-igrac__klub {
  display: block;
  margin-top: 6px;
  font-family: var(--oznaka);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tekst);
  overflow-wrap: break-word;
}

/* ── Stručni stožer ────────────────────────── */
.stozer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.stozer__clan { display: flex; flex-direction: column; gap: 8px; }
.stozer__foto { width: 100%; height: 240px; object-fit: cover; }
.stozer__ime {
  font-family: var(--display);
  font-size: 1.02rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--bijela);
}
.stozer__uloga {
  font-family: var(--oznaka);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  /* Sitan tekst: puna crvena daje 3.44:1, ispod praga iz pravila 13.
     Boju zadaje ploha kroz --akcent-sitni, jer ni svjetlija crvena ne prolazi
     na navyju. */
  color: var(--akcent-sitni, var(--crvena-tekst));
}

/* Arhiva selekcija: prototipski .teams je grid od četiri stupca; kod drugog
   broja selekcija mreža se mora prilagoditi. */
.arhiva--reprezentacije .teams { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Poveznica na IIHF stranicu ide u vlastiti red pod opisom selekcije. */
.reprezentacija__glava .textlink { display: inline-block; margin-top: 18px; }

/* ═══════════════════════════════════════════════
   IGRAČI (zadatak 16)
═══════════════════════════════════════════════ */

.arhiva__broj {
  font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  margin-bottom: 20px;
}
.igraci--arhiva { grid-template-columns: repeat(auto-fill, minmax(min(190px, 47%), 1fr)); }

/* ── Profil igrača ─────────────────────────── */
/* Zaglavlje profila: dijagonalne crte, golemi broj dresa kao vodeni žig i
   portret poravnat s dnom podataka. */
.igrac__glava {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linija);
  background-image: repeating-linear-gradient(115deg, transparent 0 42px, rgba(255,255,255,.03) 42px 43px);
}
/* Žig je namjerno slabiji nego u dizajnu (.05 umjesto .07): prezime u naslovu
   je i samo u obrisu, pa dvije konture jedna preko druge stvaraju zbrku. Na .05
   žig ostaje tekstura, a naslov jedina kontura koja se čita. */
.igrac__zig {
  position: absolute; right: -2vw; bottom: -4vw;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: clamp(10rem, 24vw, 22rem);
  font-weight: 900; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(237,241,247,.05);
  user-select: none; pointer-events: none;
}

/* Zaglavlje profila diše odozgo, a prema sadržaju se steže — isto kao arhive. */
.igrac__glava.razmak--s,
.igrac__glava.razmak--m,
.igrac__glava.razmak--l {
  padding-top: clamp(56px, 9vh, 110px);
  padding-bottom: clamp(48px, 7vh, 80px);
}

.igrac__unutra {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
/* Isti razlog kao kod kluba: bez `min-width: 0` stupac ne pada ispod
   min-contenta unutarnje mreže podataka. */
.igrac__podaci { min-width: 0; }

/* Bez fotografije zaglavlje je jedan stupac, a desnu stranu nosi broj dresa
   kao vodeni žig — nešto jači nego uz portret, jer je sada jedini motiv. */
.igrac__unutra--bez-portreta { grid-template-columns: 1fr; }
.igrac__glava:has(.igrac__unutra--bez-portreta) .igrac__zig { -webkit-text-stroke-color: rgba(237,241,247,.09); }
.igrac__medij {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--linija);
}
.igrac__medij--prazan { background-color: var(--panel); }
.igrac__oznaka {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.igrac__foto { width: 100%; height: 100%; object-fit: cover; }
/* Obris, ne puna bijela: preko portreta bi puna ploha broja pojela lice. */
.igrac__broj {
  position: absolute; right: 14px; bottom: 8px;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: clamp(4rem, 8vw, 6.5rem);
  font-weight: 900; line-height: .85;
  color: transparent;
  -webkit-text-stroke: 2px rgba(237,241,247,.5);
}

.igrac__putanja {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-family: var(--oznaka);
  font-size: .66rem;
  letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: 14px;
}
.igrac__putanja a { color: var(--tekst-prigusen); transition: color .2s ease; }
.igrac__putanja a:hover { color: #fff; }
.igrac__oznaka-pozicije { color: var(--crvena-tekst); font-weight: 700; }

.igrac__ime { font-size: clamp(2.6rem, 7vw, 6rem); line-height: .88; margin: 0; }

/* Podaci kao kartice s crvenim donjim rubom — isti obrazac kao kućice
   odbrojavanja u WC hubu. */
.igrac__tablica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 2px;
  margin: clamp(22px, 4vh, 36px) 0 0;
  max-width: 640px;
}
.igrac__red {
  background: var(--panel);
  border: 1px solid var(--linija);
  border-bottom: 3px solid var(--crvena);
  padding: 16px 18px;
}
.igrac__red dt {
  font-family: var(--oznaka);
  font-size: .56rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.igrac__red dd {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: 1.5rem; font-weight: 900;
  color: var(--bijela);
  margin-top: 6px;
  overflow-wrap: break-word;
}

.igrac__klub {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: clamp(18px, 3vh, 28px);
  padding: 14px 22px;
  background: var(--panel);
  border: 1px solid var(--linija);
  transition: border-color .25s ease;
}
.igrac__klub:hover { border-color: var(--crvena); }
/* Inozemni klub nije poveznica (nema stranicu), pa nema ni hovera; matični
   klub ispod njega stoji u istom retku ili se lomi ispod. */
.igrac__klub--inozemni:hover { border-color: var(--linija); }
.igrac__klub--inozemni + .igrac__klub { margin-left: 8px; }
@media (max-width: 600px) {
  .igrac__klub--inozemni + .igrac__klub { margin-left: 0; }
}
.igrac__klub-grb { width: 44px; height: 44px; object-fit: contain; }
.igrac__klub small {
  display: block;
  font-family: var(--oznaka);
  font-size: .54rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.igrac__klub b {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: 1.05rem; font-weight: 900;
  text-transform: uppercase;
  color: var(--bijela);
}

/* ── Nastupi po selekcijama ────────────────── */
.nastupi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px; }
.nastup { border: 1px solid rgba(255,255,255,.12); }
.nastup__veza {
  display: flex; flex-direction: column; gap: 6px;
  height: 100%;
  padding: 20px 22px;
  background: rgba(255,255,255,.03);
  transition: background .3s ease;
}
.nastup__veza:hover { background: rgba(255,255,255,.08); }
.nastup__selekcija {
  font-family: var(--display);
  font-size: 1.05rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--bijela);
}
.nastup__popis { font-size: .86rem; }
.nastup__meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.nastup__broj {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: .82rem; font-weight: 900;
  letter-spacing: .1em;
  /* Boju zadaje ploha: svjetlija crvena na ledu i panelu, bijela na navyju —
     gdje je #F0234A na 3.36:1, dakle ispod praga. */
  color: var(--akcent-sitni, var(--crvena-tekst));
}

/* ── Karijera ──────────────────────────────── */
.karijera { display: flex; flex-direction: column; gap: 0; counter-reset: none; }
.karijera__stanica {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  padding: 16px 0 16px 22px;
  border-left: 2px solid var(--linija);
  position: relative;
}
.karijera__stanica::before {
  content: '';
  position: absolute; left: -6px; top: 22px;
  width: 10px; height: 10px;
  background: var(--crvena);
  transform: rotate(45deg);
}
.karijera__razdoblje {
  min-width: 140px;
  font-family: var(--display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst);
}
.karijera__klub {
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--bijela);
}
.karijera__klub:hover { color: var(--crvena); }

@media (max-width: 760px) {
  .igrac__unutra { grid-template-columns: 1fr; }
  .igrac__medij { max-width: 320px; }
}

/* Broj dresa mora ostati čitljiv i kad je fotografija svijetla ili je nema —
   gradijent ispod broja daje kontrast neovisno o slici. */
.igrac__medij::after,
.kartica-igrac__medij::after {
  content: '';
  position: absolute; inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(8,9,15,.82), transparent);
  pointer-events: none;
}
.igrac__broj, .kartica-igrac__broj { z-index: 2; }

/* Drugo pravilo koje je broj vraćalo na bijelo maknuto je — isti posao sada
   radi --akcent-sitni na plohi, na jednom mjestu i za sve sitne akcente. */

/* ═══════════════════════════════════════════════
   KLUBOVI, DOKUMENTI, GALERIJE (zadatak 17)
═══════════════════════════════════════════════ */

/* ── Arhiva klubova ────────────────────────── */
.klubovi-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px;
}
.klub-kartica {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px 20px;
  background: var(--panel);
  border: 1px solid var(--linija);
  text-align: center;
  transition: background .3s ease, transform .3s ease;
}
.klub-kartica:hover { background: var(--panel-svj); border-color: var(--plava); transform: translateY(-2px); }
.klub-kartica__grb { display: flex; align-items: center; justify-content: center; height: 84px; }
.klub-kartica__slika { max-height: 84px; width: auto; object-fit: contain; }
.klub-kartica__naziv {
  font-family: var(--display);
  font-size: 1.02rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.1;
  color: var(--bijela);
}
.klub-kartica__meta {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--display);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst);
}

/* Na telefonu `minmax(190px, …)` daje jedan stupac: devet kartica od po
   220px, dakle tri ekrana grbova. Dva stupca s manjim grbom. */
@media (max-width: 600px) {
  .klubovi-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .klub-kartica { padding: 22px 10px; gap: 10px; }
  .klub-kartica__grb { height: 64px; }
  .klub-kartica__slika { max-height: 64px; }
  .klub-kartica__naziv { font-size: .8rem; overflow-wrap: break-word; }
  .klub-kartica__meta { font-size: .56rem; letter-spacing: .12em; }
}

/* ── Profil kluba ──────────────────────────── */
.klub-profil__glava {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linija);
  background-image: repeating-linear-gradient(115deg, transparent 0 42px, rgba(255,255,255,.03) 42px 43px);
}
.klub-profil__glava.razmak--s,
.klub-profil__glava.razmak--m,
.klub-profil__glava.razmak--l {
  padding-top: clamp(56px, 9vh, 110px);
  padding-bottom: clamp(40px, 6vh, 64px);
}

.klub-profil__unutra {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* `min-width: 0` nije ukras: stavka grida se po zadanom NE smanjuje ispod
   min-contenta svoje djece, a unutarnja mreža podataka traži 3 × 140px = 424px.
   Bez ovoga je stupac ostajao 424px u roditelju od 375px i kartica „Liga" je
   visila izvan ekrana. `overflow-x: clip` na body to sakrije od scrollWidtha,
   pa se ne vidi kao vodoravni skrol nego kao odrezan tekst. */
.klub-profil__uvod { min-width: 0; }
/* Grbovi su rađeni za svijetlu podlogu; na tamnoj im sjena vraća odvojenost od
   plohe. Jedina sjena u temi, i to na slici, ne na plohi. */
.klub-profil__grb-slika {
  width: 100%; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.6));
}

.klub-profil__putanja {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-family: var(--oznaka);
  font-size: .66rem;
  letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: 14px;
}
.klub-profil__putanja a { color: var(--tekst-prigusen); transition: color .2s ease; }
.klub-profil__putanja a:hover { color: #fff; }
.klub-profil__liga { color: var(--crvena-tekst); font-weight: 700; }

.klub-profil__naslov { font-size: clamp(2.4rem, 6vw, 5rem); line-height: .88; margin: 0; }
.klub-profil__puni {
  font-family: var(--oznaka);
  font-size: .9rem;
  color: var(--tekst-prigusen);
  margin-top: 12px;
}
.klub-profil__podaci {
  display: grid;
  /* 160px, ne 140: uz 140 mreža na ~500px daje tri uska stupca u koje
     „Prvenstvo" (9 slova u Archivo Expanded) ne stane. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px;
  margin-top: clamp(18px, 3vh, 28px);
  max-width: 560px;
}
.klub-profil__red {
  background: var(--panel);
  border: 1px solid var(--linija);
  padding: 14px 16px;
}

/* Na telefonu dva stupca daju ćeliju od 133px, a „PRVENSTVO" u Archivo
   Expanded traži 149px — `overflow-wrap` ga tada lomi usred riječi
   („PRVENSTV / O"). Duže vrijednosti („Predsjednik") ne spašava ni manji
   font, pa podaci idu u jedan stupac. Ostaje ista kartica, samo puna širina. */
@media (max-width: 560px) {
  .klub-profil__podaci,
  .igrac__tablica { grid-template-columns: 1fr; }
}
.klub-profil__red dt {
  font-family: var(--oznaka);
  font-size: .56rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.klub-profil__red dd {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-size: 1.1rem; font-weight: 900;
  text-transform: uppercase;
  color: var(--bijela);
  margin-top: 5px;
  /* Posljednja brana za vrijednosti dulje od kartice. */
  overflow-wrap: break-word;
}
.klub-profil__info-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.klub-profil__info-mreza h2 { font-size: 1.3rem; margin-bottom: 12px; }
.klub-profil__mreze { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Tablica dokumenata ────────────────────── */
.dokumenti-tablica { width: 100%; border-collapse: collapse; }
.dokumenti-tablica th,
.dokumenti-tablica td {
  padding: 16px 14px;
  text-align: left;
  border-bottom: 1px solid var(--linija);
  vertical-align: top;
}
.dokumenti-tablica th {
  font-family: var(--oznaka);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  border-bottom-width: 2px;
}
.dokumenti-tablica__red:hover { background: rgba(255,255,255,.03); }
.dokumenti-tablica__naslov {
  font-family: var(--display);
  font-stretch: var(--sirina-jaka);
  font-size: 1rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--bijela);
  transition: color .2s ease;
}
.dokumenti-tablica__naslov:hover { color: #fff; }
.dokumenti-tablica__opis { display: block; margin-top: 6px; font-size: .86rem; }
.dokumenti-tablica td:nth-child(3),
.dokumenti-tablica td:nth-child(4) {
  font-family: var(--oznaka);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--tekst-prigusen);
}

/* ── Tablica na uskom ekranu ──
   Četiri stupca ne stanu na telefon: tablica je na 375px bila široka 479px i
   vukla cijelu stranicu postrance. Redak se zato preslaguje u karticu — naslov
   gore, ostalo kao meta red ispod. Tablica ostaje tablica u markupu, pa čitači
   ekrana i dalje dobivaju zaglavlja i odnose. */
@media (max-width: 920px) {
  .dokumenti-tablica thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dokumenti-tablica,
  .dokumenti-tablica tbody,
  .dokumenti-tablica tr,
  .dokumenti-tablica td { display: block; width: 100%; }

  .dokumenti-tablica__red {
    padding: 18px 0;
    border-bottom: 1px solid var(--linija);
  }
  .dokumenti-tablica td { border: 0; padding: 0; }
  /* Vrsta, format i datum idu u jedan red ispod naslova. */
  .dokumenti-tablica td:nth-child(2),
  .dokumenti-tablica td:nth-child(3),
  .dokumenti-tablica td:nth-child(4) {
    display: inline-block;
    width: auto;
    margin: 10px 14px 0 0;
    vertical-align: middle;
  }
}


@media (max-width: 920px) {
  .klub-profil__unutra { grid-template-columns: 1fr; }
  .klub-profil__grb { max-width: 140px; }
  /* Stupac formata se VIŠE NE SKRIVA: u fazi 1 je to bio jedini način da
     tablica stane, a sada se redak preslaguje u karticu pa format ima mjesta.
     Veličina datoteke je informacija koja na mobitelu vrijedi više nego na
     desktopu — tamo se preuzima uz mjerni podatkovni promet. */
}

/* ═══════════════════════════════════════════════
   KONTAKT, PRETRAGA I 404 (zadatak 21)
═══════════════════════════════════════════════ */

.kontakt-stranica__unutra {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.kontakt-lista { display: flex; flex-direction: column; gap: 2px; margin-top: clamp(20px, 3vh, 32px); }
.kontakt-lista li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linija);
}
.kontakt-lista span {
  min-width: 110px;
  font-family: var(--oznaka);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.kontakt-lista b {
  font-family: var(--display);
  font-stretch: var(--sirina-jaka);
  font-size: 1.05rem; font-weight: 800;
  letter-spacing: .03em;
  color: var(--bijela);
}
.kontakt-lista a { transition: color .2s ease; }
/* Na telefonu oznaka uvijek iznad podatka: adresa je jedina bila preduga za
   isti redak, pa je jedan redak popisa izgledao drukčije od ostalih. */
@media (max-width: 600px) {
  .kontakt-lista li { flex-direction: column; gap: 6px; }
}
.kontakt-lista a:hover { color: #fff; }

/* ── Rezultati pretrage ────────────────────── */
.rezultati { display: flex; flex-direction: column; gap: 2px; }
.rezultat { border: 1px solid var(--linija); }
.rezultat__veza {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 24px;
  background: var(--panel);
  transition: background .3s ease;
}
.rezultat__veza:hover { background: #eef1f8; }
.rezultat__naslov {
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--bijela);
}
.rezultat__tip { align-self: flex-start; }
.rezultat__izvacak, .rezultat__izvadak { font-size: .88rem; }

/* ── 404 ───────────────────────────────────── */
.greska { position: relative; overflow: hidden; }
.greska__ghost {
  position: absolute; right: -2vw; top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: clamp(14rem, 34vw, 34rem);
  font-weight: 900; line-height: .8;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.03);
  pointer-events: none; user-select: none;
}
.greska__unutra { position: relative; z-index: 2; max-width: 720px; }
.greska__naslov { font-size: clamp(2.6rem, 7vw, 5rem); margin: 14px 0 18px; }
.greska__tekst { max-width: var(--mjera); }
.greska__pretraga { margin-top: clamp(24px, 4vh, 40px); }
.greska__veze { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 3vh, 32px); }

@media (max-width: 860px) {
  /* `minmax(0, 1fr)`, ne `1fr`: polja CF7 nose `size="40"`, pa im je
     najmanja širina ~370px. Stupac `1fr` ne smije biti uži od toga i na
     ekranu od 360px obrazac je izlazio desno iz kadra. */
  .kontakt-stranica__unutra { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════
   ISPRAVCI RASPOREDA (nakon pregleda snimki)
═══════════════════════════════════════════════ */


/* Kartica je stupčani flex: poveznica oko slike smije se samo prilagoditi
   sadržaju. Bez `flex: 0 0 auto` skuplja se razmjerno duljini teksta, pa u
   istom redu jedna slika ispadne 220px, a susjedna 180px visoka. */
.kartica-vijest__medij {
  display: block;
  width: 100%;
  flex: 0 0 auto;
}

/* Kartica bez fotografije zadržava istu visinu, da red ne bude raspucan (jedna
   počinje tekstom pri vrhu, druge 220px niže). Ploha nosi kosu prugu iz
   redizajna — isti jezik kao ostali placeholderi, umjesto gradijenta iz faze 1. */
.kartica-vijest__medij--prazan {
  height: 220px;
  background-color: #0F121B;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
  border-bottom: 1px solid var(--linija);
}

/* ═══════════ UTAKMICE ═══════════
   Raspored i rezultati, stranica utakmice i statističke tablice. Crvena je
   samo tanka crta (dvotočka semafora, rub gola u tijeku, crta ispod naslova
   sastava) — plohe ostaju tamne. Ledeno plava nosi mikro-podatke: natjecanje,
   situaciju gola, stanje utakmice. */

/* ── Grb kluba ────────────────────────────────
   Slika ili rombični monogram s kraticom. Romb je pseudoelement, da tekst ne
   treba protu-rotaciju. */
.grb {
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.grb--mali   { width: 34px; height: 34px; }
.grb--veliki { width: clamp(64px, 9vw, 116px); height: clamp(64px, 9vw, 116px); }
.grb__slika { width: 100%; height: 100%; object-fit: contain; }
.grb__znak {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: .5rem;
  letter-spacing: .04em;
  color: var(--bijela);
}
.grb__znak::before {
  content: "";
  position: absolute;
  inset: 16%;
  z-index: -1;
  background: var(--panel-svj);
  border: 1px solid var(--linija);
  transform: rotate(45deg);
}
.grb--veliki .grb__znak { font-size: clamp(.9rem, 1.6vw, 1.3rem); }

/* ── Popis utakmica ─────────────────────────── */
.utakmice__dan {
  font-family: var(--oznaka);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  margin: clamp(36px, 5vw, 56px) 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linija);
}
.utakmice__dan:first-child { margin-top: 0; }
.utakmice__popis { display: grid; gap: 8px; container-type: inline-size; }

.utakmica-red {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 5.5rem minmax(0, 1fr) 8.5rem;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding: 16px clamp(16px, 2vw, 24px);
  background: var(--panel);
  border: 1px solid var(--linija);
  color: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.utakmica-red:hover { border-color: rgba(237,241,247,.22); background: var(--panel-svj); }

.utakmica-red__meta {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--oznaka);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.utakmica-red__natjecanje { color: var(--plava); }

.utakmica-red__ekipa { display: flex; align-items: center; gap: 12px; min-width: 0; }
.utakmica-red__ekipa--dom { justify-content: flex-end; text-align: right; }
.utakmica-red__naziv {
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--display);
  font-stretch: var(--sirina-jaka);
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .03em; text-transform: uppercase;
  color: rgba(237,241,247,.72);
}
.utakmica-red__ekipa.is-pobjednik .utakmica-red__naziv { color: var(--bijela); }

.utakmica-red__sredina { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.utakmica-red__rezultat {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bijela);
}
.utakmica-red__sat {
  font-family: var(--oznaka);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .08em;
  color: var(--tekst);
}
.utakmica-red__oznaka {
  font-family: var(--oznaka);
  font-size: .56rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--plava);
}
.utakmica-red__dvorana {
  font-family: var(--oznaka);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  text-align: right;
}

/* U uskom spremniku (telefon, ili stupac na stranici kluba) meta i dvorana idu
   u zaseban redak iznad i ispod ekipa; tri srednja stupca ostaju jer se
   rezultat čita samo između dviju ekipa. Container query, ne media query:
   ista utakmica je uska i na širokom ekranu kad stoji u pola stranice. */
@container (max-width: 760px) {
  .utakmica-red { grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr); row-gap: 10px; }
  .utakmica-red__meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .utakmica-red__dvorana { grid-column: 1 / -1; text-align: left; }
  .utakmica-red__ekipa { gap: 8px; }
  /* Bez oznake vrste kluba i u užem rezu: „KHL Medveščak Admiral" se u
     stupcu od ~100px lomio usred riječi („MEDVEŠČ/AK"). */
  .utakmica-red__naziv { font-size: .72rem; font-stretch: 100%; letter-spacing: .01em; line-height: 1.2; }
  .utakmica-red .naziv__kratica { display: none; }
  /* Grb iznad naziva, ne pokraj: pokraj grba nazivu je ostajalo 76px, a
     „Medveščak" sam traži ~85px. */
  .utakmica-red__ekipa { flex-direction: column; justify-content: center; text-align: center; gap: 6px; }
  .utakmica-red__ekipa--dom { text-align: center; }
  .utakmica-red__ekipa--dom .grb { order: -1; }
  .utakmica-red__ekipa .grb--mali { width: 26px; height: 26px; }
  .utakmica-red__rezultat { font-size: 1.25rem; }
}

/* ── Stranica utakmice: semafor ────────────── */
.utakmica__natrag { margin-bottom: clamp(24px, 4vw, 40px); }
.utakmica__nadnaslov { display: block; text-align: center; }

.semafor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 4vw, 64px);
  margin-top: clamp(24px, 4vw, 44px);
}
.semafor__ekipa {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-width: 0;
  text-align: center;
  color: inherit;
}
.semafor__naziv {
  max-width: 100%;
  overflow-wrap: break-word;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: clamp(.95rem, 2.2vw, 1.9rem);
  line-height: .98;
  text-transform: uppercase;
  color: rgba(237,241,247,.72);
  transition: color .2s ease;
}
.semafor__ekipa.is-pobjednik .semafor__naziv,
.semafor__ekipa:hover .semafor__naziv { color: var(--bijela); }
.semafor__uloga {
  font-family: var(--oznaka);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}

.semafor__sredina { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.semafor__rezultat {
  display: flex; align-items: center; gap: .12em;
  margin: 0;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: .9;
  font-variant-numeric: tabular-nums;
  color: var(--bijela);
}
.semafor__dvotocka { color: var(--crvena); font-size: .7em; }
.semafor__termin { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.semafor__dan {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: .95;
  color: var(--bijela);
}
.semafor__sat,
.semafor__stanje {
  margin: 0;
  font-family: var(--oznaka);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--plava);
}
.semafor__sat { max-width: 10em; text-align: center; }
.semafor__trecine {
  margin: 0;
  font-family: var(--oznaka);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .12em;
  word-spacing: .5em;
  text-align: center;
  color: var(--tekst-prigusen);
}

/* ── Stranica utakmice: podaci i trećine ───── */
.utakmica__podaci-mreza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.utakmica__dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin: 0;
}
.utakmica__dl dt {
  font-family: var(--oznaka);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.utakmica__dl dd { margin: 6px 0 0; font-size: .92rem; color: var(--bijela); overflow-wrap: break-word; }
.utakmica__zapisnik { grid-column: 1 / -1; margin: 0; }

@media (max-width: 860px) {
  .utakmica__podaci-mreza { grid-template-columns: 1fr; }
}

/* Tri stupca semafora na telefonu: naziv mora stati u trećinu širine bez
   lomljenja riječi usred („MEDVEŠ-ČAK"). */
@media (max-width: 560px) {
  .semafor__naziv { font-size: .78rem; }
  .semafor__dan { font-size: 1.7rem; }
}
@media (max-width: 420px) {
  .semafor__naziv { font-size: .64rem; hyphens: auto; }
  /* Na 360px „Medveščak" i u .64rem nije stao u pola semafora. */
  .semafor .naziv__kratica { display: none; }
}

/* ── Statističke tablice ───────────────────────
   Isti ritam kao ljestvica: `table-layout: fixed`, brojčani stupci uski,
   ime uzima ostatak — tablica se nikad ne širi preko ekrana. */
.stat-tablica { width: 100%; border-collapse: collapse; table-layout: fixed; }
.stat-tablica th,
.stat-tablica td {
  padding: 10px 6px;
  text-align: center;
  font-family: var(--oznaka);
  font-variant-numeric: tabular-nums;
}
.stat-tablica thead th {
  font-size: .58rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  border-bottom: 2px solid var(--linija);
}
.stat-tablica tbody td,
.stat-tablica tbody th {
  font-size: .8rem;
  color: var(--tekst-prigusen);
  border-top: 1px solid rgba(255,255,255,.06);
}
.stat-tablica tbody th { color: var(--bijela); font-weight: 700; letter-spacing: .1em; }
.stat-tablica tbody tr:hover { background: rgba(255,255,255,.03); }
.stat-tablica .t-left { text-align: left; }
.stat-tablica td b { color: var(--bijela); font-weight: 700; }
.stat-tablica abbr { text-decoration: none; cursor: help; }
/* Širine u rem, ne em: em bi se računao od sitnog fonta zaglavlja (.58rem),
   pa je „3.2em" bio uži od „60:00" i „90.9" u retku. */
.stat-tablica th:first-child { width: 2.4rem; }
.stat-tablica th:nth-child(n+3) { width: 3rem; }
.stat-tablica th.t-left:first-child { width: auto; }
.stat-tablica__ime {
  font-family: var(--body);
  font-size: .88rem; font-weight: 600;
  letter-spacing: 0;
  color: var(--bijela);
  overflow-wrap: break-word;
}
a.stat-tablica__ime:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.stat-tablica__uloga {
  margin-left: 6px;
  font-size: .56rem; font-weight: 700;
  letter-spacing: .12em;
  color: var(--plava);
}
.utakmica__trecine th:nth-child(n+2) { width: auto; }

/* Na telefonu sedam brojčanih stupaca po 3.2em ne stane: vrijednosti
   („90.9", „3.00") su se dodirivale. Uži stupci i manji font, isti raspored. */
@media (max-width: 560px) {
  .stat-tablica th,
  .stat-tablica td { padding: 8px 3px; }
  .stat-tablica tbody td { font-size: .72rem; }
  .stat-tablica th:nth-child(n+3) { width: 2.5rem; }
  .stat-tablica__ime { font-size: .8rem; }
  /* „Ukupno" i „Udarci" u razmaku od .2em bili su širi od stupca i
     sudarali se jedan s drugim. */
  .stat-tablica thead th { letter-spacing: .04em; }
}

/* ── Tijek utakmice ─────────────────────────── */
.tijek__trecina {
  margin: clamp(28px, 4vw, 44px) 0 12px;
  font-family: var(--oznaka);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.tijek__trecina:first-of-type { margin-top: 0; }
.tijek { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tijek__stavka {
  display: grid;
  grid-template-columns: 4rem 5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: var(--panel);
  border-left: 3px solid var(--linija);
}
.tijek__stavka--gol { border-left-color: var(--crvena); }
.tijek__vrijeme {
  font-family: var(--oznaka);
  font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bijela);
}
.tijek__ekipa {
  font-family: var(--oznaka);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.tijek__opis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; min-width: 0; }
.tijek__vrsta {
  font-family: var(--oznaka);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.tijek__stavka--gol .tijek__vrsta { color: var(--crvena-tekst); }
.tijek__igrac { font-weight: 700; color: var(--bijela); }
a.tijek__igrac:hover, .tijek__asistenti a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tijek__asistenti { font-size: .88rem; color: var(--tekst); }
.tijek__asistenti a { color: var(--tekst); }
.tijek__prekrsaj {
  font-family: var(--oznaka);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.tijek__stanje {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--bijela);
}

@media (max-width: 640px) {
  .tijek__stavka { grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; }
  .tijek__vrijeme { grid-row: 1 / span 2; }
  .tijek__ekipa { grid-column: 2; }
  .tijek__opis { grid-column: 2; }
  .tijek__stanje { grid-column: 3; grid-row: 1 / span 2; }
}

/* ── Sastavi ────────────────────────────────── */
.sastavi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.sastav {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--linija);
  padding: clamp(18px, 2.4vw, 32px);
}
.sastav__naslov {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--crvena);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}
.sastav__vratari { margin-top: 24px; }
/* „60:00" ne stane u 3.2em brojčanog stupca. */
.sastav__vratari th:nth-child(3) { width: 3.8rem; }

@media (max-width: 920px) {
  .sastavi { grid-template-columns: 1fr; }
}
/* Broj dresa ima najviše dvije znamenke; ostatak ide imenu igrača. */
@media (max-width: 560px) {
  .sastav .stat-tablica th:first-child { width: 1.9rem; }
  .sastav .stat-tablica th:nth-child(n+3) { width: 2.2rem; }
  /* Osim minuta vratara: „60:00" i dalje treba svoj širi stupac. */
  .sastav .sastav__vratari th:nth-child(3) { width: 3.4rem; }
}
/* ── Stranica kluba: utakmice u dva stupca ──── */
.klub-profil__utakmice-mreza {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.klub-profil__utakmice-stupac .utakmice__dan { margin-top: 0; }

@media (max-width: 920px) {
  .klub-profil__utakmice-mreza { grid-template-columns: 1fr; }
}

/* ── Stranica kluba: analitika sezone ─────────
   Kartica po natjecanju, u panelu (površina za čitanje). Brojke su mreža
   dt/dd kao na profilu kluba; prazna natjecanja idu u popis ispod. */
.klub-analitika__mreza {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.klub-analitika__kartica {
  min-width: 0;
  padding: clamp(20px, 2.6vw, 34px);
  background: var(--panel);
  border: 1px solid var(--linija);
}
.klub-analitika__glava {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--crvena);
}
.klub-analitika__naslov { margin: 0; font-size: clamp(1rem, 1.5vw, 1.3rem); }
.klub-analitika__ekipa {
  display: block;
  margin-top: 4px;
  font-family: var(--oznaka);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--plava);
}
.klub-analitika__brojke {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 18px 20px;
  margin: 0 0 22px;
}
.klub-analitika__brojke dt {
  margin-bottom: 6px;
  font-family: var(--oznaka);
  font-size: .56rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.klub-analitika__brojke dt abbr { text-decoration: none; cursor: help; }
.klub-analitika__brojke dd {
  margin: 0;
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--bijela);
}
.klub-analitika__brojke dd small {
  margin-left: 6px;
  font-family: var(--oznaka);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .06em;
  color: var(--tekst-prigusen);
}
.klub-analitika__napomena { margin: -8px 0 22px; font-size: .78rem; color: var(--tekst-prigusen); }
.klub-analitika__strijelci { margin-top: 24px; }
.klub-analitika__strijelci caption { text-align: left; }
.klub-analitika__strijelci th:nth-child(2) { width: 3rem; }
.klub-analitika__strijelci + .najava__blok { margin-top: 24px; }
.klub-analitika__cekaju { margin-top: clamp(36px, 5vw, 56px); }
.klub-analitika__popis { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.klub-analitika__popis li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--linija);
}
.klub-analitika__popis b { color: var(--bijela); }
.klub-analitika__sljedeca {
  font-size: .88rem;
  color: var(--tekst);
  text-decoration: underline;
  text-decoration-color: rgba(237,241,247,.24);
  text-underline-offset: 4px;
}
.klub-analitika__sljedeca:hover { color: var(--bijela); text-decoration-color: currentColor; }

/* ── Stranica kluba: igrači po kategorijama ─── */
.klub-igraci { display: grid; gap: 12px; }
.klub-igraci__skupina .vise__sadrzaj { padding-top: 16px; }
.klub-igraci__tablica th:nth-child(3) { width: 6.5rem; }
.klub-igraci__tablica th:nth-child(4) { width: 4.5rem; }
/* Kartica „Ekipe" na stranici natjecanja: isti popis, a u zaglavlju grb i
   naziv kluba umjesto kategorije. */
.natjecanje__ekipa-naziv { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.natjecanje__ekipa-naziv .grb { flex-shrink: 0; }
/* Broj igrača desno u istom retku; inače ga flex-wrap baci u redak ispod, na
   različito mjesto za svaki klub, ovisno o duljini naziva. */
.natjecanje__ekipa > .vise__gumb { flex-wrap: nowrap; align-items: center; }
.natjecanje__ekipa-naziv { flex: 1 1 auto; }
.natjecanje__ekipa .vise__opis { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 920px) {
  .klub-analitika__mreza { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .klub-igraci__tablica th:nth-child(3), .klub-igraci__tablica td:nth-child(3),
  .klub-igraci__tablica th:nth-child(5), .klub-igraci__tablica td:nth-child(5) { display: none; }
}

/* ── Ljestvica i strijelci iz podataka ─────── */
.ljestvica__veza { color: var(--plava); transition: color .2s ease; }
.ljestvica__tablica abbr { text-decoration: none; cursor: help; }
.ljestvica__veza:hover { color: var(--bijela); }
.strijelci th.strijelci__klub { width: 30%; }
.strijelci__klub { font-size: .7rem; letter-spacing: .06em; }

@media (max-width: 560px) {
  .strijelci .strijelci__klub { display: none; }
}

/* ── Profil igrača: statistika sezone ──────── */
.igrac__statistika-tablica th:nth-child(2) { width: 2.5rem; }
.igrac__statistika-tablica + .igrac__statistika-tablica { margin-top: 32px; }

/* ── Statistika utakmice: usporedba ekipa ─────
   Brojke su tekst, traka je ukras. Jača strana dobiva ledeno plavu — to je
   mikro-podatak, ne naglasak, pa crvena ostaje za rub gola i dvotočku. */
.usporedba {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 36px);
  background: var(--panel);
  border: 1px solid var(--linija);
}
.usporedba__glava {
  display: flex; justify-content: space-between;
  margin: 0 0 18px;
  font-family: var(--oznaka);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.usporedba__popis { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.usporedba__red {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 16px;
}
.usporedba__oznaka {
  font-family: var(--oznaka);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  text-align: center;
}
.usporedba__vrijednost {
  font-family: var(--display);
  font-stretch: var(--sirina-jaka);
  font-weight: 800;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: rgba(237,241,247,.62);
}
.usporedba__vrijednost--gost { text-align: right; }
/* „14.6 %": znak postotka je na telefonu padao u svoj redak. */
.usporedba__vrijednost { white-space: nowrap; }
/* Na telefonu oznaka ide u svoj redak iznad vrijednosti: „Uspješnost
   udaraca" u sredini ostavljala je vrijednostima po 50px. */
@media (max-width: 560px) {
  .usporedba__red { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .usporedba__oznaka { grid-row: 1; grid-column: 1 / -1; }
}
.usporedba__vrijednost.is-bolji { color: var(--bijela); }
.usporedba__traka { grid-column: 1 / -1; display: flex; gap: 3px; height: 4px; }
.usporedba__dio { background: rgba(237,241,247,.16); }
.usporedba__dio--dom { flex: 0 0 var(--udio); }
.usporedba__dio--gost { flex: 1 1 auto; }
.usporedba__dio.is-bolji { background: var(--plava); }
.usporedba__traka--prazna .usporedba__dio { background: rgba(237,241,247,.06); }

/* ── Najava utakmice ───────────────────────── */
.najava {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.najava__ekipa {
  min-width: 0;
  padding: clamp(20px, 2.6vw, 34px);
  background: var(--panel);
  border: 1px solid var(--linija);
}
.najava__naziv {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--crvena);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}
.najava__blok + .najava__blok { margin-top: 22px; }
.najava__oznaka {
  margin: 0 0 10px;
  font-family: var(--oznaka);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.najava__plasman { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.najava__plasman b {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--bijela);
}
.najava__plasman span { font-size: .88rem; color: var(--tekst); }
.najava__prazno { margin: 0; font-size: .88rem; color: var(--tekst-prigusen); }
.najava__strijelci { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.najava__strijelci li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.najava__bodovi {
  flex: none;
  font-family: var(--oznaka);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .08em;
  color: var(--tekst-prigusen);
}
.najava__medjusobni { margin-top: clamp(36px, 5vw, 56px); }

.forma { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.forma__stavka {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  font-family: var(--oznaka);
  font-size: .72rem; font-weight: 700;
  border: 1px solid var(--linija);
  color: var(--tekst-prigusen);
  transition: border-color .2s ease, color .2s ease;
}
.forma__stavka--pobjeda { border-color: rgba(74,144,196,.6); color: var(--plava); background: rgba(74,144,196,.1); }
.forma__stavka:hover { border-color: var(--bijela); color: var(--bijela); }

@media (max-width: 760px) {
  .najava { grid-template-columns: 1fr; }
}

/* ── Više detalja ──────────────────────────────
   <details>: otvara se i bez skripte. Oznaka „+" je pseudoelement koji se
   okreće u „×" kad je otvoreno. */
.vise__gumb {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 18px 56px 18px 22px;
  position: relative;
  list-style: none;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--linija);
  font-family: var(--oznaka);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--bijela);
  transition: border-color .2s ease;
}
.vise__gumb::-webkit-details-marker { display: none; }
.vise__gumb::after {
  content: "+";
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem; font-weight: 400;
  color: var(--plava);
  transition: transform .25s var(--krivulja);
}
.vise[open] > .vise__gumb::after { transform: translateY(-50%) rotate(45deg); }
.vise__gumb:hover { border-color: rgba(237,241,247,.24); }
.vise__opis { font-size: .6rem; letter-spacing: .16em; color: var(--tekst-prigusen); }
.vise__sadrzaj { padding-top: clamp(24px, 3vw, 36px); }
.vise__naslov {
  margin: 0 0 12px;
  font-family: var(--oznaka);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.vise__trecine { max-width: 880px; }
.vise__trecine th.t-left:first-child { width: 40%; }
/* Stupci trećina dijele ostatak jednako; opće pravilo tablica bi drugi stupac ostavilo bez širine. */
.vise__trecine th:nth-child(n+2) { width: auto; }
.vise__sastavi { margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 560px) {
  .vise__igraci th:nth-child(3), .vise__igraci td:nth-child(3),
  .vise__igraci th:nth-child(7), .vise__igraci td:nth-child(7) { display: none; }
}

/* ═══════════ OBRAZAC (Contact Form 7) ═══════════
   Polja nose postojeće .field klase, pa izgledaju kao filtri. CF7-ov
   automatski <p>/<br> je isključen (hshl_cf7_bez_autop), da raspored
   ostane onakav kakav je napisan u obrascu. */
.obrazac { max-width: 880px; }
.obrazac__uvod { margin-bottom: 32px; }
.obrazac__cf7 { display: grid; gap: 26px; }
.obrazac__cf7 .field textarea { resize: vertical; min-height: 7.5em; }
.obrazac__cf7 .wpcf7-form-control-wrap { display: block; }
.obrazac__cf7 .wpcf7-form-control:not(.wpcf7-radio):not(.wpcf7-submit) { width: 100%; }
/* Isto za obrazac na stranici Kontakt, koji nije u .obrazac__cf7: bez toga
   polje drži širinu iz `size="40"` (~370px) i na telefonu izlazi iz kadra. */
.kontakt-stranica__obrazac .wpcf7-form-control-wrap { display: block; }
.kontakt-stranica__obrazac .wpcf7-form-control:not(.wpcf7-radio):not(.wpcf7-checkbox):not(.wpcf7-submit) { width: 100%; }

.obrazac__skupina { margin: 0; padding: 0; border: 0; min-width: 0; }
.obrazac__skupina legend {
  margin-bottom: 14px; padding: 0;
  font-family: var(--oznaka);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.obrazac__izbori { display: grid; gap: 10px; }
.obrazac__izbori .wpcf7-list-item { display: block; margin: 0; }
.obrazac__izbori label {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  /* .field label je verzal s razmakom slova — za duge odgovore nečitljivo. */
  font-family: var(--body);
  font-size: .92rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--tekst);
  background: rgba(8,9,15,.6);
  border: 1px solid var(--linija);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.obrazac__izbori label:hover { border-color: rgba(237,241,247,.24); color: var(--bijela); }
.obrazac__izbori label:has(input:checked) { border-color: var(--plava); color: var(--bijela); }
/* .field input iz filtara bi radio gumbu dao padding, rub i punu širinu. */
.obrazac__izbori input[type="radio"] {
  flex: none;
  width: 18px; height: 18px;
  margin: 2px 0 0; padding: 0;
  border: 0;
  accent-color: var(--plava);
}

.obrazac__napomena { font-size: .84rem; color: var(--tekst-prigusen); }

.obrazac__red { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.obrazac__red--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.obrazac__anonimno {
  margin: 8px 0 -6px;
  padding-top: 22px;
  border-top: 1px solid var(--linija);
  font-family: var(--oznaka);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--plava);
}

.obrazac__cf7 .wpcf7-submit { justify-self: start; cursor: pointer; }
.obrazac__cf7 .wpcf7-not-valid { border-color: var(--crvena-tekst); }
.obrazac__cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: .8rem;
  color: var(--crvena-tekst);
}
.obrazac__cf7 .wpcf7-response-output {
  margin: 0;
  padding: 14px 18px;
  font-size: .9rem;
  color: var(--bijela);
  border: 1px solid var(--linija);
}
/* CF7 boji okvir poruke vlastitim, specifičnijim pravilom (žuto) — .obrazac ga nadjačava. */
.obrazac .obrazac__cf7.invalid .wpcf7-response-output,
.obrazac .obrazac__cf7.unaccepted .wpcf7-response-output,
.obrazac .obrazac__cf7.failed .wpcf7-response-output { border-color: var(--crvena-tekst); }
.obrazac .obrazac__cf7.sent .wpcf7-response-output { border-color: var(--plava); }

@media (max-width: 760px) {
  .obrazac__red,
  .obrazac__red--tri { grid-template-columns: 1fr; }
}

/* ── Stranica natjecanja ──────────────────────
   Kartice su obične poveznice (svaka svoj URL); aktivna nosi crvenu crtu
   ispod, kao podcrtane poveznice u temi. Na telefonu se kartice listaju
   vodoravno umjesto da se lome u dva reda. */
.kartice {
  display: flex; gap: clamp(18px, 3vw, 40px);
  margin-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--linija);
  overflow-x: auto;
  scrollbar-width: none;
}
.kartice::-webkit-scrollbar { display: none; }
.kartice__veza {
  flex: none;
  padding: 0 0 14px;
  font-family: var(--oznaka);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--tekst-prigusen);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s ease, border-color .2s ease;
}
.kartice__veza:hover { color: var(--bijela); }
.kartice__veza.is-aktivna { color: var(--bijela); border-bottom-color: var(--crvena); }

/* Telefon: tri kartice u traci koja skrola sakrivale su treću („Strijelci i
   v…" odrezano na rubu), a ništa nije govorilo da se traka da pomaknuti. Tri
   jednaka stupca, tekst se lomi u dva retka i poravnava na dno, pa crta
   aktivne kartice stoji na istoj liniji za sve tri. */
@media (max-width: 600px) {
  .kartice { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; overflow: visible; }
  .kartice__veza {
    display: flex; align-items: flex-end; justify-content: center;
    text-align: center;
    padding: 0 2px 12px;
    font-size: .6rem;
    letter-spacing: .12em;
    line-height: 1.5;
  }
}

.natjecanje__podnaslov { margin: clamp(36px, 5vw, 56px) 0 0; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.natjecanje__tablica + .natjecanje__podnaslov { margin-bottom: 16px; }
.natjecanje__vratari { margin-top: clamp(24px, 3vw, 36px); }
.natjecanje__strijelci .ljestvica__glava h2,
.natjecanje__vratari .ljestvica__glava h2 { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.5rem); }

/* Puna ljestvica ima devet stupaca; „Golovi" (npr. „112:48") treba više od znamenke. */
.ljestvica__tablica--puna th.ljestvica__golovi { width: 5.2rem; }
.ljestvica__naslov-veza { color: inherit; text-decoration: none; }
.ljestvica__naslov-veza:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--crvena); }

.natjecanje__vratari-tablica th:nth-child(5) { width: 3.6rem; }

@media (max-width: 600px) {
  .ljestvica__tablica--puna th:nth-child(5), .ljestvica__tablica--puna td:nth-child(5),
  .ljestvica__tablica--puna th:nth-child(6), .ljestvica__tablica--puna td:nth-child(6) { display: none; }
  /* I golovi: uz njih je nazivu kluba ostajalo 69px, a „Zagreb" ih traži 74.
     Gol-razlika ostaje, pa omjer nije izgubljen. */
  .ljestvica__tablica--puna .ljestvica__golovi { display: none; }
  .natjecanje__igraci th:nth-child(8), .natjecanje__igraci td:nth-child(8),
  .natjecanje__igraci th:nth-child(9), .natjecanje__igraci td:nth-child(9),
  .natjecanje__vratari-tablica th:nth-child(5), .natjecanje__vratari-tablica td:nth-child(5),
  .natjecanje__vratari-tablica th:nth-child(6), .natjecanje__vratari-tablica td:nth-child(6) { display: none; }
}

/* ── Sekcija: popis natjecanja ──────────────── */
.natjecanja-popis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.natjecanja-popis__kartica {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--panel);
  border: 1px solid var(--linija);
  border-top: 2px solid var(--crvena);
}
.natjecanja-popis__naziv { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.natjecanja-popis__naziv a { color: inherit; text-decoration: none; }
.natjecanja-popis__naziv a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--crvena); }
.natjecanja-popis__stanje,
.natjecanja-popis__oznaka {
  margin: 0;
  font-family: var(--oznaka);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--tekst-prigusen);
}
.natjecanja-popis__vodi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: .92rem; color: var(--tekst); }
.natjecanja-popis__vodi b { color: var(--bijela); }
.natjecanja-popis__vodi--prazno { color: var(--tekst-prigusen); font-size: .88rem; }
.natjecanja-popis__oznaka { flex-basis: 100%; }
.natjecanja-popis__veze { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: auto 0 0; padding: 8px 0 0; list-style: none; }

@media (max-width: 1080px) {
  .natjecanja-popis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .natjecanja-popis { grid-template-columns: 1fr; }

  /* Tri poveznice u retku su se lomile dvije pa jedna, svaka s vlastitom
     crvenom crtom. Na telefonu su popis redaka preko cijele kartice — i
     meta za prst je cijeli redak, ne samo riječ. */
  .natjecanja-popis__veze { flex-direction: column; gap: 0; padding-top: 0; }
  .natjecanja-popis__veze li { border-top: 1px solid var(--linija); }
  .natjecanja-popis__veze .textlink {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0;
    border-bottom: 0;
  }
  .natjecanja-popis__veze .textlink::after { content: "→"; color: var(--crvena-tekst); letter-spacing: 0; }
}

/* ── Veliki naslovi na telefonu ────────────────
   Naslovi arhiva, reprezentacije i WC-a imaju vlastite donje granice (3rem,
   2.6rem), koje nadjačaju mobilno pravilo iz base.css. Na 390px su se zato
   „Raspored", „Reprezentacije" i „Prvenstva" lomili usred riječi
   („RASPORE/D"): jedna riječ od 14 slova u širokom rezu traži ~430px. Granica
   se spušta, a rez se sužava toliko da najdulja hrvatska riječ u naslovu
   stane u redak i na 360px. Blok stoji na kraju datoteke jer ista pravila
   ranije u datoteci (jednake specifičnosti) inače pobjeđuju. */
@media (max-width: 600px) {
  h1, h2 { font-stretch: 112%; }
  /* „Reprezentacije" u ovom rezu traži 10.84em; uz rub od 20px s obje strane
     7.8vw je najveće što stane na svakoj širini od 320 do 600px. */
  .arhiva__glava h1 { font-size: clamp(1.6rem, 7.8vw, 3rem); }
  .reprezentacija__naslov { font-size: clamp(1.6rem, 7.8vw, 2.6rem); }
  .wc__head h2 { font-size: clamp(1.9rem, 8.6vw, 3rem); }
  .vijesti-mozaik__naslov { font-size: 1.3rem; }
}

/* Telefon: logo pokraj teksta, ne iznad njega. Iznad je uska bijela ploha
   stajala sama u kutu kartice, a natpis na logu bio je presitan za čitanje.
   Blok je na kraju datoteke jer stari prijenos prototipa (≤640px) kasnije u
   datoteci vraća stupac. */
@media (max-width: 600px) {
  .wc__card { flex-direction: row; align-items: center; gap: 16px; padding: 24px 18px 28px; }
  .wc__logo { width: 96px; padding: 8px; }
  .wc__card h3 { font-size: clamp(1.3rem, 6.4vw, 1.7rem); }
  .wc__card-tag { letter-spacing: .18em; line-height: 1.6; }
  .wc__card-motto { letter-spacing: .08em; font-size: .72rem; }