/* ==========================================================================
   KUĆA ZDRAVLJA, komponente
   ========================================================================== */

/* --- HERO: domaćica otvara vrata -----------------------------------------
   Ona je domaćica, a NE sama kuća. Zato: portret sa jedne strane, poziv da
   se uđe sa druge, nikad ona "sa kućom u krilu".                          */
.kz-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 12%, var(--kz-zelena-najbleda) 0%, transparent 58%),
    linear-gradient(176deg, var(--kz-krem-topliji) 0%, var(--kz-krem) 62%);
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
}
.kz-hero::after {
  /* tanka zlatna nit na dnu, prag vrata */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--kz-zlatna) 40%, transparent) 30%,
              color-mix(in srgb, var(--kz-zlatna) 40%, transparent) 70%, transparent);
}

.kz-hero__mreza {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 60rem) {
  .kz-hero__mreza { grid-template-columns: 1fr; gap: var(--kz-r-7); }
  .kz-hero__slika { order: -1; max-width: 26rem; margin-inline: auto; }
}

.kz-hero__natpis { max-width: 34rem; }
.kz-hero__naslov {
  font-size: var(--kz-t-3xl);
  margin-bottom: var(--kz-r-5);
}
.kz-hero__naslov em {
  font-style: normal;
  color: var(--kz-zelena-duboka);
  position: relative;
  white-space: nowrap;
}
.kz-hero__uvod {
  font-size: var(--kz-t-md);
  line-height: var(--kz-visina-citak);
  color: var(--kz-tekst-blazi);
  margin-bottom: var(--kz-r-6);
}
.kz-hero__potpis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--kz-r-6);
  padding-left: var(--kz-r-4);
  border-left: 2px solid var(--kz-zlatna);
}
.kz-hero__potpis strong {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-baza);
  font-weight: 600;
  color: var(--kz-mastilo);
}
.kz-hero__potpis span {
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-tih);
}
.kz-hero__akcije { display: flex; flex-wrap: wrap; gap: var(--kz-r-3); }

.kz-hero__slika { position: relative; }
.kz-hero__okvir {
  position: relative;
  border-radius: var(--kz-zaob-lg);
  overflow: hidden;
  box-shadow: var(--kz-senka-lg);
  aspect-ratio: 3 / 4;
  background: var(--kz-krem-tamniji);
}
.kz-hero__okvir img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
/* Diskretan okvir "vrata" iza portreta */
.kz-hero__slika::before {
  content: '';
  position: absolute;
  inset: -0.9rem -0.9rem 1.2rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--kz-zelena-srednja) 32%, transparent);
  border-radius: var(--kz-zaob-lg);
  z-index: -1;
}

/* Uverenja: pet rečenica "U Kući zdravlja verujem da..." */
.kz-uverenja { display: grid; gap: var(--kz-r-4); counter-reset: uverenje; }
.kz-uverenja li {
  position: relative;
  padding-left: var(--kz-r-7);
  font-size: var(--kz-t-md);
  font-family: var(--kz-font-naslov);
  line-height: 1.5;
  color: var(--kz-mastilo);
  margin: 0;
}
.kz-uverenja li::before {
  counter-increment: uverenje;
  content: counter(uverenje, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.28em;
  font-family: var(--kz-font-telo);
  font-size: var(--kz-t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--kz-zlatna);
}
.kz-sekcija--tamna .kz-uverenja li { color: var(--kz-bela); }

/* --- Interaktivni plan kuće ----------------------------------------------
   Ilustracija + SVG sloj sa poligonima. Svaka prostorija je pravo <a>, pa
   radi tastaturom i bez JS-a.                                              */
.kz-plan { position: relative; }
.kz-plan__scena {
  position: relative;
  border-radius: var(--kz-zaob-md);
  overflow: hidden;
  background: var(--kz-krem-topliji);
  box-shadow: var(--kz-senka-md);
  line-height: 0;
}
.kz-plan__slika { width: 100%; height: auto; display: block; }

.kz-plan__sloj {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kz-plan__soba { outline: none; }
.kz-plan__oblik {
  fill: color-mix(in srgb, var(--kz-zelena-duboka) 0%, transparent);
  stroke: transparent;
  stroke-width: 3;
  transition: fill var(--kz-lako), stroke var(--kz-lako);
}
.kz-plan__soba:hover .kz-plan__oblik,
.kz-plan__soba:focus-visible .kz-plan__oblik,
.kz-plan__soba.je-istaknuta .kz-plan__oblik {
  fill: color-mix(in srgb, var(--kz-zlatna) 30%, transparent);
  stroke: var(--kz-zlatna);
}
.kz-plan__soba:focus-visible .kz-plan__oblik {
  stroke: var(--kz-zelena-duboka);
  stroke-width: 4;
}

/* Oblačić sa imenom prostorije */
.kz-plan__oblacic {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--kz-zelena-najdublja);
  color: var(--kz-bela);
  padding: 0.5rem 0.8rem;
  border-radius: var(--kz-zaob-sm);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: var(--kz-senka-md);
  opacity: 0;
  transform: translate(-50%, -128%) scale(0.96);
  transition: opacity var(--kz-brzo), transform var(--kz-brzo);
}
.kz-plan__oblacic.je-vidljiv { opacity: 1; transform: translate(-50%, -136%) scale(1); }
.kz-plan__oblacic small {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--kz-bela) 66%, transparent);
  margin-top: 1px;
}

