/* ============================================================
   Alkemijana - Slide deck početne stranice (prefiks hs-)
   ------------------------------------------------------------
   Početna se NE scrolla. Svaki .hs-slide je jedan puni ekran;
   kotačić miša / tipkovnica / swipe prebacuju slideove uz prijelaz
   listanjem odozdo prema gore - odlazeći slide klizne van na vrh, novi
   dolazi s dna, a zvjezdano nebo se pomiče sporije (parallax).

   Blog slide je VODORAVAN (.hs-slide-rail): članci se listaju
   strelicama (.hs-rail-arrow) i swipeom, a okomiti scroll ide ravno
   na sljedeći slide.

   Logika: js/home-slides.js. Ostale stranice scrollaju normalno -
   zaključava se samo dok je #home aktivan (html.hs-lock).
   ============================================================ */

/* ---- 1. Zaključavanje scrolla dok je početna aktivna ---- */

html.hs-lock,
html.hs-lock body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

/* Početna nema padding-top kao ostale stranice - nav pluta preko deka */
#home.page {
  padding-top: 0;
  min-height: 0;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* Fallback za preglednike bez dvh */
@supports not (height: 100dvh) {
  #home.page { height: 100vh; }
}

/* ---- 2. Deck i slideovi ---- */

.hs-deck {
  position: relative;
  width: 100%;
  height: 100%;
}

.hs-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* mjesto za logo/tri crtice gore i nagovještaj dolje - skalira se
     s visinom ekrana da na niskim ekranima ne pojede sadržaj */
  padding: clamp(3.6rem, 8dvh, 6.5rem) clamp(1rem, 4vw, 4rem) clamp(2.4rem, 6dvh, 4.5rem);
  /* Slideovi se LISTAJU ODOZDO PREMA GORE (kao vrpca): odlazeći klizne
     van na vrh, nadolazeći dolazi s dna. Nema blijeđenja - oba se vide
     dok putuju, pa se pokret zaista čita kao listanje.
     `overflow: hidden` na `#home.page` reže ono što je izvan ekrana. */
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
  transition:
    transform 0.68s cubic-bezier(0.3, 0.85, 0.25, 1),
    visibility 0.68s;
  /* `will-change` se NE stavlja ovdje: držalo bi svih 7 slideova stalno
     na zasebnim GPU slojevima. Postavlja se samo dok prijelaz traje
     (klasa hs-moving iz js/home-slides.js). */
}

.hs-deck.hs-moving .hs-slide { will-change: transform, opacity; }

/* Dok prijelaz traje, gasi se drop-shadow na živom natalnom kotaču.
   To je filter nad SVG-om sa stotinama elemenata - da ostane uključen,
   preglednik bi ga rasterizirao iznova u SVAKOM kadru animacije.
   Ovako se prekapča dvaput (početak i kraj), ne 50 puta. */
.hs-deck.hs-moving .home-live-natal-svg svg { filter: none; }

/* Kratko gašenje tranzicije dok se nadolazeći slide "teleportira" na
   ispravnu stranu ekrana (v. prepIncoming u js/home-slides.js). Bez toga
   je deck kod OMATANJA (zadnji -> prvi) listao naopako: prvi slide je
   stajao gore pa je ulazio odozgo, iako smo išli prema dolje. */
.hs-slide.hs-noanim { transition: none !important; }

/* Slide koji je trenutno na ekranu */
.hs-slide.hs-active {
  visibility: visible;
  pointer-events: auto;
  transform: none;
  filter: none;
}

/* Slide koji je OTIŠAO (scroll prema dolje) - otišao je GORE, van ekrana */
.hs-slide.hs-past {
  transform: translateY(-100%);
}

/* Slide koji TEK DOLAZI (ili se vratio scrollom gore) - čeka DOLJE */
.hs-slide.hs-future {
  transform: translateY(100%);
}

/* NAPOMENA o performansama - ne vraćati unatrag:
   - prijelaz NEMA `filter: blur()` (rasterizacija u svakom kadru),
   - prijelaz NEMA `perspective` + `translateZ`: 3D kontekst tjera
     preglednik da cijelo podstablo slidea drži kao 3D sloj, što je na
     slabijim strojevima štekalo.
   Čisti `translateY` kompozitor odradi na GPU-u bez ijednog repainta -
   povoljniji je i od `scale`, jer skaliranje traži ponovno iscrtavanje
   velikog SVG-a natalnog kotača. */

