/* ═══════════════════════════════════════════════
   HSHL — base.css
   Fontovi, tokeni, reset, tipografija, sustav ploha i razmaka.
   Izvor: handoff redizajna (faza 2). Zamjenjuje prototip iz faze 1.
═══════════════════════════════════════════════ */

/* ── Fontovi (lokalno, Google Fonts woff2, SIL OFL 1.1) ──
   Archivo je variable font s dvije osi: wght 100–900 i wdth 62–125. Redizajn
   naslove vozi na wdth 125 % ("Archivo Expanded"), pa je variable inačica
   nužna — statični rezovi tu os nemaju.

   Oba subseta su obavezna: hrvatski dijakritici (č U+010D, ć U+0107, đ U+0111,
   š U+0161, ž U+017E) leže u latin-ext rasponu, a ne u osnovnom latinu. Bez
   latin-ext datoteke preglednik bi za njih posegnuo za zamjenskim fontom i
   naslovi bi se lomili nasred riječi. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-v25-latin-ext-variable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-v25-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/spacegrotesk-v22-latin-ext-variable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/spacegrotesk-v22-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Plohe ──
     Redizajn je jednolično taman: nema svijetle zone čitanja. Dubina se gradi
     razlikom ploha, ne kontrastom svijetlo/tamno.
     Rujan 2026.: sve plohe podignute za ~6 nijansi na zahtjev (web je bio
     „malo pretaman"). Vrijednosti handoffa: led #05060A, panel #0B0E16,
     panel-tam #0A0D14, panel-svj #0E1220 — isti rgb je ukucan i u prozirnim
     bojama (rgba(11,13,20,…) → rgba(11,13,20,…)), pa se vraća zajedno. */
  --led:       #0B0D14;  /* osnovna ploha cijelog weba */
  --panel:     #121620;  /* kartice, tablice, izdvojeni blokovi */
  --panel-tam: #10131C;  /* placeholderi i utisnuta polja */
  --panel-svj: #161B29;  /* gornji kraj gradijenta kartica */
  --navy:      #002868;  /* duboka polja, WC kartica Sisak */
  --navy-tam:  #001030;
  --bordo:     #8E0B20;  /* WC kartica Zagreb, gornji kraj */
  --bordo-tam: #3A0710;

  /* ── Akcenti ── */
  --crvena:       #C8102E;  /* jedini glasni akcent; plohe, gumbi, veliki naslovi */
  --crvena-hover: #E01236;
  /* Sitan crveni tekst ne smije na #C8102E: na ledu je to 3.44:1, ispod 4.5:1
     iz pravila 13. Ova nijansa drži 5.13:1 na ledu, 4.78:1 na panelu i 4.54:1
     na --panel-svj uz najmanji mogući pomak od boje grba — mjereno, ne
     procijenjeno (#F0234A iz handoffa je na svjetlijim plohama pao na 4.12:1).
     Plohe i veliki naslovi ostaju na --crvena. */
  --crvena-tekst: #F33A57;
  --plava:        #4A90C4;  /* mikro-podaci, "živo" stanje, rezultati — 5.86:1 */
  --tag:          #FF3B5C;  /* sitna crvena oznaka (chip) — 5.82:1 */

  /* ── Tekst ──
     Prag prozirnosti je .48, ne .3–.45 kako je u handoffu: ispod .48 sitan
     tekst pada ispod 4.5:1 na obje plohe (.45 → 4.07:1, .4 → 3.42:1,
     .3 → 2.39:1). Razlika je jedva vidljiva, pravilo 13 ostaje zadovoljeno. */
  --bijela:         #EDF1F7;                 /* naslovi i jaki tekst — 17.87:1 */
  --tekst:          rgba(237,241,247,.62);   /* tijelo — 7.00:1 */
  --tekst-prigusen: rgba(237,241,247,.50);   /* oznake, datumi, mikro — 4.71:1 i na panel-svj */
  /* Obris se koristi isključivo na velikim naslovima, gdje WCAG traži 3:1. */
  --obris:          rgba(237,241,247,.5);
  --linija:         rgba(255,255,255,.08);   /* hairline rubovi i separatori */

  /* ── Tipografija ──
     Archivo nosi i naslove i tijelo; Space Grotesk samo oznake i mikro-tekst;
     monospace tehničke oznake i placeholdere. */
  --display: 'Archivo', sans-serif;
  --body:    'Archivo', sans-serif;
  --oznaka:  'Space Grotesk', sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --sirina-display: 125%;  /* font-stretch za naslove */
  --sirina-jaka:    118%;  /* font-stretch za podebljane nazive u karticama */

  /* ── Mjere ── */
  --pad-x:    clamp(20px, 4vw, 64px);
  --pad-y:    clamp(64px, 9vw, 140px);
  --nav-h:    76px;
  --ticker-h: 44px;
  --mjera:    64ch;

  --razmak-s: clamp(40px, 5vw, 72px);
  --razmak-m: clamp(64px, 9vw, 140px);
  --razmak-l: clamp(88px, 12vw, 180px);

  /* ── Rez klizaljke ──
     Kutovi se režu dijagonalno. Zaobljenja i sjene ne postoje nigdje u temi. */
  --rez-s: 10px;
  --rez-m: 16px;
  --rez-l: 24px;

  /* ── Krivulja pokreta ── */
  --krivulja: cubic-bezier(.19, .71, .22, 1);

}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