/* Spisak prostorija ispod plana, ujedno i mobilna zamena za mapu */
.kz-plan__legenda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: var(--kz-r-2);
  margin-top: var(--kz-r-6);
  list-style: none;
  padding: 0;
}
.kz-plan__legenda li { margin: 0; }
.kz-plan__legenda a {
  display: flex;
  align-items: center;
  gap: var(--kz-r-2);
  padding: 0.6rem 0.75rem;
  border-radius: var(--kz-zaob);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kz-tekst);
  text-decoration: none;
  transition: background var(--kz-brzo), color var(--kz-brzo);
}
.kz-plan__legenda a:hover,
.kz-plan__legenda a.je-istaknuta {
  background: var(--kz-zelena-najbleda);
  color: var(--kz-zelena-duboka);
}
.kz-plan__legenda .kz-tacka {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kz-zlatna);
  flex-shrink: 0;
}

/* Na telefonu plan ostaje vidljiv, samo se prevlači u stranu, jer bi na 375 px
   prostorije bile premale za prst. Ispod njega stoji i spisak prostorija.       */
@media (max-width: 44rem) {
  .kz-plan__okvir {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: var(--kz-zaob-md);
  }
  .kz-plan__okvir .kz-plan__scena {
    width: 44rem;
    max-width: none;
  }
  .kz-plan__uputstvo {
    margin-top: var(--kz-r-3);
    color: var(--kz-tekst-tih);
    font-size: var(--kz-t-sm);
  }
  .kz-plan__legenda { margin-top: var(--kz-r-5); grid-template-columns: 1fr 1fr; }
}

@media (min-width: 44.0625rem) {
  .kz-plan__uputstvo { display: none; }
}

/* --- Kartica prostorije --------------------------------------------------- */
.kz-prostorije {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: var(--kz-r-5);
}
.kz-prostorija {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--kz-r-3);
  padding: var(--kz-r-5);
  border-radius: var(--kz-zaob-md);
  background: var(--kz-bela);
  border: 1px solid var(--kz-linija-blaga);
  text-decoration: none;
  color: inherit;
  transition: transform var(--kz-lako), box-shadow var(--kz-lako),
              border-color var(--kz-lako);
}
.kz-prostorija:hover {
  transform: translateY(-3px);
  box-shadow: var(--kz-senka-md);
  border-color: var(--kz-zelena-bleda);
  color: inherit;
}
.kz-prostorija__ikona {
  width: 2.7rem; height: 2.7rem;
  display: grid; place-items: center;
  border-radius: var(--kz-zaob);
  background: var(--kz-zelena-najbleda);
  color: var(--kz-zelena-duboka);
  flex-shrink: 0;
  transition: background var(--kz-brzo), color var(--kz-brzo);
}
.kz-prostorija:hover .kz-prostorija__ikona {
  background: var(--kz-zelena-duboka);
  color: var(--kz-na-primarnoj);
}
.kz-prostorija__ime {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-lg);
  font-weight: 600;
  color: var(--kz-mastilo);
  margin: 0;
}
.kz-prostorija__opis {
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
  line-height: 1.62;
  margin: 0;
  flex: 1;
}
.kz-prostorija__broj {
  font-size: var(--kz-t-xs);
  color: var(--kz-tekst-tih);
  font-weight: 500;
}
.kz-prostorija__broj::after { content: ' →'; color: var(--kz-terakota); opacity: 0; transition: opacity var(--kz-brzo); }
.kz-prostorija:hover .kz-prostorija__broj::after { opacity: 1; }

