/* =====================================================================
   RESPONSIVE — mobile nije smanjeni desktop
   Prelomne tačke: 1180 · 1024 · 860 · 640 · 430
   ===================================================================== */

/* ---------- 1180px: uži hero, manje plutajućih elemenata ---------- */
@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .float.f6 { display: none; }              /* desktop 6 → 5 */
  .news__item { grid-template-columns: 116px 1fr; }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer__contact { grid-column: 2 / -1; }
}

/* ---------- 1366px: hamburger preuzima ------------------------------
   Izmjereno u pregledaču, ne procijenjeno. Naziv škole se NE prelama
   (`white-space: nowrap`), pa kad ponestane prostora on se prelije preko
   navigacije — upravo to je bilo preklapanje na 1200–1280 px.

   Razmak između naziva i prvog linka menija:
     1320 px → −6 px   (praktično se dodiruju)
     1260 px → +40 px  (preklapanje)
     1366 px → dovoljno vazduha

   Zato desktop navigacija ostaje samo na ≥1366 px; ispod toga preuzima
   hamburger. Font se NIGDJE ne smanjuje. */
@media (max-width: 1365px) {
  .nav-desktop { display: none; }
  .burger { display: inline-flex; }
}

/* ---------- Naziv škole koji ne stane pored menija -------------------
   Okvir zaglavlja je ograničen na `--shell` (1240 px), pa ŠIRI EKRAN NE
   DAJE VIŠE PROSTORA — na 1440 i na 1920 mjere su identične. Kolizija
   zato ne zavisi od širine prozora nego od dužine naziva škole:

     naziv                                  širina   razmak do menija
     „JU OŠ „Milorad Musa Burzan““          217 px   +32 px
     „ЈУ ОШ „Милорад Муса Бурзан““          237 px   +13 px
     „Osnovna škola „Milorad Musa Burzan““  283 px   −33 px
     „Основна школа „Милорад Муса Бурзан““  309 px   −40 px

   Nijedan `@media` upit to ne može riješiti jer CSS ne zna širinu teksta,
   a ćirilica isti naziv širi za 8–9%. Zato `assets/js/ui.js` jednom
   izmjeri stvarni razmak i, ako je manji od 28 px, postavi ovu klasu.
   Latinica i engleski koji staju ne dobijaju je i ponašaju se kao i do
   sada. Naziv se NIKAD ne prelama — radije ide hamburger. */
/* Stepen 1 — nestaje razmak između stavki menija (~8 px). */
.nav-s1 .nav-desktop__list { gap: 0; }

/* Stepen 2 — uži bočni padding linkova (~34 px). Font se NE dira. */
.nav-s2 .nav-desktop__list { gap: 0; }
.nav-s2 .nav-link { padding-inline: .5rem; }

/* Stepen 3 — posljednja instanca: hamburger. */
.nav-compact .nav-desktop { display: none; }
.nav-compact .burger { display: inline-flex; }

/* Zaglavlje smije biti šire od sadržaja na velikim ekranima.
   Sadržaj ostaje na 1240 px; samo traka zaglavlja dobija vazduh da bi
   puni meni stao i na dužem nazivu škole. */
@media (min-width: 1440px) {
  .site-header__inner { width: min(100% - (var(--gutter) * 2), 1360px); }
}
@media (min-width: 1600px) {
  .site-header__inner { width: min(100% - (var(--gutter) * 2), 1440px); }
}

/* Bez JavaScripta mjerenje ne postoji, pa ćirilica — koja je izmjereno
   najšira i ne staje ni na 1920 px — odmah dobija hamburger. Kad JS radi,
   odluku donosi mjerenje, pa se meni vrati čim naziv bude dovoljno kratak. */
.no-js body.script-cyr .nav-desktop { display: none; }
.no-js body.script-cyr .burger { display: inline-flex; }

/* ---------- 1100px: nestaje i ikona pretrage iz zaglavlja ---------- */
@media (max-width: 1100px) {
  .hide-below-lg { display: none !important; }
}

