/* ═══════════════════════════════════════════════════════════════
   ns-utils.css
   یوتیلیتی‌هایی که Bootstrap 5.3 ندارد ولی طرح فعلی سایت به آن‌ها نیاز دارد.
   عمداً کوچک نگه داشته شده — فقط مواردی که واقعاً در ویوها استفاده می‌شوند.
   نام‌گذاری با پیشوند ns- تا با کلاس‌های بوت‌استرپ تداخل نکند،
   به‌جز مواردی که نامشان در بوت‌استرپ آزاد است.
   ═══════════════════════════════════════════════════════════════ */

/* ── بریدن متن در n خط (معادل line-clamp تیلویند) ── */
.ns-clamp-1,
.ns-clamp-2,
.ns-clamp-3,
.ns-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ns-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.ns-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ns-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.ns-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

/* ── تصویر ── */
.ns-cover   { object-fit: cover;   width: 100%; height: 100%; display: block; }
.ns-contain { object-fit: contain; width: 100%; height: 100%; display: block; }
.ns-pos-top { object-position: center 30%; }

/* ── نسبت تصویر (بوت‌استرپ .ratio دارد ولی نه این نسبت‌ها) ── */
.ns-ratio-16x10 { aspect-ratio: 16 / 10; }
.ns-ratio-4x3   { aspect-ratio: 4 / 3; }
.ns-ratio-1x1   { aspect-ratio: 1 / 1; }
.ns-ratio-3x4   { aspect-ratio: 3 / 4; }

