/* ─────────────────────────────────────────────────────────────────────────────
   ljubivet — coming-soon kampanja

   Dizajn nose fotografije, tipografija i prazan prostor.
   Pravila kojih se ceo fajl drži:
     • nema kartica i nema kartice u kartici — informacija dobija razmak,
       a granicu nosi vlas linije, ne kutija;
     • jedna senka na celoj stranici (primarno dugme), ništa drugo;
     • plava se pojavljuje na primarnoj akciji, na tački u naslovu i nigde više
       (izuzeci u prvom ekranu: iznos 10.000, ikonice koraka i bledi predmeti
       u pozadini);
     • crvena je isključivo srce — boja podatka, nikad boja dugmeta;
     • radijus nije isti svuda: dugme je kapsula, fotografija je oštra.
   ───────────────────────────────────────────────────────────────────────────── */

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

:root {
  /* Preuzeto iz originalne coming-soon stranice — isti brend, ista paleta. */
  --brand-50:  #EAF2FE;
  --brand-100: #D6E6FD;
  --brand-400: #468EF9;
  --brand-500: #0C66EE;
  --brand-600: #0A55C4;
  --gray-900:  #101828;
  --gray-800:  #1D2939;
  --gray-700:  #344054;
  --gray-500:  #667085;
  --gray-400:  #98A2B3;
  --gray-300:  #CBD2DC;
  --gray-200:  #E4E7EC;
  --gray-100:  #F2F4F7;
  --gray-50:   #F9FAFB;

  --heart:     #E11D48;
  --danger:    #D92D20;

  /* Topla podloga za fotografski deo — bela je hladna ispod pravih slika. */
  --paper:     #FCFBF9;

  --gutter: clamp(20px, 5vw, 64px);
  --section-gap: clamp(104px, 14vw, 184px);
  --max: 1520px;

  /* Žiža kadra. object-fit: cover bez ovoga seče na 50% 50% — po sredini — a
     kod ljubimaca je glava skoro uvek IZNAD sredine, pa je sredina pogrešno
     mesto. Pomak naviše drži glavu u kadru na većini fotografija.
     Heuristika, ne pravilo: kod ljubimca koji leži uhvati malo više poda.
     Pravo rešenje je da vlasnik sam pomeri kadar — tada se ova promenljiva
     prepisuje po ljubimcu. */
  --photo-focus: 50% 30%;

  --ease: cubic-bezier(.22, .8, .3, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
  color: var(--gray-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
::selection { background: var(--brand-100); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ─── Tipografija ─────────────────────────────────────────────────────────── */

.display {
  font-size: clamp(38px, 7.4vw, 82px);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.03;
}
/* Jedina plava mrlja u herou: tačka na kraju rečenice. */
.display .dot { color: var(--brand-500); }

.section-title {
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.06;
}

.muted { color: var(--gray-500); }
.tiny { font-size: 13px; color: var(--gray-400); line-height: 1.6; }

/* Broj je vizuelni potpis kampanje — tabularan, lagan, uvek isti oblik. */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--gray-400);
}

/* ─── Dugmad ──────────────────────────────────────────────────────────────── */

.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 0; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: filter .15s, border-color .18s, color .18s, background .18s, transform .12s var(--ease);
}
.btn:disabled { opacity: .55; cursor: default; }
.btn:active:not(:disabled) { transform: scale(.985); }

/* Jedina senka na stranici. Gradijent je brend dugme iz originala, ne dekoracija. */
.btn-primary {
  background: linear-gradient(136.91deg, var(--brand-400) -12.5%, var(--brand-500) 107.5%);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(12, 102, 238, .55);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); }

.btn-ghost {
  background: transparent;
  color: var(--gray-900);
  border: 1px solid var(--gray-200);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--gray-900); }


.btn-sm { min-height: 44px; padding: 0 20px; font-size: 14px; }

/* Tekstualna akcija — nosi je podvlaka, ne kutija. */
.link {
  background: none; border: 0; padding: 0 0 3px;
  font: inherit; color: var(--gray-900); cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
  transition: border-color .18s;
}
.link:hover { border-color: var(--gray-900); }
.link-quiet { color: var(--gray-400); border-bottom-color: transparent; font-size: 13px; }
.link-quiet:hover { color: var(--gray-700); border-bottom-color: var(--gray-200); }

.heart-icon { width: 17px; height: 17px; flex-shrink: 0; }

/* Otkucaj srca u trenutku glasa — jedina „nagrada" u celom toku. */
@keyframes beat {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.32); }
  62%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
.beat { animation: beat .42s var(--ease); }

/* ─── Polja ───────────────────────────────────────────────────────────────── */
/* Podvučena linija umesto kutije — polje je deo teksta, ne kartica. */

.field {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  border: 0; border-bottom: 1px solid var(--gray-200);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  color: var(--gray-900);
  padding: 13px 0;
  outline: 0;
  transition: border-color .18s;
}
.field::placeholder { color: var(--gray-400); }
.field:focus { border-bottom-color: var(--brand-500); }

.field-label {
  display: block;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 2px;
}

.err { color: var(--danger); font-size: 13.5px; margin-top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ─── §1 Hero ─────────────────────────────────────────────────────────────── */
/* Bela podloga, Onest, plava kao akcenat — vizuelni identitet originalne
   coming-soon stranice, bez countdowna, oblačića i pozadinske dekoracije. */

.hero {
  position: relative;
  /* Redosled je bitan: svh mora biti POSLEDNJI. Na telefonu je 100vh visina
     ekrana BEZ trake pregledača, pa bi prvi ekran bio viši od vidljivog dela
     i strelica „Upoznaj ekipu" bi završila iza trake. vh ostaje samo kao
     rezerva za stare pregledače koji ne znaju za svh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: calc(48px + env(safe-area-inset-top, 0px)) var(--gutter)
           calc(48px + env(safe-area-inset-bottom, 0px));
}
/* Pozadina prvog ekrana — sjaj preslikan sa ljubivet.rs coming-soon
   stranice, da kampanja deluje kao nastavak brenda. isolation drži pozadinu
   i predmete iza sadržaja hero-a, a overflow ih seče na prvi ekran. */
.hero { isolation: isolate; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Sjaj se pri dnu utapa u belo — bez oštre ivice na kraju ekrana. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.hero-bg::before {
  content: "";
  position: absolute; top: -22%; left: 50%; transform: translateX(-50%);
  width: 1100px; max-width: 150vw; height: 620px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(12, 102, 238, .10), transparent 70%);
}
/* ─── Rasuti predmeti ───
   Ikona je maska, boju daje pozadina. Svi su u istoj plavoj brenda, jako
   providni, pa izgledaju kao jedna šara na papiru, a ne kao šareni ukrasi.
   Predmeti nacrtani samo obrisom (klupko, mehurići, koska) imaju malo
   jaču providnost od punih — tanka linija na .13 bi nestala.
   Položaji su u procentima prvog ekrana, pa rasporedu ne smeta nijedna
   širina; sredina, gde su naslov, polje i koraci, ostaje prazna. */
.hero-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.deco { position: absolute; width: var(--s); aspect-ratio: 1; will-change: transform; }
.deco-m, .deco-i { display: block; width: 100%; height: 100%; }
.deco-i {
  background: var(--c);
  opacity: var(--o, .3);
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;
  transform: rotate(var(--r, 0deg));
  animation: drift 9s ease-in-out infinite;
}

.d-paw     { --mask: url("assets/paw.png");              --c: var(--brand-500); --o: .13; --s: clamp(90px, 8vw, 124px); --r: -18deg; left: 4%;  top: 17%; }
.d-carrot  { --mask: url("assets/pozadina/carrot.png");  --c: var(--brand-500); --o: .13; --s: clamp(64px, 5.8vw, 88px);  --r: 18deg;  left: 14%; top: 45%; }
.d-yarn    { --mask: url("assets/pozadina/yarn.png");    --c: var(--brand-500); --o: .2; --s: clamp(86px, 8vw, 124px); --r: -6deg;  left: 5%;  bottom: 13%; }
.d-leaf    { --mask: url("assets/pozadina/leaf.png");    --c: var(--brand-500); --o: .13; --s: clamp(52px, 4.6vw, 70px);  --r: 24deg;  left: 22%; bottom: 5%; }
.d-heart   { --mask: url("assets/pozadina/heart.png");   --c: var(--brand-500); --o: .13;  --s: clamp(64px, 6vw, 92px);   --r: 14deg;  right: 6%; top: 17%; }
.d-feather { --mask: url("assets/pozadina/feather.png"); --c: var(--brand-500); --o: .13; --s: clamp(64px, 5.6vw, 84px);  --r: -22deg; right: 15%; top: 44%; }
.d-bubbles { --mask: url("assets/pozadina/bubbles.png"); --c: var(--brand-500); --o: .2; --s: clamp(80px, 7.4vw, 112px); --r: 0deg;   right: 5%; bottom: 15%; }
.d-bone    { --mask: url("assets/pozadina/bone.png");    --c: var(--brand-500); --o: .2; --s: clamp(56px, 5vw, 76px);   --r: -28deg; right: 23%; bottom: 6%; }

/* Svaki lebdi svojim tempom — nijedna dva ne dišu zajedno. Važi dok GSAP
   ne preuzme (i kad se on ne učita). */
.d-carrot .deco-i  { animation-duration: 7s;   animation-delay: -2s; }
.d-yarn .deco-i    { animation-duration: 10s;  animation-delay: -5s; }
.d-leaf .deco-i    { animation-duration: 8s;   animation-delay: -1s; }
.d-heart .deco-i   { animation-duration: 7.5s; animation-delay: -4s; }
.d-feather .deco-i { animation-duration: 11s;  animation-delay: -6s; }
.d-bubbles .deco-i { animation-duration: 9.5s; animation-delay: -3s; }
.d-bone .deco-i    { animation-duration: 8.5s; animation-delay: -7s; }

@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 4deg)); }
}