/* ---- Zagrijavanje dok traje ekran učitavanja ----
   Svaki slide se jednom iscrta i slike se dekodiraju PRIJE nego se
   stranica otkrije, pa prvi posjet nekom slideu ne mora rasterizirati
   sadržaj usred animacije (to je bio glavni izvor štekanja).
   Sadržaj je i dalje nevidljiv: `opacity` je praktički nula, a ekran
   učitavanja je iznad svega. `visibility:visible` je nužan jer je
   cijeli `.content` pod `html.aj-loading` skriven - bez toga preglednik
   ne bi ništa ni iscrtao. */
.hs-deck.hs-warm .hs-slide {
  visibility: visible;
  opacity: 0.004;
  transform: none;
  transition: none;
}

.hs-deck.hs-warm .hs-slide .hs-inner > * {
  opacity: 1;
  transform: none;
  transition: none;
}

.hs-inner {
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Sadržaj slidea ulazi s malim zakašnjenjem za oštriji dojam dubine */
.hs-slide .hs-inner > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease 0.16s, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.16s;
}

.hs-slide.hs-active .hs-inner > * {
  opacity: 1;
  transform: none;
}

/* Slide koji odlazi GORE zadržava svoj sadržaj do kraja pokreta - da se
   ne "isprazni" usred listanja. Ulazni stagger vrijedi samo za dolazak. */
.hs-slide.hs-past .hs-inner > * {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---- 3. Sadržaj se skalira uz VELIČINU EKRANA ----
   Obrazac je svugdje `clamp(min, min(Xvw, Yvh), max)`:
     - `vw` diktira veličinu na mobitelu (uski, ali visok ekran)
     - `vh` je koči na niskom ekranu (laptop, mobitel položen vodoravno)
     - clamp drži razumne granice na 4K TV-u i na sitnom telefonu
   Sam `vmin` ovdje NE radi: na mobitelu je vmin = širina pa naslov
   ispadne dvostruko manji nego u verziji 1. */

#home .hero { padding: 0 1rem; }

#home .hero h1.hero-logo {
  width: clamp(220px, min(76vw, 58vh), 820px);
  margin-bottom: 0;
}

/* Rečenica ispod loga (verzija 4, rujan 2026.): logo stoji sam u sredini,
   a rečenica je mala i prigušena pri dnu slidea, iznad strelice. Kurzivni
   Cormorant se uz rukopisni logo tukao - Josefin Sans (kurziv 300, lokalno
   u fonts.css) je dovoljno drugačiji da mu ne konkurira.
   Centriranje ide preko left/right + margin:auto, NE preko transform:
   ulazna animacija (ajHeroIn u loader.css) animira transform i pregazila bi
   translateX(-50%). Širina je zadana pa se element ne razvuče.
   Rečenice idu svaka u svoj red - applyTexts() u app.js ih razlomi u <span>. */
#home .hero-desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(5.5rem, 15vh, 11rem);
  width: min(46ch, 86vw);
  max-width: none;
  margin: 0 auto;
  font-family: 'Josefin Sans', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.85rem, min(3.4vw, 1.9vh), 1.2rem);
  line-height: 1.7;
  color: var(--silver);
  opacity: 0.7;
}
#home .hero-desc > span { display: block; }

/* ZAMKA: element s `transform` postaje containing block za apsolutno
   pozicionirane potomke. Ulazni pomak (`.hs-inner > *` dobiva
   translateY(26px) dok slide nije aktivan) bi zato na `.hero` prebacio
   rečenicu s dna SLIDEA na dno LOGA - vidjelo se kao tekst preko loga pri
   omatanju decka (zadnji -> prvi slide). `.hero` zato ostaje bez transforma,
   a isti pomak dobivaju logo i rečenica svaki za sebe. */