/* --- Kvarovi (7 tihih procesa) -------------------------------------------- */
.kz-kvarovi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: var(--kz-r-5);
}
.kz-kvar {
  display: flex;
  flex-direction: column;
  gap: var(--kz-r-3);
  padding: var(--kz-r-6) var(--kz-r-5);
  border-radius: var(--kz-zaob-md);
  background: var(--kz-bela);
  border: 1px solid var(--kz-linija-blaga);
  border-top: 3px solid var(--kz-terakota);
  text-decoration: none;
  color: inherit;
  transition: transform var(--kz-lako), box-shadow var(--kz-lako);
}
.kz-kvar:hover { transform: translateY(-3px); box-shadow: var(--kz-senka-md); color: inherit; }
.kz-kvar__redni {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-lg);
  color: var(--kz-terakota);
  line-height: 1;
}
.kz-kvar__ime {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-md);
  font-weight: 600;
  color: var(--kz-mastilo);
  margin: 0;
}
.kz-kvar__metafora {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--kz-t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kz-terakota-tamna);
  background: var(--kz-terakota-bleda);
  padding: 0.25rem 0.6rem;
  border-radius: var(--kz-zaob-pun);
}
.kz-kvar__opis {
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
  line-height: 1.62;
  margin: 0;
  flex: 1;
}

/* --- Kartica članka ------------------------------------------------------- */
.kz-clanci {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: var(--kz-r-6) var(--kz-r-5);
}
.kz-clanak-kartica {
  display: flex;
  flex-direction: column;
  gap: var(--kz-r-3);
  text-decoration: none;
  color: inherit;
}
.kz-clanak-kartica__slika {
  border-radius: var(--kz-zaob-md);
  overflow: hidden;
  background: var(--kz-krem-tamniji);
  aspect-ratio: 3 / 2;
}
.kz-clanak-kartica__slika img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--kz-mirno);
}
.kz-clanak-kartica:hover .kz-clanak-kartica__slika img { transform: scale(1.035); }
.kz-clanak-kartica__prostorija {
  font-size: var(--kz-t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--kz-terakota);
}
.kz-clanak-kartica__naslov {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-md);
  font-weight: 600;
  line-height: 1.36;
  color: var(--kz-mastilo);
  margin: 0;
  transition: color var(--kz-brzo);
}
.kz-clanak-kartica:hover .kz-clanak-kartica__naslov { color: var(--kz-zelena-duboka); }
.kz-clanak-kartica__uvod {
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
  line-height: 1.62;
  margin: 0;
}
.kz-clanak-kartica__meta {
  font-size: var(--kz-t-xs);
  color: var(--kz-tekst-tih);
  display: flex;
  gap: var(--kz-r-3);
  align-items: center;
}

/* Vodoravna varijanta za spiskove */
.kz-clanak-red {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--kz-r-4);
  align-items: baseline;
  padding: var(--kz-r-4) 0;
  border-bottom: 1px solid var(--kz-linija-blaga);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--kz-lako);
}
.kz-clanak-red:hover { padding-left: var(--kz-r-3); color: inherit; }
.kz-clanak-red__broj {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-tih);
  min-width: 2ch;
}
.kz-clanak-red__naslov {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-md);
  font-weight: 600;
  color: var(--kz-mastilo);
  margin: 0 0 var(--kz-r-1);
  transition: color var(--kz-brzo);
}
.kz-clanak-red:hover .kz-clanak-red__naslov { color: var(--kz-zelena-duboka); }
.kz-clanak-red__uvod {
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
  margin: 0;
  line-height: 1.6;
}

/* --- Citat ---------------------------------------------------------------- */
.kz-citat {
  position: relative;
  padding: var(--kz-r-6) var(--kz-r-6) var(--kz-r-6) var(--kz-r-8);
  background: var(--kz-zelena-najbleda);
  border-radius: var(--kz-zaob-md);
  border-left: 3px solid var(--kz-zlatna);
}
.kz-citat::before {
  content: '„';
  position: absolute;
  left: var(--kz-r-4); top: 0.1em;
  font-family: var(--kz-font-naslov);
  font-size: 3.4rem;
  line-height: 1;
  color: color-mix(in srgb, var(--kz-zlatna) 55%, transparent);
}
.kz-citat p {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-md);
  line-height: 1.6;
  color: var(--kz-zelena-najdublja);
  font-style: italic;
  margin: 0 0 var(--kz-r-3);
}
.kz-citat cite {
  font-style: normal;
  font-size: var(--kz-t-sm);
  font-weight: 600;
  color: var(--kz-tekst-blazi);
}

/* --- Preporuke (testimonijali) -------------------------------------------- */
.kz-preporuke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--kz-r-5);
}
.kz-preporuka {
  display: flex;
  flex-direction: column;
  gap: var(--kz-r-4);
  padding: var(--kz-r-6);
  background: var(--kz-bela);
  border: 1px solid var(--kz-linija-blaga);
  border-radius: var(--kz-zaob-md);
}
.kz-preporuka__tekst {
  font-size: var(--kz-t-baza);
  line-height: 1.72;
  color: var(--kz-tekst);
  margin: 0;
  flex: 1;
}
.kz-preporuka__potpis {
  display: flex;
  align-items: center;
  gap: var(--kz-r-3);
  padding-top: var(--kz-r-4);
  border-top: 1px solid var(--kz-linija-blaga);
}
.kz-preporuka__ime {
  font-weight: 650;
  font-size: var(--kz-t-sm);
  color: var(--kz-mastilo);
  display: block;
}
.kz-preporuka__uloga {
  font-size: var(--kz-t-xs);
  color: var(--kz-tekst-tih);
  display: block;
}
.kz-preporuka__mreza { margin-left: auto; color: var(--kz-tekst-tih); flex-shrink: 0; }

/* Istaknuta stručna preporuka */
.kz-preporuka--strucna {
  background: var(--kz-zelena-najdublja);
  border-color: transparent;
  grid-column: span 2;
}
@media (max-width: 44rem) { .kz-preporuka--strucna { grid-column: auto; } }
.kz-preporuka--strucna .kz-preporuka__tekst {
  color: var(--kz-bela);
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-md);
  line-height: 1.62;
}
.kz-preporuka--strucna .kz-preporuka__potpis { border-top-color: color-mix(in srgb, var(--kz-bela) 16%, transparent); }
.kz-preporuka--strucna .kz-preporuka__ime { color: var(--kz-bela); }
.kz-preporuka--strucna .kz-preporuka__uloga { color: var(--kz-zlatna); }

/* --- Knjiga --------------------------------------------------------------- */
.kz-knjiga {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 46rem) {
  .kz-knjiga { grid-template-columns: 1fr; }
  .kz-knjiga__korica { max-width: 13rem; }
}
.kz-knjiga__korica {
  border-radius: var(--kz-zaob-sm);
  overflow: hidden;
  box-shadow: var(--kz-senka-lg);
  background: var(--kz-krem-tamniji);
  aspect-ratio: 2 / 3;
}
.kz-knjiga__korica img { width: 100%; height: 100%; object-fit: cover; }
.kz-knjiga__oznaka {
  display: inline-block;
  font-size: var(--kz-t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: var(--kz-zaob-pun);
  background: var(--kz-zelena-bleda);
  color: var(--kz-zelena-najdublja);
  margin-bottom: var(--kz-r-3);
}
.kz-knjiga__oznaka--uskoro { background: var(--kz-zlatna-bleda); color: var(--kz-terakota-tamna); }

.kz-dodaci { list-style: none; margin: var(--kz-r-5) 0; padding: 0; display: grid; gap: var(--kz-r-3); }
.kz-dodaci li {
  display: flex;
  align-items: flex-start;
  gap: var(--kz-r-3);
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst);
  margin: 0;
}
.kz-dodaci li::before {
  content: '✓';
  color: var(--kz-zelena);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.6;
}