/* Tablet: sadržaj je širok, pa šargarepa i pero sa računarskih mesta ulaze
   pod iznos — spuštaju se uz ivicu, pored reda ispod iznosa. */
@media (min-width: 701px) and (max-width: 1020px) {
  .d-carrot  { left: 3%;  top: 53%; }
  .d-feather { right: 3%; top: 56%; }
}

/* Telefon: pet manjih predmeta, dva levo i tri desno. Namerno nisu u
   parovima levo-desno na istoj visini — to bi na uskom ekranu ličilo na merdevine. Samo šapica
   viri preko ivice; jedan isečen predmet deluje namerno, četiri kao greška.
   Srce stoji u redu sa logom, kao protivteža brojaču levo. */
@media (max-width: 700px) {
  .d-leaf, .d-bone, .d-feather { display: none; }
  .d-paw     { --s: 58px; left: -14px; top: 17%; }
  .d-heart   { --s: 34px; right: 6%;   top: calc(clamp(18px, 4.4svh, 46px) + env(safe-area-inset-top, 0px)); }
  .d-carrot  { --s: 38px; right: 3%;   top: 47%; left: auto; --r: -24deg; }
  .d-yarn    { --s: 52px; left: 4%;    bottom: 6%; }
  .d-bubbles { --s: 48px; right: 5%;   bottom: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .deco-i { animation: none; }
}

/* Kad pokret preuzme GSAP (campaign.js → initHeroMotion), CSS lebdenje se
   gasi — dva izvora pokreta na istom elementu bi se tukla. */
.hero.is-animated .deco-i { animation: none; }

/* Stanje pre ulaska — vidi <script> u <head>-u index.html. */
.motion-pending .hero-title,
.motion-pending .prize-note,
.motion-pending .hero-start,
.motion-pending .hero-note,
.motion-pending .hero-steps li,
.motion-pending .deco-m,
.motion-pending .hero-logo { opacity: 0; }

/* Srca koja iskoče iz dugmeta „Napravi profil". Pozicija se postavi jednom,
   a pokret je samo transform i opacity — ništa u rasporedu se ne pomera. */
.burst {
  position: absolute; z-index: 2; pointer-events: none;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  color: var(--brand-400);
}
.burst svg { width: 100%; height: 100%; display: block; }

.hero-logo { height: 36px; width: auto; margin-bottom: clamp(44px, 8vw, 80px); user-select: none; }
.hero h1 { max-width: 27ch; }

/* Mera je UŽA od naslova (42ch naspram 16ch na 82px) — tako hero dobija
   piramidu umesto dva bloka teksta iste širine. text-wrap: balance deli
   redove ravnomerno, pa nema siročeta u poslednjem redu ni na jednoj širini.
   Bez zadatih prelomâ: oni pucaju čim se promeni veličina ekrana. */
/* Naslov kao na ljubivet.rs coming-soon: tamnosiv, a istaknuti deo u istom
   cijan → plava → ljubičasta gradijentu kao „pamti.". Manji od .display jer
   je rečenica duža — mora da stane u 2–3 reda i da polje ostane na ekranu. */
.hero-title {
  /* Širi i manji: na računaru dva reda umesto tri — mirnije, ne viče. */
  max-width: 27ch;
  font-size: clamp(30px, 4.4vw, 56px);
  /* Isti rez kao „Upoznaj ekipu." (.section-title) — jedan glas na stranici. */
  font-weight: 600; letter-spacing: -0.032em; line-height: 1.06;
  /* Mastilo, ne plavkasto-siva — ista boja kao „Upoznaj ekipu.". */
  color: var(--gray-900);
  text-wrap: balance;
}
.hero-title .grad {
  background: linear-gradient(100deg, #22D3EE 0%, #2563EB 48%, #7A5AF8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2563EB; /* ako gradijent na tekstu nije podržan */
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Nagrada u heroju ───
   Iznos je završetak naslova, ali u svom redu i mnogo krupniji — najveći
   znak na ekranu. Broj je u gradijentu brenda (cijan → plava → ljubičasta,
   kao „pamti." na ljubivet.rs), jedini gradijent na stranici; „dinara" je
   upola manje i u mastilu, da se broj čita prvi. */
.prize {
  position: relative;
  display: block; width: fit-content; margin: .12em auto 0;
  font-size: 2.3em; font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prize-num {
  background: linear-gradient(100deg, #22D3EE 0%, #2563EB 48%, #7A5AF8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2563EB; /* ako gradijent na tekstu nije podržan */
  padding-bottom: .04em; /* da clip ne odseče donji luk nula */
}
.prize-cur { font-size: .42em; font-weight: 600; letter-spacing: -0.02em; }
.prize-note {
  margin-top: 14px;
  max-width: 46ch;
  font-size: clamp(14px, 1.3vw, 17px); line-height: 1.5;
  color: var(--gray-500);
  text-wrap: balance;
}

/* ─── Koraci ───
   Četiri koraka u redu, između njih tačkasta strelica (crta se u razmaku,
   pseudo-elementima, da lista ostane čista za čitač ekrana). Ikonica je puna
   i šarena, u krugu iste boje u svetlijoj nijansi.
   Bez pozadine iza koraka: sive kapsule istog oblika kao dugme „Napravi
   profil" čitale su se kao još četiri dugmeta — i vukle bi klik sa pravog. */
.hero-steps {
  --gap: 68px;
  margin-top: clamp(40px, 6vw, 72px);
  max-width: 100%;
}
.steps-list {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, auto); justify-content: center;
  column-gap: var(--gap);
}
.step {
  position: relative;
  display: flex; align-items: center; gap: 10px;
}
/* Tačkasta linija + vrh strelice, u razmaku do sledeće pločice. */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; left: calc(100% + 12px);
  width: calc(var(--gap) - 30px); height: 2px; margin-top: -1px;
  background: radial-gradient(circle, var(--gray-300) 1px, transparent 1.4px) 0 50% / 6px 2px repeat-x;
}
.step:not(:last-child)::before {
  content: ""; position: absolute; top: 50%; left: calc(100% + var(--gap) - 20px);
  width: 6px; height: 6px; margin-top: -3px;
  border-top: 1.6px solid var(--gray-300); border-right: 1.6px solid var(--gray-300);
  transform: rotate(45deg);
}

.step-ic {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ic-bg); color: var(--ic-fg);
}
.step-ic svg { width: 18px; height: 18px; }
.ic-paw {
  /* paw.png ima dosta praznog prostora oko šape — zato veći okvir. */
  width: 26px; height: 26px; background: currentColor;
  -webkit-mask: url("assets/paw.png") center / contain no-repeat;
          mask: url("assets/paw.png") center / contain no-repeat;
}
.s-paw    { --ic-bg: var(--brand-100); --ic-fg: var(--brand-500); }
.s-share  { --ic-bg: #EDE9FE; --ic-fg: #7C3AED; }
.s-heart  { --ic-bg: #FCE7F3; --ic-fg: #EC4899; }
.s-trophy { --ic-bg: #FEF3C7; --ic-fg: #F59E0B; }

.step-t { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--gray-900); white-space: nowrap; }

/* Uži ekran (telefon, tablet): pločica otpada — ikonica u krugu, naziv ispod,
   a tačkasta linija ide od kruga do kruga. */
@media (max-width: 1020px) {
  .hero-steps { --gap: 6px; width: min(560px, 100%); }
  .steps-list { grid-template-columns: repeat(4, 1fr); }
  .step { flex-direction: column; gap: 8px; text-align: center; }
  .step-ic { width: 44px; height: 44px; }
  .step-ic svg { width: 20px; height: 20px; }
  .ic-paw { width: 30px; height: 30px; }
  .step:not(:last-child)::after {
    top: 22px; left: calc(50% + 30px); width: calc(100% + var(--gap) - 60px);
  }
  .step:not(:last-child)::before { display: none; }
  .step-t { font-size: 12.5px; white-space: normal; text-wrap: balance; }
}

/* ─── Prvi ekran staje u ekran svakog uređaja ───
   Sve što ima visinu (logo, naslov, kartica, razmaci, dugme, strelica) meri se
   i prema VISINI ekrana (svh), ne samo širini. Na niskom laptopu ili malom
   telefonu sve se srazmerno smanji, pa strelica za skrolovanje uvek ostaje
   vidljiva na dnu. Gornji pojas je rezervisan za brojač „već u ekipi",
   donji za strelicu — sadržaj ne može da uđe ni u jedan. */
.hero {
  padding-top: calc(clamp(76px, 13svh, 128px) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(76px, 13svh, 136px) + env(safe-area-inset-bottom, 0px));
}
/* Logo stoji tik iznad naslova, ne zakačen za vrh ekrana: kad je gore sam,
   između njega i naslova ostaje prazan pojas i deluju nepovezano. Ovako su
   marka i poruka jedna celina, a brojač u uglu ostaje folio. */
.hero .hero-logo {
  height: clamp(24px, 4svh, 34px);
  margin: 0 0 clamp(24px, 5.6svh, 60px);
}
/* Naslov je u dva reda. Pun 54px od 700px visine naviše; ispod toga se malo
   smanji (7.7svh), da ne gurne strelicu „Upoznaj ekipu" ispod dna. Broj
   (2.3em) prati naslov.
   Prvi red („Ljubimac sa najviše glasova") je vezan &nbsp;-ovima i na 30px
   je širok ~368px — na telefonima užim od ~410px izlazio je van ekrana, a na
   320px se nisu videli ni prvo slovo ni „dinara". Zato veličina nikad ne
   prelazi širinu ekrana bez bočnih margina podeljenu sa 12.6 (širina tog
   reda u jedinicama veličine slova, sa malo rezerve). Na računaru je ta
   granica daleko iznad 54px, pa tamo ništa ne menja. */
.hero .hero-title {
  font-size: min(clamp(30px, min(5vw, 7.7svh), 54px), calc((100vw - 2 * var(--gutter)) / 12.6));
}
.hero .prize-note { margin-top: clamp(8px, 1.8svh, 18px); font-size: clamp(13.5px, min(4vw, 2.1svh), 17px); }
.hero .hero-steps { margin-top: clamp(22px, 5svh, 64px); }
.hero .hero-start { margin-top: clamp(22px, 5svh, 56px); }
.hero .hero-start .btn { min-height: clamp(44px, 6.4svh, 52px); }
.hero .hero-name { padding: clamp(6px, 1.2svh, 10px) 0; }
.hero .hero-note { margin-top: clamp(8px, 1.6svh, 16px); }
.hero .hero-count { top: calc(clamp(16px, 4svh, 44px) + env(safe-area-inset-top, 0px)); }
.hero .hero-count-n { font-size: clamp(22px, min(3.2vw, 4.4svh), 44px); }
.hero .scroll-cue { bottom: calc(clamp(6px, 2svh, 24px) + env(safe-area-inset-bottom, 0px)); }
.hero .scroll-cue-label { font-size: clamp(13.5px, 1.9svh, 15.5px); }

/* Vrlo nizak ekran (mali telefon sa trakama pregledača): koraci su jedino
   što se sme izostaviti — naslov, iznos i polje već kažu šta se radi. */
@media (max-height: 560px) {
  .hero .hero-steps { display: none; }
}
/* Po stvarnom merenju (fitHero u campaign.js), za telefone kojima sigurnosne
   margine, trake pregledača ili veća sistemska slova pojedu mesto:
   hero-compact prvo zbije razmake, a hero-tight — tek ako ni to nije dovoljno
   — skloni korake. */
.hero.hero-compact {
  padding-top: calc(52px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px));
}
.hero.hero-compact .hero-logo { margin-bottom: 14px; }
.hero.hero-compact .prize-note { margin-top: 4px; }
.hero.hero-compact .hero-start { margin-top: 16px; gap: 10px; }
.hero.hero-compact .hero-note { margin-top: 6px; }
.hero.hero-compact .hero-steps { margin-top: 16px; }
.hero.hero-compact .scroll-cue { bottom: calc(0px + env(safe-area-inset-bottom, 0px)); padding: 6px 20px; }
.hero.hero-tight .hero-steps { display: none; }
/* Računar i tablet: ekran je širok, pa sitna slova i malo dugme deluju izgubljeno
   ispod krupnog iznosa. Sve raste sa visinom ekrana (svh), da i niski
   laptop (680 px) i dalje drži ceo prvi ekran. */
@media (min-width: 701px) {
  /* Naslov u dva reda traži mesto: blok se podiže (manji pojas iznad logoa i
     razmak logo → naslov), a donji pojas ostaje dovoljan za strelicu. */
  .hero {
    padding-top: calc(clamp(40px, 6svh, 80px) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(clamp(72px, 11svh, 120px) + env(safe-area-inset-bottom, 0px));
  }
  .hero .hero-logo { margin-bottom: clamp(16px, 3.4svh, 40px); }
  .hero .prize-note { margin-top: clamp(10px, 2svh, 20px); font-size: clamp(16px, 2.3svh, 21px); }
  .hero .hero-start { gap: 18px; }
  .hero .hero-name { width: clamp(260px, 24vw, 340px); font-size: clamp(16px, 2.2svh, 19px); }
  .hero .hero-start .btn {
    min-height: clamp(50px, 7svh, 62px); padding: 0 clamp(30px, 3vw, 42px);
    font-size: clamp(15px, 2.1svh, 17.5px);
  }
  .hero .hero-note { font-size: clamp(13.5px, 1.8svh, 15.5px); }
}
@media (min-width: 1021px) {
  .step { gap: 12px; }
  .step-ic { width: 42px; height: 42px; }
  .step-ic svg { width: 21px; height: 21px; }
  .ic-paw { width: 30px; height: 30px; }
  .step-t { font-size: clamp(14px, 1.9svh, 16px); }
}

/* Telefon: sve je već složeno u jednu kolonu, pa se razmaci i logo smanjuju,
   a gornji i donji pojas (brojač, strelica za skrol) sužavaju — tako i telefon
   visine 640 px drži ceo prvi ekran, sa koracima, bez skrolovanja. */
@media (max-width: 700px) {
  .hero {
    padding-top: calc(clamp(60px, 9svh, 88px) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(clamp(52px, 8.5svh, 88px) + env(safe-area-inset-bottom, 0px));
  }
  /* Razmaci između grupa rastu brže od visine (calc sa oduzimanjem): na niskom
     ekranu ostaju na minimumu da sve stane, a na višem telefonu višak prostora
     ide između grupa umesto u prazan pojas gore i dole. */
  .hero .hero-logo { height: clamp(20px, 3.2svh, 26px); margin-bottom: clamp(18px, 8svh - 28px, 48px); }
  .hero .prize-note { margin-top: clamp(6px, 3svh - 10px, 18px); }
  .hero .hero-start { margin-top: clamp(18px, 10svh - 44px, 56px); }
  .hero .hero-note { margin-top: clamp(8px, 2.4svh - 6px, 16px); }
  .hero .hero-steps { margin-top: clamp(18px, 9svh - 38px, 52px); }
}
/* Telefon položen: prvi ekran ne može da stane — sadržaj ide normalno, a
   strelica se sklanja da ne padne preko njega. */
@media (max-height: 440px) {
  .hero .scroll-cue { display: none; }
}

/* Polje + dugme zauzimaju tačno onoliko koliko su ranije zauzimala dva dugmeta,
   pa hero ne postaje gušći. Polje je ista vlas linija kao pretraga u galeriji —
   nijedan nov vizuelni rečnik. */
.hero-start {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: center;
  margin-top: clamp(36px, 5vw, 56px);
}
.hero-name {
  width: clamp(190px, 24vw, 260px);
  font-size: 16px; padding: 10px 0;
  text-align: center;
  border-bottom-color: var(--gray-300);
}
.hero-note {
  margin-top: 16px;
  font-size: 13.5px; color: var(--gray-500);
}

/* Kraj kampanje: prijava i koraci „kako se učestvuje" odlaze, a na mesto
   prijave dolazi jedna mirna rečenica. Srca ostaju vidljiva (i crvena gde je
   glas dat), ali se na njih više ne klikne. */
.hero-ended {
  margin-top: clamp(36px, 5vw, 56px);
  max-width: 34ch; margin-left: auto; margin-right: auto;
  font-size: clamp(16px, 2.2vw, 18px); line-height: 1.6; color: var(--gray-500);
}
.hero-ended strong { display: block; color: var(--gray-900); font-weight: 600; }
.campaign-ended .hero-start,
.campaign-ended .hero-note,
.campaign-ended .hero-steps { display: none; }
.campaign-ended [data-vote] { pointer-events: none; cursor: default; }

/* Pre početka: koraci „kako se učestvuje" ostaju — objašnjavaju šta sledi. */
.campaign-soon .hero-start,
.campaign-soon .hero-note { display: none; }
.campaign-soon [data-vote] { pointer-events: none; cursor: default; }

/* Galerija pre početka: ni pretraga ni filteri nemaju šta da traže, pa umesto
   prazne mreže stoji jedna rečenica o tome šta sledi. Van tog stanja je nema. */
.gallery-soon { display: none; }
.campaign-soon .gallery-soon {
  display: block; padding: 56px 0;
  font-size: 16px; line-height: 1.6; color: var(--gray-500);
}
/* Isto srce kao na karticama i u koracima — glas je srce, pa je i ovo srce. */
.gallery-soon-heart { width: 1em; height: 1em; vertical-align: -0.14em; color: var(--heart); }
.gallery-soon strong { display: block; color: var(--gray-900); font-weight: 600; }
.campaign-soon .gallery-tools,
.campaign-soon #grid,
.campaign-soon #gallery-empty,
.campaign-soon #gallery-foot,
.campaign-soon .hero-count { display: none !important; }

/* Gore LEVO, ne desno: oko kreće odatle, pre centriranog logotipa. Gore desno
   je po konvenciji mesto navigacije i naloga, pa se broj tamo čita kao kontrola.
   Ovako je folio — broj izdanja — što je registar u kom stranica već jeste. */
.hero-count {
  position: absolute;
  top: calc(44px + env(safe-area-inset-top, 0px));
  left: var(--gutter);
  text-align: left;
}
.hero-count-n {
  display: block;
  font-size: clamp(28px, 3.2vw, 44px); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.hero-count-l {
  display: block; margin-top: 7px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray-400);
}

/* Znak da se skroluje: reči + strelica, bez poskakivanja.
   Tri verzije apstraktnog znaka (vlas linija, linija sa delom koji putuje,
   linija sa strelicom) ljudi nisu primećivali — ko ne zna sajt, nije ni
   skontao da ima nešto dole. Reči se primete i kažu šta je dole. Sivo i
   sitno kao „Besplatno je…", da jedini akcenat ostane „Napravi profil". */
.scroll-cue {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; padding: 12px 20px;
  cursor: pointer; color: var(--gray-500);
  font: inherit; white-space: nowrap;
  transition: color .18s;
}
.scroll-cue-label { font-size: 14.5px; font-weight: 500; line-height: 1.3; }

/* Strelica miruje ispod reči i povremeno klizne nadole pa se vrati.
   Pokret U PROSTORU se primeti pre nego promena prozirnosti. */
.scroll-cue-tip {
  width: 22px; height: 22px;
  animation: cue 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.scroll-cue:hover { color: var(--gray-900); }

/* Strelica MIRUJE na kraju staze i tek povremeno klizne nadole pa se vrati.
   Ranija verzija je putovala celom stazom i pola ciklusa je nije bilo — ko
   pogleda u pogrešnom trenutku, ne vidi ništa. Sada je prisutna skoro ceo
   ciklus, a povratak gore se dešava dok je nevidljiva, pa nema poskakivanja. */
@keyframes cue {
  0%, 46%   { transform: translateY(0);    opacity: 1; }
  70%       { transform: translateY(10px); opacity: 0; }
  71%       { transform: translateY(-10px); opacity: 0; }
  100%      { transform: translateY(0);    opacity: 1; }
}

/* ─── §3 Galerija ─────────────────────────────────────────────────────────── */
/* Jedan kartični sistem za celu stranicu. Svaka kartica je isti kvadrat, iste
   veličine, sa istim potpisom — bez okvira, bez senki, bez dugmeta na slici.
   Jedini izuzetak je vodeći ljubimac na vrhu.

   --cols drži i izdvojenu traku i mrežu, pa je kartica pored vodećeg doslovno
   ista širina kao kartica u mreži ispod. Lestvica kolona menja SAMO broj
   kolona; kartica ostaje ~210px na svakoj širini. */

.gallery {
  /* Prelaz iz plavičastog prvog ekrana u belo je sam razdelnik — bez linije
     i bez velikog praznog pojasa; naslov izviruje čim se malo skroluje. */
  padding-top: clamp(56px, 7.5vw, 112px);
  --cols: 6;
  --card-gap-x: clamp(14px, 1.6vw, 24px);
  --card-gap-y: clamp(28px, 3vw, 44px);
}

.gallery-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 26px;
  padding-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.gallery-tools { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.search { width: clamp(150px, 20vw, 220px); font-size: 15px; padding: 8px 0; border-bottom-color: var(--gray-300); }

/* Osveži je kontrola liste, kao pretraga i filteri — zato stoji s njima, na
   kraju reda, odvojen tankom crtom. Istog je glasa kao filter: ništa novo
   da privuče pogled, tu je za onoga ko ga traži. */
.filter-row { display: flex; align-items: center; gap: 18px; }
.refresh {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: none; border: 0; padding: 3px 0 3px 18px; cursor: pointer;
  border-left: 1px solid var(--gray-200);
  font: inherit; font-size: 15px; color: var(--gray-400);
  transition: color .18s;
}
.refresh:hover { color: var(--gray-700); }
.refresh:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 4px; }
.refresh svg { width: 13px; height: 13px; transition: transform .4s ease; }
.refresh:hover svg { transform: rotate(90deg); }
.refresh[data-busy="1"] { color: var(--gray-900); cursor: default; }
.refresh[data-busy="1"] svg { animation: refresh-spin .8s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .refresh svg, .refresh[data-busy="1"] svg { transition: none; animation: none; }
}

/* Prelama se: broj dugmadi raste kako se prijavljuju nove vrste. */
.filters { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.filter {
  background: none; border: 0; padding: 3px 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--gray-400);
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.filter:hover { color: var(--gray-700); }
.filter[aria-pressed="true"] { color: var(--gray-900); border-bottom-color: var(--gray-900); }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--card-gap-x);
  row-gap: var(--card-gap-y);
}

.tile { display: block; }
.tile-photo {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; overflow: hidden;
}
/* Jedan odnos za sve. Materijal stiže sa raznih telefona i u raznim kadrovima;
   dosledan kvadrat je ono što ga dovodi u red. */
.tile-photo img {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: var(--photo-focus);
  background: var(--gray-100);
  transition: transform .8s var(--ease);
}
.tile-photo:hover img { transform: scale(1.025); }

.tile-cap { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.tile-name { font-size: 14.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-num { font-size: 12.5px; }

/* ─── Izdvojeni vodeći ────────────────────────────────────────────────────── */
/* Vodeći zauzima 4 kolone × 3 reda, uz 6 standardnih kartica sa strane —
   dvostruko veću površinu od njih šest. Nejednakost je ono što kompoziciju
   čini uredničkom; simetrična podela 50/50 bila bi mirnija i slabija.

   Visinu vodećeg određuje blok od šest kartica pored njega, a fotografija se
   rasteže do nje. To ovde ne smeta iako bi inače bilo rizično: kartice su sada
   SVE iste, pa je ta visina uvek tačno tri reda — nema nepredvidivog kadra. */

/* Dva polja u širinu, dva u visinu — četiri standardna mesta. Pošto su sve
   kartice isti kvadrat, ta dva reda su uvek iste visine, pa vodeći nema
   nijedno pravilo koje se menja po širini ekrana. Isti raspon svuda, i na
   telefonu, gde 2×2 znači punu širinu. */
/* ─── Featured kartica ────────────────────────────────────────────────────── */
/* Hero verzija iste kartice, ne druga komponenta: fotografija drži celu ćeliju,
   a donji deo joj preklapa ploča sa blagom krivom. U ploči je #1 kao jedini
   poseban element; pored njega stoji isti potpis kao svuda, samo krupniji.

   container-type daje cqw, pa se i #1 i visina krive mere prema ŠIRINI SAME
   KARTICE — odnos ostaje isti na svakoj širini ekrana. */
.lead {
  grid-column: span 2; grid-row: span 2;
  position: relative; min-width: 0;
  container-type: inline-size;
}

.lead-photo {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; padding: 0; border: 0;
  background: var(--gray-100); cursor: pointer; overflow: hidden;
}
.lead-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--photo-focus);
  transition: transform .8s var(--ease);
}
.lead-photo:hover img { transform: scale(1.018); }

/* Ploča. Bez gradijenta, bez senke, bez providnosti — jedna ravna boja iz
   palete, ista i u krivoj i u bloku ispod nje. */
.lead-plate {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  pointer-events: none;
}
.lead-plate > * { pointer-events: auto; }

/* Nesimetrična kriva: brz uspon levo, duga plitka padina nadesno. Zrcalna
   kriva je ono po čemu se prepoznaje gotov „wave" — zato je ovde nema.
   preserveAspectRatio="none" je rasteže po širini, a visina joj je vezana za
   širinu kartice, pa nagib ostaje blag i na uskim ekranima. */
.lead-wave {
  display: block; width: 100%;
  height: clamp(16px, 6.5cqw, 34px);
  fill: var(--brand-50);
  margin-bottom: -1px;   /* bez ovoga se između krive i bloka vidi vlas linija */
}

/* Sve u redu stoji na istoj donjoj liniji slova: „1.", ime, #broj i broj
   srca. Centriranje po visini ih je rasipalo — rukopis, debela „1." i
   sitan broj imaju različite visine, pa su im sredine na različitim mestima. */
.lead-plate-body {
  background: var(--brand-50);
  display: flex; align-items: baseline;
  gap: clamp(14px, 4cqw, 26px);
  padding: clamp(10px, 2.6cqw, 18px) clamp(16px, 4.5cqw, 28px) clamp(14px, 3.4cqw, 22px);
}

/* „1." — jedini signature detalj kartice.
   Tačka je plava jer je plava tačka već ljubivetov potez: isti gest stoji u
   hero naslovu („ljubivet uskoro stiže."). Time oznaka ranga nije pozajmljena
   iz stranih leaderboard-a nego je deo brenda.
   Usput: sama jedinica je najuži glif i u širokoj ploči lebdi — tačka joj daje
   oslonac. */
.lead-rank {
  display: flex; align-items: baseline;
  /* Sajtov font, najdeblji — uz rukopis imena kartica ima dva fonta, isto
     kao story slika (Onest + Caveat). Kontrast pravi rukopis, ne treći font. */
  font-family: 'Onest', sans-serif;
  font-weight: 800; color: var(--gray-900);
  font-size: clamp(54px, 16.5cqw, 82px);
  line-height: .8; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.lead-one { line-height: .8; }
.lead-dot { color: var(--brand-500); margin-left: .02em; }


.lead-meta { min-width: 0; flex: 1; }
/* Ime vodećeg je rukopis — isti potpis kao na story slici. Samo vodeći ga
   dobija, pa se po tome izdvaja; ostale kartice ostaju mirne. Rukopis je
   optički sitniji od običnih slova iste veličine, zato je veći. */
.lead-name {
  font-family: 'Caveat', 'Onest', cursive;
  font-size: clamp(48px, 17.5cqw, 86px);   /* slova visoka kao „1." */ font-weight: 700;
  /* Rukopis ima duge „repove" (g, j, p) — uz tesan red i overflow: hidden
     bili su odsečeni. Red od 1.2 i malo prostora dole ih čuvaju. */
  line-height: 1.2; padding-bottom: .06em;
  color: var(--gray-900);
  /* Dugačko ime prelazi u novi red umesto da se seče — ime je poenta
     kartice. Bez line-clamp-a: on kvari poravnanje reda po liniji slova.
     break-word, ne anywhere: reč se lomi tek ako ni sama ne staje u red. */
  overflow-wrap: break-word;
}
.lead-name--mid { font-size: clamp(30px, 11cqw, 64px); }
.lead-name--long { font-size: clamp(26px, 8.5cqw, 50px); }
/* Broj ostaje sajtov font, sitan i siv — treći font na kartici ne sme da
   pravi buku. */
.lead-num {
  font-family: 'Onest', sans-serif; font-weight: 500; color: var(--gray-400);
  font-size: clamp(12px, 3.1cqw, 14px); letter-spacing: 0; margin-left: 6px; white-space: nowrap;
}

/* Prazno srce znači „glas još nije dat" i puni se kad jeste — najjasniji
   mogući znak da se na njega klikne, bez dugmeta u obliku pilule. */
/* Običan red teksta (ne flex): dugme tada ima liniju slova samog broja, pa
   se broj srca poravnava sa „1." i imenom. */
.lead-heart {
  display: inline-block; white-space: nowrap; flex: none;
  background: none; border: 0; padding: 6px 0 6px 8px;
  font: inherit; font-size: clamp(15px, 4.2cqw, 18px); color: var(--gray-500);
  cursor: pointer;
}
.lead-heart .heart-icon {
  width: 22px; height: 22px; margin-right: 8px;
  vertical-align: -0.22em;   /* optički centar uz broj */
  color: var(--gray-400); transition: color .18s;
}
/* Hover samo gde postoji miš. Telefon „pamti" hover posle dodira, pa bi
   srce ostalo crveno i posle povlačenja glasa — do dodira na nešto drugo. */
@media (hover: hover) {
  .lead-heart:hover .heart-icon { color: var(--heart); }
}
.lead-heart-count { font-variant-numeric: tabular-nums; }
.lead-heart[data-voted="1"] .heart-icon { color: var(--heart); }
.lead-heart[data-voted="1"] { color: var(--gray-700); }

/* Srce u galeriji: glasanje bez otvaranja profila. Miruje sivo,
   na hover potamni, posle glasa ostaje crveno. */
.heart-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px 0 2px 10px;
  cursor: pointer; font: inherit;
  font-size: 13px; color: var(--gray-400);
  font-variant-numeric: tabular-nums;
  transition: color .18s;
}
.heart-btn .heart-icon { width: 14px; height: 14px; }
@media (hover: hover) {
  .heart-btn:hover { color: var(--gray-700); }
  .heart-btn:hover .heart-icon { color: var(--heart); }
}
.heart-btn[data-voted="1"] { color: var(--gray-700); }
.heart-btn[data-voted="1"] .heart-icon { color: var(--heart); }

.empty { padding: 56px 0; color: var(--gray-400); font-size: 15px; }
/* Nastavak liste, razdvojen od mreže istom vlas linijom kao zaglavlje galerije.
   Tekstualna akcija, ne dugme — listanje je tiši potez od bilo kog poziva. */
.gallery-foot {
  display: flex; align-items: center;
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--gray-200);
}
.gallery-foot .link { font-size: 15px; }

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  margin-top: var(--section-gap);
  /* padding-block, ne skraceni padding: skraceni ponistava padding-inline koji
     dolazi iz .wrap, pa bi footer ostao bez bocnih margina — na telefonu bi
     tekst dodirivao ivicu ekrana, a na desktopu stajao 64px levo od svega
     ostalog na stranici. */
  padding-block: 30px calc(32px + env(safe-area-inset-bottom, 0px));
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  align-items: center;
  font-size: 14px; color: var(--gray-500);
}
/* Linija ide preko stupca sadrzaja, ne preko cele mere. border-top bi je
   nacrtao po border-boxu — dakle i preko bocnog paddinga — pa bi bila sira od
   linija u zaglavlju i dnu galerije i footer bi delovao pomeren. */
.footer::before {
  content: ""; position: absolute; top: 0;
  left: var(--gutter); right: var(--gutter);
  height: 1px; background: var(--gray-200);
}
/* Linkovi tamniji od ©: oni su ono na šta se klikće. gray-400 je bio ispod
   praga čitljivosti (2,5:1 na beloj) — podnožje je delovalo kao da ga nema. */
.footer a { color: var(--gray-700); text-decoration: none; border-bottom: 1px solid transparent; }
.footer a:hover { color: var(--gray-900); border-bottom-color: var(--gray-300); }
.footer .draft-mark { color: var(--gray-400); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }

/* Ikonice u desnom uglu, iste sive kao tekst — deo podnožja, ne reklama.
   Polje za dodir je 40px iako je znak 18px. */
.footer-social { display: flex; gap: 4px; margin-left: auto; margin-right: -11px; }
.footer .footer-social a {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  transition: color .2s, background-color .2s;
}
.footer .footer-social a:hover { color: var(--gray-900); background: var(--gray-100); }
.footer-social svg { width: 20px; height: 20px; }

/* Telefon: dokumenti u svom redu, a © i mreže zajedno ispod njih —
   levo-desno, kao jedna linija, umesto da se linkovi lome gde stignu. */
@media (max-width: 700px) {
  .footer { display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; }
  .footer-links { grid-column: 1 / -1; order: 1; gap: 8px 22px; }
  .footer .voter-line { grid-column: 1 / -1; order: 2; }
  .footer-copy { order: 3; }
  .footer-social { order: 4; margin-left: 0; }
}

/* ─── Sloj preko ekrana ───────────────────────────────────────────────────── */
/* Namerno NIJE modal sa karticom na zatamnjenoj podlozi — to je onaj jezik
   kutija koji stranica izbegava. Sloj preuzima ceo ekran. */

.layer {
  position: fixed; inset: 0; z-index: 60;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.layer-close {
  position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px;
  z-index: 3;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--gray-200); border-radius: 999px;
  cursor: pointer; color: var(--gray-700);
  transition: border-color .18s, color .18s;
}
.layer-close:hover { border-color: var(--gray-900); color: var(--gray-900); }
.layer-close svg { width: 18px; height: 18px; }

@keyframes layerIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.layer[data-anim="1"] { animation: layerIn .3s var(--ease); }

/* ─── Profil ljubimca ─────────────────────────────────────────────────────── */
/* Nije društvena kartica: fotografija nosi pola ekrana do ivice, tekst diše. */

.profile { display: grid; grid-template-columns: 1fr 1fr; min-height: 100%; }
/* Na računaru fotografija je visoka koliko ekran i stoji dok se desna strana
   pomera. Ranije je pratila visinu teksta: otvoren „Prijavi problem" je
   izdužio stranu, a fotografija se uvećavala (object-fit: cover je sekao više). */
.profile-photo {
  width: 100%; height: 100vh; height: 100dvh; min-height: 320px;
  position: sticky; top: 0; align-self: start;
  object-fit: cover; object-position: var(--photo-focus);
  background: var(--gray-100);
}
.profile-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 104px) clamp(24px, 5vw, 96px);
  background: var(--paper);
}
.profile-num { font-size: clamp(20px, 2.2vw, 26px); }
.profile-name { font-size: clamp(40px, 5.4vw, 74px); font-weight: 600; letter-spacing: -0.038em; line-height: 1.02; margin-top: 12px; }
.profile-meta { margin-top: 16px; color: var(--gray-500); font-size: 16px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-top: clamp(26px, 4vw, 38px); }

/* „Podeli" na profilu — tiho dugme sa ikonicom, uz veliko srce. */
.share-btn { gap: 8px; font-weight: 500; padding: 0 18px 0 16px; }
.share-btn svg { width: 17px; height: 17px; color: var(--gray-700); }
@media (hover: none) {
  /* Telefon pamti hover posle dodira — ivica bi ostala tamna. */
  .share-btn.btn-ghost:hover:not(:disabled) { border-color: var(--gray-200); }
  .share-btn.btn-ghost:active { border-color: var(--gray-900); }
}

/* Veliko srce na profilu — jedino dugme za glas. Pre glasa prazno (obris),
   posle puno crveno; otkucaj (.beat) je ista nagrada kao u galeriji. */
.heart-btn.heart-btn-lg {
  margin-left: 0; padding: 6px 4px 6px 0; gap: 12px;
  font-size: 24px; font-weight: 500; color: var(--gray-900);
}
.heart-btn-lg .heart-icon {
  width: 38px; height: 38px;
  fill: none; stroke: var(--gray-400); stroke-width: 1.7;
  transition: fill .18s, stroke .18s;
}
.heart-btn-lg[data-voted="1"] { color: var(--gray-900); }
.heart-btn-lg[data-voted="1"] .heart-icon { fill: var(--heart); stroke: var(--heart); }
@media (hover: hover) {
  .heart-btn-lg:hover .heart-icon { stroke: var(--heart); }
}
.heart-btn-lg:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 4px; border-radius: 8px; }
.profile-foot {
  margin-top: clamp(40px, 6vw, 68px);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
}

.report-box {
  margin-top: 24px; max-width: 460px;
  padding: 24px; border: 1px solid var(--gray-200); border-radius: 16px; background: #fff;
}
.report-box textarea { resize: vertical; min-height: 76px; }
.report-title { font-size: 17px; font-weight: 600; color: var(--gray-900); letter-spacing: -0.01em; margin: 0 0 14px; }

/* Razlozi kao spisak za klik — na telefonu lakše od padajućeg menija. */
.report-reasons { display: grid; gap: 8px; margin: 0 0 22px; }
.report-reason {
  display: flex; gap: 12px; align-items: center;
  min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--gray-200); border-radius: 12px;
  font-size: 14.5px; line-height: 1.4; color: var(--gray-700);
  cursor: pointer; transition: border-color .15s, background-color .15s;
}
.report-reason:hover { border-color: var(--gray-300); }
.report-reason input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--brand-500); }
.report-reason:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); color: var(--gray-900); }
.report-reason:has(input:focus-visible) { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.report-email { margin-top: 20px; }
.report-who { font-size: 13px; line-height: 1.6; color: var(--gray-400); margin: 12px 0 0; }
.report-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 20px; }
.report-done { margin-top: 20px; font-size: 14.5px; line-height: 1.6; color: var(--gray-700); }

