/* ==========================================================================
   wegopaars / ایران‌گرد — DESIGN SYSTEM ENTRY POINT
   Consumers link this one file. It is an @import manifest only —
   never put rules here. Everything reachable from here ships.
   ========================================================================== */

@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/base.css');

/* ==========================================================================
   ریسپانسیو — بریک‌پوینت‌های سراسریِ سایت   (۱۹ مرداد ۱۴۰۵)
   --------------------------------------------------------------------------
   🔴 چرا این‌ها اینجا هستند و نه در JSX:
   کلِ سایت با **استایلِ درون‌خطی** نوشته شده، و استایلِ درون‌خطی
   `@media` نمی‌پذیرد — این محدودیتِ خودِ DOM است. تا پیش از این تاریخ
   سایت **هیچ بریک‌پوینتی** نداشت (صفر @media در ۶ فایلِ JSX و ۵ فایلِ توکن)
   و روی موبایل چیدمانِ دسکتاپ را له‌شده نشان می‌داد.

   ⚠️ قاعدهٔ استفاده: هنگامِ گذاشتنِ این کلاس‌ها، `gridTemplateColumns` را از
   استایلِ درون‌خطی **حذف کن** — کنارش نگذار. استایلِ درون‌خطی از هر قاعدهٔ
   شیت قوی‌تر است و کلاس بی‌اثر می‌ماند. (به همین دلیل بود که `.wgp-grid4`ِ
   قدیم مجبور شد `!important` بگذارد.)

   بریک‌پوینت‌ها:  1100 تبلتِ افقی · 820 تبلت · 560 موبایل
   ========================================================================== */

/* گریدِ ۴ستونهٔ صفحاتِ استان (خواستهٔ مالک) — با شکستِ ریسپانسیو تا روی
   موبایل ۴ ستون له نشود. `!important` تاریخی است: بعضی مصرف‌کننده‌ها هنوز
   gridTemplateColumnsِ درون‌خطی دارند. */
.wgp-grid4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .wgp-grid4 { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 820px)  { .wgp-grid4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px)  { .wgp-grid4 { grid-template-columns: 1fr !important; } }

/* ── تراکمِ عمودی ──────────────────────────────────────────────────────────
   ظرفِ استانداردِ سکشن. پیش از این هر سکشن `padding:'50px 22px'`ِ درون‌خطی
   داشت که روی موبایل هم همان می‌ماند: شش سکشن × ۱۰۰px = ۶۰۰ پیکسل پدینگِ
   خالی که کاربر باید اسکرول می‌کرد (بازخوردِ مالک: «بخشی از فضا خالی»).
   گاتر هم روی موبایل از ۲۲ به ۱۴ می‌آید و ۱۶ پیکسل عرضِ مفید برمی‌گرداند. */
.wgp-sec { max-width: var(--maxw); margin: 0 auto; padding: 50px 22px; }
@media (max-width: 900px) { .wgp-sec { padding: 34px 18px; } }
@media (max-width: 560px) { .wgp-sec { padding: 24px 14px; } }

/* کارت‌ها روی موبایل. `Card` پدینگ را درون‌خطی می‌نویسد، پس تنها راهِ
   بازنویسی‌اش `!important` است — این استثنا آگاهانه است. */
@media (max-width: 560px) {
  .wgp-card { padding: 18px 16px !important; }
  /* عنوانِ سکشن روی موبایل نباید سه خط شود */
  .wgp-sec h1, .wgp-sec h2 { line-height: 1.25; }
}

/* ── نوارِ فیلم‌ها (اسلایدِ «ایران را روی پرده ببینید») ──────────────────────
   نسخهٔ قبلی یک `overflowX:auto`ِ لخت بود: روی موبایل نه نقطهٔ توقف داشت،
   نه نشانه‌ای که ادامه دارد، و پوسترِ آخر لبِ صفحه بریده می‌شد.
   حالا اسنپ می‌گیرد، از گاترِ سکشن بیرون می‌زند تا لبه‌به‌لبه دیده شود، و
   پوسترِ بعدی کمی پیداست تا کاربر بفهمد باید بکشد. */