#home .hs-slide .hs-inner > .hero { transform: none; }
#home .hs-slide .hero h1.hero-logo,
#home .hs-slide .hero-desc {
  transform: translateY(26px);
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.16s;
}
#home .hs-slide.hs-active .hero h1.hero-logo,
#home .hs-slide.hs-active .hero-desc,
#home .hs-slide.hs-past .hero h1.hero-logo,
#home .hs-slide.hs-past .hero-desc,
#home .hs-deck.hs-warm .hero h1.hero-logo,
#home .hs-deck.hs-warm .hero-desc {
  transform: none;
}
#home .hs-slide.hs-past .hero h1.hero-logo,
#home .hs-slide.hs-past .hero-desc { transition: none; }

#home .section-title {
  font-size: clamp(1.6rem, min(6vw, 4.6vh), 4rem);
  margin-bottom: clamp(0.3rem, 1vh, 1rem);
}

#home .section-subtitle {
  font-size: clamp(0.95rem, min(3.6vw, 2.4vh), 2rem);
  margin-bottom: clamp(0.9rem, 2.4vh, 2.4rem);
}

/* Živi kotač: veličinu diktira VISINA ekrana (kvadratan je), pa se
   ograničava i širinom za uske ekrane. `width:100%` iz style.css bi ga
   na širokom ekranu napuhao, a max-height bi onda razbio omjer i kotač
   bi se sveo na sitnu sličicu usred praznog okvira. */
/* `#home-natal-section` u style.css ima `max-width:680px` (tamo je kotač
   bio width:100% pa ga je trebalo obuzdati). U deku sekcija mora pustiti
   kotač do pune visine ekrana, inače na velikom ekranu ostane sitan. */
#home #home-natal-section {
  max-width: none;
  padding: 0;
}

#home .home-live-natal-wrap {
  width: min(80dvh, 96vw);
  max-width: none;
  height: auto;
  margin: 0 auto;
}

#home .home-live-natal-caption {
  font-size: clamp(0.72rem, min(3vw, 1.7vh), 1.2rem);
}

/* Natpis u sredini kotača mora se ravnati prema SAMOM KRUGU, ne prema
   širini ekrana. U style.css je `clamp(0.82rem, 1.6vw, 1.15rem)`, što je
   u verziji 1 bilo u redu jer je kotač bio širinski. Sada kotač diktira
   VISINA (`min(70dvh, 92vw)`), pa na širokom-a-niskom ekranu (iPad Mini
   položen vodoravno, nizak prozor na laptopu) font naraste dok se krug
   smanji - natpis se lomio u pet redaka umjesto dva.
   `cqw` je 1 % širine kruga, pa omjer ostaje isti na svakom ekranu. */
#home .home-live-natal-cta {
  container-type: inline-size;

  /* VELIČINA JE VEZANA UZ CRTEŽ, NE UZ PIKSELE: najmanja kružnica u SVG-u
     kotača ima polumjer 220 u viewBoxu širokom 1120, dakle promjer joj je
     39.3 % širine kotača. Gumb zato ide na 38 % - taman unutar te
     kružnice, na svakom ekranu. Fiksna donja granica u pikselima (bila je
     170 px) na malom kotaču izađe izvan te kružnice, pa je nema.
     Kotač je kvadrat (v. `aspect-ratio` u style.css) pa je 38 % × 38 %
     uvijek KRUG, nikad elipsa. */
  width:  38%;
  height: 38%;
}

#home .home-live-natal-cta-label {
  /* Font prati veličinu kruga (`cqw`). Donja granica je tu radi
     čitljivosti - kad se u nju udari (mali kotač), natpis se jednostavno
     prelomi u više kratkih redaka umjesto da izađe iz kruga. */
  font-size: clamp(0.64rem, 6.2cqw, 1.7rem);
  line-height: 1.35;
  padding: 0 9%;
}

/* Karta dana raste s ekranom.
   `--cotd-fit` (0.55-1) postavlja `fitCotd()` u js/home-slides.js: kartica
   se izmjeri i, ako je viša od slidea, SVE mjere u njoj se smanje istim
   faktorom dok ne stane. Tekst se pritom nikad ne skraćuje - duljina
   opisa ovisi o tome koja je karta na redu pa se u CSS-u ne da unaprijed
   pogoditi veličina. */
#home .vtar-cotd {
  --cotd-fit: 1;
  max-width: min(1500px, 90vw);
  gap: calc(clamp(1rem, 3vh, 3.5rem) * var(--cotd-fit));
  padding: calc(clamp(1.2rem, 3vh, 3.5rem) * var(--cotd-fit))
           calc(clamp(1.3rem, 3.2vh, 4rem) * var(--cotd-fit));
}