@media (max-width: 600px) {
  .report-box { padding: 20px 16px; }
}

/* ─── Prijava ljubimca ────────────────────────────────────────────────────── */

.join {
  max-width: 600px;
  margin-inline: auto;
  padding: clamp(76px, 13vh, 148px) var(--gutter) clamp(56px, 10vh, 96px);
}
.join-step { display: none; }
.join-step[data-active="1"] { display: block; animation: layerIn .24s var(--ease); }
.join-title { font-size: clamp(28px, 4vw, 42px); font-weight: 600; letter-spacing: -0.032em; line-height: 1.08; }
.join-sub { margin-top: 14px; color: var(--gray-500); font-size: 15.5px; line-height: 1.65; }
.join-fields { margin-top: clamp(32px, 5vw, 48px); display: grid; gap: 28px; }
.join-actions { margin-top: clamp(34px, 5vw, 48px); display: flex; gap: 18px; align-items: center; }

/* ─── Potvrda glasača ─────────────────────────────────────────────────────── */
/* Isti jezik kao prijava ljubimca: sloj preko celog ekrana, koraci jedan po jedan. */

.vote-step { display: none; }
.vote-step[data-active="1"] { display: block; animation: layerIn .24s var(--ease); }
.vote-code {
  font-size: 30px; font-weight: 600; letter-spacing: .32em;
  font-variant-numeric: tabular-nums;
}
.vote-fine { margin-top: 28px; }
.vote-fine a { color: var(--gray-500); }

