/* The public pages. Deliberately not the app shell: a visitor has no sidebar,
   no building and no account, and dressing the marketing page as the product
   makes both look worse. */
.javno-sirina { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

.javno-traka {
  background: var(--ds-primary-darker, #182a52);
  padding: .85rem 0;
}
.javno-traka a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.javno-traka a:hover { color: #fff; }
/* The wordmark is not a nav item: it stays at full white so the mark beside it
   reads as one lockup rather than a dimmed link. */
.javno-marka, .javno-marka:hover { color: #fff; }
.javno-marka i { color: var(--ds-primary-light, #8ea8dd); }

.javno-hero {
  background: linear-gradient(160deg,
              var(--ds-primary-darker, #182a52) 0%,
              var(--ds-primary-dark, #27407b) 62%,
              var(--ds-primary, #3457a6) 100%);
  color: #fff;
  padding: 4rem 0 4.5rem;
}
/* `theme.css` hands every heading an explicit `--ds-heading-color`, and an
   explicit colour beats the white this section merely passes down — which left
   the one headline on the page in near-black on near-black. Explicit has to be
   answered with explicit. */
.javno-hero h1, .javno-hero h2 { color: inherit; }
.javno-hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; }
.javno-uvod { color: rgba(255, 255, 255, .84); max-width: 54ch; }
.javno-sitno { color: rgba(255, 255, 255, .6); }
/* The login card sits on the gradient, so it keeps the app's own light
   surface rather than inheriting the hero's white text. */
.javno-hero .card { color: var(--ds-gray-800, #1c252e); }

/* No height here: the feature grid asks for equal heights with `h-100` where
   it wants them. Forcing it globally stretched the aside on the registration
   page into an empty box the length of the form. */
.javno-kartica {
  background: #fff;
  border: 1px solid var(--ds-gray-200, #e9edf1);
  border-radius: 1rem;
  padding: 1.25rem;
}

.javno-naglasak { background: var(--ds-primary-lighter, #e3e9f7); }

.javno-koraci { padding-left: 1.1rem; }
.javno-koraci li { margin-bottom: .5rem; }

.javno-podnozje {
  background: var(--ds-gray-800, #1c252e);
  color: rgba(255, 255, 255, .7);
}
.javno-podnozje a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.javno-podnozje a:hover { color: #fff; }

/* ── Screenshots ──────────────────────────────────────────────────────────
   A strip of thumbnails that scrolls sideways, and a full-size view that
   opens on click. Both work with JavaScript off: the strip is an ordinary
   overflow-x list (drag, swipe, arrow keys), and the zoom is `:target`, so
   snimci.js only adds the drift and can be removed without breaking either. */
.snimci-traka {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0 0 .75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  /* The strip runs to the edge of the screen on a phone, where cutting it off
     at the text margin would hide that there is more to the right. */
  scroll-padding-left: 1.25rem;
}
.snimci-traka > li { flex: 0 0 auto; scroll-snap-align: start; }

.snimak-plocica {
  display: block;
  position: relative;
  width: 300px;
  text-decoration: none;
  color: inherit;
}
.snimak-plocica img {
  display: block;
  width: 300px;
  height: 170px;
  /* The screenshots are not all the same shape; crop from the top so the page
     heading of each screen survives. */
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--ds-gray-200, #e9edf1);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .08);
  transition: box-shadow .15s ease, transform .15s ease;
}
.snimak-plocica:hover img,
.snimak-plocica:focus-visible img {
  box-shadow: 0 .5rem 1.25rem rgba(20, 30, 50, .18);
  transform: translateY(-2px);
}
.snimak-naslov {
  display: block;
  margin-top: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
}
.snimak-uvecaj {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .45rem;
  border-radius: .5rem;
  font-size: .6875rem;
  font-weight: 700;
  color: #fff;
  background: rgba(24, 42, 82, .78);
  opacity: 0;
  transition: opacity .15s ease;
}
.snimak-plocica:hover .snimak-uvecaj,
.snimak-plocica:focus-visible .snimak-uvecaj { opacity: 1; }

/* The full-size view. Hidden until its id is the fragment in the URL. */
.snimak-lupa { display: none; }
.snimak-lupa:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1080;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(12, 20, 38, .82);
}
.snimak-zavesa { position: absolute; inset: 0; }
.snimak-okvir {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0;
  padding: .75rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
}
/* Width AND height capped, with `auto` on the other axis: `width:100%` plus a
   max-height letterboxes the picture inside a box wider than itself.
   The cap is what is left of the window once the frame's own padding and the
   caption are paid for, so the picture takes every pixel it can. */
.snimak-slika { display: block; cursor: zoom-in; }
.snimak-okvir img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  width: auto;
  height: auto;
  border-radius: .5rem;
}
.snimak-okvir figcaption {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .75rem .25rem .25rem;
  font-size: .875rem;
}
.snimak-opis { color: var(--ds-gray-600, #637381); max-width: 60ch; }
.snimak-zatvori { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .snimci-traka { scroll-behavior: auto; }
  .snimak-plocica img { transition: none; }
}

/* ── Zoomed screenshot: arrows, counter, dots ───────────────────────────────
   All of it is links between `:target` overlays, so it navigates with
   JavaScript off. The arrows sit above the backdrop but outside the figure, so
   the click that closes and the click that advances never overlap. */
.snimak-strelica {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(2px);
  transition: background .15s, transform .15s;
}
.snimak-strelica:hover,
.snimak-strelica:focus-visible {
  background: rgba(255, 255, 255, .28);
  color: #fff;
}
.snimak-strelica.levo  { left: .75rem; }
.snimak-strelica.desno { right: .75rem; }
.snimak-strelica.levo:hover  { transform: translateY(-50%) translateX(-2px); }
.snimak-strelica.desno:hover { transform: translateY(-50%) translateX(2px); }

.snimak-brojac {
  margin-left: auto;
  color: var(--ds-gray-500, #919eab);
  font-variant-numeric: tabular-nums;
}
/* The counter takes the auto margin now, so Zatvori sits next to it. */
.snimak-zatvori { margin-left: .5rem; }

.snimak-tackice {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: .5rem;
}
.snimak-tackice a {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  transition: background .15s, transform .15s;
}
.snimak-tackice a:hover { background: rgba(255, 255, 255, .7); }
.snimak-tackice a.tekuca {
  background: #fff;
  transform: scale(1.25);
}

/* On a phone the arrows would sit on top of the picture, so they move to the
   bottom corners where a thumb reaches them. */
@media (max-width: 576px) {
  .snimak-strelica { top: auto; bottom: 1rem; transform: none; }
  .snimak-strelica.levo:hover,
  .snimak-strelica.desno:hover { transform: none; }
  .snimak-tackice { bottom: 1.6rem; }
}

/* ── „Puna veličina” ────────────────────────────────────────────────────────
   A checkbox, not a script: the input sits just inside the overlay so the
   sibling combinator reaches the frame, and the two labels that toggle it are
   the picture itself and the button in the caption. With JavaScript off the
   zoom therefore still works — which matters more here than anywhere else on
   the page, because reading the numbers is the whole reason the overlay is
   worth opening.

   Zoomed, the picture drops both caps and takes the width the capture was
   made at (2400px, halved on a narrow window so a phone is not asked to pan
   across an image four screens wide), and the pane around it scrolls. */
.snimak-zum:checked ~ .snimak-okvir {
  max-width: none;
  width: calc(100vw - 2rem);
}
.snimak-zum:checked ~ .snimak-okvir .snimak-slika {
  overflow: auto;
  max-height: calc(100vh - 11rem);
  cursor: zoom-out;
}
.snimak-zum:checked ~ .snimak-okvir .snimak-slika img {
  max-width: none;
  max-height: none;
  width: min(2400px, 200vw);
  border-radius: 0;
}
/* Panning is what the pointer is for once the picture no longer fits, so the
   controls that live over the image step out of the way. */
.snimak-zum:checked ~ .snimak-strelica,
.snimak-zum:checked ~ .snimak-tackice { display: none; }

/* The checkbox itself is clipped to a pixel, so the ring that says „this is
   what Space will toggle” has to be drawn on the label instead. */
.snimak-zum:focus-visible ~ .snimak-okvir [data-zum] {
  outline: 2px solid var(--ds-primary, #3457a6);
  outline-offset: 2px;
}

/* Only one of each pair of labels is ever the true one. */
.zum-umanji, .ekran-izadji { display: none; }
.snimak-zum:checked ~ .snimak-okvir .zum-uvecaj { display: none; }
.snimak-zum:checked ~ .snimak-okvir .zum-umanji { display: inline; }

/* ── „Ceo ekran” ────────────────────────────────────────────────────────────
   The Fullscreen API has no markup form, so the button ships `hidden` and
   snimci.js reveals it where the browser has one. Everything below only ever
   applies while the browser is actually in fullscreen. */
.snimak-lupa:fullscreen {
  padding: .75rem;
  background: rgba(8, 14, 28, .96);
}
.snimak-lupa:fullscreen .snimak-okvir { max-width: none; width: calc(100vw - 1.5rem); }
.snimak-lupa:fullscreen .snimak-okvir img,
.snimak-lupa:fullscreen .snimak-zum:checked ~ .snimak-okvir .snimak-slika {
  max-height: calc(100vh - 8rem);
}
.snimak-lupa:fullscreen .ekran-udji { display: none; }
.snimak-lupa:fullscreen .ekran-izadji { display: inline; }

.snimak-dugme { margin-left: .5rem; }