#home .vtar-cotd-text { gap: calc(0.3rem * var(--cotd-fit)); }

#home .vtar-cotd-img  { width: calc(clamp(115px, min(30vw, 30vh), 430px) * var(--cotd-fit)); }
#home .vtar-cotd-name { font-size: calc(clamp(1.3rem, min(5.4vw, 4vh), 3.2rem) * var(--cotd-fit)); }
#home .vtar-cotd-desc { font-size: calc(clamp(0.95rem, min(3.6vw, 2.3vh), 1.8rem) * var(--cotd-fit)); }
#home .vtar-cotd-eyebrow,
#home .vtar-cotd-cta  { font-size: calc(clamp(0.7rem, min(3vw, 1.7vh), 1.2rem) * var(--cotd-fit)); }

/* NIZAK EKRAN (mobitel s vidljivom adresnom trakom, npr. iPhone mini):
   kartica karte dana zna narasti viša od raspoloživog prostora pa se
   popne skroz do vrha i završi ISPOD logotipa u traci. Ovdje se zato
   unaprijed stisne, a `fitCotd()` u JS-u onda dotjera ostatak.
   Granice su na VISINI ekrana, ne na širini - problem radi visina. */
@media (max-height: 780px) {
  #home .vtar-cotd {
    gap: calc(clamp(0.6rem, 1.6vh, 1.4rem) * var(--cotd-fit));
    padding: calc(clamp(0.7rem, 1.8vh, 1.4rem) * var(--cotd-fit))
             calc(clamp(0.9rem, 2.6vw, 1.6rem) * var(--cotd-fit));
  }
  #home .vtar-cotd-img { width: calc(clamp(96px, min(26vw, 22vh), 430px) * var(--cotd-fit)); }
}

/* Isti problem na vodoravnom blog slideu: kartica članka je viša od
   trake pa naslov ostane odrezan. Naslov i sažetak se skraćuju, a
   unutarnji razmak stisne. */
@media (max-height: 780px) {
  #home .hs-rail-track .blog-content { padding: clamp(0.85rem, 2.4vh, 2rem); }

  #home .hs-rail-track .blog-content h3,
  #home .hs-rail-track .blog-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #home .hs-rail-track .blog-content h3 { -webkit-line-clamp: 2; line-clamp: 2; }
  #home .hs-rail-track .blog-content p  { -webkit-line-clamp: 3; line-clamp: 3; }
}

@media (max-height: 620px) {
  #home .hs-rail-track .blog-content p { -webkit-line-clamp: 2; line-clamp: 2; }
}

#home .cta-section { margin: 0; }
#home .cta-section h2 { font-size: clamp(1.5rem, min(5.6vw, 4.4vh), 3.6rem); }

/* ---- Zadnji slide: izbornik kao RAZLOŽEN SPREAD ----
   Svaka stranica je jedna karta (omjer tarot karte, 0.583), a karte su
   razložene po stolu kao u spreadu - jedna do druge, BEZ preklapanja.

   Prije je ovdje bila lepeza (karte naslagane u ruci). Na malom ekranu se
   pokazalo da to ne valja: preklopljene karte su preuske da bi se naziv
   pročitao i teško se pogađaju prstom. Zato razlog za razložen raspored -
   svaka karta je cijela vidljiva i cijela je meta za dodir.

   Broj karata nije fiksan (kartica "Usluge" nestaje kad su usluge
   isključene u adminu), pa raspored NE smije ovisiti o broju: `flex-wrap`
   s `justify-content: center` sam prelama redak i centrira ostatak. Zato
   ovdje više nema računanja u JS-u. */

/* `.container` ovdje ne smije imati vodoravni padding: `.hs-inner` je
   flex, pa kad je spread širi od unutarnjeg prostora kontejnera, ne biva
   odrezan nego gurne cijeli stupac udesno (mjereno: karte 52-323 px na
   ekranu širokom 320 px). Spread sam pazi na svoju širinu. */
#home .hs-slide[data-hs-name="izbornik"] .container {
  padding-left: 0;
  padding-right: 0;
}