/* --- Usluge --------------------------------------------------------------- */
.kz-usluge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--kz-r-5);
}
.kz-usluga {
  display: flex;
  flex-direction: column;
  gap: var(--kz-r-4);
  padding: var(--kz-r-6);
  background: var(--kz-bela);
  border: 1px solid var(--kz-linija-blaga);
  border-radius: var(--kz-zaob-md);
  transition: box-shadow var(--kz-lako), transform var(--kz-lako);
}
.kz-usluga:hover { box-shadow: var(--kz-senka-md); transform: translateY(-3px); }
.kz-usluga__ikona {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--kz-zaob);
  background: var(--kz-zelena-najbleda);
  color: var(--kz-zelena-duboka);
}
.kz-usluga__ime {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-lg);
  margin: 0;
}
.kz-usluga__opis {
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

/* --- Stubovi zdravlja ----------------------------------------------------- */
.kz-stubovi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--kz-r-4);
}
.kz-stub {
  padding: var(--kz-r-5);
  border-radius: var(--kz-zaob-md);
  background: color-mix(in srgb, var(--kz-bela) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--kz-bela) 14%, transparent);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--kz-r-3);
  transition: background var(--kz-lako), border-color var(--kz-lako),
              transform var(--kz-lako);
}
.kz-stub:hover {
  background: color-mix(in srgb, var(--kz-bela) 14%, transparent);
  border-color: var(--kz-zlatna);
  transform: translateY(-3px);
}
.kz-stub__ime {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-md);
  color: var(--kz-bela);
  margin: 0;
}
.kz-stub__opis {
  font-size: var(--kz-t-sm);
  color: color-mix(in srgb, var(--kz-bela) 70%, transparent);
  line-height: 1.6;
  margin: 0;
}

/* --- Poziv na akciju (traka) ---------------------------------------------- */
.kz-poziv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--kz-r-6);
  align-items: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  border-radius: var(--kz-zaob-lg);
  background: linear-gradient(135deg, var(--kz-zelena-duboka), var(--kz-zelena-najdublja));
  color: var(--kz-na-primarnoj);
  box-shadow: var(--kz-senka-md);
}
@media (max-width: 48rem) {
  .kz-poziv { grid-template-columns: 1fr; gap: var(--kz-r-5); }
}
.kz-poziv h2 { color: var(--kz-bela); margin-bottom: var(--kz-r-3); font-size: var(--kz-t-xl); }
.kz-poziv p { color: color-mix(in srgb, var(--kz-bela) 76%, transparent); margin: 0; max-width: 42ch; }
.kz-poziv__akcije { display: flex; flex-wrap: wrap; gap: var(--kz-r-3); }

/* --- Mrvice --------------------------------------------------------------- */
.kz-mrvice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kz-r-2);
  font-size: var(--kz-t-xs);
  color: var(--kz-tekst-tih);
  margin-bottom: var(--kz-r-5);
  list-style: none;
  padding: 0;
}
.kz-mrvice li { margin: 0; display: flex; align-items: center; gap: var(--kz-r-2); }
.kz-mrvice li:not(:last-child)::after { content: '/'; color: var(--kz-linija); }
.kz-mrvice a { color: var(--kz-tekst-blazi); text-decoration: none; }
.kz-mrvice a:hover { color: var(--kz-zelena-duboka); }
.kz-mrvice [aria-current] { color: var(--kz-mastilo); font-weight: 500; }

/* --- Paginacija ----------------------------------------------------------- */
.kz-paginacija { margin-top: var(--kz-r-8); }
.kz-paginacija .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kz-r-2);
}
.kz-paginacija .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.6rem;
  border-radius: var(--kz-zaob-pun);
  border: 1px solid var(--kz-linija);
  font-size: var(--kz-t-sm);
  font-weight: 500;
  color: var(--kz-tekst);
  text-decoration: none;
  transition: background var(--kz-brzo), color var(--kz-brzo), border-color var(--kz-brzo);
}
.kz-paginacija .page-numbers:hover {
  background: var(--kz-zelena-najbleda);
  border-color: var(--kz-zelena-bleda);
  color: var(--kz-zelena-duboka);
}
.kz-paginacija .page-numbers.current {
  background: var(--kz-zelena-duboka);
  border-color: var(--kz-zelena-duboka);
  color: var(--kz-na-primarnoj);
}
.kz-paginacija .page-numbers.dots { border-color: transparent; }

/* --- Obaveštenje / napomena ----------------------------------------------- */
.kz-napomena {
  display: flex;
  gap: var(--kz-r-4);
  padding: var(--kz-r-5);
  border-radius: var(--kz-zaob-md);
  background: var(--kz-zlatna-bleda);
  border: 1px solid color-mix(in srgb, var(--kz-zlatna) 30%, transparent);
  font-size: var(--kz-t-sm);
  line-height: 1.66;
  color: var(--kz-terakota-tamna);
}
.kz-napomena__ikona { flex-shrink: 0; color: var(--kz-zlatna); }
.kz-napomena p { margin: 0; }
.kz-napomena strong { color: var(--kz-terakota-tamna); }

