/* =========================================================
   common.css – pravila koja koriste SVE stranice
   (početna + 4 demo sajta). Boje i fontovi su u
   posebnim fajlovima za svaku stranicu.
   ========================================================= */

/* Širina elementa uključuje padding i border – lakše računanje */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  text-decoration: none;
}

/* ---------- Dvojezičnost ----------
   Svaki tekst postoji dvaput:
   <span class="bs">…</span><span class="en">…</span>
   <html data-lang="…"> odlučuje koji se vidi. */
[data-lang="en"] .bs,
[data-lang="bs"] .en {
  display: none;
}

/* ---------- Mreže (grid) ----------
   .g2 = 2 kolone, .g3 = 3, .g4 = 4, .g6 = 6 stavki u 3 kolone.
   Na manjim ekranima se kolone smanjuju. */
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .g3 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .g2, .g4, .g6 { grid-template-columns: 1fr; } }

/* ---------- Prekidač jezika BS / EN ----------
   Boje dolaze iz varijabli koje svaka stranica postavi sama:
   --lang-idle (neaktivan), --lang-active (aktivan), --lang-line (linija). */
.lang-switch {
  display: inline-flex;
  align-items: center;
}

.lang-switch button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  margin: 0;
  font-family: inherit;
  letter-spacing: 0.14em;
  cursor: pointer;
  color: var(--lang-idle);
}

.lang-switch button[aria-pressed="true"] {
  color: var(--lang-active);
  border-bottom-color: var(--lang-line);
}

/* Tekst koji se ne vidi na ekranu, ali ga čitač ekrana pročita
   (npr. "Meni" na hamburger dugmetu) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Vidljiv okvir kad se kreće tastaturom (Tab) */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Klik na link unutar stranice (#usluge, #vrh…) – glatko klizanje
   umjesto skoka. Isključeno ako korisnik ne želi animacije. */
html {
  scroll-behavior: smooth;
}

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

/* =========================================================
   Animacije
   Sve je unutar "no-preference": ako korisnik u sistemu
   isključi animacije, ovaj blok se uopšte ne primjenjuje.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Pri učitavanju: hero "ispliva" odozdo ----------
     Čisti CSS, ne treba JavaScript. "both" = element je nevidljiv
     prije početka i ostaje vidljiv poslije kraja animacije. */
  @keyframes intro-up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  .hero-eyebrow,
  .hero-text > *,
  .hero-visual,
  .hero-image,
  .quick-bar {
    animation: intro-up 0.9s cubic-bezier(0.2, 0.65, 0.3, 1) both;
  }

  /* Jedan za drugim: natpis → naslov → tekst → dugmad */
  .hero-text > :nth-child(1) { animation-delay: 0.10s; }
  .hero-text > :nth-child(2) { animation-delay: 0.20s; }
  .hero-text > :nth-child(3) { animation-delay: 0.30s; }
  .hero-text > :nth-child(4) { animation-delay: 0.40s; }

  .hero-visual,
  .hero-image {
    animation-duration: 1.1s;
    animation-delay: 0.35s;
  }

  .quick-bar {
    animation-delay: 0.55s;
  }

  /* ---------- Pri skrolanju: [data-reveal] (vidi animations.js) ----------
     .js-anim postavlja JavaScript – bez njega se ništa ne skriva. */
  .js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 0.8s cubic-bezier(0.2, 0.65, 0.3, 1) var(--reveal-delay, 0ms),
      transform 0.8s cubic-bezier(0.2, 0.65, 0.3, 1) var(--reveal-delay, 0ms);
  }

  .js-anim [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Glatki hover na dugmadima (sve stranice) ----------
   Boja, pozadina, okvir i posvjetljenje se mijenjaju 0,2 s,
   umjesto da "skoče" odjednom. ease = počne brže, završi blago. */
.btn,
.nav-cta,
.quick-btn,
.booking-btn,
form button,
.lang-switch button,
.menu-toggle,
.social a {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}