/* ========== تنظیمات قابل‌سفارشی‌سازی ========== */
:root {
  /* اندازه گاتر (فاصله افقی داخلی) */
  --container-gutter-x: clamp(12px, 4vw, 24px);

  /* نقاط شکست (breakpoints) */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-2xl: 1400px;

  /* حداکثر عرض کانتینر در هر breakpoint */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;
}

/* ========== کانتینر اصلی ========== */
.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;                /* center */
  padding-inline: var(--container-gutter-x);
}

/* در اندازه‌های بزرگ‌تر، max-width مرحله‌ای افزایش پیدا می‌کند */
@media (min-width: 576px) { .container { max-width: var(--container-sm); } }
@media (min-width: 768px) { .container { max-width: var(--container-md); } }
@media (min-width: 992px) { .container { max-width: var(--container-lg); } }
@media (min-width: 1200px){ .container { max-width: var(--container-xl); } }
@media (min-width: 1400px){ .container { max-width: var(--container-2xl);} }

/* ========== واریانت‌های اختیاری ========== */
/* تمام‌عرض (بدون محدودیت) */
.container-fluid { max-width: 100% !important; }

/* باریک‌تر برای متن‌های بلند */
.container--narrow {
  --container-sm: 520px;
  --container-md: 680px;
  --container-lg: 840px;
  --container-xl: 980px;
  --container-2xl: 1080px;
}

/* عریض‌تر برای بخش‌های تصویری/شبکه‌ای */
.container--wide {
  --container-sm: 600px;
  --container-md: 820px;
  --container-lg: 1100px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
}