/* ==========================================================================
   Dopune po odabranom dizajnerskom pravcu
   Iz „Fany“: podeljen hero sa slikom u punom bloku, lebdeće kartice,
   razmaknuti nadnaslovi. Iz „Kristina“: portret u luku, zlatno ručno
   podvlačenje ključne reči, brojevi u mreži, pilule umesto pravougaonika.
   ========================================================================== */

/* --- Portret u luku ------------------------------------------------------- */
.kz-hero__okvir--luk {
  border-radius: 50% 50% var(--kz-zaob-lg) var(--kz-zaob-lg) / 32% 32% var(--kz-zaob-lg) var(--kz-zaob-lg);
}
.kz-hero__slika:has(.kz-hero__okvir--luk)::before {
  border-radius: 50% 50% var(--kz-zaob-lg) var(--kz-zaob-lg) / 32% 32% var(--kz-zaob-lg) var(--kz-zaob-lg);
}

/* Meka podloga iza portreta, u duhu oba šablona. */
.kz-hero__slika::after {
  content: '';
  position: absolute;
  inset: 12% -6% -4% -8%;
  background: radial-gradient(60% 60% at 50% 50%,
              color-mix(in srgb, var(--kz-zelena-bleda) 60%, transparent), transparent 72%);
  z-index: -2;
  border-radius: 50%;
}

/* --- Zlatno podvlačenje ključne reči -------------------------------------- */
.kz-podvuceno {
  position: relative;
  white-space: nowrap;
}
.kz-podvuceno::after {
  content: '';
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: -0.14em;
  height: 0.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C28 4.2 62 2.4 99 3.6c34 1.1 66 3.6 99 7' stroke='%23C08A2E' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  pointer-events: none;
}

/* --- Lebdeće kartice preko hero slike ------------------------------------- */
.kz-lebdeca {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--kz-r-3);
  padding: 0.7rem 1rem;
  background: var(--kz-bela);
  border-radius: var(--kz-zaob-md);
  box-shadow: var(--kz-senka-md);
  font-size: var(--kz-t-xs);
  line-height: 1.3;
  max-width: 15rem;
}
.kz-lebdeca strong {
  display: block;
  font-family: var(--kz-font-naslov);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--kz-zelena-duboka);
  line-height: 1.1;
}
.kz-lebdeca > span > span { color: var(--kz-tekst-blazi); }
.kz-lebdeca__ikona {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  flex-shrink: 0;
  border-radius: var(--kz-zaob-sm);
  background: var(--kz-zelena-najbleda);
  color: var(--kz-zelena-duboka);
}
.kz-lebdeca--gore  { top: 12%;  left: -1.6rem; }
.kz-lebdeca--dole  { bottom: 9%; right: -1.4rem; }

@media (max-width: 60rem) {
  .kz-lebdeca--gore { left: -0.5rem; }
  .kz-lebdeca--dole { right: -0.5rem; }
}
@media (max-width: 30rem) {
  .kz-lebdeca { display: none; }
}

/* --- Brojevi u mreži ------------------------------------------------------ */
.kz-brojevi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--kz-r-6) var(--kz-r-5);
}
.kz-broj { text-align: center; }
.kz-broj__vrednost {
  display: block;
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-2xl);
  font-weight: 600;
  line-height: 1;
  color: var(--kz-zelena-duboka);
  margin-bottom: var(--kz-r-2);
}
.kz-broj__oznaka {
  font-size: var(--kz-t-xs);
  color: var(--kz-tekst-blazi);
  letter-spacing: 0.02em;
}
.kz-sekcija--tamna .kz-broj__vrednost { color: var(--kz-zlatna); }
.kz-sekcija--tamna .kz-broj__oznaka { color: color-mix(in srgb, var(--kz-bela) 66%, transparent); }