.wgp-strip {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory; scroll-padding-inline-start: 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.wgp-strip::-webkit-scrollbar { display: none; }
.wgp-strip > * { scroll-snap-align: start; }
@media (max-width: 560px) {
  /* لبه‌به‌لبه: گاترِ ۱۴پیکسلیِ سکشن را خنثی می‌کند و خودش پدینگ می‌دهد */
  .wgp-strip { margin-inline: -14px; padding-inline: 14px; gap: 12px; }
}

/* گریدِ ۳ستونه — کارتِ صنایع‌دستی، روشِ شارژِ کیف‌پول، سه‌گامِ تورِ سلامت */
.wgp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .wgp-grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wgp-grid3 { grid-template-columns: 1fr; } }

/* گریدِ ۲ستونه — کارتِ خدمات */
.wgp-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .wgp-grid2 { grid-template-columns: 1fr; } }

/* دو نیمهٔ هم‌وزنِ محتوایی (متن کنارِ فرم) */
.wgp-split2 { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .wgp-split2 { grid-template-columns: 1fr; } }

/* ── هیرو ──────────────────────────────────────────────────────────────────
   ستونِ دوم سه کارتِ `position:absolute` با عرضِ ثابتِ ۲۰۰/۲۱۰/۱۵۰px دارد.
   وقتی گرید تک‌ستونه می‌شود آن ستون ~۱۹۰px عرض می‌گیرد و کارت‌ها بیرون
   می‌زنند. زیرِ ۹۰۰px ستونِ تزئینی کلاً برداشته می‌شود — روی موبایل تیتر و
   دکمهٔ کاوش باید نمای اول را بگیرند، نه سه کارتِ شناور. */
.wgp-hero { display: grid; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 900px) {
  .wgp-hero { grid-template-columns: 1fr; }
  .wgp-hero-art { display: none; }
  /* پاراگرافِ هیرو `maxWidth:540`ِ درون‌خطی دارد که در چیدمانِ دوستونه درست
     است، ولی وقتی تک‌ستونه می‌شود روی تبلتِ ۷۶۸px حدود ۲۰۰ پیکسل فضای مرده
     کنارش می‌ماند. تنها راهِ بازنویسیِ استایلِ درون‌خطی `!important` است. */
  .wgp-hero p { max-width: none !important; }
}

/* ── سقفِ ارتفاعِ نقشهٔ ایران ───────────────────────────────────────────────
   SVG با `viewBox="0 0 670 620"` و `width:100%` روی هر عرضی ارتفاعِ متناسب
   می‌گیرد: روی تبلتِ ۷۶۸px یعنی ~۷۰۰ پیکسل، که کلِ نمای اول را می‌بلعد.
   `preserveAspectRatio="xMidYMid meet"` باعث می‌شود سقفِ ارتفاع نقشه را
   بِبُرد نه بکشد. (همین سقف ۱۸ مرداد برای `ProvinceMapPicker` گذاشته شده
   بود ولی نقشهٔ صفحهٔ اصلی کامپوننتِ جدایی است و از قلم افتاده بود.) */
@media (max-width: 900px) { .wgp-map-aside svg { max-height: 380px; } }
@media (max-width: 560px) { .wgp-map-aside svg { max-height: 300px; } }

/* نقشه + ستونِ کناریِ ۲۹۰px — زیرِ ۹۰۰px ستونِ کناری زیرِ نقشه می‌رود */
.wgp-map-aside { display: grid; grid-template-columns: 1fr 290px; }
@media (max-width: 900px) { .wgp-map-aside { grid-template-columns: 1fr; } }

/* فوترِ ۴ستونه — روی تبلت ۲ ستون، روی موبایل ۱ ستون */
.wgp-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .wgp-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wgp-footer-grid { grid-template-columns: 1fr; } }

/* فرم‌ها — فیلدها روی موبایل باید تمام‌عرض شوند وگرنه ورودی غیرقابلِ استفاده است */
.wgp-form2 { display: grid; grid-template-columns: 1fr 1fr; }
.wgp-form3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .wgp-form2, .wgp-form3 { grid-template-columns: 1fr; } }

