/* ==========================================================================
   Fair Assistant — stil sajta
   Usklađen sa Android aplikacijom: tamna traka (#2B2620), zlatna (#E4B40A),
   kartice sa blagom senkom, zvezdice, dugmad sa zaobljenim uglovima.
   ========================================================================== */

:root {
  --gold: #E4B40A;
  --gold-dark: #8A6905;
  --gold-soft: #FCF4DC;
  --dark: #2B2620;
  --dark-2: #3A332A;
  --ink: #241F1A;
  --muted: #776E60;
  --line: #E5DFD2;
  --paper: #FBF9F5;
  --surface: #FFFFFF;

  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
  /* Sadržaj je najvećim delom spisak kartica, a ne tekst, pa mu šira strana ne
     škodi: na 1520 px stane četvrta kolona i spisak se skrati za četvrtinu.
     Duži red teksta se sprečava na samom tekstu (`.prose`, `.lede`), a ne
     sužavanjem cele strane. */
  --wrap: 1520px;
}

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

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

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- traka na vrhu (kao TopAppBar u aplikaciji) ---------- */

.topbar { background: var(--dark); color: #F2ECE0; position: sticky; top: 0; z-index: 40; }
.topbar .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand svg { width: 30px; height: 30px; }
.brand span { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--gold); }

.nav { display: flex; gap: 22px; margin-inline-start: 8px; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: #E4DDD0; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--gold); }
.nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }

.topbar .right { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }

.langpick { position: relative; }
.langpick summary {
  list-style: none; cursor: pointer; font-size: 14px; color: #E4DDD0;
  border: 1px solid #4B4238; border-radius: 6px; padding: 6px 10px;
}
.langpick summary::-webkit-details-marker { display: none; }
.langpick summary:hover { border-color: var(--gold); color: var(--gold); }
.langmenu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 28px rgba(36,31,26,.18);
  padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 2px;
  max-height: 60vh; overflow: auto;
}
.langmenu a { text-decoration: none; font-size: 14px; padding: 7px 10px; border-radius: 6px; white-space: nowrap; }
.langmenu a:hover { background: var(--gold-soft); color: var(--gold-dark); }
.langmenu a[aria-current="true"] { font-weight: 700; color: var(--gold-dark); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: #F2ECE0; margin: 4px 0; }

/* ---------- dugmad (kao u aplikaciji) ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 12px 22px; border-radius: 8px; border: 0; cursor: pointer;
  text-decoration: none; transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn-gold { background: var(--gold); color: #241F1A; }
.btn-dark { background: var(--dark); color: var(--gold); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-dark); }
.btn-sm { padding: 8px 14px; font-size: 14px; }

/* ---------- tipografija ---------- */

h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
h2 { font-size: clamp(23px, 3vw, 30px); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
p { text-wrap: pretty; }

.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); }
.lede { font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 62ch; }
.section { padding: 46px 0; }
/* strana koja počinje slikom umesto naslovom — bez praznine na vrhu */
.section.tight { padding-top: 20px; }
.section-head { margin-bottom: 26px; }
.section-head p { color: var(--muted); margin-top: 6px; max-width: 62ch; }
.centered-head { text-align: center; }
.centered-head p { margin-inline: auto; }
.wide-copy p { max-width: 92ch; }

/* ---------- naslovni blok ---------- */

.hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero .wrap { padding-top: 44px; padding-bottom: 44px; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero h1 { margin: 14px 0 16px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.hero .trust div { font-size: 14px; color: var(--muted); }
.hero .trust b { display: block; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* prikaz telefona u naslovnom bloku */
.phone-shot {
  width: 260px; margin: 0 auto; border: 3px solid var(--dark); border-radius: 26px;
  overflow: hidden; background: var(--surface); box-shadow: 0 18px 40px rgba(36,31,26,.16);
}
.phone-shot .bar { background: var(--dark); color: var(--gold); font-size: 13px; font-weight: 700; padding: 12px 14px; display: flex; align-items: center; gap: 8px; }
.phone-shot .bar svg { width: 18px; height: 18px; }
.phone-shot .row { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.phone-shot .av { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); flex: none; }
.phone-shot .nm { font-size: 13px; font-weight: 600; }
.phone-shot .co { font-size: 12px; color: var(--muted); }
.phone-shot .st { margin-inline-start: auto; color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.phone-shot .fab { margin: 14px 13px; background: var(--gold); color: #241F1A; font-size: 13px; font-weight: 700; text-align: center; padding: 11px; border-radius: 8px; }

/* Umanjeni prikaz — stoji u bloku za aplikaciju, u uskoj desnoj koloni.
   Ivica je svetlija nego na naslovnoj jer tamo stoji na belom, a ovde na
   tamnom: sa `--dark` ivicom telefon bi se stopio sa podlogom. */
.phone-shot.mali { width: 150px; margin: 0; border-width: 3px; border-color: #4A4238; border-radius: 18px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.phone-shot.mali .bar { font-size: 9px; padding: 8px 9px; gap: 5px; background: #1F1B16; }
.phone-shot.mali .bar svg { width: 11px; height: 11px; }
.phone-shot.mali .row { gap: 6px; padding: 7px 8px; }
.phone-shot.mali .av { width: 21px; height: 21px; }
.phone-shot.mali .nm { font-size: 9px; }
.phone-shot.mali .co { font-size: 8px; }
.phone-shot.mali .st { font-size: 7px; letter-spacing: .5px; }
.phone-shot.mali .fab { margin: 9px 8px; font-size: 8.5px; padding: 7px; border-radius: 5px; }

/* ---------- blok za aplikaciju na stranici sajma ----------

   Jedini blok u desnoj koloni, pa nosi celu prodaju. Taman je namerno: ista
   boja kao traka na vrhu i kao sama aplikacija, i jedina tamna stvar na inače
   svetloj strani — oko ide pravo na njega. */

.app-blok { background: var(--dark); border-radius: var(--radius); padding: 20px; }
.app-vrh { display: flex; gap: 16px; align-items: flex-start; }
.app-tekst { flex: 1; min-width: 0; }

.app-oko { display: flex; align-items: baseline; gap: 10px; }
.app-oko > span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }
/* Odbrojavanje ne sme da otme mesto naslovu — zato sitno i gurnuto skroz
   desno. Sajam bez potvrđenog termina ovaj element uopšte nema. */
.app-kad { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: #9A9084; white-space: nowrap; }

.app-blok h3 { font-size: 17px; line-height: 1.28; color: #F2ECE0; margin: 8px 0 9px; }

.app-bezneta { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--gold); line-height: 1.4; }
.app-bezneta svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* Oznaka „radi i bez interneta".

   Nije veza i ne sme da liči na dugme. Zato preuzima oblik oznake, a ne
   dugmeta: potpuno zaobljen okvir kao kod `.tag`, dok sva dugmad na sajtu
   imaju ugao od 8 px. Uz to nosi ikonicu precrtanog signala, koje na dugmadi
   nema. Zlatnotamni tekst na podlozi boje peska daje kontrast 4,66:1. */
.offline-blok { margin-top: 18px; }
.offline-oznaka {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  margin-top: 18px; padding: 7px 15px;
  border: 1px solid var(--gold); border-radius: 100px; background: var(--gold-soft);
  color: var(--gold-dark); font-size: 14px; font-weight: 600; line-height: 1.35;
}
.offline-blok .offline-oznaka { margin-top: 0; }
.offline-oznaka svg { width: 17px; height: 17px; flex: none; }
.offline-opis { margin-top: 10px; max-width: 54ch; font-size: 14px; color: var(--muted); line-height: 1.5; }
.app-uredjaj { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }

.app-koraci { margin-top: 16px; padding-top: 14px; border-top: 1px solid #453D33; }
.app-korak { display: flex; gap: 9px; align-items: baseline; margin-bottom: 8px; font-size: 13px; line-height: 1.45; }
.app-korak .n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--dark-2); border: 1px solid #5A5044; color: var(--gold);
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.app-korak b { color: #F2ECE0; flex: none; }
.app-korak span:last-child { color: #A79D8F; }
.app-koraci .btn { margin-top: 14px; }

/* Tiho, sivo, bez okvira i bez dugmeta: organizator koji dođe na stranicu
   svog sajma i dalje ima ulaz, a posetiocu ne odvlači pogled. */
.app-tiho { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.app-tiho a { color: var(--gold-dark); font-weight: 600; }

/* ---------- kartice ---------- */

/* Broj kolona se računa iz raspoložive širine umesto da bude zakucan: 1 na
   telefonu, 2 na tabletu, 3 na laptopu, 4 na širokom monitoru. Zato dole u
   „telefon" nema više ručnog prepisivanja broja kolona — auto-fill to radi sam
   i na svakoj širini između. */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.cards.c3, .cards.c4 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
/* Ovde `auto-fit`, a ne `auto-fill` kao iznad: `c2` nosi tačno dve kartice, a
   od 1800 px naviše `auto-fill` je pravio i treću, praznu kolonu — kartice su
   se zbijale ulevo uz 500 px praznine desno. `auto-fit` praznu kolonu skuplja,
   pa se dve kartice razvuku preko cele širine. */
.cards.c2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.cards.force-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.force-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Tri kartice koje se čitaju kao celina idu sa tri kolone PRAVO na jednu.
   Međukorak sa dve ostavlja treću samu u redu, pa izgleda kao da je druga
   vrsta sadržaja — isti razlog kao kod cenovnika. */
.cards.trojka { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-decoration: none; display: block;
}
a.card:hover { border-color: var(--gold); box-shadow: 0 6px 18px rgba(36,31,26,.07); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }
.card .more { display: inline-block; margin-top: 12px; color: var(--gold-dark); font-weight: 600; font-size: 14px; }

/* ---------- cenovnik aplikacije ----------

   Mreža ima ZAKUCANE tri kolone i prelazi pravo na jednu na 900 px, na istom
   pragu na kom se i ostatak te strane slaže u jednu kolonu. Međukorak sa dve
   kolone je namerno izostavljen: tri ponude koje treba uporediti u rasporedu
   2+1 izgledaju kao da je treća druga vrsta ponude.

   Kartice su jednake visine jer ih mreža rasteže, a unutar kartice sadržaj ide
   u kolonu sa `margin-top:auto` na dnu — tako su cena i dugme poravnati u sve
   tri, bez obzira na visinu spiska funkcija. */
.cenovnik {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto auto auto;
  column-gap: 16px; row-gap: 0;
}

.cenovnik-kartica { position: relative; display: flex; flex-direction: column; padding-top: 56px; }
.cenovnik-kartica.istaknuta { border-color: var(--gold); background: var(--gold-soft); }

/* Svih šest redova kartice — naslov, namena, spisak, cena, uslov cene i dugme
   — dele visinu kroz sve tri kartice. Bez toga cena „pluta": „14 dana od prvog
   stvarnog skeniranja" se na užem ekranu prelama u tri reda, a „po sajmu" u
   jedan, pa cene stoje na različitim visinama iako su dugmad poravnata.
   Izmereno na 901 px: bez subgrid-a razlika je 23 px, sa njim 0.

   Rezervisana visina (`min-height`) je zamena za starije pregledače bez
   subgrid-a i tamo i dalje radi. */
@supports (grid-template-rows: subgrid) {
  .cenovnik-kartica { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
  .cenovnik-dno { display: contents; }
  .card .cenovnik-cena { margin-top: 18px; }
  .card .cenovnik-namena,
  .card .cenovnik-uslov { min-height: 0; }
}

/* Oznaku nosi samo Team, ali prostor za nju rezervišu sve tri kartice
   (`padding-top` gore). Zato naslovi ostaju u istom redu i spiskovi funkcija
   mogu da se porede red po red. */
.card .cenovnik-oznaka {
  position: absolute; inset-block-start: 20px; inset-inline-start: 22px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-dark); background: var(--surface);
  border: 1px solid var(--gold); border-radius: 100px; padding: 3px 10px;
}
.card .cenovnik-namena { min-height: 2.9em; margin-bottom: 4px; }

.cenovnik-stavke { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cenovnik-stavke li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.45; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.cenovnik-stavke .znak { flex: none; width: 14px; text-align: center; font-weight: 700; }
.cenovnik-stavke .ima .znak { color: var(--gold-dark); }
.cenovnik-stavke .nema,
.cenovnik-stavke .podatak .znak { color: var(--muted); }
.cenovnik-stavke .uslov { color: var(--muted); }
.cenovnik-stavke .stanje { color: var(--muted); font-style: italic; }

/* „14 dana od prvog stvarnog skeniranja" se prelama u dva reda, a „po sajmu"
   ne — bez rezervisana dva reda cene u tri kartice ne bi stajale na istoj
   visini. Isto važi i za namenu iznad spiska. */
.cenovnik-dno { margin-top: auto; padding-top: 18px; }
.card .cenovnik-cena { font-size: 30px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.card .cenovnik-uslov { font-size: 14px; min-height: 2.9em; margin-bottom: 12px; }
.cenovnik-dugme { width: 100%; }

/* Kupovina još ne postoji, pa dugmad nisu linkovi nego stvarno onemogućena.
   Siva podloga i tamnosiv tekst (6,0:1) razlikuju ih od zlatnih, radnih
   dugmadi na sajtu; razlog piše ispod kartica i vezan je `aria-describedby`. */
.cenovnik-dugme:disabled { background: var(--line); color: #57503F; cursor: not-allowed; }
.cenovnik-dugme:disabled:hover { filter: none; }

.cenovnik-napomena { text-align: center; color: var(--muted); font-size: 14px; margin-top: 22px; }
.cenovnik-organizatori { text-align: center; margin-top: 10px; }

/* Veza „Preuzimanje aplikacije" iz podnožja vodi na ovaj blok, a zaglavlje je
   lepljivo — bez ovoga bi naslov cenovnika završio ispod njega. */
.cenovnik-blok { scroll-margin-top: 76px; }

/* Tri kratke stavke u panelu na strani aplikacije. */
.app-panel-stavke { list-style: none; margin: 18px auto 0; padding: 0; max-width: 46ch; text-align: start; }
.app-panel-stavke li { position: relative; padding-inline-start: 22px; margin-top: 8px; color: var(--muted); font-size: 15px; }
.app-panel-stavke li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--gold-dark); font-weight: 700; }

/* Kartica sajma — zbijenija od ostalih kartica, jer ih na spisku ima na
   hiljade i svaki suvišan piksel visine plaća se skrolovanjem. Sadržaj je isti:
   termin, naziv, mesto, branša. */
.fair-card { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; }
.fair-card .when,
.feat-card .when { font-size: 12px; font-weight: 700; color: var(--gold-dark); letter-spacing: .04em; text-transform: uppercase; }
.fair-card h3 { font-size: 16px; line-height: 1.25; margin-bottom: 0; }
.fair-card .where { font-size: 13.5px; color: var(--muted); }
.fair-card .tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.fair-card .tags .tag { font-size: 11.5px; padding: 2px 8px; }

.tag {
  font-size: 12px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 3px 10px; text-decoration: none;
}
a.tag:hover { border-color: var(--gold); color: var(--gold-dark); }
.tag.gold { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-dark); }

/* ---------- koraci ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step .n {
  width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #241F1A;
  font-weight: 700; font-size: 14px; display: grid; place-items: center; margin-bottom: 12px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 15px; }

/* ---------- traka sa pozivom ---------- */

.band { background: var(--dark); color: #F2ECE0; }
.band .wrap { padding: 44px 20px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.band h2 { color: var(--gold); }
.band p { color: #C4BBAB; margin-top: 8px; max-width: 56ch; }
.band .actions { margin-inline-start: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.centered-band .wrap { flex-direction: column; text-align: center; }
.centered-band p { margin-inline: auto; max-width: 88ch; }
.centered-band .actions { margin-inline-start: 0; justify-content: center; }

/* Aplikacija: objašnjenje problema i poziv za dostupnost dele isti red. */
.app-problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.app-problem-copy,
.app-download { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: clamp(24px, 3vw, 40px); }
.app-problem-copy p,
.app-download p { margin: 10px auto 0; max-width: 58ch; }
.app-download p:last-child { margin-top: 20px; }

/* ---------- direktorijum ---------- */

/* Filteri stoje u vidljivom okviru i svako polje ima natpis iznad sebe. Ranije
   su bili go red jednakih kontrola sa skrivenim natpisima, pa se nije videlo ni
   da postoje ni šta koja radi — a upravo oni, a ne gušći spisak, ukidaju
   skrolovanje: grad i mesec svedu 1382 sajma na desetak. */
.filters {
  position: relative; margin-bottom: 20px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--gold); border-radius: var(--radius);
}
.filter-polja { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.fgroup { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fgroup-siroka { flex: 1 1 240px; }
.flab {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
/* Okvir je 2 px, a kod ostalih kontrola 1 px — unutrašnji razmak se skraćuje
   za tu razliku da sva polja u redu budu iste visine i natpisi u liniji. */
.search {
  width: 100%; font-family: inherit; font-size: 15px;
  padding: 9px 13px; border: 2px solid var(--gold); border-radius: 8px; background: var(--paper); color: inherit;
}
.search:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
/* i polja za datum, da budu iste visine kao ostale kontrole u redu */
select.filter, input.filter {
  font-family: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; cursor: pointer;
}
input.filter:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* podnožje table: šta je izabrano, koliko je ostalo, i poništavanje */
.filter-noga {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.izabrano { display: flex; flex-wrap: wrap; gap: 6px; }
.izabrano .oznaka {
  font-size: 12px; font-weight: 600; color: var(--gold-dark);
  background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 100px; padding: 2px 10px;
}
/* Podnožje nestaje kad u njemu nema ničega — inače ostane gola isprekidana
   crta ispod filtera. */
.filter-noga:empty, .filter-noga.hidden { display: none; }

/* Dugme se vidi samo na telefonu — tamo šest polja jedno ispod drugog pojede
   ceo prvi ekran, pa se sklapaju iza njega. Na računaru stoje otvoreni. */
.filters-toggle { display: none; }

/* ---------- fotografije ---------- */

.photo {
  margin: 4px 0 30px; overflow: hidden; background: var(--dark);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.photo img {
  display: block; width: 100%; height: clamp(200px, 26vw, 340px);
  /* isečak se uzima malo iznad sredine — tamo su po pravilu lica i štandovi */
  object-fit: cover; object-position: center 42%;
}
.hero .hero-photo {
  margin: 0; border: 0; border-radius: 16px;
  box-shadow: 0 18px 42px rgba(36,31,26,.16);
}
.hero .hero-photo img { height: clamp(300px, 31vw, 430px); object-position: center; }
.hero .hero-photo.focus-center img { object-position: center; }
/* Naslov i slika u istom redu: slika iznad naslova je gurala pretragu i prvi
   sajam ispod prevoja ekrana. Ovako ne troši nijedan piksel visine. */
.naslov-red { display: flex; align-items: center; gap: 28px; margin-bottom: 18px; }
.naslov-red .section-head { flex: 1 1 auto; min-width: 0; margin: 0; }
.naslov-red .photo {
  flex: 0 0 40%; max-width: 520px; margin: 0; border: 0; border-radius: 14px;
  box-shadow: 0 12px 28px rgba(36,31,26,.12);
}
.naslov-red .photo img { height: clamp(132px, 11vw, 164px); object-position: center; }

/* traka preko cele širine — između odeljaka */
.photo.full { margin: 0; border-radius: 0; border-inline: none; }
.photo.full img { height: clamp(240px, 26vw, 360px); }
/* kad je ono najvažnije na slici pri dnu (npr. vizit karta u rukama) */
.photo.tall img { height: clamp(300px, 32vw, 450px); }
.photo.low img { object-position: center 68%; }
/* u tekstu (o nama) — niža i mirnija */
.prose .photo { margin: 26px 0; }
.prose .photo img { height: clamp(180px, 22vw, 280px); }
.prose .photo.about-photo {
  max-width: none; margin: 30px 0 34px; border: 0; border-radius: 14px;
  box-shadow: 0 14px 34px rgba(36,31,26,.12);
}
.prose .photo.about-photo img { height: clamp(230px, 28vw, 360px); object-position: center; }

/* istaknuti sajmovi */
.featured { margin: 8px 0 40px; }
.featured .section-head { margin-bottom: 16px; }
.featured .section-head h2 { font-size: 22px; }

/* Mreža istaknutih ima ZAKUCAN broj kolona, za razliku od svih ostalih mreža
   na sajtu koje se same popunjavaju po raspoloživoj širini.

   Razlog: istaknutih je devet. Sa `auto-fill` na širokom ekranu stanu četiri u
   red, pa raspored ispadne 4 + 4 + 1 i deveta kartica ostane sama u praznom
   redu. Za običan spisak to ne smeta, ali ovo je plaćeni prostor organizatora
   i tako izgleda kao greška. Sa tri kolone devet daje uredno 3 × 3.

   Pravilo je namerno vezano za `.featured`, da ne dira ostale mreže. */
.featured .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .featured .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .featured .cards { grid-template-columns: 1fr; } }

.feat-card { display: flex; gap: 14px; align-items: flex-start; }
/* flex, ne grid: kod grida se visina reda računa iz sadržaja, pa se `height`
   slike nema od čega izračunati — kvadratni logo naraste preko pločice i
   `overflow: hidden` mu odseče dno. */
.feat-card .mark {
  flex: none; width: 62px; height: 62px; border-radius: 12px;
  background: var(--dark); color: var(--gold);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.feat-card .mark-txt {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  padding: 0 4px; text-align: center;
}
/* Logo organizatora je najčešće širok natpis, a ne kvadrat — u pločici od 62 px
   skupio bi se u nečitljivu crtu. Zato kartica sa logom dobija širu pločicu. */
.feat-card .mark.has-logo {
  width: 104px; background: var(--surface); border: 1px solid var(--line);
}
.feat-card .mark-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; padding: 7px;
}
.feat-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feat-card h3 { font-size: 17px; }
.feat-card .where { font-size: 14px; color: var(--muted); }
.feat-card .tags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.feat-cta { margin-top: 16px; font-size: 14px; }
.feat-cta a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }
.feat-cta a:hover { text-decoration: underline; }

/* Urednička napomena stoji IZNAD kartica, ne u podnožju. To je jedini raspored
   u kom obavlja posao: čita se pre nego što oko dođe do tuđih logotipa. */
.feat-note {
  margin-top: 8px; max-width: 60ch;
  font-size: .875rem; line-height: 1.5; color: var(--muted);
}
/* Poreklo logotipa — zatvoreno podrazumevano da ne uguši CTA, ali stoji uz
   kartice, a ne u fusnoti sajta. Logička svojstva zbog arapskog RTL-a. */
.feat-izvori { margin-top: 14px; font-size: 13px; color: var(--muted); }
.feat-izvori summary { cursor: pointer; }
.feat-izvori summary:focus-visible {
  outline: 2px solid var(--gold-dark); outline-offset: 3px; border-radius: 4px;
}
.feat-izvori ul {
  margin: 8px 0 0; padding-inline-start: 20px; display: grid; gap: 4px;
}
.feat-izvori li { overflow-wrap: anywhere; }
.feat-izvori a { color: var(--muted); }
.feat-izvori a:hover { color: var(--gold-dark); }

/* vreme na stranici sajma */
.weather .fc { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.weather .fc h4 { font-size: 15px; margin-bottom: 10px; }
.fc-days { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-day {
  flex: 1 1 92px; min-width: 92px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px;
  background: var(--surface);
}
.fc-date { display: block; font-size: 12px; color: var(--muted); }
.fc-sym { display: block; font-size: 20px; line-height: 1.5; }
.fc-t { display: block; font-size: 14px; }
.fc-t b { font-size: 15px; }
.fc-mm { display: block; font-size: 12px; color: var(--muted); }
.fc-day.est { background: var(--paper); border-style: dashed; }
/* dvanaest meseci u mreži — u nizu bi se poslednja dva prelomila i razvukla */
.fc-days.year { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fc-days.year .fc-day { min-width: 0; padding: 7px 4px; }
@media (max-width: 620px) { .fc-days.year { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 380px) { .fc-days.year { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fc-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.fc-note.src { margin-top: 6px; font-size: 12px; }

/* Pregled po branši i zemlji — sklopljen, ali nikako uklonjen: te veze su
   jedini put kojim pretraživač stiže do stranica koje dovode posetioce. */
.pregled { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 18px; }
.pregled > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: 15px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
}
.pregled > summary::-webkit-details-marker { display: none; }
.pregled > summary::after {
  content: "▾"; font-size: 12px; color: var(--gold-dark);
  transition: transform .15s ease;
}
.pregled[open] > summary::after { transform: rotate(180deg); }
.pregled > summary:hover { color: var(--gold-dark); }
.pregled > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.pregled-telo { padding-top: 14px; }

/* ceo spisak — sklopljen dok se ne zatraži */
/* Termin — zaseban filter, ali sada stoji u istom redu kao ostali, pod svojim
   natpisom; odvojenost od ostalih filtera je u tome što ih ne sužava. */
.datum { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.datum-do { font-size: 13px; color: var(--muted); }
.datum input[type="date"] { min-width: 138px; width: 100%; }

/* Prazno polje za datum pregledač ispisuje na SVOM jeziku — srpski Chrome tu
   stavi „дд.мм.гггг." usred latiničnog sajta, engleski „mm/dd/yyyy". To se ne
   može ni prevesti ni prestilizovati, pa se dok je polje prazno i neizabrano
   sakrije, a preko njega ide naš tekst. Čim se datum izabere, tu su same
   cifre, pa se sve vraća na svoje. */
.datum-polje { position: relative; display: block; }
.datum-polje.prazno:not(:focus-within) input { color: transparent; }
.datum-polje.prazno:not(:focus-within)::after {
  content: attr(data-prazno);
  position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--muted); pointer-events: none; white-space: nowrap;
}


/* grad, hala i zemlja u redu „Mesto" vode dalje */
.facts a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.facts a:hover { text-decoration-color: var(--gold); color: var(--gold-dark); }

#fair-results.collapsed { display: none; }

/* padajući spisak svih sajmova */
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 32px; }
.jump label { font-size: 14px; font-weight: 700; color: var(--muted); }
.jump select {
  flex: 1; min-width: 260px; max-width: 520px; font-family: inherit; font-size: 15px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: inherit; cursor: pointer;
}
.jump select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---------- svi ostali sajmovi, ispod prvih dvadeset četiri kartice ----------

   Glavna strana nosi 24 pune kartice; ostali sajmovi stoje ovde kao obične
   veze. Nisu ostatak nego ceo spisak u zbijenom obliku — zato imaju svoj
   naslov, uredne kolone i istu tipografiju kao ostatak sajta, a ne izgled
   tehničkog ispisa. Bez ovog spiska sajam koji nije među prvih 24 nestao bi
   sa strane kad JavaScript ne radi, a pretraživač bi izgubio vezu do njega. */

.svi-sajmovi { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }

/* Nativni <details>: otvara se bez JavaScripta i tastaturom sam. Strelica je
   naša jer podrazumevana izgleda drugačije u svakom pregledaču. */
.svi-sajmovi > summary {
  cursor: pointer; list-style: none;
  font-size: clamp(23px, 3vw, 30px); line-height: 1.2; letter-spacing: -.02em;
  font-weight: 700; display: flex; align-items: center; gap: 12px;
}
.svi-sajmovi > summary::-webkit-details-marker { display: none; }
.svi-sajmovi > summary::before {
  content: ""; flex: none; width: 11px; height: 11px;
  border-inline-end: 2.5px solid var(--gold-dark); border-block-end: 2.5px solid var(--gold-dark);
  transform: rotate(-45deg); transition: transform .15s ease; margin-inline-start: 3px;
}
.svi-sajmovi[open] > summary::before { transform: rotate(45deg); }
.svi-sajmovi > summary:hover { color: var(--gold-dark); }
.svi-sajmovi > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.svi-sajmovi .lede { margin: 12px 0 20px; }

/* Broj pogodaka i dugme za sledeću grupu. Broj se ispisuje uvek za CEO
   rezultat, i kad je iscrtan samo deo — inače bi delovao kao da toliko sajmova
   i postoji. */
.broj-rezultata { font-size: 14px; font-weight: 600; color: var(--muted); align-self: center; }
.jos-red { margin-top: 22px; text-align: center; }

.svi-sajmovi ul {
  list-style: none;
  columns: 3 300px;
  column-gap: 34px;
}
.svi-sajmovi li {
  break-inside: avoid;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}
.svi-sajmovi a { text-decoration: none; font-weight: 600; }
.svi-sajmovi a:hover { color: var(--gold-dark); text-decoration: underline; }
.svi-sajmovi li span { display: block; font-size: 13px; color: var(--muted); }

/* dolazeći sajmovi */
.upcoming { margin-bottom: 36px; }
.upcoming .section-head { margin-bottom: 16px; }
.upcoming .section-head h2 { font-size: 22px; }
.upcoming .fair-card { border-color: var(--gold); }
.upcoming .empty { padding: 26px 20px; }

/* više zemalja odjednom */
.multi { position: relative; }
.multi > summary {
  list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
  font-size: 15px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface);
}
.multi > summary::-webkit-details-marker { display: none; }
.multi > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.multi > summary span.on { font-weight: 700; color: var(--gold-dark); }
.multi-menu {
  position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + 6px);
  min-width: 260px; max-height: 320px; overflow-y: auto;
  display: grid; gap: 2px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
.multi-menu .opt {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 15px; padding: 6px 8px; border-radius: 6px;
}
.multi-menu .opt:hover { background: var(--paper); }
.multi-menu input { accent-color: var(--gold); width: 16px; height: 16px; }

/* Na telefonu je polje široko koliko i forma, pa spisak zemalja ide preko
   cele NJEGOVE širine — ali ostaje vezan za samo polje.

   Ranije je ovde stajalo `position: static`. Time je `.multi` prestajao da
   bude uporište za apsolutno postavljen spisak, pa se `top: 100%` računao u
   odnosu na celu formu: spisak se otvarao ispod poslednjeg filtera, tri
   stotine piksela ispod kontrole koja ga otvara, i izgledao je kao da
   pripada nečemu drugom. */
@media (max-width: 620px) {
  .multi-menu {
    inset-inline: 0; width: auto; min-width: 0;
    /* Da spisak od 55 zemalja ne pređe preko celog ekrana. */
    max-height: min(320px, 52vh);
  }
}

.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 40px 24px; text-align: center; color: var(--muted); }

/* ---------- stranica sajma ---------- */

.fair-hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.fair-hero .wrap { padding: 42px 20px; }
.fair-hero .when { color: var(--gold-dark); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.fair-hero h1 { margin: 10px 0 12px; }
/* Naziv sajma na jeziku stranice, ispod originala. Tiši je od naslova jer
   original je ono kako se sajam zaista zove — prevod je pomoć čitaocu koji to
   ime ne razume, a ne drugo ime sajma. */
.naziv-prevod { font-size: clamp(15px, 2vw, 19px); color: var(--muted); margin-top: 6px; font-weight: 500; text-wrap: pretty; }

.fair-hero .where { font-size: 18px; color: var(--muted); }
.fair-hero .actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.facts div span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.facts div b { font-weight: 600; font-size: 15px; }

/* sajam koji se održava u dva navrata — svaki termin u svom redu */
.facts div b .term {
  display: block; font-size: 15px; font-weight: 600; color: var(--ink);
  letter-spacing: 0; text-transform: none; margin: 0;
}
.facts div b .term + .term { margin-top: 5px; }
.facts div b .term em { font-style: normal; font-weight: 500; color: var(--muted); }
.facts div b .term em::before { content: "· "; }

.split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.panel h3 { margin-bottom: 10px; }
.panel p { color: var(--muted); font-size: 15px; }
.panel.gold { background: var(--gold-soft); border-color: var(--gold); }

.stat-row { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 12px; }
.stat-row div b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.stat-row div span { font-size: 13px; color: var(--muted); }

/* ---------- tekstualne stranice ---------- */

.prose { max-width: 68ch; }
.prose h2 { margin: 34px 0 12px; }
.prose h3 { margin: 24px 0 8px; }
.prose p, .prose li { color: var(--ink); margin-bottom: 12px; }
.prose ul { padding-inline-start: 22px; }
.prose li::marker { color: var(--gold); }
.prose .muted { color: var(--muted); }

/* ---------- šire tekstualne strane ----------

   „O nama“, Privatnost i Uslovi. `.prose` ostaje netaknuta jer je koriste i
   drugi blokovi (između ostalog kontakt-strana); ovo je samo dodatak. Stubac
   od 68ch je na tim stranama bio preuzak i pravio nepotrebno dugu stranicu.

   Naslov, uvod i datum izmene idu po sredini, a pasusi od početka reda —
   ulevo na latinici, udesno u arapskom, jer `start` prati smer pisma.       */

.prose.siroka { max-width: 1000px; }
.prose.siroka > h1,
.prose.siroka > .eyebrow,
.prose.siroka > .lede,
.prose.siroka > .muted { text-align: center; }
.prose.siroka > .lede { margin-inline: auto; max-width: 72ch; }
.prose.siroka > p,
.prose.siroka > ul { text-align: start; }
.prose.siroka h2 { margin: 30px 0 10px; }
.prose.siroka h3 { margin: 22px 0 6px; }
.prose.siroka > .photo { margin: 24px 0 28px; }

/* O nama: sadržaj je centriran i koristi veću širinu, dok redovi teksta
   ostaju dovoljno kratki za čitanje. */
.about-content { max-width: 1240px !important; text-align: center; }
.prose.siroka.about-content > p { max-width: 92ch; margin-inline: auto; text-align: center; }
.about-content > h2 { text-align: center; }
.about-content > .about-audiences {
  list-style: none; padding: 0; margin: 18px 0 34px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.about-audiences li { margin: 0; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }

/* Pravne stranice prate odobren centriran raspored tekstualnih strana. */
.page-legal .prose.siroka { max-width: 1100px; text-align: center; }
.page-legal .prose.siroka > h2,
.page-legal .prose.siroka > p { text-align: center; }
.page-legal .prose.siroka > p { max-width: 92ch; margin-inline: auto; }

/* Za organizatore: naslovni blok ostaje uz fotografiju; naredni sadržaj je
   centriran i raspoređen preko pune raspoložive širine. */
.page-organizers main > .section .section-head { text-align: center; }
.page-organizers main > .section .section-head p { margin-inline: auto; max-width: 92ch; }
.page-organizers main > .section .card,
.page-organizers main > .section .step { text-align: center; }
.page-organizers main > .section .step .n { margin-inline: auto; }
.page-organizers .band .wrap { flex-direction: column; text-align: center; }
.page-organizers .band .actions { margin-inline-start: 0; justify-content: center; }

/* ---------- kontakt ----------

   Adresa se ispisuje kao tekst u okviru, a ne samo iza dugmeta: ko čita poštu
   u pregledaču nema podešen program za `mailto:` i mora da može da je označi i
   kopira. Dugme je gurnuto na dno kartice (`margin-top:auto`), pa su sva četiri
   u istom redu iako su tekstovi različite dužine.                            */

.kontakt-kartica { display: flex; flex-direction: column; }
/* Naslov kartice je `h2` zbog redosleda naslova, ali izgleda kao `h3`. */
.kontakt-kartica h2 { font-size: 18px; line-height: 1.3; letter-spacing: 0; margin-bottom: 8px; }
.kontakt-kartica p { margin-bottom: 10px; }
.kontakt-kartica .btn { align-self: flex-start; margin-top: auto; }

.kontakt-adresa {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.kontakt-adresa .oznaka {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); flex: none;
}
.kontakt-adresa .mejl { font-size: 15px; font-weight: 600; color: var(--ink); word-break: break-all; }

/* Besplatna ispravka — jedina istaknuta kartica na strani. */
.kontakt-kartica.istaknuta { border-color: var(--gold); background: var(--gold-soft); }
.kontakt-kartica.istaknuta .kontakt-adresa { background: var(--surface); border-color: var(--gold); }

.kontakt-firma { font-style: normal; line-height: 1.75; margin-bottom: 12px; }
.contact-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.contact-info-block { padding: clamp(22px, 3vw, 34px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.contact-info-block h2 { margin-bottom: 12px; }
.contact-info-block p { max-width: 62ch; margin: 0 auto 12px; }
.contact-info-block .kontakt-firma { margin-bottom: 0; }
/* Pravno ime ne sme da se prelomi na pola — u arapskom bi „d.o.o. Smederevo"
   palo u novi red i čitalo se kao zaseban podatak. */
.firma-ime { white-space: nowrap; }

/* Prijava netačnog podatka na stranici sajma — tiha, uz same činjenice. */
.fair-prijava { margin-top: 18px; font-size: 14px; color: var(--muted); }
.fair-prijava a { color: var(--gold-dark); font-weight: 600; }

/* ---------- futer ----------

   Centrirana kompozicija: brend, pa četiri jednake grupe, pa jedan red sa
   pravnim vezama. Sadržaj je uži od ostatka sajta (1240 px umesto 1520), jer
   se centrirani tekst na punoj širini raspe. Sve je poravnato po sredini, pa
   se u arapskom obrne redosled grupa a kompozicija ostane ista.

   Visina je namerno zbijena: podnožje stoji ispod svake strane, pa svaki
   suvišan piksel plaća čitalac skrolovanjem. Sažete su samo praznine —
   nijedno slovo nije smanjeno. Veze su dobile unutrašnji razmak umesto
   spoljnog, pa im je površina za dodir veća nego ranije iako red zauzima
   manje mesta.                                                              */

.footer { background: var(--dark); color: #D9D2C4; margin-top: 20px; }

/* Razmak iznad podnožja postoji zbog strana koje se završavaju svetlom
   celinom. Ali naslovna i strana za organizatore završavaju se tamnom trakom
   (`.band`), koja je iste boje kao podnožje — tu se tih 20px vidi kao svetla
   pruga preko cele širine, kao da se dva tamna bloka ne dodiruju. Kad je
   poslednja celina strane traka, razmak se ukida i ona se stapa sa podnožjem.
   Pravilo pokriva oba ispisa: i stari generator (traka je dete `main`) i Nuxt
   (traka je u omotaču unutar `main`). */
main:has(.band:last-child) + .footer { margin-top: 0; }
.footer .wrap { max-width: 1240px; padding: 34px 20px 18px; text-align: center; }

.footer .brend svg { width: 36px; height: 36px; }
.footer .brend .ime { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--gold); margin-top: 6px; }
.footer .brend .parola { font-size: 15px; line-height: 1.45; color: #D2CABB; margin: 8px auto 0; max-width: 78ch; }
.footer .brend .nosilac { font-size: 14px; line-height: 1.45; color: #BDB3A2; margin: 5px auto 0; max-width: 78ch; }
.footer-app { margin-top: 14px; }

.footer .grupe {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #453D33;
}
.footer h4 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.footer .grupe a {
  display: block; text-decoration: none; font-size: 16px; line-height: 1.35;
  padding: 5px 0; color: #E0D9CB;
}
.footer .grupe a:hover { color: var(--gold); }

.footer .bar {
  margin-top: 20px; padding-top: 13px; border-top: 1px solid #453D33;
  display: flex; justify-content: center; align-items: center; gap: 8px 22px;
  flex-wrap: wrap; font-size: 14px; color: #BDB3A2;
}
.footer .bar a { text-decoration: none; color: #BDB3A2; }
.footer .bar a:hover { color: var(--gold); }

/* ---------- pomoćno ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hidden { display: none !important; }

/* ---------- telefon ---------- */

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 26px; }
  .hero .hero-photo img { height: clamp(250px, 58vw, 380px); }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .app-problem-grid,
  .contact-info-grid { grid-template-columns: 1fr; }
  .about-content > .about-audiences { grid-template-columns: 1fr; }

  /* Cenovnik ide pravo sa tri kolone na jednu, bez međukoraka 2+1. Kada su
     kartice jedna ispod druge, ništa se ne poredi po visini: subgrid se gasi,
     kartica se vraća na običan flex, a rezervisani redovi za namenu i uslov
     cene bi samo pravili prazninu. */
  .cards.trojka { grid-template-columns: 1fr; }
  .cenovnik { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 16px; }
  .cenovnik-kartica { display: flex; grid-row: auto; padding-top: 22px; }
  /* Prostor za oznaku treba samo kartici koja je stvarno nosi: kada su jedna
     ispod druge, naslovi se ionako ne poravnavaju. */
  .cenovnik-kartica.istaknuta { padding-top: 56px; }
  .cenovnik-dno { display: block; }
  .card .cenovnik-namena,
  .card .cenovnik-uslov { min-height: 0; }
  .card .cenovnik-cena { margin-top: 0; }

  /* Na uskom ekranu slika pored naslova nema gde — a iznad njega je čist
     gubitak četvrtine prvog ekrana, pa se na spisku ne prikazuje. */
  .naslov-red { display: block; margin-bottom: 12px; }
  .naslov-red .photo { display: block; max-width: none; margin-top: 18px; }
  .naslov-red .photo img { height: 150px; }
  /* Podnaslov ponavlja ono što ionako piše u polju za pretragu, a košta ceo
     red pre prvog sajma. */
  .naslov-red .section-head p { display: none; }

  /* Šest polja jedno ispod drugog zauzme 340 px, pa prvi sajam padne ispod
     prevoja. Zato se sklapaju iza dugmeta, a polje za pretragu ostaje. */
  .filters-toggle { display: inline-flex; width: 100%; justify-content: center; margin-top: 10px; }
  .filters-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-dark); }
  .filter-polja { display: block; }
  .filter-polja .fgroup { margin-bottom: 10px; }
  .filter-polja .fgroup:not(.fgroup-siroka) { display: none; }
  .filters.open .filter-polja .fgroup:not(.fgroup-siroka) { display: flex; }
  .filters:not(.open) .filter-noga { border-top: 0; padding-top: 0; margin-top: 8px; }
  /* Dva polja za datum jedno pored drugog na telefonu ne stanu: ostane im
     po stotinak piksela, a tekst kojim prekrivamo pregledačev ispis
     („dd.mm.gggg.", „TT.MM.JJJJ", „يوم/شهر/سنة") na nekim jezicima je duži
     od toga. Do sada su se prelamala nasumično, pa je veznik „do" ostajao
     uz gornje polje kao da je njegov nastavak. Sada idu jedno ispod drugog,
     preko cele širine, a veznik stoji između njih. */
  .datum { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .datum-do { text-align: center; }
  .datum input[type="date"] { width: 100%; min-width: 0; }

  /* Natpis polja i naziv izabranog skupa zemalja smeju da se prelome — na
     uskom ekranu nemaju kud da se prošire, a `nowrap` ih je gurao preko ivice. */
  .flab { white-space: normal; }
  .multi > summary { white-space: normal; }
  .split { grid-template-columns: 1fr; gap: 26px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  /* Podnožje: dve kolone na tabletu, kompozicija ostaje centrirana. */
  .footer .grupe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .band .actions { margin-inline-start: 0; }
}

/* ---------- meni na uskom ekranu ----------

   Prag je 820 px, a ne 640 kao za ostala pravila telefona, i to je jedina
   stvar koja se ovde seli. Razlog je izmeren: sa četiri stavke meni se lomio
   u dva reda već ispod 700 px, a sa petom („Kontakt") ispod 750 px — pri čemu
   se dugme sa tri crte pojavljivalo tek na 640, pa je između te dve granice
   meni ispadao iz trake i gurao birač jezika van ekrana. 820 ostavlja zalihu
   i za jezike sa dugim nazivima stavki (mađarski, tajski, indonežanski).

   Ostatak rasporeda i dalje prelazi na telefonski oblik na 640 px — tamo se
   ništa nije menjalo.                                                       */
@media (max-width: 820px) {
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; inset-inline: 0; top: 64px; background: var(--dark);
    padding: 8px 20px 18px; border-bottom: 1px solid #453D33;
  }
  .nav.open a { padding: 12px 0; font-size: 17px; border-bottom: 1px solid #3A332A; }
  .burger { display: block; }
  .topbar .wrap { position: relative; }
}

/* Pojas 821–880 px: tik iznad praga meni se vraća u traku i staje u jedan red
   na dvadeset od dvadeset dva jezika. Indonežanski („Untuk penyelenggara") i
   vijetnamski („Dành cho ban tổ chức") su za dlaku duži i lomili su se u dva
   reda — izmereno: indonežanskom treba 880 px, vijetnamskom 840.

   Umesto da zbog dva jezika svima ranije iskoči dugme sa tri crte, u tom uskom
   pojasu se samo malo stisnu razmaci. Slova ostaju iste veličine.            */
@media (min-width: 821px) and (max-width: 880px) {
  .topbar .wrap { gap: 12px; }
  .nav { gap: 14px; margin-inline-start: 0; }
  .topbar .right { gap: 10px; }
}

@media (max-width: 1000px) {
  .cards.force-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .section { padding: 34px 0; }
  .hero .wrap { padding-top: 30px; padding-bottom: 30px; }
  .hero .hero-photo { border-radius: 12px; }
  .hero .hero-photo img { height: 230px; }
  .naslov-red .photo img { height: 120px; }
  .cards.force-3,
  .cards.force-2 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  /* Na telefonu grupe idu jedna ispod druge, pa se podnožje razvuče: četiri
     naslova i sedam veza jedno pod drugim. Zato su ovde praznine još kraće
     nego na desktopu — razmak je taman toliki da se grupe razlikuju. Veličina
     slova i površina za dodir ostaju iste. */
  .footer .wrap { padding-top: 22px; padding-bottom: 14px; }
  .footer .brend svg { width: 30px; height: 30px; }
  .footer .brend .ime { margin-top: 4px; }
  .footer .brend .parola,
  .footer .brend .nosilac { line-height: 1.4; }
  .footer .grupe { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; padding-top: 14px; }
  .footer h4 { margin-bottom: 4px; }
  .footer .bar { margin-top: 14px; padding-top: 10px; }
  .phone-shot { width: 230px; }

  /* Na telefonu je kolona široka koliko i ekran, pa telefon i tekst jedno
     pored drugog ostavljaju obojima premalo — slažu se jedno ispod drugog,
     a dugme ide preko cele širine da se lakše pogodi palcem. */
  .app-vrh { flex-direction: column; align-items: center; text-align: center; }
  .app-tekst { width: 100%; }
  .app-oko { justify-content: center; }
  .app-kad { margin-inline-start: 0; }
  .app-bezneta { justify-content: center; }
  .app-korak { text-align: start; }
  .app-koraci .btn { width: 100%; }

  /* Dugme preko cele širine kartice — lakše se pogađa palcem. */
  .kontakt-kartica .btn { align-self: stretch; }
}