/* --- Mala kartica sa slikom i strelicom (iz „Fany“) ----------------------- */
.kz-plocica {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--kz-linija);
  border-radius: var(--kz-zaob-md);
  overflow: hidden;
  background: var(--kz-bela);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--kz-lako), box-shadow var(--kz-lako),
              transform var(--kz-lako);
  max-width: 22rem;
}
.kz-plocica:hover {
  border-color: var(--kz-zelena-bleda);
  box-shadow: var(--kz-senka);
  transform: translateY(-2px);
  color: inherit;
}
.kz-plocica__slika { background: var(--kz-krem-tamniji); }
.kz-plocica__slika img { width: 100%; height: 100%; object-fit: cover; }
.kz-plocica__telo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kz-r-3);
  padding: var(--kz-r-4);
}
.kz-plocica__naslov {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-baza);
  font-weight: 600;
  color: var(--kz-mastilo);
  line-height: 1.32;
  margin: 0;
}
.kz-plocica__strelica {
  flex-shrink: 0;
  color: var(--kz-terakota);
  transition: transform var(--kz-lako);
}
.kz-plocica:hover .kz-plocica__strelica { transform: translate(3px, -3px); }

/* Korica knjige koja još nema dizajn, bolje ovo nego prazan okvir. */
.kz-knjiga__korica--priprema {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kz-r-4);
  text-align: center;
  padding: var(--kz-r-5);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      color-mix(in srgb, var(--kz-zlatna) 7%, transparent) 9px 10px),
    linear-gradient(165deg, var(--kz-krem-topliji), var(--kz-krem-tamniji));
  border: 1px dashed color-mix(in srgb, var(--kz-terakota) 45%, transparent);
}
.kz-knjiga__korica--priprema > span {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-lg);
  font-weight: 600;
  line-height: 1.24;
  color: var(--kz-zelena-najdublja);
}
.kz-knjiga__korica--priprema em {
  font-style: normal;
  color: var(--kz-terakota);
}
.kz-knjiga__korica--priprema small {
  font-size: var(--kz-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kz-tekst-tih);
}

/* Kartica bez fotografije, mirna podloga sa znakom prostorije. */
.kz-clanak-kartica__slika--znak {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 30% 20%,
      color-mix(in srgb, var(--kz-zelena-bleda) 55%, transparent), transparent 62%),
    linear-gradient(150deg, var(--kz-krem-topliji), var(--kz-krem-tamniji));
  border: 1px solid var(--kz-linija-blaga);
}
.kz-clanak-kartica__slika--znak > span {
  display: grid;
  place-items: center;
  width: 3.9rem;
  height: 3.9rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kz-bela) 70%, transparent);
  color: var(--kz-zelena);
  transition: transform var(--kz-lako), color var(--kz-brzo);
}
.kz-clanak-kartica:hover .kz-clanak-kartica__slika--znak > span {
  transform: scale(1.06);
  color: var(--kz-terakota);
}

/* --- Hero na malim ekranima ----------------------------------------------
   Portret ne sme da pojede ceo prvi ekran: tekst mora da se nazre odmah.  */
@media (max-width: 60rem) {
  .kz-hero__slika { max-width: 22rem; }
}
@media (max-width: 40rem) {
  .kz-hero__slika { max-width: 17rem; }
  .kz-hero__okvir { aspect-ratio: 4 / 5; }
  .kz-hero__akcije .kz-dugme { flex: 1 1 100%; justify-content: center; }
  /* Ukrasni okvir iza portreta pravi prekoračenje na uskim ekranima. */
  .kz-hero__slika::before { inset: -0.5rem -0.5rem 0.7rem 0.5rem; }
  .kz-hero__slika::after { inset: 14% 0 0 0; }
}

/* --- Audio zapisi --------------------------------------------------------- */
.kz-audio-lista { display: grid; gap: var(--kz-r-5); }

.kz-audio {
  padding: var(--kz-r-5);
  background: var(--kz-bela);
  border: 1px solid var(--kz-linija-blaga);
  border-radius: var(--kz-zaob-md);
  transition: border-color var(--kz-lako), box-shadow var(--kz-lako);
}
.kz-audio:hover { border-color: var(--kz-zelena-bleda); box-shadow: var(--kz-senka-sm); }

.kz-audio__zaglavlje {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--kz-r-4);
  align-items: start;
  margin-bottom: var(--kz-r-4);
}
.kz-audio__ikona {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: var(--kz-zaob);
  background: var(--kz-zelena-najbleda);
  color: var(--kz-zelena-duboka);
  flex-shrink: 0;
}
.kz-audio__tema {
  display: block;
  font-size: var(--kz-t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kz-terakota);
  margin-bottom: 3px;
}
.kz-audio__naslov {
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-md);
  margin: 0 0 var(--kz-r-2);
}
.kz-audio__opis {
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
  line-height: 1.6;
  margin: 0;
}
.kz-audio audio {
  width: 100%;
  height: 2.6rem;
  border-radius: var(--kz-zaob-pun);
}

