/* ==========================================================================
   رفتار موبایل و تبلت. همه‌ی قوانین ریسپانسیو اینجاست؛ site.css فقط ظاهر
   دسکتاپ و کامپوننت‌هاست و هیچ @media برای اندازه‌ی صفحه ندارد.

   نقاط شکست (نقطه‌ی شروع؛ با محتوای واقعی تنظیم شده‌اند):
     زیر ۴۸۰px       موبایل کوچک
     ۴۸۰ تا ۷۶۷px    موبایل بزرگ
     ۷۶۸ تا ۱۰۲۳px   تبلت
     ۱۰۲۴px به بالا  دسکتاپ (قوانین site.css، بدون تغییر)
   ========================================================================== */

/* ---- ۱. فاصله‌ی دو طرف صفحه: زیر ۷۶۸ به ۱۶px کاهش می‌یابد ---- */
@media (max-width: 767.98px) {
  .wrap { padding-inline: var(--s-4); }
}

/* ---- ۲. هدر و منو ----
   زیر ۷۶۸: هدر دو ردیف است (لوگو و دکمه‌ها، سپس منو). منو همیشه دیده می‌شود،
   بدون همبرگر، چون سه لینک جا دارند. هدر sticky نیست تا یک چهارم صفحه را
   نگیرد. */
@media (max-width: 1023.98px) {
  .nav-toggle { display: none; }
  .main-nav {
    display: flex;
    position: static;
    inset: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-1);
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .main-nav a {
    width: auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--s-3);
  }
  .main-nav a[aria-current="page"]::after { display: none; }
  .main-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
}

/* لوگو و لینک‌های منو در هر اندازه‌ای هدف لمسی ۴۴px دارند. ظاهرشان تقریباً
   تغییر نمی‌کند، چون متن وسط‌چین است. */
.wordmark { min-height: 44px; display: inline-flex; align-items: center; }
.main-nav a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 767.98px) {
  .site-header { position: static; }
  .header-inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: var(--s-2);
    padding-block: var(--s-3);
  }
  .header-actions { margin-left: auto; }
  .main-nav { order: 3; flex: 1 0 100%; margin-left: 0; }
  .wordmark .brand-logo { height: 24px; }
}

/* ---- ۳. فاصله‌ی بخش‌ها: روی موبایل کمتر، تا محتوا روی هم نیفتد و خالی به نظر نرسد ---- */
@media (max-width: 767.98px) {
  .editorial-band { padding-block: var(--s-7); }
}

/* ---- ۴. تیتر اصلی ---- */
@media (max-width: 767.98px) {
  .masthead-title { font-size: clamp(2.5rem, 9vw, 3.75rem); }
  .lic-hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
}
@media (max-width: 479.98px) {
  .masthead-title { font-size: clamp(2rem, 11vw, 2.75rem); }
}

/* ---- ۵. دکمه‌ها در موبایل کوچک: تمام‌عرض و پشت‌سرهم ---- */
@media (max-width: 479.98px) {
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .hero-actions .btn { width: 100%; }
}

/* ---- ۶. کارت‌های وسط‌چین (ولت‌ها و اصول کار): حداکثر ۳ در هر ردیف ----
   ۳ در هر ردیف از ۷۶۸ به بالا؛ ۲ در موبایل بزرگ؛ ۱ در موبایل کوچک. ردیف
   آخر همیشه وسط می‌ماند. */
.tree-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tree-grid > * {
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .tree-grid > * {
    flex-basis: calc((100% - 2 * var(--s-4)) / 3);
    max-width: calc((100% - 2 * var(--s-4)) / 3);
  }
}
@media (min-width: 480px) and (max-width: 767.98px) {
  .tree-grid > * {
    flex-basis: calc((100% - var(--s-4)) / 2);
    max-width: calc((100% - var(--s-4)) / 2);
  }
}

/* ---- ۷. کارت‌های لایسنس: ۴ در دسکتاپ، ۲ در تبلت و موبایل بزرگ، ۱ در موبایل کوچک ---- */
@media (min-width: 1100px) {
  .lic-tiers.tree-grid > * {
    flex-basis: calc((100% - 3 * var(--s-4)) / 4);
    max-width: calc((100% - 3 * var(--s-4)) / 4);
  }
}
@media (min-width: 480px) and (max-width: 1099.98px) {
  .lic-tiers.tree-grid > * {
    flex-basis: calc((100% - var(--s-4)) / 2);
    max-width: calc((100% - var(--s-4)) / 2);
  }
}

/* ---- ۸. آمار: زیر ۴۸۰ هر آمار یک ردیف است تا برچسب‌های بلند نشکنند ---- */
@media (max-width: 479.98px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
  }
  .stat-cell dt { font-size: 13px; letter-spacing: .06em; }
  .stat-cell dd { font-size: 28px; margin: 0; }
}

/* ---- ۹. پاورقی در موبایل کوچک: ایمیل و کپی‌رایت هر کدام یک ردیف ---- */
@media (max-width: 479.98px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .footer-bottom .btn { width: 100%; max-width: 100%; }
}