/* „Glasaš kao … · Promeni" — tiho, sivo, kao ostatak podnožja. */
.voter-line { font-size: 13px; color: var(--gray-400); overflow-wrap: anywhere; }
.voter-line:empty { display: none; }

/* Polje za fotografiju — kvadrat sa jednom linijom, bez isprekidanih ivica
   i bez ikone u krugu. */
.photo-drop {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  border: 1px solid var(--gray-200);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  transition: border-color .18s, background .18s;
}
.photo-drop:hover { border-color: var(--gray-400); }
.photo-drop.is-over { border-color: var(--brand-500); background: var(--brand-50); }
.photo-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Ista žiža kao na kartici — inače vlasnik u pregledu vidi jedan kadar, a na
   stranici dobije drugi. */
.photo-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-focus); }
.photo-hint { text-align: center; color: var(--gray-400); font-size: 15px; line-height: 1.7; padding: 24px; }

/* Kad je slika izabrana, kvadrat prestaje da bude dugme i postaje površina
   za pomeranje kadra: nevidljivo polje za fajl više ne hvata dodir, a nova
   slika se bira linkom „Promeni sliku" ispod. */
.photo-drop.has-photo { cursor: grab; }
.photo-drop.has-photo.is-panning { cursor: grabbing; }
.photo-drop.has-photo input { pointer-events: none; }
.photo-drop.has-photo img { user-select: none; -webkit-user-drag: none; }

