/* ─────────────────────────────────────────────────────────────────────────────
   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;
     • 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% 40%;

  --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); }

/* Stanje posle glasa: tiho, bez podloge. Srce je jedino što je crveno.
   Klikabilno je — drugi klik povlači glas — pa nosi pokazivač i hover. */
.btn-voted {
  background: transparent; color: var(--gray-700);
  border: 1px solid var(--gray-200);
  cursor: pointer;
}
.btn-voted:hover:not(:disabled) { border-color: var(--gray-400); }
.btn-voted .heart-icon { color: var(--heart); }

.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;
  min-height: 100svh;
  min-height: 100vh;
  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));
}
.hero-logo { height: 36px; width: auto; margin-bottom: clamp(44px, 8vw, 80px); user-select: none; }
.hero h1 { max-width: 16ch; }

/* 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. */
.hero-lead {
  max-width: 42ch;
  margin-top: clamp(18px, 2.2vw, 26px);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.55;
  color: var(--gray-500);
  text-wrap: balance;
}
/* 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-400);
}

/* 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. I dalje NIJE strelica koja poskakuje — poskakivanje je
   najbrži način da stranica počne da liči na šablon.
   Ali prva verzija je bila samo vlas linija i pokazalo se da je ljudi
   jednostavno ne primete, a znak koji se ne primeti nije obavio svoj jedini
   posao. Zato sada: duža linija, jači kontrast, i chevron na njenom kraju koji
   se pojavi tačno kad segment stigne dole — linija se iscrta, pa se ukaže
   strelica. Jedan pokret, bez skakanja. */
.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: 2px;
  background: none; border: 0; padding: 12px 20px;
  cursor: pointer; line-height: 0;
}

/* Linija je samo staza — miruje. */
.scroll-cue-line {
  display: block; width: 1px; height: 56px;
  background: var(--gray-200);
}

/* Strelica klizi niz stazu i nestane na kraju.
   Prva verzija je bila samo vlas linija sa tamnim delom koji putuje, i ljudi
   je nisu primećivali — u većem delu ciklusa strelice uopšte nije ni bilo.
   Pokret U PROSTORU se primeti mnogo pre nego promena prozirnosti, pa sada
   postoji jedan jasan objekat koji se kreće, u mastilu i dovoljno krupan.
   I dalje ne poskakuje: ide samo nadole, pa se ugasi. */
.scroll-cue-tip {
  width: 24px; height: 24px; color: var(--gray-900);
  margin-top: -2px;
  animation: cue 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.scroll-cue:hover .scroll-cue-tip { color: var(--brand-500); }

/* 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; }
}

/* ─── §2 Prelaz ───────────────────────────────────────────────────────────── */
/* Iz brend sveta u svet pravih fotografija. Prelaz nosi sama slika — prvi
   kadar ide od ivice do ivice. Ovde stoje samo vlas linije i tišina. */

.cut { height: clamp(64px, 9vw, 112px); }
.cut::after { content: ""; display: block; height: 1px; background: var(--gray-200); }

/* ─── §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 {
  padding-top: var(--section-gap);
  --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); }

/* 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 */
}

.lead-plate-body {
  background: var(--brand-50);
  display: flex; align-items: center;
  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;
  font-family: 'Bricolage Grotesque', 'Onest', sans-serif;
  font-weight: 800; color: var(--gray-900);
  font-size: clamp(42px, 17cqw, 84px);
  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; }
.lead-name {
  font-size: clamp(16px, 4.4cqw, 21px); font-weight: 600;
  letter-spacing: -0.015em; color: var(--gray-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-num { font-weight: 500; color: var(--gray-400); font-size: .78em; margin-left: 2px; }

/* 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. */
.lead-heart {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 5px; background: none; border: 0; padding: 3px 0;
  font: inherit; font-size: clamp(13px, 3.4cqw, 15.5px); color: var(--gray-500);
  cursor: pointer;
}
.lead-heart .heart-icon { width: 19px; height: 19px; color: var(--gray-400); transition: color .18s; }
.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; }
.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: 13px; color: var(--gray-400);
}
/* 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);
}
.footer a { color: var(--gray-400); text-decoration: none; border-bottom: 1px solid transparent; }
.footer a:hover { color: var(--gray-700); border-bottom-color: var(--gray-200); }
.footer .draft-mark { color: var(--gray-300); }

/* ─── 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%; }
.profile-photo {
  width: 100%; height: 100%; min-height: 320px;
  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-hearts {
  display: flex; align-items: center; gap: 9px;
  margin-top: clamp(22px, 3vw, 32px);
  font-size: 16px; color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}
.profile-hearts .heart-icon { color: var(--heart); width: 15px; height: 15px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: clamp(26px, 4vw, 38px); }
.profile-foot { margin-top: clamp(40px, 6vw, 68px); }

.report-box { margin-top: 22px; max-width: 460px; }
.report-box textarea { resize: vertical; min-height: 76px; }

/* ─── 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; }

/* 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; }

/* 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); }

.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; }
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }

/* ─── 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; }
  .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%; }
  .filters { width: 100%; 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; }
  .profile-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .layer[data-anim="1"], .join-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 na kraju staze. */
  .scroll-cue-tip { animation: none; opacity: 1; transform: none; }
}