/* ==========================================================================
   FLUID FRAMEWORK — bazni sloj za sve naše webove
   --------------------------------------------------------------------------
   Sve se skalira KONTINUIRANO sa širinom ekrana (375px → 1440px).
   Nema skokova na breakpointima — @media koristimo samo za promjenu RASPOREDA
   (npr. 2 stupca → 1 stupac), NIKAD za promjenu veličine teksta ili razmaka.

   Upotreba: uključi kao prvi vlastiti stylesheet, pa koristi varijable:
       h1        { font-size: var(--fs-3xl); }
       .section  { padding-block: var(--sp-2xl); }
       .wrap     { width: var(--container); margin-inline: auto; }

   Formula (Utopia pristup): clamp(min, calc(intercept + slope·vw), max)
   gdje je slope = (max−min)/(1440−375). Endpointi su u rem da poštuju
   korisnikovu postavku veličine fonta u pregledniku.
   ========================================================================== */

:root {
  /* --- tipografska skala -------------------------------------------------
     ime        375px →  1440px                                            */
  --fs-xs:   clamp(0.75rem,  calc(0.727rem + 0.094vw),  0.833rem);  /* 13→15 */
  --fs-sm:   clamp(0.833rem, calc(0.798rem + 0.169vw),  0.944rem);  /* 15→17 */
  --fs-base: clamp(0.889rem, calc(0.85rem  + 0.188vw),  1rem);      /* 16→18 */
  --fs-md:   clamp(0.944rem, calc(0.89rem  + 0.263vw),  1.111rem);  /* 17→20 */
  --fs-lg:   clamp(1.056rem, calc(0.978rem + 0.376vw),  1.278rem);  /* 19→23 */
  --fs-xl:   clamp(1.333rem, calc(1.216rem + 0.563vw),  1.667rem);  /* 24→30 */
  --fs-2xl:  clamp(1.778rem, calc(1.621rem + 0.751vw),  2.222rem);  /* 32→40 */
  --fs-3xl:  clamp(2.111rem, calc(1.798rem + 1.502vw),  3rem);      /* 38→54 */
  --fs-4xl:  clamp(2.444rem, calc(1.896rem + 2.629vw),  4rem);      /* 44→72 */
  --fs-hero: clamp(2.778rem, calc(1.995rem + 3.756vw),  5rem);      /* 50→90 */

  /* --- skala razmaka ----------------------------------------------------- */
  --sp-3xs:  clamp(0.222rem, calc(0.213rem + 0.047vw),  0.278rem);  /*  4→5  */
  --sp-2xs:  clamp(0.444rem, calc(0.426rem + 0.094vw),  0.556rem);  /*  8→10 */
  --sp-xs:   clamp(0.667rem, calc(0.626rem + 0.188vw),  0.889rem);  /* 12→16 */
  --sp-sm:   clamp(0.889rem, calc(0.811rem + 0.376vw),  1.333rem);  /* 16→24 */
  --sp-md:   clamp(1.333rem, calc(1.176rem + 0.751vw),  2.222rem);  /* 24→40 */
  --sp-lg:   clamp(1.778rem, calc(1.464rem + 1.502vw),  3.111rem);  /* 32→56 */
  --sp-xl:   clamp(2.222rem, calc(1.674rem + 2.629vw),  4.444rem);  /* 40→80 */
  --sp-2xl:  clamp(2.778rem, calc(1.995rem + 3.756vw),  5.556rem);  /* 50→100 */
  --sp-3xl:  clamp(3.333rem, calc(2.237rem + 5.258vw),  7.778rem);  /* 60→140 */

  /* --- vertikalni ritam sekcija -------------------------------------------
     JEDNA vrijednost za sve sekcije na webu — sekcije ne smiju imati svaka
     svoj padding (63px → 99px pri root 18px).                              */
  --section-py: clamp(3.5rem, calc(3.062rem + 2.113vw), 5.5rem);

  /* Visina headera; postavlja je fluid-vw.js. Koristi se kad header apsolutno
     leži preko prve sekcije, da naslov ne završi ispod njega. */
  --header-h: 0px;

  /* --- kontejner i rubovi ------------------------------------------------- */
  --gutter: var(--sp-sm);
  --container-max: 1200px;
  --container: min(100% - 2 * var(--gutter), var(--container-max));

  /* Širina viewporta BEZ scrollbara. `100vw` uključuje scrollbar, pa svaki
     full-bleed element koji ga koristi viri za širinu scrollbara (~15px) i
     radi vodoravni scroll. Fallback je 100vw; fluid-vw.js postavi točnu
     vrijednost i osvježava je na resize. */
  --vw: 100vw;

  /* --- fluidni radijusi i debljine ---------------------------------------- */
  --radius-sm: clamp(0.222rem, calc(0.204rem + 0.094vw), 0.333rem);
  --radius-md: clamp(0.444rem, calc(0.387rem + 0.282vw), 0.778rem);
  --radius-lg: clamp(0.667rem, calc(0.548rem + 0.573vw), 1.333rem);

  /* visina linije se stišće kako tekst raste */
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;
}

/* --- osnovna tipografija --------------------------------------------------
   U :where() → specifičnost 0, pa ovo služi samo kao fluidni default:
   čim projekt (ili tema, kod 1:1 mirrora) postavi svoje, njegovo pobjeđuje.  */
:where(body) {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

:where(h1) { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
:where(h2) { font-size: var(--fs-2xl); line-height: var(--lh-heading); }
:where(h3) { font-size: var(--fs-xl);  line-height: var(--lh-heading); }
:where(h4) { font-size: var(--fs-lg);  line-height: var(--lh-heading); }
:where(h5) { font-size: var(--fs-md);  line-height: var(--lh-heading); }
:where(h6) { font-size: var(--fs-base); line-height: var(--lh-heading); }

/* --- pomoćne klase --------------------------------------------------------- */
.fluid-wrap    { width: var(--container); margin-inline: auto; }

/* Svaka sekcija = isti vertikalni ritam. */
.fluid-section { padding-block: var(--section-py); }

/* Prva sekcija ispod headera koji leži preko nje — isti ritam, uvećan točno
   koliko treba da naslov ne uđe pod header. */
.fluid-section--hero {
  padding-top: max(var(--section-py), calc(var(--header-h) + var(--sp-md)));
  padding-bottom: var(--section-py);
}

/* RITAM DRŽI SEKCIJA: prvo i zadnje dijete ne smiju dodavati vlastiti vertikalni
   margin na padding sekcije — inače jedna sekcija ispadne 104px, druga 84px. */
.fluid-section > :first-child { margin-top: 0; }
.fluid-section > :last-child  { margin-bottom: 0; }
.fluid-stack > * + * { margin-top: var(--sp-md); }

/* Sekcija koja se probija preko rubova kontejnera — scrollbar-safe. */
.full-bleed {
  width: var(--vw);
  max-width: var(--vw);
  margin-inline: calc(50% - var(--vw) / 2);
}

/* Slike i mediji nikad ne prelijevaju — dio fluidnog pristupa. */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* Duge riječi/URL-ovi ne razvaljuju uski ekran. */
h1, h2, h3, h4, h5, h6, p, li, a { overflow-wrap: break-word; }

/* Korisnici koji traže manje animacije — poštuj. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}