/* ── بلور پس‌زمینه ── */
.ns-blur-sm { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }
.ns-blur    { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); }
.ns-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ns-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* ── انیمیشن (معادل transition/duration/scale تیلویند) ── */
.ns-tr        { transition: all .15s ease; }
.ns-tr-slow   { transition: all .3s ease; }
.ns-tr-color  { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.ns-tr-tf     { transition: transform .5s ease; }

.ns-hover-up:hover    { transform: translateY(-3px); }
.ns-hover-zoom img    { transition: transform .5s ease; }
.ns-hover-zoom:hover img { transform: scale(1.05); }
.ns-hover-scale:hover { transform: scale(1.05); }

/* ── group-hover: در بوت‌استرپ وجود ندارد ── */
.ns-group .ns-group-show { opacity: 0; transition: opacity .2s ease; }
.ns-group:hover .ns-group-show { opacity: 1; }

/* ── فاصلهٔ عمودی بین فرزندان (معادل space-y-*) ── */
.ns-stack-1 > * + * { margin-top: .25rem; }
.ns-stack-2 > * + * { margin-top: .5rem; }
.ns-stack-3 > * + * { margin-top: .75rem; }
.ns-stack-4 > * + * { margin-top: 1rem; }
.ns-stack-5 > * + * { margin-top: 1.25rem; }
.ns-stack-6 > * + * { margin-top: 1.5rem; }

/* ── خط جداکننده بین فرزندان (معادل divide-y) ── */
.ns-divide-y > * + * { border-top: 1px solid var(--ns-border); }
.ns-divide-x > * + * { border-right: 1px solid var(--ns-border); }

/* ── حلقه (معادل ring-*) ── */
.ns-ring-1 { box-shadow: 0 0 0 1px var(--ns-border-strong); }
.ns-ring-2 { box-shadow: 0 0 0 2px var(--ns-border-strong); }
.ns-ring-primary { box-shadow: 0 0 0 2px rgba(217,57,53,.35); }
.ns-ring-white   { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }

/* ── ارتفاع خط ── */
.ns-lh-tight   { line-height: 1.25; }
.ns-lh-snug    { line-height: 1.375; }
.ns-lh-normal  { line-height: 1.5; }
.ns-lh-relaxed { line-height: 1.75; }
.ns-lh-loose   { line-height: 2; }

/* ── اندازهٔ متن‌های ریز که بوت‌استرپ ندارد ── */
.ns-fs-11 { font-size: .6875rem; }  /* 11px */
.ns-fs-12 { font-size: .75rem; }    /* 12px */
.ns-fs-13 { font-size: .8125rem; }  /* 13px */
.ns-fs-14 { font-size: .875rem; }   /* 14px */

/* ── فونت‌های اختصاصی ── */
.ns-font-vazir   { font-family: var(--ns-font-vazir); }
.ns-font-dibaj   { font-family: var(--ns-font-dibaj); }
.ns-font-dibaj-b { font-family: var(--ns-font-dibaj-b); }
.ns-font-dibaj-r { font-family: var(--ns-font-dibaj-r); font-weight: 400; }

/* ── رنگ برند به‌عنوان یوتیلیتی ── */
.ns-text-primary { color: var(--ns-primary) !important; }
.ns-bg-primary   { background-color: var(--ns-primary) !important; }
.ns-border-primary { border-color: var(--ns-primary) !important; }
.ns-text-gold    { color: var(--ns-gold) !important; }

/* ── سطوح سمانتیک (معادل bg-white-el / text-dark-el قبلی) ── */
.ns-surface   { background-color: var(--ns-surface); }
.ns-surface-2 { background-color: var(--ns-surface-2); }
.ns-surface-3 { background-color: var(--ns-surface-3); }
.ns-text-main  { color: var(--ns-text); }
.ns-text-muted { color: var(--ns-text-muted); }
.ns-text-faint { color: var(--ns-text-faint); }
.ns-border-soft { border: 1px solid var(--ns-border); }

/* ── لینک بی‌خط ── */
.ns-link-plain { color: inherit; text-decoration: none; }
.ns-link-plain:hover { color: var(--ns-primary); }

/* ── اسکرول سفارشی با رنگ برند ── */
.ns-thin-scroll { scrollbar-width: thin; scrollbar-color: #d93935 #f0f2f5; }
.ns-thin-scroll::-webkit-scrollbar       { width: 5px; }
.ns-thin-scroll::-webkit-scrollbar-track { background: #f0f2f5; border-radius: 5px; }
.ns-thin-scroll::-webkit-scrollbar-thumb { background: #d93935; border-radius: 5px; }
[data-bs-theme="dark"] .ns-thin-scroll { scrollbar-color: #d93935 #0e1b36; }
[data-bs-theme="dark"] .ns-thin-scroll::-webkit-scrollbar-track { background: #0e1b36; }

/* ── مخفی کردن اسکرول‌بار ── */
.ns-noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.ns-noscrollbar::-webkit-scrollbar { display: none; }

/* ── z-index های نام‌دار (هم‌راستا با لایه‌های بوت‌استرپ) ── */
.ns-z-header  { z-index: 1030; }
.ns-z-sticky  { z-index: 1031; }
.ns-z-overlay { z-index: 1040; }

/* ── فاصلهٔ دقیق ۲۰ پیکسل (معادل gap-5 تیلویند) ──
   بوت‌استرپ فقط ۱۶ و ۲۴ دارد؛ این کلاس فاصلهٔ اصلی طرح را حفظ می‌کند. */
.ns-g-20 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }

/* ── گرید ۷ ستونه (بخش رسانه: ۴ + ۳) ──
   بوت‌استرپ ۱۲ ستونه است و ۷ ستون ندارد؛ نزدیک‌ترین حالتش ۷/۱۲ و ۵/۱۲
   می‌شد که نسبت را کمی جابه‌جا می‌کرد. این گرید نسبت اصلی را نگه می‌دارد. */
.ns-row-7 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 992px) {
  .ns-row-7      { grid-template-columns: repeat(7, 1fr); }
  .ns-col-7-4    { grid-column: span 4; }
  .ns-col-7-3    { grid-column: span 3; }
}

/* ── چسبندگی فقط از دسکتاپ به بالا ──
   بوت‌استرپ .position-sticky دارد ولی نسخهٔ ریسپانسیوش را ندارد
   (فقط .sticky-lg-top که top را هم صفر می‌کند). */
/* ارتفاع هدر چسبان — StickyHeader.js مقدار واقعی را می‌گذارد؛
   این فقط مقدار پیش‌فرض تا وقتی جاوااسکریپت اجرا شود. */
:root {
  --ns-sticky-h: 60px;
  --ns-sticky-top: calc(var(--ns-sticky-h) + .75rem);
}

@media (min-width: 992px) {
  .ns-sticky-lg {
    position: sticky;
    align-self: flex-start;
    top: var(--ns-sticky-top);
    max-height: calc(100vh - var(--ns-sticky-top) - 1rem);
    overflow-y: auto;
  }
}

/* برای ستون‌هایی که .position-sticky بوت‌استرپ را دارند */
.ns-sticky-top { top: var(--ns-sticky-top); }

/* ── min-width: 0 برای فرزندان flex ──
   بوت‌استرپ چنین کلاسی ندارد ولی ۱۱ ویوی تبدیل‌شده از آن استفاده
   می‌کردند (بازماندهٔ تیلویند). بدون این کلاس، متنِ بلند داخل یک
   ستون flex به‌جای بریده‌شدن، کادر را پهن می‌کند و چیدمان می‌شکند —
   چون مقدار پیش‌فرض min-width برای آیتم flex برابر auto است. */
.min-w-0 { min-width: 0; }