/* Vidi objašnjenje u `body` ispod — klipanje mora stajati na oba. */
html { overflow-x: clip; }

body {
  font-family: var(--body);
  background: var(--led);
  color: var(--tekst);
  line-height: 1.65;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
  /* `clip`, ne `hidden`. `overflow-x: hidden` pretvara body u scroll kontejner,
     a time `position: sticky` kod potomaka prestaje raditi — hero track bi se
     odlijepio i otkrio praznu plohu. `clip` odsijeca isto, a kontejner ne
     stvara. Izmjereno u fazi 2: s `hidden` je hero nestajao već na trećini
     tracka.

     Sam `body` NIJE dovoljan: kad `html` ima `overflow: visible`, preglednik
     propagira bodyjevo klipanje na viewport i body ga više ne provodi. Zato
     ista deklaracija stoji i na `html` (vidi pravilo ispod). Izmjereno na
     naslovnici: dok `.reveal` kartice ulaze, stranica se dala pomaknuti 56px
     u stranu; s klipanjem na `html` pomak je 0, a hero track je i dalje
     `position: sticky` i uredno pinan. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--crvena); color: #fff; }

/* ═══════════ TIPOGRAFIJA ═══════════ */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-stretch: var(--sirina-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .9;
  color: var(--bijela);
}

h1 { font-size: clamp(3.4rem, 9.5vw, 9rem); line-height: .86; }
h2 { font-size: clamp(2.4rem, 5.5vw, 4.8rem); line-height: .88; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1; }
h4 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.05; }

/* ── Duge riječi na uskim ekranima ──
   Hrvatski ima riječi koje u Archivo Expanded 900 ne stanu ni na jedan
   telefon: „Reprezentacije" je 14 slova i na 38.4px (donja granica iz dizajna)
   zauzima 450px. Jedna riječ se ne može prelomiti na razmaku, pa je razvlačila
   cijeli dokument na 470px i stranica je dobila vodoravni skrol.

   Dizajn je rađen s kraćim engleskim naslovima; donja granica se zato na
   uskim ekranima spušta. `overflow-wrap` je posljednja brana za slučajeve koje
   ni to ne pokrije (npr. ekran od 320px) — radije prelom riječi nego stranica
   koja se vuče postrance. */
@media (max-width: 920px) {
  h1 { font-size: clamp(2rem, 8.5vw, 3.6rem); }
  h2 { font-size: clamp(1.7rem, 7vw, 2.8rem); }
  h3 { font-size: clamp(1.2rem, 4.4vw, 1.8rem); }

  /* Prijelom u dva retka je na telefonu pravilo, a ne iznimka. Uz .86/.88
     naslovni redovi se dodiruju, a obris ih tada čita kao preklop — izmjereno
     na „Najnovije s leda": redak 1 završava na 524px, redak 2 počinje na 525. */
  h1, h2 { line-height: .96; }
}

