/* ============== Guides (Branded for Parin Sanat) ============== */
/* پالت برند */
:root{
  --g-bg:#ffffff;
  --g-dark:#0f2a3b;           /* سرمه‌ای متنی */
  --g-text:var(--g-dark);
  --g-muted:#607586;          /* خاکستری آبی */
  --g-border:#e6edf2;
  --g-ring:0 0 0 4px rgba(34,182,199,.15);

  --g-primary:#22b6c7;        /* آبی فیروزه‌ای برند */
  --g-primary-700:#1aa4b4;
  --g-accent:#79aeb7;         /* سبز-آبی رینگ لوگو */

  --g-max: 1200px;            /* عرض کلی محتوا */
  --g-hero-max: 900px;        /* حداکثر عرض بنر اول */
}

/* Wrapper */
.g-wrapper{ background:var(--g-bg); color:var(--g-text); }

/* ---------- HERO in container (max 900) ---------- */
.g-container{ margin-inline:auto; max-width:var(--g-hero-max); padding: 0 12px; }
.g-hero-box{ margin: 14px auto 6px; }
.g-hero{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid var(--g-border);
  box-shadow:0 10px 28px #0b223a0d;
}
.g-hero-img{ display:block; width:100%; height:auto; object-fit:cover; }
.g-hero-overlay{ position:absolute; inset:0; background:linear-gradient(0deg,#0b223a40,transparent 55%); pointer-events:none; }
.g-hero-content{
  position:absolute; inset-inline:0; inset-block-end:0;
  padding: clamp(12px,3vw,20px); color:#fff; text-align:center;
}
.g-title{ margin:0 0 6px; font-weight:800; font-size:clamp(1.1rem,2.2vw,1.9rem); }
.g-subtitle{ margin:0; opacity:.95; font-size:clamp(.92rem,1.6vw,1.05rem); }

/* ---------- BODY LAYOUT ---------- */
.g-body{
  margin-inline:auto; max-width:var(--g-max);
  display:grid; gap:clamp(16px, 2.2vw, 24px);
  grid-template-columns: 1fr;              /* موبایل تک‌ستون */
  padding: clamp(14px, 2.8vw, 28px) clamp(12px, 2.4vw, 24px);
}
@media (min-width:1024px){
  .g-body{ grid-template-columns: 280px minmax(0,1fr); align-items:start; }
}

/* ---------- TOC ---------- */
/* موبایل: غیرچسبان تا روی محتوا نیاد */
.g-toc{ order:-1; }
@media (min-width:1024px){
  .g-toc{ order:0; }
  .g-toc .g-toc-card{ position:sticky; top:90px; }
}
.g-toc-card{
  background:#fff; border:1px solid var(--g-border); border-radius:14px; padding:14px;
  box-shadow:0 8px 20px #0b223a0f;
}
.g-toc-title{ font-weight:800; font-size:1rem; margin-bottom:10px; color:var(--g-dark); }
.g-toc-nav{ display:flex; flex-direction:column; gap:6px; }
.g-toc-nav a{
  display:block; padding:9px 12px; border-radius:10px; text-decoration:none;
  color:var(--g-dark); background:#fff; border:1px solid transparent; transition:.15s ease;
}
.g-toc-nav a:hover{ border-color:var(--g-border); }
.g-toc-nav a.active{
  background:#eefafd; border-color:#cceff4; color:var(--g-primary); box-shadow:var(--g-ring);
}

/* ---------- CONTENT ---------- */
.g-content{ min-width:0; }
.g-section{ padding-block: clamp(12px, 2vw, 18px); }
.g-h2{
  font-weight:900; font-size: clamp(1.05rem,2.1vw,1.5rem);
  margin: 0 0 12px; color:var(--g-dark);
  border-inline-start:6px solid var(--g-primary);
  padding-inline-start:10px;
}
.g-h3{ font-weight:800; font-size:1.02rem; margin:14px 0 8px; }
.g-muted{ color:var(--g-muted); font-size:.95rem; }

/* Cards / grids */
.g-grid-2{ display:grid; gap:14px; }
@media (min-width:768px){ .g-grid-2{ grid-template-columns:1fr 1fr; gap:18px; } }

.g-cards{ display:grid; gap:14px; }
@media (min-width:640px){ .g-cards{ grid-template-columns: 1fr 1fr; } }
.g-card{
  border:1px solid var(--g-border); border-radius:14px; padding:14px; background:#fff;
  box-shadow:0 8px 20px #0b223a0f;
}

/* Lists */
.g-list{ margin:8px 0 0 0; padding:0 18px 0 0; }
.g-list li{ margin:.35rem 0; }

/* Banners */
.g-banner{ margin:10px 0 14px; border-radius:14px; overflow:hidden; border:1px solid var(--g-border); }
.g-banner img{ width:100%; height:auto; display:block; }

/* Tips/Badges */
.g-badge,.g-tip{ margin-top:10px; padding:10px 12px; border-radius:12px; font-weight:600; font-size:.95rem;
  background:#eefafd; border:1px solid #cceff4; color:#0d3a43; }
.g-badge--warn{ background:#fff6f6; border-color:#ffd6d6; color:#6d1b1b; }

/* CTA */
.g-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.g-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px; font-weight:800;
  background:var(--g-primary); color:#fff; text-decoration:none;
  border:1px solid transparent; transition:.15s ease;
}
.g-btn:hover{ background:var(--g-primary-700); }
.g-btn--alt{ background:#fff; color:var(--g-primary); border-color:#cceff4; }
.g-btn--alt:hover{ background:#eefafd; }

/* Smooth scroll */
html{ scroll-behavior:smooth; }
/* --- تغییرات برای استیکی بهتر سایدبار --- */
.g-toc{ order:-1; }
@media (min-width:1024px){
  .g-toc{ order:0; align-self: start; }           /* مهم برای استیکی در گرید */
  .g-toc .g-toc-card{
    position: sticky;
    top: 84px;                                     /* فاصله از هدر سایتت */
    height: max-content;                           /* لازم برای استیکی */
    z-index: 2;
  }
}
/* --- HERO inside container (max 900px) --- */
.g-hero { padding: 16px 0 8px; }
.g-hero-inner { max-width: 900px; margin-inline: auto; position: relative; }
.g-hero-img {
  display: block; width: 100%; height: auto;
  border-radius: 16px; object-fit: cover;
  /* ارتفاع دلخواه اگر خواستی کمی کراپ شود: */
  /* aspect-ratio: 16/9; */
}
.g-hero-text {
  margin-top: .75rem;
  text-align: center;
}
/* ====== TOC Sticky (Desktop) ====== */
.g-body{
  /* مطمئن شو overflow روی والد بسته نیست */
  overflow: visible;
}

.g-toc{
  /* ستون سایدبار */
  align-self: start;           /* اجازه بده ارتفاع محتوا تعیین‌کننده باشه */
  position: sticky;
  top: 88px;                   /* فاصله از بالای ویوپورت (هدر ثابتت چقدره؟ 60-100px تنظیم کن) */
  height: fit-content;         /* به اندازه کارت */
  z-index: 3;                  /* بالاتر از بک‌گراندها */
}

.g-toc-card{
  border: 1px solid #e7eef4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(24,39,75,.06);
  max-height: calc(100vh - 110px); /* اگر طولش زیاد شد، داخل خودش اسکرول بخوره */
  overflow: auto;
}

/* لینک فعال در اسکرول‌اسپای */
.g-toc-nav a.active{
  color: #0ea5e9;
  font-weight: 600;
}

/* ====== موبایل/تبلت: سایدبار عادی باشد ====== */
@media (max-width: 992px){
  .g-toc{
    position: static;
    top: auto;
    z-index: 1;
  }
  .g-toc-card{
    max-height: none;
    overflow: visible;
  }
}

/* اسکرول نرم اختیاری */
html{ scroll-behavior: smooth; }