.hs-menu-spread {
  /* Širina karte na jednom mjestu; visina se iz nje računa (omjer karte).
     Veličina ovisi i o VISINI ekrana (`vh`), ne samo o širini: na niskom
     ekranu (mobitel položen vodoravno) karte bi inače stale u red koji je
     viši od ekrana, a deck se ne scrolla. */
  --hs-card-w: clamp(84px, min(26vw, 22vh), 176px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  /* BEZ rastezanja po visini: sa `stretch` (zadano) karta dobije visinu
     reda, `aspect-ratio` tu visinu pretvori natrag u širinu i kartica
     prestane slušati `flex-basis` - a onda i postotne mjere unutar nje
     (ikona `width: 50%`) padnu na nulu jer im je roditelj "neodređen". */
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 20px);
  /* `.hs-inner` je flex pa se `.container` širi po sadržaju - element širi
     od raspoloživog prostora ne bi bio odrezan nego bi gurnuo cijeli
     stupac udesno (i spread ne bi bio po sredini ekrana). Zato širina ide
     na `vw`, s rezervom za padding slidea. */
  width: min(1200px, calc(100vw - 2.5rem));
  margin: 0 auto;
}

.hs-menu-card {
  /* Širina I visina su izričite, bez `aspect-ratio` i bez `flex-grow`.
     Razlog (naučeno na ovom slideu): `aspect-ratio` + rastezanje po
     visini vrti se u krug - kartica dobije visinu reda, omjer tu visinu
     pretvori natrag u širinu, kartica prestane slušati zadanu širinu, a
     postotne mjere unutar nje (ikona `width: 50%`) padnu na nulu jer im
     je roditelj "neodređen". Ovako je sve određeno unaprijed.
     `flex-grow: 0` je nužan da zadnji, nepotpun red ne napuše karte. */
  flex: 0 0 auto;
  width: var(--hs-card-w);
  height: calc(var(--hs-card-w) / 0.583);
  /* Bez ovoga flex item ne smije biti uži od svog `min-content` sadržaja
     pa se zadana širina ignorira (mjereno 110 px umjesto 84 px). */
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* PAZI: postotni `padding` se u CSS-u računa od ŠIRINE RODITELJA, a ne
     od same kartice. Kod uskog spreada to je značilo padding od 54 px sa
     svake strane (7 % od 772 px) - kartica se zbog toga nije mogla suziti
     ispod ~110 px koliko god joj širinu zadali. Zato sve mjere unutar
     kartice idu preko `--hs-card-w`. */
  gap: calc(var(--hs-card-w) * 0.06);
  padding: calc(var(--hs-card-w) * 0.09) calc(var(--hs-card-w) * 0.07);
  text-align: center;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  /* NEPROZIRNO: karta mora izgledati kao tiskana karta, a ne kao staklo -
     zato pune boje, ne `--card-bg`/`--panel-grad-*` (koji su prozirni pa
     bi se kroz kartu vidjele zvijezde). */
  background:
    radial-gradient(ellipse at 50% 12%, rgba(168, 144, 208, 0.16), transparent 62%),
    linear-gradient(165deg, #1d1846, #0e0b24);
  border: 1px solid var(--border);
  /* pravi kut karte: drugi broj je isti polumjer izražen u % visine
     (v. isto objašnjenje u tarot/tarot.css) */
  border-radius: 6% / 3.5%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  /* blagi nagib da karte izgledaju položene na stol, a ne poredane u
     tablicu; ne dira raspored jer je transform samo vizualan */
  transform:
    rotate(var(--hs-rot, 0deg))
    translateY(var(--hs-lift, 0px))
    scale(var(--hs-scale, 1));
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1),
              border-color 0.25s ease, box-shadow 0.25s ease;
}

.hs-menu-card:nth-child(6n+1) { --hs-rot: -1.6deg; }
.hs-menu-card:nth-child(6n+2) { --hs-rot:  1.2deg; }
.hs-menu-card:nth-child(6n+3) { --hs-rot: -0.7deg; }
.hs-menu-card:nth-child(6n+4) { --hs-rot:  1.7deg; }
.hs-menu-card:nth-child(6n+5) { --hs-rot: -1.2deg; }
.hs-menu-card:nth-child(6n+6) { --hs-rot:  0.8deg; }

