/* ============ ABOUT (chap matn + o'ng vizual) ============ */

.about { padding-top: 20px; padding-bottom: 12px; }

/* Ikki ustunli grid */
.about-split{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: stretch; /* pastlari tekis bo'lsin */
}
@media (max-width: 980px){
  .about-split{ grid-template-columns: 1fr; }
}

/* Chap taraf (glass karta) */
.about-left.glass{
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(195,154,111,.25);
  background: var(--card-bg, linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)));
  box-shadow: inset 0 0 0 1px rgba(195,154,111,.08), 0 10px 30px rgba(0,0,0,.25);
  height: 100%;
}
.about-left .badge{ margin-bottom: 10px; }
.about-left .h2{ margin: 6px 0 8px; }
.about-lead{ color: var(--muted); max-width: 68ch; }

.about-divider{
  margin: 14px 0; height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, rgba(195,154,111,.25), transparent);
}

/* Nuqtali ro'yxat */
.about-points{ display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.about-points li{ display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.pt-title{ font-weight: 800; color: var(--text); line-height: 1.25; margin-bottom: 2px; }
.pt-desc{ color: var(--muted); line-height: 1.45; word-break: keep-all; hyphens: auto; }

/* Gold ikon mask (faqat lucide ikonlar uchun) */
.ab-ico{
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(180deg,#C39A6F,#b88f5f);
  -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain;
  mask-position: center;         mask-repeat: no-repeat;         mask-size: contain;
  opacity:.95; margin-top:2px;
}
.ico-check{ -webkit-mask-image:url("../../../public/icons/lucide/check-circle.svg"); mask-image:url("../../../public/icons/lucide/check-circle.svg"); }
.ico-target{ -webkit-mask-image:url("../../../public/icons/lucide/target.svg");       mask-image:url("../../../public/icons/lucide/target.svg"); }
.ico-layers{ -webkit-mask-image:url("../../../public/icons/lucide/layers.svg");       mask-image:url("../../../public/icons/lucide/layers.svg"); }

/* Aksentli gradient matn */
.t-accent{
  background:linear-gradient(180deg,#C39A6F,#b38559);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --------- O'ng ustun (galereya + info) --------- */
.about-side{
  display: grid;
  grid-template-rows: 1fr auto; /* galereya 1fr, info-karta pastga yopishadi */
  gap: 12px;
  height: 100%;
}

/* Galereya glass kartasi */
.gallery-card.glass{
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(195,154,111,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25);
  min-height: 0;
}

.gal-stage{
  aspect-ratio: 4 / 3;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
}
.gal-slide{
  position:absolute; inset:0; display:grid; place-items:center;
  transition: transform .8s ease, opacity .8s ease, filter .8s ease;
}
.gal-img{ width:100%; height:100%; object-fit:cover; border-radius:14px; }

/* Slayd holatlari */
.is-front { z-index:3; transform: translateX(0) scale(1);      opacity:1; }
.is-left  { z-index:2; transform: translateX(-36%) scale(.92); opacity:.72; filter:saturate(.9) brightness(.95); }
.is-right { z-index:2; transform: translateX(36%)  scale(.92); opacity:.55; filter:blur(1px) saturate(.85) brightness(.9); }
.is-hide  { z-index:1; opacity:0; pointer-events:none; }

/* --- Info-karta (PIN yuqorida) --- */
.glass-mini{
  border: 1px solid rgba(195,154,111,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: 12px;
  padding: 12px;
}
.glass-mini.stack{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}

/* PIN qutisi */
.gi-pin{
  width:40px; height:40px; border-radius:12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(195,154,111,.25);
  display:grid; place-items:center;
  justify-self: start;
}

/* --- Ignacha (Pinned) ikonasi --- */
.pin-ico {
  width: 20px;
  height: 20px;
  background: linear-gradient(180deg, #C39A6F, #b88f5f);
  -webkit-mask: url("../../../public/icons/lucide/pin.svg") center / contain no-repeat;
  mask: url("../../../public/icons/lucide/pin.svg") center / contain no-repeat;
  opacity: .95;
}

/* Fallback — agar mask ishlamasa */
@supports not (-webkit-mask: url("")) {
  .pin-ico::before {
    content: '📌'; /* emoji bilan fallback */
    font-size: 18px;
    color: #C39A6F;
    line-height: 1;
  }
}