/* ==========================================================================
   KUĆA ZDRAVLJA, karusel
   Sadržaj koji bi inače pao u dva-tri reda kreće se u jednoj traci.
   Osnova je nativni scroll-snap: prevlačenje prstom radi bez ijedne linije
   JavaScripta, a JS samo dodaje samohodno pomeranje i dugmad.
   ========================================================================== */

.kz-karusel { position: relative; }

/* Traka koja skroluje */
.kz-karusel__traka {
  display: flex;
  gap: var(--kz-r-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--kz-r-2) var(--kz-r-4);
  /* Prostor da senka kartice ne bude odsečena */
  padding-inline: 2px;
  margin-inline: -2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kz-karusel__traka::-webkit-scrollbar { display: none; }

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

/* Jedna stavka */
.kz-karusel__stavka {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(15.5rem, 26vw, 20rem);
  display: flex;
}
.kz-karusel__stavka > * { width: 100%; }

/* Šire stavke za sadržaj koji traži prostor (preporuke, prostorije) */
.kz-karusel--siroki .kz-karusel__stavka { width: clamp(17.5rem, 33vw, 26rem); }
.kz-karusel--uski   .kz-karusel__stavka { width: clamp(13.5rem, 20vw, 16.5rem); }

/* --- Upravljanje ---------------------------------------------------------- */
.kz-karusel__kontrole {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kz-r-4);
  margin-top: var(--kz-r-4);
}

.kz-karusel__strelice { display: flex; gap: var(--kz-r-2); }

.kz-karusel__strelica {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--kz-linija);
  border-radius: var(--kz-zaob-pun);
  background: var(--kz-bela);
  color: var(--kz-tekst);
  padding: 0;
  transition: background var(--kz-brzo), color var(--kz-brzo),
              border-color var(--kz-brzo), opacity var(--kz-brzo);
}
.kz-karusel__strelica:hover:not(:disabled) {
  background: var(--kz-zelena-duboka);
  border-color: var(--kz-zelena-duboka);
  color: var(--kz-na-primarnoj);
}
.kz-karusel__strelica:disabled { opacity: 0.35; cursor: not-allowed; }

.kz-sekcija--tamna .kz-karusel__strelica {
  background: transparent;
  border-color: color-mix(in srgb, var(--kz-bela) 30%, transparent);
  color: var(--kz-bela);
}
.kz-sekcija--tamna .kz-karusel__strelica:hover:not(:disabled) {
  background: var(--kz-bela);
  color: var(--kz-zelena-najdublja);
}

/* Tačkice, prikazuju napredak, klikom se skače na stranu */
.kz-karusel__tacke {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kz-karusel__tacka {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kz-linija);
  transition: background var(--kz-brzo), width var(--kz-lako);
}
.kz-karusel__tacka.je-aktivna {
  background: var(--kz-zelena-duboka);
  width: 20px;
  border-radius: var(--kz-zaob-pun);
}
.kz-sekcija--tamna .kz-karusel__tacka { background: color-mix(in srgb, var(--kz-bela) 28%, transparent); }
.kz-sekcija--tamna .kz-karusel__tacka.je-aktivna { background: var(--kz-zlatna); }

/* Sitna napomena za prevlačenje, samo na dodirnim ekranima */
.kz-karusel__nagovestaj {
  display: none;
  font-size: var(--kz-t-xs);
  color: var(--kz-tekst-tih);
}
@media (hover: none) {
  .kz-karusel__strelice { display: none; }
  .kz-karusel__nagovestaj { display: inline; }
}

/* Blago bledi ivice da se vidi da traka ide dalje */
.kz-karusel::before,
.kz-karusel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 3.5rem;
  width: 2.5rem;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--kz-lako);
}
.kz-karusel::before {
  left: -2px;
  background: linear-gradient(90deg, var(--kz-pozadina), transparent);
}
.kz-karusel::after {
  right: -2px;
  background: linear-gradient(270deg, var(--kz-pozadina), transparent);
}
.kz-karusel.ima-levo::before  { opacity: 1; }
.kz-karusel.ima-desno::after { opacity: 1; }

.kz-sekcija--utisnuta .kz-karusel::before { background: linear-gradient(90deg, var(--kz-pozadina-utisnuta), transparent); }
.kz-sekcija--utisnuta .kz-karusel::after  { background: linear-gradient(270deg, var(--kz-pozadina-utisnuta), transparent); }
.kz-sekcija--tamna .kz-karusel::before { background: linear-gradient(90deg, var(--kz-zelena-najdublja), transparent); }
.kz-sekcija--tamna .kz-karusel::after  { background: linear-gradient(270deg, var(--kz-zelena-najdublja), transparent); }

@media (max-width: 34rem) {
  .kz-karusel__stavka,
  .kz-karusel--siroki .kz-karusel__stavka,
  .kz-karusel--uski .kz-karusel__stavka {
    width: min(78vw, 20rem);
  }
  .kz-karusel__traka { gap: var(--kz-r-4); }
  .kz-karusel::before, .kz-karusel::after { width: 1.25rem; }
}