:root[data-theme="light"] .hs-menu-card {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(106, 78, 160, 0.10), transparent 62%),
    linear-gradient(165deg, #fdfbff, #ebe1f6);
}

/* tanki unutarnji okvir - kao tiskani rub karte */
.hs-menu-card::after {
  content: '';
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(168, 144, 208, 0.28);
  border-radius: 4% / 2.3%;
  pointer-events: none;
}

.hs-menu-card:focus-visible {
  --hs-lift: -10px;
  --hs-scale: 1.05;
  --hs-rot: 0deg;
  z-index: 20;
  border-color: var(--lavender);
  box-shadow: var(--shadow-glow), 0 18px 38px rgba(0, 0, 0, 0.5);
}
@media (hover: hover) {
  .hs-menu-card:hover {
    --hs-lift: -10px;
    --hs-scale: 1.05;
    --hs-rot: 0deg;
    z-index: 20;
    border-color: var(--lavender);
    box-shadow: var(--shadow-glow), 0 18px 38px rgba(0, 0, 0, 0.5);
  }
}

/* SVG ikona je apsolutna UNUTAR svog okvira namjerno: SVG bez `width` i
   `height` atributa ima "prirodnu" veličinu 300×150, a kartica joj je
   preko `min-content` visine dopuštala da diktira visinu (mjereno 189 px
   umjesto 144). `aspect-ratio` je tu visinu onda vraćao natrag u širinu,
   pa je kartica bila šira od tražene i red se lomio. Izvan toka SVG više
   ništa ne diktira. */
.hs-menu-icon {
  position: relative;
  flex: 0 0 auto;
  width: 50%;
  aspect-ratio: 1;
}

.hs-menu-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Naziv se mjeri prema SAMOJ KARTI (`cqw`), ne prema ekranu - inače na
   uskom ekranu font udari u donju granicu i tekst preraste karticu. */
.hs-menu-card { container-type: inline-size; }

.hs-menu-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(0.62rem, 11cqw, 1.05rem);
  color: var(--lavender);
  line-height: 1.2;
}

/* ---- 4. Vodoravni blog slide ---- */

.hs-slide-rail .hs-inner {
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}

.hs-rail-head { text-align: center; }

/* Traka se proteže preko pune širine slidea, zato rail slide nema
   vodoravni padding (nosi ga naslov). NE koristiti `100vw` + negativnu
   marginu: `vw` uključuje prostor scrollbara pa je traka ispadala
   pomaknuta u odnosu na sredinu ekrana. Ovako je centriranje čista
   aritmetika nad širinom trake i neovisno je o 3D transformu slidea. */
.hs-slide-rail {
  padding-left: 0;
  padding-right: 0;
}

.hs-rail-head { padding: 0 1.5rem; }

/* Okvir oko trake: strelice su APSOLUTNE preko rubova, a ne u toku,
   da viewport ostane pune širine slidea - centriranje kartica je čista
   aritmetika nad `viewport.clientWidth` (v. layoutRail u JS-u) pa bi ga
   svako sužavanje viewporta pomaknulo u odnosu na sredinu ekrana. */
.hs-rail-stage {
  position: relative;
  width: 100%;
  --hs-arrow-w:   clamp(38px, 3.4vw, 52px);
  --hs-arrow-gap: clamp(0.5rem, 1.6vw, 1.6rem);
}

.hs-rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hs-arrow-w);
  height: clamp(52px, 7vh, 76px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  color: var(--lavender);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease,
              background 0.25s ease, opacity 0.25s ease;
}

/* Strelica leži preko kartice (osobito na uskom ekranu) pa mora biti
   neprozirna koliko treba da se glif vidi na svakoj podlozi. */
:root[data-theme="light"] .hs-rail-arrow { background: rgba(253, 251, 255, 0.82); }

.hs-rail-arrow svg { width: 60%; height: auto; display: block; }

/* Strelice stoje UZ KARTICU, ne uz rub ekrana: traka je puna širina
   slidea pa bi ih fiksni razmak od ruba na širokom ekranu bacio stotine
   piksela daleko od članka. `--hs-rail-card` postavlja layoutRail() na
   sam slide (širina kartice u px), pa je položaj:
     rub kartice (50% - kartica/2) - razmak - širina strelice.
   `max()` je zaštita za uske ekrane, gdje kartica zauzme skoro sve. */