/* ── نوارِ ناوبری ──────────────────────────────────────────────────────────
   هشت آیتمِ منو + لوگو + انتخابگرِ زبان + تم + حساب در یک ردیفِ `flex`
   بدونِ `flexWrap`. زیرِ ۸۲۰px منو داخلِ کشوی همبرگری می‌رود. */
@media (max-width: 820px) {
  .wgp-nav-links { display: none !important; }
  .wgp-nav-desktop-only { display: none !important; }
}
/* دکمهٔ همبرگر و فاصله‌گیرِ جایگزینِ منو فقط روی موبایل‌اند.
   ⚠️ دو کلاسِ جدا لازم است نه یکی: اگر هر دو یک کلاس بگیرند،
   `querySelector('.wgp-nav-burger')` به فاصله‌گیر می‌خورد نه به دکمه — و هر
   تستِ خودکارِ کشو بی‌صدا هیچ‌کاری نمی‌کند (همین‌جا یک بار اتفاق افتاد). */
@media (min-width: 821px) {
  .wgp-nav-burger, .wgp-nav-spacer { display: none !important; }
}

/* کشوی موبایل — از کی‌فریمِ drawerIn در tokens/base.css استفاده می‌کند.
   ⚠️ مختصات `left/right` خامِ فیزیکی‌اند نه `inset-inline-*`: کشو تمام‌عرض
   است پس جهت اهمیت ندارد، و `inset-inline-*` زیرِ RTL برمی‌گردد (دو بار در
   همین پروژه سوخت). */
.wgp-drawer {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 200; display: flex; flex-direction: column;
  background: var(--bg); animation: drawerIn var(--dur, .22s) var(--ease) both;
  overflow-y: auto;
}
.wgp-drawer a { display: block; padding: 15px 20px; text-decoration: none; color: var(--t1); font-weight: 700; font-size: 17px; border-bottom: 1px solid var(--line); }
.wgp-drawer a:active { background: var(--surface); }

/* ── صفحهٔ معرفیِ جاذبه ──────────────────────────────────────────────────────
   چیدمانِ قبلی `maxWidth:780px` وسط‌چین بود و روی نمایشگرِ ۱۵۶۰px حدودِ ۴۰٪ عرضِ
   صفحه حاشیهٔ خالی می‌ماند (بازخوردِ صریحِ مالک: «چینش‌ها را درست کن طوری که کلِ
   صفحه پر بشه»). حالا دو ستون: متن و نقشه و سوغات در ستونِ اصلی، و کارتِ
   «در یک نگاه» + «دیگر جاذبه‌ها» در ستونِ چسبانِ کناری.

   ⚠️ ستونِ کناری زیرِ ۱۰۰۰px باید **زیرِ** متن برود نه کنارش — با ۳۲۰px ثابت،
   روی تبلت متن به ستونِ باریکِ غیرقابلِ‌خواندن تبدیل می‌شد. */
.wgp-place-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; }
.wgp-place-aside { position: sticky; top: 86px; }
@media (max-width: 1000px) {
  .wgp-place-grid { grid-template-columns: 1fr !important; gap: 24px; }
  /* چسبان‌بودن در حالتِ تک‌ستونه بی‌معنی است و روی موبایل کارت را گیر می‌اندازد */
  .wgp-place-aside { position: static !important; }
}
/* روی موبایل هیروِ ۴۰۰px کلِ صفحهٔ اول را می‌بلعد و کاربر تیتر را نمی‌بیند */
@media (max-width: 620px) {
  .wgp-place header img { height: 230px !important; }
  .wgp-place h1 { font-size: 24px !important; }
}

/* متنِ کارت به سه خط محدود شود تا ردیف‌ها هم‌تراز بمانند */
.wgp-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* عنوانِ محصولِ باسلام گاهی خیلی بلند است و ارتفاعِ کارت‌های «برترین‌ها» را به‌هم می‌ریزد */
.wgp-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }