/* ============================================================
   KZ IMAGE — base styling for hero illustrations + lazy fade-in
   ============================================================ */

/* Lazy <img> fade-in */
img[data-kz-src]{ opacity: 0; }
img.kz-img-loaded{
  opacity: 1;
  transition: opacity .5s ease-out;
}

/* Hero illustration — full-width banner with overlay */
.kz-hero-illust{
  width: 100%;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.kz-hero-illust::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(11,31,58,.4) 60%, rgba(11,31,58,.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.kz-hero-illust > .kz-hero-content{
  position: absolute;
  inset-inline-start: 24px;
  bottom: 18px;
  z-index: 3;
  color: #f6e6c2;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  max-width: 70%;
}

/* ── Hero rotator (5 Jerusalem holy sites) ───────────────── */
.kz-hero-rotator{
  min-height: clamp(280px, 42vh, 460px);
}
/* Compact variant: hero greeting overlaid on photo rotator,
   dashboard immediately visible below on mobile */
.kz-hero-compact{
  min-height: clamp(240px, 36vh, 380px);
}
.kz-hero-compact > .kz-hero-content{
  inset-inline-start: 22px;
  inset-inline-end: 22px;
  bottom: 22px;
  max-width: none;
}
.kz-hero-compact .hm-greet{
  display: inline-block;
  padding: 4px 14px;
  background: rgba(212,176,122,.25);
  border: 1px solid rgba(241,213,151,.5);
  color: #f1d597;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.kz-hero-compact h1{
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(26px, 4vw, 38px);
  margin: 0 0 4px;
  font-weight: 800;
  background: linear-gradient(135deg, #f1d597, #fff8e8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.kz-hero-compact p{
  margin: 0;
  font-size: clamp(13px, 1.5vw, 15px);
  opacity: .95;
  color: #f6e6c2;
}
.kz-hero-compact .hm-streaks{
  margin-top: 10px;
  justify-content: flex-start;
}
[dir="rtl"] .kz-hero-compact .hm-streaks{ justify-content: flex-end; }
.kz-hero-layer{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}
.kz-hero-layer.is-active{ opacity: 1; }
.kz-hero-caption{
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 4;
  padding: 6px 14px;
  background: rgba(11,31,58,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212,176,122,.4);
  border-radius: 999px;
  color: #f1d597;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  font-family: 'Frank Ruhl Libre', serif;
}
.kz-hero-dots{
  position: absolute;
  bottom: 12px;
  inset-inline-end: 14px;
  z-index: 4;
  display: flex; gap: 6px;
}
.kz-hero-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.kz-hero-dot:hover{ background: rgba(241,213,151,.7); }
.kz-hero-dot.is-active{
  background: #f1d597;
  transform: scale(1.4);
}
.kz-hero-illust > .kz-hero-content h1{
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(28px, 5vw, 44px);
  margin: 0 0 6px;
  font-weight: 800;
}
.kz-hero-illust > .kz-hero-content p{
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  opacity: .92;
}

/* Photo placeholder for place cards */
.kz-place-photo{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #14315b;
  position: relative;
  margin-bottom: 10px;
}
.kz-place-photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.kz-place-photo-edit{
  position: absolute;
  bottom: 8px; inset-inline-end: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(11,31,58,.85);
  border: 1px solid rgba(212,176,122,.4);
  color: #d4b07a;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}
.kz-place-photo-edit:hover{ background: rgba(212,176,122,.25); }

/* Gallery page */
.kz-gallery-shell{ max-width: min(1100px, 96vw); margin: 0 auto 40px; padding: 0 12px; }
.kz-gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.kz-gallery-card{
  background: linear-gradient(160deg, rgba(15,33,66,.96), rgba(20,49,91,.92));
  border: 1px solid rgba(212,176,122,.3);
  border-radius: 18px;
  overflow: hidden;
}
.kz-gallery-img{
  width: 100%;
  aspect-ratio: 3/2;
  background-size: cover;
  background-position: center;
  display: block;
}
.kz-gallery-meta{
  padding: 14px;
  text-align: center;
}
.kz-gallery-name{
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 18px;
  font-weight: 700;
  color: #f1d597;
  margin-bottom: 4px;
}
.kz-gallery-tag{
  display: inline-block;
  padding: 2px 10px;
  background: rgba(212,176,122,.15);
  border-radius: 999px;
  color: #d4b07a;
  font-size: 11px;
}