.hs-rail-arrow-prev {
  left: max(0.4rem, calc(50% - var(--hs-rail-card, 340px) / 2
                          - var(--hs-arrow-gap) - var(--hs-arrow-w)));
}
.hs-rail-arrow-next {
  right: max(0.4rem, calc(50% - var(--hs-rail-card, 340px) / 2
                          - var(--hs-arrow-gap) - var(--hs-arrow-w)));
}

@media (hover: hover) {
  .hs-rail-arrow:hover:not(:disabled) {
    border-color: var(--lavender);
    color: var(--silver-bright);
    box-shadow: var(--shadow-glow);
  }
}

.hs-rail-arrow:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 2px;
}

/* Na krajevima traka stane (ne omata se) - strelica se prigusi, ali
   ostaje na mjestu da se raspored ne pomice. */
.hs-rail-arrow:disabled {
  opacity: 0.22;
  cursor: default;
  pointer-events: none;
}

.hs-rail-viewport {
  width: 100%;
  overflow: hidden;
  /* overflow:hidden reže box-shadow kartica pa treba zračni prostor */
  padding: 1.2rem 0;
}

.hs-rail-track {
  display: flex;
  align-items: stretch;
  gap: var(--hs-rail-gap, 2rem);
  /* --hs-rail-x postavlja js/home-slides.js */
  transform: translateX(var(--hs-rail-x, 0px));
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
  will-change: transform;
}

/* .blog-grid je grid u style.css - u traci mora biti flex */
.hs-rail-track.blog-grid {
  display: flex;
  grid-template-columns: none;
  margin: 0;
}