h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Obris: točno JEDNA riječ po velikom naslovu nosi ga, nikad cijeli naslov.
   `color: transparent` uz text-stroke — fill nestaje, ostaje kontura. */
/* Debljina konture ide u `em`, ne u pikselima: ista klasa stoji i na naslovu od
   96px i na naslovu od 19px u okviru, a fiksnih 2px na malom tekstu izgleda kao
   podebljanje, ne kao obris. 0.022em daje ~2.1px na Display XL — točno ono što
   dizajn traži — i sam se stanji na manjim naslovima i na mobitelu. */
.obris {
  color: transparent;
  /* Donja granica od 1px: 0.022em je na naslovu od 27px (mobilni h2) samo
     0.6px, a podpikselni potez preglednik crta isprekidano — obris se
     raspadne u mrlje umjesto da bude kontura. */
  -webkit-text-stroke: max(1px, 0.022em) var(--obris);
}

/* ═══════════ PLOHE ═══════════
   Zamjenjuju sustav zona iz faze 1. Svaka ploha uz podlogu nosi i boju
   nadnaslova: sitan crveni tekst traži svjetliju crvenu (vidi --crvena-tekst),
   a na crvenoj plohi crveno na crvenom bilo bi nevidljivo. Boja se predaje
   varijablom, a ne selektorom `.ploha--x .eyebrow`, da varijanta
   `.eyebrow--light` ostane jednake specifičnosti i da je i dalje može
   nadglasati. */
.ploha { position: relative; }
.ploha--led    { background: var(--led);   color: var(--tekst); --eyebrow-boja: var(--crvena-tekst); --akcent-sitni: var(--crvena-tekst); }
.ploha--panel  { background: var(--panel); color: var(--tekst); --eyebrow-boja: var(--crvena-tekst); --akcent-sitni: var(--crvena-tekst); }
/* Na navyju ni svjetlija crvena ne prolazi: #F0234A daje 3.36:1, ispod praga.
   Sitan akcent tamo ide bijel. */
.ploha--navy   { background: var(--navy);  color: rgba(237,241,247,.72); --eyebrow-boja: rgba(237,241,247,.82); --akcent-sitni: var(--bijela); }
.ploha--crvena { background: var(--crvena); color: rgba(255,255,255,.92); --eyebrow-boja: rgba(255,255,255,.92); --akcent-sitni: #fff; }
.ploha--crvena h1, .ploha--crvena h2, .ploha--crvena h3, .ploha--crvena h4 { color: #fff; }

/* ═══════════ RAZMACI ═══════════ */
.razmak--s { padding-block: var(--razmak-s); }
.razmak--m { padding-block: var(--razmak-m); }
.razmak--l { padding-block: var(--razmak-l); }

/* ═══════════ DIJAGONALNE CRTE ═══════════
   Jedini dozvoljeni pozadinski ukras. Radial glow gradijenti su izbačeni
   odlukom iz redizajna. Rijetka varijanta je podloga sekcija, gusta je
   ispuna placeholdera. */
.crte {
  background-image: repeating-linear-gradient(115deg, transparent 0 42px, rgba(255,255,255,.03) 42px 43px);
}
.crte--gusto {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 14px, transparent 14px 28px);
}

/* ═══════════ ČITLJIVOST ═══════════ */
.tekst { max-width: var(--mjera); }

/* ═══════════ FOCUS ═══════════ */
:focus-visible { outline: 3px solid var(--plava); outline-offset: 3px; }

/* ═══════════ REDUCIRANI POKRET ═══════════
   Jedini blok u cijeloj temi koji smije nadjačati specifičnost i redoslijed
   kako bi bez iznimke ugasio tranzicije i animacije. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Paralaks slojevi i ostatak pokreta žive u css/pokret.css. */