/* ---------- 1024px: tablet ---------- */
@media (max-width: 1024px) {
  :root { --reveal-y: 18px; }

  .hide-below-lg { display: none !important; }

  .hero { min-height: auto; padding-top: clamp(6rem, 14vh, 8rem); }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
  .hero__copy { max-width: 640px; }
  .hero__lead { max-width: none; }
  .hero__stage { max-width: 680px; width: 100%; margin-inline: auto; }
  .float { width: clamp(34px, 6vw, 52px); }
  .float.f5 { display: none; }               /* tablet: 4 elementa */
  .scroll-hint { display: none; }

  .dock { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .news { grid-template-columns: 1fr; }
  .news__side { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .news__item--plain { grid-column: 1 / -1; }

  .wall { grid-template-columns: 1fr; grid-template-areas: "hero" "list" "side"; }
  .wall--no-side { grid-template-areas: "hero" "list"; }
  .wall__hero img { min-height: 260px; }

  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .gallery { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: clamp(120px, 18vw, 165px); }

  .contact__panel { grid-template-columns: 1fr; }
  .map-slot, .schoolmap { min-height: 280px; }
}

/* ---------- 860px: gubi se i sekundarni CTA iz header-a ---------- */
@media (max-width: 860px) {
  html { scroll-padding-top: 80px; }

  .hide-below-md { display: none !important; }
  /* Prekidač u zaglavlju bi na telefonu potrošio previše širine —
     seli se u mobilni meni, gdje ima pune nazive. */
  .langsw--header { display: none; }

  .doc { grid-template-columns: 62px 1fr; grid-template-areas: "type main" "act act"; }
  .doc__type { grid-area: type; }
  .doc__main { grid-area: main; }
  .doc__actions { grid-area: act; justify-content: flex-start; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__contact { grid-column: auto; }

  .contact__social { flex-wrap: wrap; }
}

/* ---------- 640px: telefon ---------- */
@media (max-width: 640px) {
  :root {
    --sec-y: clamp(3.2rem, 11vw, 4.6rem);
    --reveal-y: 14px;
    --stagger: 55ms;
    --lift: -3px;
  }

  .hide-below-sm { display: none !important; }

  /* HERO — sopstvena mobilna kompozicija */
  .hero { padding-top: 5.6rem; padding-bottom: 2.5rem; }
  .hero__grid { gap: 2rem; }
  .hero__title { font-size: clamp(2.1rem, 8.6vw, 2.9rem); }
  .hero__lead { font-size: 1rem; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .hero__cta .btn { width: 100%; }
  .hero__facts { gap: 1.1rem 1.6rem; margin-top: var(--s-6); padding-top: var(--s-4); }
  .hero__facts .num { font-size: 1.55rem; }

  .hero__stage { max-width: none; }
  /* Telefon: kadar ostaje pejzažni (3:2), samo malo tješnji zum na zgradu. */
  .stage__viewport {
    aspect-ratio: 3 / 2;
    --photo-scale: 1.42;
    --photo-x: 53%;
    --photo-y: 17%;
  }
  .stage__ring { display: none; }
  /* mobile: 2–3 plutajuća elementa */
  .float { width: 38px; }
  .float.f2, .float.f4 { display: none; }
  .float.f1 { top: -3%; left: 2%; }
  .float.f3 { bottom: 4%; left: -2%; }

  .dock { grid-template-columns: 1fr; padding: .7rem; border-radius: var(--r-lg); }
  .dock__item { min-height: 78px; }

  .news__side { grid-template-columns: 1fr; }
  .news__item { grid-template-columns: 104px 1fr; }
  .news__title { font-size: 1.18rem; }

  /* DOGAĐAJI — i na telefonu ostaje horizontalni carousel.
     Ranije je ovdje timeline postajao vertikalan (`display: grid`), pa se
     cijela lista predstojećih događaja slagala jedna ispod druge i rastezala
     početnu stranu. Sada kartica zadržava svoj mobilni izgled — kompaktna,
     sa datumom lijevo — ali se kreće vodoravno prevlačenjem.
     Širina je namjerno ispod pune širine ekrana: vidi se sljedeća kartica,
     pa je jasno da se može prevući. */
  .section--events .rail-nav { display: none; }   /* na dodir je swipe primaran */
  .tl { padding-bottom: 14px; }
  .tl__item { width: min(86vw, 320px); }
  .tl__card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: .9rem;
    border-top: 1px solid var(--c-line); border-left: 4px solid var(--acc);
    padding: .95rem 1rem;
  }
  .tl__date { flex-direction: column; align-items: center; gap: 0; min-width: 46px; }
  .tl__date strong { font-size: 1.9rem; }
  .tl__date span { font-size: .68rem; }

  .stats { grid-template-columns: 1fr; }
  .stat { display: grid; grid-template-columns: auto 1fr; text-align: left; align-items: center; gap: 0 1.1rem; padding: 1.5rem 1.2rem; }
  /* Isti faktor kao --fs-stat (×0.75), da hijerarhija bude ista na svim širinama. */
  .stat__value { grid-row: 1 / 3; font-size: clamp(2.25rem, 11.25vw, 3rem); }
  .stat__label { align-self: end; }
  .stat__note { align-self: start; margin-top: .15rem; }
  .stat::after { display: none; }

  .wall__side { grid-template-columns: 1fr; }
  .wall__hero-body h3 { font-size: 1.15rem; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal { gap: .8rem; }

  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 128px; }
  /* Na uzem kadru znak Instagrama smije biti jos tisi. */
  .g__ig { width: 26px; height: 26px; top: .45rem; right: .45rem; }
  .g__ig .ico { width: 14px; height: 14px; }
  .g__badge { top: .45rem; left: .45rem; font-size: .64rem; padding: .2rem .48rem; }
  .g--wide { grid-column: span 2; }

  .docs__filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .docs__filters::-webkit-scrollbar { display: none; }

  .contact__panel { border-radius: var(--r-xl); }

  /* Unutrašnje zaglavlje je na telefonu osjetno niže — sadržaj je bitniji */
  .ihero { min-height: 0; padding-top: 5.4rem; padding-bottom: 1.6rem; }
  .ihero__title { font-size: clamp(1.55rem, 6.4vw, 2rem); }
  .ihero__lead { font-size: 1rem; margin-top: .8rem; }
  .ihero--media .ihero__inner { grid-template-columns: 1fr; }
  .ihero__blob--1 { width: 60vw; height: 40vw; }
  .ipage__grid { grid-template-columns: 1fr; }
  .ipage__aside { position: static; }
  .afeature { grid-template-columns: 1fr; }
  .postnav { grid-template-columns: 1fr; }
  /* Datum i na telefonu ostaje u jednom redu — kolona prati novi format. */
  .evcard { grid-template-columns: 100px minmax(0,1fr); }
  .evcard__date strong { font-size: 1.05rem; }
  .evcard__date span { font-size: .66rem; }
  .evcard__actions { grid-column: 1 / -1; }
  .docrow { grid-template-columns: 58px minmax(0,1fr); }
  .docrow__actions { grid-column: 1 / -1; }
  .vtl { padding-left: 2.6rem; }
  .vtl__item::before { left: -2.6rem; }

  /* Zaposleni na telefonu: dvije kartice po redu, kompaktnije */
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .pcard { padding: 1rem .6rem .9rem; gap: .3rem; }
  .pcard__portrait { width: 96px; height: 96px; margin-bottom: .3rem; }
  .pcard__photo { width: 78px; height: 78px; }
  .pcard__ring2 { width: 32px; height: 32px; right: 2px; bottom: 4px; }
  .pcard__initials { font-size: 1.4rem; }
  .pcard__fallback-ico { width: 40px; height: 40px; }
  .pcard__name { font-size: .92rem; }
  .pcard__role { font-size: .78rem; }
  .pcard__mail { font-size: .7rem; }
  /* Navigator vise nije zalijepljen, pa `top` nema sta da pomjera.
     Ostaje samo razmak za sidro, da naslov sekcije ne zavrsi pod zaglavljem. */
  .subject { scroll-margin-top: 96px; }

  /* Uzi ekran: tijesnije kapsule, da dva naziva stanu u red kad mogu. */
  .subjnav__list { gap: .35rem; }
  .subjnav__pill { padding: .45rem .75rem; font-size: var(--fs-xs); }
  .staffsearch__input { min-height: 48px; }

  /* ---------------------------------------------------------------
     TELEFON: navigator se sazima u jedan red.
     Dvadeset i jedna kapsula u deset do dvanaest redova stalno otvorena
     pojede pola ekrana prije prve kartice. Pretraga ostaje IZNAD i uvijek
     vidljiva — na telefonu je ona glavni put do zaposlenog.
     ------------------------------------------------------------ */
  .subjnav { padding: 0; margin-bottom: 1.2rem; }

  .subjnav__toggle {
    display: flex; align-items: center; gap: .5rem;
    min-height: 48px; padding: .6rem 1rem;
    border-radius: var(--r-pill);
    background: var(--c-surface-2); border: 1.5px solid var(--c-line);
    font-family: var(--f-head); font-weight: 700; font-size: var(--fs-sm);
    color: var(--c-ink-2); cursor: pointer;
    list-style: none;
  }
  .subjnav__toggle:hover { border-color: var(--c-line-strong); color: var(--c-ink); }
  .subjnav__toggle:focus-visible { outline: 3px solid var(--a-sky-ink); outline-offset: 3px; }
  .subjnav__caret {
    margin-left: auto;
    transition: transform var(--motion-fast) var(--ease-standard);
  }
  .subjnav[open] .subjnav__caret { transform: rotate(180deg); }

  .subjnav[open] .subjnav__list { padding-top: .7rem; }
  .pprofile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* Vrlo uski telefoni: jedna kartica po redu je čitljivija od dvije stisnute */
@media (max-width: 359px) {
  .pgrid { grid-template-columns: 1fr; }

  .site-footer__bar { justify-content: flex-start; }
}

/* ---------- 480px: brend se skuplja prije nego dodirne hamburger ----
   Izmjereno na 430 px: naziv škole je ulazio 6 px u dugme menija, jer se
   ovo pravilo hvatalo tek ispod 430. Prag je zato podignut na 480 px —
   mijenja se samo zaglavlje, ništa drugo. */
@media (max-width: 480px) {
  .brand__text span { display: none; }
  .brand__text strong { font-size: .82rem; line-height: 1.15; }
  .brand__mark { height: 44px; }
  .brand { gap: .55rem; }
}

/* ---------- 430px: mali telefon (390×844 referenca) ---------- */
@media (max-width: 430px) {
  .brand--foot img { height: 108px; }
  .tl__item { width: min(78vw, 292px); }
  .rail__cell { width: min(72vw, 262px); }
  .news__item { grid-template-columns: 92px 1fr; }
  .news__body { padding: .95rem 1rem; }
  .gallery { grid-auto-rows: 118px; }
}

/* ---------- Pokazivač: hover efekti samo tamo gdje hover postoji ---- */
@media (hover: none) {
  .card-hover:hover { transform: none; }
  .card-hover:hover img { transform: none; }
  .g__cap { opacity: 1; transform: none; }
  .g__link::after { opacity: .85; }
}

/* =====================================================================
   REDUCED MOTION — sadržaj ostaje 100% funkcionalan, pokret nestaje
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }

  /* Sve što JS sakriva zbog animacije — odmah vidljivo */
  .js .reveal > *,
  .js .reveal:not(:has(> *)),
  .js [data-intro] { opacity: 1 !important; transform: none !important; }
  .js [data-reveal-text] { clip-path: none !important; }

  /* Parallax, drift, morphing, traka partnera, glow — isključeno */
  .bg-mesh, .bg-blob, .stage__depth, .stage__viewport, .stage__ring,
  .float, .pmarquee__track, .badge__dot, .map-slot__pin, .scroll-hint__track span {
    animation: none !important;
  }

  /*
   * Traka saradnika bez kretanja: postaje običan red kroz koji se listalo
   * prstom ili mišem. Kopije koje postoje SAMO zbog neprekidne animacije se
   * sklanjaju — bez kretanja nemaju čemu da služe, a čitač ekrana i tabulator
   * ih ionako nikad nisu ni dobijali.
   */
  .pmarquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .pmarquee__track { width: auto; }
  .pmarquee__track > .pmark[aria-hidden="true"] { display: none; }
  .float { transform: none !important; }
  .cursor-glow { display: none !important; }
  .scroll-progress { display: none; }

  .card-hover:hover, .dock__item:hover, .tl__card:hover,
  .sec-card:hover, .wall__row:hover, .doc:hover { transform: none !important; }

  /* Kartice „Zivota skole“ i logotipi saradnika — bez pokreta na hover. */
  .g__link:hover, .g__link:focus-visible,
  .g__link:hover img, .g__link:focus-visible img,
  a.pmark__inner:hover, a.pmark__inner:focus-visible { transform: none !important; }
}

/* ---------- Forsirani kontrast / high contrast ---------- */
@media (forced-colors: active) {
  .btn, .chip, .doc, .dock__item, .tl__card, .sec-card { border: 1px solid CanvasText; }
  .bg-system, .cursor-glow { display: none; }
}

/* ---------- Štampa ---------- */
@media print {
  .bg-system, .cursor-glow, .site-header, .mmenu, .scroll-progress,
  .scroll-hint, .pmarquee, .rail-nav, .to-top { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.2rem; page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* =====================================================================
   MIKROMAPA ŠKOLE — zamjena kompozicije
   =====================================================================
   Izometrijskom prikazu treba ~900 px da bi šest oznaka stalo bez
   preklapanja (izmjereno). Ispod 1000 px se zato prikazuje pojednostavljen
   tlocrt. To NIJE umanjeni desktop: druga je kompozicija, manje elemenata
   i krupnije dodirne mete. */
@media (max-width: 999px) {
  .xmap__art--wide    { display: none; }
  .xmap__art--compact { display: block; max-width: 460px; margin-inline: auto; }

  .xmap { border-radius: var(--r-lg); }
  .xhot { padding: .28rem .6rem .28rem .28rem; gap: .45rem; }
  .xhot__pin { width: 34px; height: 34px; }
  .xhot__label strong { font-size: .84rem; }
  .xhot__label small  { font-size: .7rem; }
}

@media (max-width: 400px) {
  .xhot__label small { display: none; }
  .xhot__label strong { font-size: .82rem; }
}

@media (hover: none) {
  /* Bez hovera: tačke su odmah čitljive, bez zavisnosti od prelaska mišem. */
  .xhot { background: #fff; }
  .xmap__scene, .xmap__floats { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xmap__floats .fl { animation: none; }
  .xmap__scene, .xmap__floats { transform: none; transition: none; }
  .xhot { transition: none; }
  a.xhot:hover, a.xhot:focus-visible { transform: translate(-50%, -50%); }
}

@media print {
  .xhot { box-shadow: none; }
  .xmap__floats { display: none; }
}

/* =====================================================================
   ŠKOLSKI KALENDAR — na telefonu uspravna lista, ne stisnute kartice
   ===================================================================== */

/* Dvije kolone se raspadaju prije nego što preview postane premali da bi
   se u njemu išta pročitalo. Redosljed tada: naslov → preview → dugmad. */
@media (max-width: 900px) {
  .skcal__top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.4rem, 4vw, 2rem);
  }
  .skcal__copy    { grid-column: 1; grid-row: 1; }
  .skcal__preview { grid-column: 1; grid-row: 2; }
  /* Razmak sada daje `row-gap`, pa margina ne smije da ga udvostruči. */
  .skcal__cta     { grid-column: 1; grid-row: 3; margin-top: 0; }
}

@media (max-width: 640px) {
  /* 85–92% širine sadržaja; list iza se povlači da ne pravi prelivanje. */
  .skcal__preview {
    --sheet-w: 88%;
    padding-right: 1rem; padding-bottom: 1rem;
  }
  .skcal__sheet--back { width: 82%; opacity: .7; transform: rotate(2deg); }
  .skcal__hint { bottom: 1.4rem; }

  .skcal__list { grid-template-columns: 1fr; gap: .6rem; }
  .skcal__item {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline; gap: .2rem .9rem;
    border-top: 1px solid var(--c-line); border-left: 4px solid var(--acc);
    padding: .9rem 1rem;
  }
  .skcal__dot { display: none; }
  .skcal__date { grid-row: 1 / 3; font-size: 1.05rem; min-width: 5.4rem; }
  .skcal__type { grid-column: 2; }
  .skcal__note { grid-column: 2; }
  .skcal__year { display: block; margin: .5rem 0 0; }
  .skcal__cta .btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   ŠKOLSKI KALENDAR — DOKUMENT na stranici kalendara

   Ispod 900 px ugrađeni PDF se gasi i prikazuju se slike strana. Razlog
   je platforma, ne ukus: iOS Safari i dio Android pregledača u ugrađenom
   PDF-u pokažu samo prvu stranu i ne daju da se skroluje. Ovako obje
   strane ostaju čitljive svugdje.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .pdfview__frame { display: none; }
  /* Alatna traka ostaje PRVA, pa se dugmad vide prije nego sto korisnik
     krene kroz strane. Kontrole se prelamaju same. */
  .pdfview__pages {
    display: grid; gap: clamp(1rem, 3vw, 1.6rem);
    padding: clamp(.7rem, 2.5vw, 1.1rem);
  }
}

/* Na vrlo uskom ekranu naziv i kontrole idu jedno ispod drugog. */
@media (max-width: 430px) {
  .pdfbar { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .pdfbar__acts { width: 100%; }
  .pdfbar__act { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .skcal__item { transition: none; }
  .skcal__item:hover { transform: none; }
  .skcal__preview,
  .skcal__sheet--front,
  .skcal__sheet--back,
  .skcal__hint { transition: none; }
  .skcal__preview:hover,
  .skcal__preview:focus-within { transform: none; }
  .skcal__preview:hover .skcal__sheet--back,
  .skcal__preview:focus-within .skcal__sheet--back { transform: rotate(2.5deg); }
  /* Nagovještaj i dalje mora da se pojavi — samo bez klizanja. */
  .skcal__preview:hover .skcal__hint,
  .skcal__preview:focus-within .skcal__hint { transform: translate(-50%, 0); }
}

/* =====================================================================
   SARADNICI SKOLE — traka logotipa
   Mijenjaju se samo tri mjere: razmak, sirina polja i najveca visina znaka.
   Broj vidljivih logotipa je posljedica tih mjera, nikad broja saradnika.
   ===================================================================== */
@media (max-width: 1024px) {
  /* razmak ~48 px, znak do 64 px */
  .pmarquee { --pm-gap: 3rem; --pm-slot: 130px; --pm-h: 64px; }
}
@media (max-width: 640px) {
  /* razmak ~36 px, znak do 52 px */
  .pmarquee { --pm-gap: 2.25rem; --pm-slot: 104px; --pm-h: 52px; }
  /* Uzi ekran trazi i uzi prelaz na ivicama, da se logo ne izgubi prerano. */
  .pmarquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}