.hs-rail-track > * {
  flex: 0 0 var(--hs-rail-card, 340px);
  width: var(--hs-rail-card, 340px);
  opacity: 0.45;
  transform: scale(0.94);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hs-rail-track > .hs-rail-current {
  opacity: 1;
  transform: none;
}

/* Samo kartica u fokusu je klikabilna - inače bi hover na prigušenoj
   kartici poništio scale iz .hs-rail-track > * (hover ima vlastiti
   transform u style.css). */
.hs-rail-track > *:not(.hs-rail-current) { pointer-events: none; }

/* Kartica članka mora stati u visinu ekrana: slika dobiva fiksnu
   visinu umjesto aspect-ratija, a sažetak se reže na tri retka. */
.hs-rail-track .blog-card {
  display: flex;
  flex-direction: column;
}

.hs-rail-track .blog-image {
  aspect-ratio: auto;
  height: clamp(100px, 17dvh, 280px);
  flex: 0 0 auto;
}

.hs-rail-track .blog-content p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zadnji korak trake: samo gumb, bez okvira i bez pozadine. Slot je i
   dalje širine kartice da centriranje trake ostane ista aritmetika. */
.hs-rail-more {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Točkice vodoravne trake */
.hs-rail-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.hs-rail-dots i {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.35s, width 0.35s;
}

.hs-rail-dots i.hs-on {
  background: var(--lavender);
  width: 34px;
}

/* ---- 5. Okomiti indikator slideova (desno) ---- */

.hs-dots {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* traka sama ne smije hvatati klikove - samo točkice */
  pointer-events: none;
}

.hs-dots button { pointer-events: auto; }

.hs-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: background 0.35s, border-color 0.35s, transform 0.35s;
}

@media (hover: hover) {
  .hs-dots button:hover { border-color: var(--lavender); transform: scale(1.25); }
}

.hs-dots button.hs-on {
  background: var(--lavender);
  border-color: var(--lavender);
  box-shadow: 0 0 12px rgba(168, 144, 208, 0.6);
}

/* ---- 6. Nagovještaj scrolla ---- */

.hs-hint {
  position: absolute;
  left: 50%;
  bottom: 1.7rem;
  margin-left: -13px;
  z-index: 20;
  width: 26px;
  color: var(--lavender);
  opacity: 0.5;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.hs-hint svg {
  display: block;
  width: 100%;
  height: auto;
  animation: hsHintBreathe 2.6s ease-in-out infinite;
}

.hs-hint.hs-gone { opacity: 0; }

@keyframes hsHintBreathe {
  0%, 100% { transform: translateY(-3px); opacity: 0.35; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* ---- 7. Parallax zvjezdanog neba ----
   --hs-sky postavlja js/home-slides.js (0 = prvi slide). */

/* SAMO pomak, BEZ skaliranja. Nebo je SVG 1920x1080 sa stotinama
   krugova i filterima zamućenja - `scale()` bi ga natjerao na ponovnu
   rasterizaciju u svakom kadru, a čisti `translate` kompozitor odradi
   na GPU-u bez ijednog repainta. */
#sky-bg {
  transition: transform 1s cubic-bezier(0.22, 0.8, 0.3, 1);
  transform: translate3d(0, calc(var(--hs-sky, 0) * -1.5%), 0);
  will-change: transform;
}

/* ---- 8. Mobitel ---- */

@media (max-width: 768px) {
  .hs-slide { padding: 5.5rem 1rem 4rem; }

  /* PAZI: samo `left` - postavljanje i `left` i `right` na apsolutno
     pozicioniranom elementu ga razvuče preko cijele širine ekrana. */
  .hs-dots {
    left: 0.7rem;
    gap: 0.7rem;
  }

  .hs-dots button { width: 8px; height: 8px; }

  #home .hero h1.hero-logo { width: min(86vw, 460px); }

  /* Kotač na mobitelu MORA ostati kvadrat (style.css mu daje
     `aspect-ratio: 1/1`). Ovdje je prije stajao `max-height: 46dvh` i to
     je bio pravi kvar: visina se odrezala, širina je ostala iz `vw`, pa
     - crtež se letterboxao (prazan prostor lijevo i desno), a
     - gumb u sredini, koji je `40% × 40%` roditelja, postao je ELIPSA
       (npr. 123×104 px) uža od vlastitog natpisa, pa je tekst virio van.
     Visinu zato ograničavamo kroz ŠIRINU - omjer tako ostaje 1:1. */
  #home .home-live-natal-wrap { width: min(52dvh, 96vw); }
  #home .home-live-natal-svg  { max-height: none; }

  /* BEZ strelica na mobitelu: kartica zauzme 84vw pa bi nužno ležale
     preko njezinih rubova (i preko teksta članka). Listanje ide
     isključivo klizanjem prsta lijevo/desno - swipe hvata stepH()
     u js/home-slides.js i radi neovisno o strelicama. */
  .hs-rail-arrow { display: none; }

  .hs-hint { bottom: 1rem; }
}

/* Nizak ekran (npr. mobitel u vodoravnom položaju) - deck bi se prelio.
   Prostor u visini je ovdje najuže grlo: slide ne scrolla, pa i kotač i
   kartice članaka moraju biti vezani uz `dvh`, ne uz širinu. */
@media (max-height: 560px) {
  .hs-slide { padding: 4.5rem 1rem 2.6rem; }
  .hs-hint { display: none; }
  #home .hero h1.hero-logo { width: min(62vw, 58vh); }
  #home .hero-desc { bottom: 1.2rem; }

  /* kotač: visinu diktira ekran, a `aspect-ratio` iz style.css drži kvadrat */
  #home .home-live-natal-wrap { width: min(58dvh, 92vw); }
  #home .home-live-natal-caption { margin-top: -3%; }

  /* Članci na blog slideu: ostaju datum, naslov i poveznica. Slika i
     sažetak se skrivaju - u ovoj visini kartica inače prelije slide,
     a cijeli tekst je ionako jedan dodir dalje. */
  #home .hs-rail-track .blog-image { display: none; }
  #home .hs-rail-track .blog-content { padding: 0.7rem 0.9rem; }
  #home .hs-rail-track .blog-content h3 { font-size: 1rem; }
  #home .hs-rail-track .blog-content p  { display: none; }
  .hs-rail-viewport { padding: 0.5rem 0; }
}

/* ---- 9. Pristupačnost ---- */

@media (prefers-reduced-motion: reduce) {
  .hs-slide,
  .hs-slide .hs-inner > *,
  #home .hs-slide .hero h1.hero-logo,
  #home .hs-slide .hero-desc,
  .hs-rail-track,
  .hs-rail-track > *,
  #sky-bg {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .hs-slide.hs-past,
  .hs-slide.hs-future {
    transform: none;
  }

  .hs-hint svg { animation: none; }
}