/* ==========================================================================
   شفاخانه حکیم سنائی افغان — استایل صفحه اختصاصی داکتر
   وابسته به css/style.css (متغیرها و کلاس‌های پایه از آنجا خوانده می‌شود)
   ========================================================================== */

/* ---------- هدر صفحه داکتر ---------- */
.doc-hero{
  position:relative; overflow:hidden; padding:80px 0 90px;
  background:var(--pine-950);
  color:var(--sand);
  perspective:1400px;
  min-height:400px;
}
.doc-hero .mesh-bg span{ opacity:.35; }
.doc-hero .hero-canvas{ z-index:1; }

.doc-hero-grid{
  position:relative; display:grid; grid-template-columns:220px 1fr; gap:38px; align-items:center;
  margin-top:18px;
}

.doc-profile-photo{
  position:relative; width:220px; height:220px; border-radius:50%; overflow:hidden;
  flex:none; background:linear-gradient(155deg,var(--sage-500),var(--pine-800));
  box-shadow:var(--shadow-glow); border:4px solid rgba(255,255,255,.18);
}
.doc-profile-photo img{
  width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:2;
}
.doc-profile-photo .photo-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Lalezar','Vazirmatn',sans-serif; font-size:56px; color:#fff; z-index:1;
}
/* اگر عکس پروفایل هنوز جایگزین نشده (فایل پیدا نشود)، حرف اول نام نمایش داده می‌شود */
.doc-profile-photo img{ z-index:2; }
.doc-profile-photo.img-missing img{ display:none; }

.doc-hero-info h1{ color:var(--sand); margin:6px 0 4px; }
.doc-hero-info .role{ color:var(--sage-300); font-weight:700; font-size:15.5px; }
.doc-hero-info .depts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.doc-hero-info .chip{ background:rgba(255,255,255,.12); color:var(--sand); }

/* ---------- محتوای صفحه ---------- */
.doc-content{ padding-top:64px; padding-bottom:10px; display:flex; flex-direction:column; gap:64px; }

.doc-content h2{ font-size:26px; margin-bottom:18px; }

.doc-bio p, .doc-article p{ color:var(--ink-soft); font-size:16px; line-height:1.95; max-width:74ch; }
.doc-bio p + p, .doc-article p + p{ margin-top:14px; }

/* ---------- گالری تصاویر ---------- */
.gallery-hint{ color:var(--ink-faint); font-size:13.5px; margin-top:-10px; margin-bottom:20px; }
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.gallery-item{
  appearance:none; border:none; padding:0; margin:0; cursor:pointer; background:var(--mist);
  border-radius:var(--radius-md); overflow:hidden; aspect-ratio:1/1; position:relative;
  box-shadow:var(--shadow-soft); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gallery-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-deep); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item::after{
  content:"⤢"; position:absolute; inset:auto 10px 10px auto; width:30px; height:30px; border-radius:50%;
  background:rgba(5,14,28,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; opacity:0; transition:opacity .25s;
}
.gallery-item:hover::after{ opacity:1; }

/* ---------- ویدیوها ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.video-item{
  border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft);
  background:var(--pine-950); border:1px solid var(--line);
}
.video-item video{ width:100%; display:block; aspect-ratio:16/9; background:#000; }

/* ---------- لایت‌باکس تصاویر ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(5,10,20,.86); padding:30px;
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width:min(92vw,1000px); max-height:88vh; border-radius:var(--radius-sm); box-shadow:var(--shadow-deep);
}
.lightbox-close{
  position:absolute; top:22px; left:22px; width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-size:20px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:background .25s;
}
.lightbox-close:hover{ background:rgba(255,255,255,.22); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  border:none; background:rgba(255,255,255,.12); color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .25s;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.22); }
.lightbox-prev{ right:22px; }
.lightbox-next{ left:22px; }

/* ---------- ریسپانسیو ---------- */
@media (max-width:900px){
  .doc-hero-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .doc-hero-info .depts{ justify-content:center; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .video-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .doc-profile-photo{ width:160px; height:160px; }
  .doc-profile-photo .photo-fallback{ font-size:40px; }
  .lightbox-nav{ width:40px; height:40px; }
}