.photo-pan-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(16, 24, 40, .58);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 13px; white-space: nowrap;
  pointer-events: none;
  transition: opacity .3s;
}
.photo-pan-hint svg { width: 14px; height: 14px; }
.photo-drop.is-panning .photo-pan-hint { opacity: 0; }

.photo-change { justify-self: start; margin-top: -14px; font-size: 14px; color: var(--gray-500); }
.photo-change[hidden] { display: none; }

/* Telefon: nema prevlačenja, pa ceo kvadrat je jedno dugme. Bez `capture` —
   sistem sam ponudi i galeriju i kameru (iPhone uvek; Android zavisi od
   telefona). Telefon se prepoznaje po prstu kao pokazivaču, ne po širini
   ekrana — i tablet nema prevlačenje. */
.hint-phone { display: none; }
.hint-phone svg { display: block; width: 40px; height: 40px; margin: 0 auto 12px; color: var(--gray-300); }

@media (hover: none) and (pointer: coarse) {
  .hint-desk { display: none; }
  .hint-phone { display: block; }
  /* Telefon „pamti" hover posle dodira — okvir bi ostao taman. Taman je samo
     dok je prst na njemu. */
  .photo-drop:hover { border-color: var(--gray-200); }
  .photo-drop:active { border-color: var(--gray-400); }
}

