/* ==========================================================================
   wegopars / ایران‌گرد — 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; } }

/* ── کاشیِ ویدیوی شاخص ────────────────────────────────────────────────────
   🔴 `grid-column: span 2` نباید در چیدمانِ **تک‌ستونه** اعمال شود. وقتی گرید
   یک ستون دارد، span-2 یک ستونِ ضمنیِ ~۲پیکسلی می‌سازد و از آن به بعد
   کاشی‌ها یک‌درمیان ۴۳۹px و ۲px می‌شوند — یعنی نیمی از ویدیوها روی موبایل
   عملاً نامرئی. (روی نسخهٔ زنده اندازه‌گیری شد: `439px 2px`.)
   پس span فقط بالای نقطهٔ دو‌ستونه‌شدن روشن می‌شود. */
.wgp-vid-big { grid-column: auto; }
@media (min-width: 760px) { .wgp-vid-big { grid-column: span 2; } }

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

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

/* ── تیزرِ هیرو ─────────────────────────────────────────────────────────────
   نسبتِ ۱۶:۹ با `padding-bottom: 56.25%` نگه داشته می‌شود نه با `aspect-ratio`:
   کفِ مرورگرِ این سایت ۲۰۱۸ است (خروجیِ بابل بی پریستِ `env`) و `aspect-ratio`
   از ۲۰۲۱ آمده. با این ترفند، ویدیو روی هر عرضی — از ۳۲۰px تا دسکتاپ — دقیقاً
   به اندازهٔ ستونش می‌شود و هیچ‌جا بریدگی یا نوارِ سیاه ندارد. */
.wgp-hero-film { position: relative; width: 100%; }
.wgp-hero-film-frame {
  position: relative; width: 100%; padding-bottom: 56.25%; height: 0;
  border-radius: var(--r-lg, 22px); overflow: hidden;
  background: #0d1512; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.wgp-hero-film-frame > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; background: #0d1512;
}
/* دکمهٔ پخش کلِ قاب را می‌پوشاند: روی موبایل هدفِ لمسیِ کوچک یعنی چند بارِ
   خطا خوردن. لایهٔ تیرهٔ ملایم هم کنتراستِ دیسکِ سفید را روی هر فریمی تضمین
   می‌کند — فریمِ اولِ این تیزر آسمانِ روشن دارد. */
.wgp-hero-film-btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(8, 20, 16, .18);
  transition: background .22s var(--ease, ease);
}
.wgp-hero-film-btn:hover, .wgp-hero-film-btn:focus-visible { background: rgba(8, 20, 16, .30); }
.wgp-hero-film-btn:focus-visible { outline: 3px solid var(--firuze); outline-offset: -6px; }
.wgp-hero-film-disc {
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: #0f3d2e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  transition: transform .22s var(--ease, ease);
  /* مثلثِ پخش از مرکزِ بصری کمی جلوتر دیده می‌شود؛ ۳px جبرانش می‌کند.
     در RTL هم همان جهت می‌ماند: نمادِ پخش جهتِ زبان ندارد. */
  padding-left: 3px;
}
.wgp-hero-film-btn:hover .wgp-hero-film-disc { transform: scale(1.07); }
.wgp-hero-film-cap {
  margin-top: 12px; text-align: center;
  color: var(--t2); font-size: 14px; font-weight: 700;
}
@media (max-width: 560px) {
  .wgp-hero-film-disc { width: 60px; height: 60px; }
  .wgp-hero-film-cap { font-size: 13px; }
}

/* ── سقفِ ارتفاعِ نقشهٔ ایران ───────────────────────────────────────────────
   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 منو داخلِ کشوی همبرگری می‌رود. */
/* بازخوردِ روی قلمِ منو — نوارِ بی‌واکنش روی سایتِ حرفه‌ای ناتمام به‌نظر می‌رسد. */
.wgp-nav-links a { transition: background .15s, color .15s; }
.wgp-nav-links a:hover { color: var(--t1); background: color-mix(in srgb, var(--acc) 12%, transparent); }

/* 🔴 آستانه از ۸۲۰px به ۱۱۰۰px رفت (۹ شهریور). با هشت قلمِ منو + نشان + انتخابگرِ
   زبان + تم + ورود، نوار در بازهٔ ۸۲۱–۱۱۰۰px **سرریز می‌کرد**: روی ۱۰۲۴px دکمهٔ
   «Log in» ۲۶ پیکسل بیرونِ صفحه می‌افتاد و کلِ صفحه اسکرولِ افقی می‌گرفت
   (اندازه‌گیریِ زنده: clientWidth 1009 · scrollWidth 1035).
   در همان بازه کشوی همبرگری از قبل ساخته شده و آماده است، پس فقط آستانه جابه‌جا شد. */
@media (max-width: 1100px) {
  .wgp-nav-links { display: none !important; }
  .wgp-nav-desktop-only { display: none !important; }
}
/* دکمهٔ همبرگر و فاصله‌گیرِ جایگزینِ منو فقط روی موبایل‌اند.
   ⚠️ دو کلاسِ جدا لازم است نه یکی: اگر هر دو یک کلاس بگیرند،
   `querySelector('.wgp-nav-burger')` به فاصله‌گیر می‌خورد نه به دکمه — و هر
   تستِ خودکارِ کشو بی‌صدا هیچ‌کاری نمی‌کند (همین‌جا یک بار اتفاق افتاد). */
@media (min-width: 1101px) {
  .wgp-nav-burger, .wgp-nav-spacer { display: none !important; }
}

/* ── نوارِ نمایشگاه (WTM) ────────────────────────────────────────────────────
   روی دسکتاپ یک ردیفِ واحد است. روی موبایل با متنِ کامل به **سه خط و ۱۱۸px**
   می‌رسید — یعنی با نوارِ ناوبری ۱۸۵px از صفحه پیش از رسیدن به تیتر خرج می‌شد.
   زیرِ ۷۲۰px فشرده می‌شود: قلمِ کوچک‌تر، بدونِ لینکِ wtm.com (همان مقصد در
   دکمهٔ کنارش هست)، و دکمهٔ جمع‌وجور. */
.wgp-wtm { padding: 9px 22px; font-size: 13px; }
.wgp-wtm-cta { margin-inline-start: auto; }
@media (max-width: 720px) {
  .wgp-wtm { padding: 7px 16px; gap: 8px !important; font-size: 12px; }
  .wgp-wtm-x { display: none !important; }
  .wgp-wtm-cta { margin-inline-start: 0 !important; padding: 5px 11px !important; font-size: 11.5px !important; }
  .wgp-wtm-meta { font-size: 11.5px; }
}


/* کشوی موبایل — از کی‌فریمِ 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; }