/* ============================================================================
   Izmene po zahtevu autorke, 14.09.2026.
   Početna počinje fotografijom Kuće zdravlja, portret domaćice se seli niže.
   ========================================================================== */

.kz-hero--kuca { padding-block: var(--kz-r-8) var(--kz-r-7); }

.kz-hero--kuca .kz-hero__kuca {
  max-width: 32rem;
  margin: 0 auto var(--kz-r-6);
}

.kz-hero--kuca .kz-hero__kuca img {
  width: 100%;
  height: auto;
  border-radius: var(--kz-zaob-lg);
  box-shadow: var(--kz-senka-md);
}

.kz-hero--kuca .kz-hero__natpis {
  max-width: 46rem;
  margin-inline: auto;
}

.kz-hero__akcije--sredina { justify-content: center; }

/* Dva objašnjenja uz „Zašto Kuća zdravlja?“ */
.kz-vrata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--kz-r-6);
  margin-block: var(--kz-r-8) var(--kz-r-7);
}

.kz-vrata__deo {
  padding: var(--kz-r-6);
  background: var(--kz-pozadina-uzdignuta);
  border: 1px solid var(--kz-linija-blaga);
  border-radius: var(--kz-zaob-md);
}

.kz-vrata__deo h3 {
  font-size: var(--kz-t-md);
  margin-bottom: var(--kz-r-3);
}

.kz-vrata__deo p { margin-bottom: var(--kz-r-4); }

/* Karusel sedam tihih kvarova: slajdovi su autorkine ilustracije */
.kz-kvar-slajd {
  display: block;
  border-radius: var(--kz-zaob-md);
  overflow: hidden;
  box-shadow: var(--kz-senka-sm);
  transition: transform var(--kz-lako), box-shadow var(--kz-lako);
}

.kz-kvar-slajd:hover,
.kz-kvar-slajd:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--kz-senka-md);
}

.kz-kvar-slajd__slika {
  display: block;
  width: 100%;
  height: auto;
}

.kz-kvar-slajd__napomena {
  margin-top: var(--kz-r-5);
  color: var(--kz-tekst-tih);
  font-size: var(--kz-t-sm);
}

/* Domaćica na početnoj */
.kz-domacica {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--kz-r-8);
  align-items: center;
}

@media (max-width: 52rem) {
  .kz-domacica { grid-template-columns: 1fr; gap: var(--kz-r-6); }
  .kz-domacica__slika { max-width: 20rem; margin-inline: auto; }
}

.kz-domacica__tekst h2 { margin-bottom: var(--kz-r-4); }
.kz-domacica__tekst p { margin-bottom: var(--kz-r-4); }

/* Autorkina slika ubačena u telo teksta */
.kz-slika-u-tekstu {
  margin-block: var(--kz-r-6);
}

.kz-slika-u-tekstu img {
  width: 100%;
  height: auto;
  border-radius: var(--kz-zaob-md);
  box-shadow: var(--kz-senka-sm);
}

/* Fotografije sa predavanja (Radna soba) */
.kz-predavanja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--kz-r-6);
}

.kz-predavanje { margin: 0; }

.kz-predavanje img {
  width: 100%;
  height: auto;
  border-radius: var(--kz-zaob-md);
  box-shadow: var(--kz-senka-sm);
}

.kz-predavanje figcaption {
  margin-top: var(--kz-r-3);
  color: var(--kz-tekst-blazi);
  font-size: var(--kz-t-sm);
}

.kz-knjiga__napomena {
  display: block;
  margin-top: var(--kz-r-2);
  text-align: center;
  color: var(--kz-tekst-tih);
  font-size: var(--kz-t-xs);
}

/* Uspravne fotografije u zaglavlju teksta stoje cele, bez isecanja */
.kz-clanak__slika--cela {
  background: var(--kz-krem-topliji);
  display: flex;
  justify-content: center;
}

.kz-clanak__slika--cela img {
  width: auto;
  max-width: min(100%, 34rem);
  height: auto;
  max-height: 34rem;
  object-fit: contain;
}