/* Smanjenje fotografije traje delić sekunde, ali dok traje dugme „Nastavi" je
   neaktivno — bez ovoga to izgleda kao da polje ne radi. */
.photo-busy {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .82);
  color: var(--gray-500); font-size: 14px; letter-spacing: .01em;
}

/* Tipovi kao tekst, ne kao mreža pločica. Prelamaju se sami, pa dodavanje
   vrste ne traži nikakvu izmenu ovde. */
.types { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }
.type {
  background: none; border: 0; padding: 3px 0; cursor: pointer;
  font: inherit; font-size: 16px; color: var(--gray-400);
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.type:hover { color: var(--gray-700); }
.type[aria-pressed="true"] { color: var(--gray-900); border-bottom-color: var(--gray-900); }

/* Provera pre slanja — ljubimac gore (sličica, ime, vrsta · grad), ispod
   podaci vlasnika kao mirna lista između tankih linija. Bez kutija. */
.review { margin-top: clamp(28px, 4vw, 36px); }
.review-pet { display: flex; align-items: center; gap: 16px; }
.review-photo {
  width: 84px; height: 84px; flex: none; border-radius: 14px;
  object-fit: cover; object-position: var(--photo-focus);
  background: var(--paper);
}
.review-name { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--gray-900); overflow-wrap: anywhere; }
.review-meta { margin-top: 4px; font-size: 15.5px; color: var(--gray-500); overflow-wrap: anywhere; }
.review-list { margin-top: 22px; border-top: 1px solid var(--gray-200); }
.review-list > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--gray-200);
  font-size: 15px;
}
.review-list dt { color: var(--gray-500); flex: none; }
.review-list dd { margin: 0; color: var(--gray-900); text-align: right; min-width: 0; overflow-wrap: anywhere; }

