/* ===== Sharif Governance Tree (3x3 • Final) ===== */

.sgt{
  --ink:#0b1220; --muted:#637083; --br:rgba(2,6,23,.16);
  --soft:#f6f8fb; --card:#fff; --radius:16px; --shadow:0 1px 0 rgba(2,6,23,.02);
  --glow:#1f7ae0; --avatar:128px;
  --col-left:minmax(420px,1fr); --col-center:minmax(280px,0.6fr); --col-right:minmax(420px,1fr);
  font-family: inherit; font-style: normal; color:var(--ink);
  text-align: center;  /* همه‌چیز وسط‌چین */
}
.sgt *{ box-sizing:border-box; font-family:inherit; font-style:normal }

/* ===== Toolbar ===== */
.sgt .sgt-toolbar{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px;
}
.sgt .sgt-title{ font-weight:700; letter-spacing:.1px }
.sgt .sgt-btn{
  border:1px solid var(--br); background:#fff; border-radius:10px; padding:6px 12px; cursor:pointer; font-weight:600;
}
.sgt .sgt-btn:hover{ background:rgba(31,122,224,.06) }

/* ===== Canvas: اسکرول عمودی/افقی ===== */
.sgt .sgt-canvas{
  position:relative;
  overflow:auto; overscroll-behavior: contain;
  border:1px solid var(--br); border-radius:20px; background:var(--card);
  padding:20px;
  /* نکته مهم: ارتفاع محدود → اسکرول عمودی فعال می‌شود */
  height: clamp(560px, 80vh, 820px);
  min-width: 980px;
}
.sgt .sgt-canvas::-webkit-scrollbar{ width:8px; height:8px }
.sgt .sgt-canvas::-webkit-scrollbar-thumb{ background:rgba(2,6,23,.25); border-radius:8px }

/* ===== Grid 3×3 ===== */
.sgt .sgt-grid-wrap{
  position:relative; /* برای SVG سیم‌ها */
  display:grid;
  grid-template-columns: var(--col-left) var(--col-center) var(--col-right);
  grid-template-rows: auto auto auto;
  gap:20px;
}

/* ===== SVG سیم‌ها (لاین‌های ارتباطی) ===== */
.sgt .sgt-wires{
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.sgt .sgt-wire{
  fill:none; stroke:var(--glow); stroke-width:2px; stroke-linecap:round;
  stroke-dasharray:6 8; animation: sgtDash 3.2s linear infinite;
  opacity:.8;
}
@keyframes sgtDash{
  to { stroke-dashoffset: -200; }
}

/* ===== Cells ===== */
.sgt .sgt-cell{ padding:14px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.sgt .sgt-cell.left,
.sgt .sgt-cell.right{
  border:2px dashed var(--br); border-radius:16px; background:#fafbfc;
}

/* جایگذاری دقیق */
.sgt .sgt-cell.center.row-1{ grid-column:2; grid-row:1 / span 3; border:none; position:relative; align-items:center; justify-content:center }

.sgt .sgt-cell.left.row-1 { grid-column:1; grid-row:1 }
.sgt .sgt-cell.left.row-2 { grid-column:1; grid-row:2 }
.sgt .sgt-cell.left.row-3 { grid-column:1; grid-row:3 }

.sgt .sgt-cell.right.row-1{ grid-column:3; grid-row:1 }
.sgt .sgt-cell.right.row-2{ grid-column:3; grid-row:2 }
.sgt .sgt-cell.right.row-3{ grid-column:3; grid-row:3 }

/* ===== ستون وسط ===== */
.sgt .sgt-center-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; z-index:1 }
.sgt .sgt-logo{
  width:170px; height:170px; border-radius:50%; background:#f0f4fa;
  display:grid; place-items:center;
  box-shadow:0 0 0 4px #fff, 0 0 0 8px rgba(31,122,224,.13);
}
.sgt .sgt-logo img{ max-width:76%; max-height:76%; display:block }
.sgt .sgt-caption{ font-weight:700; font-size:1rem }

/* محور افقی تزیینی (پالس) */
.sgt .sgt-axis{
  position:absolute; top:50%; height:2px; pointer-events:none; z-index:0;
  background: linear-gradient(90deg, rgba(31,122,224,0), var(--glow), rgba(31,122,224,0));
  animation: sgtPulse 2.6s ease-in-out infinite;
}
.sgt .sgt-axis.left { left:-200vw; right:100% }
.sgt .sgt-axis.right{ left:0; right:-200vw }
@keyframes sgtPulse{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }

/* ===== Group Box ===== */
.sgt .sgt-group{
  width:100%; background:#fff; border:1px solid var(--br); border-radius:var(--radius); padding:12px;
  box-shadow:var(--shadow); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.sgt .sgt-group.is-root{ border-width:2px }
.sgt .sgt-group.is-dashed{ border-style:dashed }

.sgt .sgt-group-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px }
.sgt .sgt-title{ margin:0; font-weight:600; font-size:.95rem } /* نازک‌تر */
.sgt .sgt-chip { background:#eef4ff; color:#0b3b85; border-radius:999px; padding:4px 10px; font-weight:600; font-size:.8rem }

/* ===== شبکه اعضا (padding بیشتر برای هر کارت) ===== */
.sgt .sgt-grid[data-grid]{
  display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(var(--avatar), 1fr));
}
.sgt .sgt-card{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:8px; border-radius:12px; background:#fff;
}
.sgt .sgt-card img{
  width:var(--avatar); height:var(--avatar); border-radius:12px; object-fit:cover;
  border:1px solid var(--br); background:#f3f5f8; transition: transform .16s ease, box-shadow .16s ease;
}
.sgt .sgt-card figcaption{ font-size:.88rem; font-weight:600 }
.sgt .sgt-card img:hover{ transform: translateY(-3px); box-shadow: 0 10px 22px rgba(31,122,224,.18) }

/* ===== گروه‌های پرعضو: اسکرول افقی داخلی فقط ===== */
.sgt .sgt-group.is-scroll-x .sgt-grid{
  display:flex; gap:12px; overflow-x:auto; overflow-y:visible; padding-bottom:8px;
  scroll-snap-type: x mandatory;
}
.sgt .sgt-group.is-scroll-x .sgt-card{ flex:0 0 auto; scroll-snap-align:center }
.sgt .sgt-group.is-scroll-x .sgt-grid::-webkit-scrollbar{ height:6px }
.sgt .sgt-group.is-scroll-x .sgt-grid::-webkit-scrollbar-thumb{ background:rgba(31,122,224,.35); border-radius:4px }

/* ===== کانکتور عمودی ===== */
.sgt .sgt-connector.v{
  width:2px; height:28px; background:var(--br); margin:10px auto; position:relative; overflow:hidden; border-radius:2px;
}
.sgt .sgt-connector.v::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, var(--glow), transparent);
  animation: sgtFlow 1.8s linear infinite; opacity:.9;
}
@keyframes sgtFlow{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(100%) } }

/* ===== Hover ===== */
.sgt .sgt-group:hover{ border-color: var(--glow); box-shadow: 0 10px 28px rgba(31,122,224,.14); transform: translateY(-1px) }
.sgt .sgt-group:hover .sgt-title{ color: var(--glow) }

/* ===== Responsive ===== */
@media (max-width:1200px){ .sgt{ --avatar:112px } }
@media (max-width:900px){  .sgt{ --avatar:100px } .sgt .sgt-logo{ width:150px; height:150px } }
@media (max-width:680px){  .sgt{ --avatar:92px } }