.consent { display: flex; gap: 13px; align-items: flex-start; font-size: 14.5px; line-height: 1.65; color: var(--gray-700); }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-500); }
.consent a { color: var(--gray-700); }

/* ─── Reveal ──────────────────────────────────────────────────────────────── */

.reveal {
  max-width: 540px; margin-inline: auto;
  padding: clamp(76px, 14vh, 164px) var(--gutter) clamp(56px, 10vh, 96px);
  text-align: center;
}
.reveal-num {
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 300;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--gray-900);
}
.reveal-photo {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: var(--photo-focus);
  margin: clamp(30px, 5vw, 48px) 0; background: var(--gray-100);
}
.reveal-title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.14; }
.reveal-meta { margin-top: 13px; color: var(--gray-500); font-size: 15.5px; }
.reveal-actions { margin-top: clamp(32px, 5vw, 46px); display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* Ulaz u story sa profila — red između dve tanke linije, bez kutije. Sličica
   je sama fotografija u razmeri story-ja: objašnjava bez reči. */
.story-cta {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin-top: clamp(26px, 4vw, 34px);
  padding: 14px 0;
  background: none; border: 0;
  border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200);
  font: inherit; text-align: left; cursor: pointer;
}
.story-cta-thumb {
  width: 36px; height: 64px; flex: none; border-radius: 7px;
  object-fit: cover; object-position: var(--photo-focus);
  box-shadow: 0 0 0 1px var(--gray-200);
}
.story-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.story-cta-title { font-size: 16px; font-weight: 600; color: var(--gray-900); }
.story-cta-sub { font-size: 14px; color: var(--gray-500); }
.story-cta-arrow { width: 18px; height: 18px; flex: none; color: var(--gray-400); transition: transform .18s, color .18s; }
@media (hover: hover) {
  .story-cta:hover .story-cta-arrow { transform: translateX(3px); color: var(--gray-900); }
}
.story-cta:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 4px; border-radius: 4px; }

/* ─── Slika za story ─────────────────────────────────────────────────────── */
/* Gotova slika u razmeri story-ja, dovoljno mala da ispod nje stane dugme
   bez skrolovanja i na telefonu. */

.story {
  max-width: 420px; margin-inline: auto;
  padding: clamp(72px, 10vh, 110px) var(--gutter) 40px;
  text-align: center;
}
.story-frame {
  width: min(100%, calc((100dvh - 250px) * 9 / 16));
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--gray-200); border-radius: 18px;
  overflow: hidden;
}
.story-img { width: 100%; height: 100%; display: block; }
.story-busy { color: var(--gray-400); font-size: 14px; padding: 24px; }
.story-actions { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.story-actions[hidden] { display: none; }

/* ─── Lestvica kolona ─────────────────────────────────────────────────────── */
/* Menja se BROJ kolona, ne veličina kartice — kartica ostaje ~210px na svakoj
   širini. Šest u redu je lepo na velikom monitoru, ali na prosečnom laptopu
   bi dalo sličice, a „Upoznaj ekipu" postoji da bi se ljubimci videli.

   Obrazac „vodeći levo, dve kolone kartica desno" preživljava sve širine —
   menja se samo koliko je vodeći širok. */

@media (max-width: 1500px) { .gallery { --cols: 5; } }
@media (max-width: 1200px) { .gallery { --cols: 4; } }
@media (max-width: 900px)  { .gallery { --cols: 3; } }

/* ─── Mobilni ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .profile { grid-template-columns: 1fr; }
  .profile-photo { aspect-ratio: 4 / 5; height: auto; min-height: 0; position: static; }
  .profile-body { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 720px) {
  /* Dve kolone i na telefonu: jedna kolona izgleda kao feed, dve kao
     kontakt-list. */
  .gallery { --cols: 2; --card-gap-x: 14px; --card-gap-y: 30px; }

  /* Vodeći ostaje 2×2, što je na dve kolone puna širina. Ali u ta dva reda
     tada nema drugih kartica koje bi im odredile visinu, pa fotografija nema
     do čega da se rastegne — ovde joj odnos zadajemo. Portret je na telefonu
     ionako prirodniji, a visina nije problem jer se skroluje. */
  /* Na dve kolone vodeći raspne dva reda u kojima nema drugih kartica, pa
     visinu nema od čega da uzme — ovde mu je zadajemo. */
  .lead { aspect-ratio: 4 / 5; }

  .tile-cap { flex-wrap: wrap; gap: 6px; }
  .tile-name { white-space: normal; overflow: visible; }
  .heart-btn { padding-left: 0; }

  .gallery-head { align-items: flex-start; }
  .gallery-tools { width: 100%; justify-content: space-between; gap: 18px; }
  .search { width: 100%; }
  .filter-row { width: 100%; justify-content: space-between; align-items: flex-start; }
  .filters { gap: 16px; }

  .hero-start { flex-direction: column; width: 100%; max-width: 340px; }
  .hero-start .btn, .hero-name { width: 100%; }
  .join-actions { flex-direction: column-reverse; align-items: stretch; }
  .join-actions .btn { width: 100%; }
  .profile-actions { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .layer[data-anim="1"], .join-step[data-active="1"], .vote-step[data-active="1"] { animation: none; }
  .btn:active:not(:disabled) { transform: none; }
  .beat { animation: none; }
  .tile-photo:hover img, .lead-photo:hover img { transform: none; }
  /* Strelica prestaje da klizi, ali ostaje vidljiva ispod reči. */
  .scroll-cue-tip { animation: none; opacity: 1; transform: none; }
}