/* ===================================================================
   responsive.css — واکنش‌گرایی (تبلت و موبایل)
   =================================================================== */

/* ---------- جلوگیری از اسکرول افقی ---------- */
/* توجه: overflow-x روی html گذاشته نمی‌شود چون موقعیت‌دهی
   ثابت/چسبان را در برخی مرورگرها از کار می‌اندازد. */
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ===================================================================
   تبلت
   =================================================================== */
@media (max-width: 992px) {
  /* اسکرولر کناری فقط در نمایشگرهای بزرگ */
  .side-nav { display: none; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  /* ابتدا متن و عنوان اصلی، سپس ویجت کناری */
  .hero__content { order: 1; }
  .hero__visual  { order: 2; }

  .hero__desc { max-width: 100%; }

  /* گردش کار: در تبلت سه‌ستونه */
  .flow { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-8); }
  .flow::before { display: none; }

  /* پکیج: در تبلت عمودی و وسط‌چین */
  .package {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-6);
  }
  .package__desc { margin-inline: auto; }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* صفحه تماس: در تبلت تک‌ستونه */
  .contact-grid { grid-template-columns: 1fr; }

  /* صفحه محصولات */
  .page-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .cap-grid        { grid-template-columns: 1fr; }
  .integrations    { grid-template-columns: repeat(2, 1fr); }

  /* صفحه ماژول */
  .overview-grid { grid-template-columns: 1fr; }
  .benefit-grid  { grid-template-columns: repeat(2, 1fr); }
  .blog-grid     { grid-template-columns: repeat(2, 1fr); }

  /* بخش مقالات صفحه اصلی */
  .articles-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   موبایل
   =================================================================== */
@media (max-width: 768px) {
  .container { padding-inline: var(--space-4); }

  .section { padding-block: var(--space-8); }
  .hero    { padding-block: var(--space-4) var(--space-8); }

  .section__header { margin-bottom: var(--space-6); }

  /* ---------- همه شبکه‌ها تک‌ستونه ---------- */
  .grid--2,
  .grid--3,
  .grid--4,
  .products-grid,
  .modules__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* ---------- هدر و منوی موبایل ---------- */
  .menu-toggle { display: grid; }

  .main-nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform var(--transition);
    padding: var(--space-4);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateY(0);
  }
  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-nav__link {
    display: block;
    padding: var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-base);
  }
  .main-nav__link--active::after { display: none; }

  .header-actions .btn--ghost { display: none; }

  /* دکمه‌های هدر جمع‌وجورتر */
  .header-actions .btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
  }

  /* دکمه پشتیبانی: فقط آیکون */
  .btn--support .btn__label { display: none; }
  .btn--support {
    padding: var(--space-2);
    width: 40px;
    height: 40px;
  }

  /* ---------- هیرو ---------- */
  .hero__badge { font-size: 11px; }

  .hero__actions {
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .hero__credentials {
    gap: var(--space-2);
  }
  .hero-credential__label { font-size: var(--fs-xs); }

  /* ---------- ویجت هیرو ---------- */
  .hero-showcase { padding: var(--space-4); }
  .news-list__link {
    grid-template-columns: auto 1fr;
    row-gap: var(--space-1);
  }
  .news-list__date { grid-column: 2; justify-self: start; }

  /* ---------- گردش کار — تایم‌لاین عمودی ---------- */
  .flow {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .flow::before { display: none; }

  .flow-step {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    align-content: center;
    text-align: right;
    padding: 0 0 var(--space-6);
  }
  .flow-step:last-child { padding-bottom: 0; }

  /* خط عمودی اتصال بین مراحل */
  .flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 58px;
    right: 25px;
    width: 2px;
    height: calc(100% - 58px);
    background: linear-gradient(
      to bottom,
      var(--color-border) 0%,
      var(--color-border) 70%,
      transparent 100%
    );
  }

  .flow-step__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
    width: 52px;
    height: 52px;
    background-color: var(--color-white);
    z-index: 1;
  }
  .flow-step__icon svg { width: 22px; height: 22px; }

  .flow-step__num {
    top: -4px;
    right: 34px;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .flow-step__title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-bottom: var(--space-1);
  }

  .flow-step__desc {
    grid-column: 2;
    grid-row: 2;
  }

  /* ---------- کارت محصولات ---------- */
  .product-panel__header,
  .product-panel__body {
    padding: var(--space-5);
  }

  /* ---------- ماژول‌ها و پکیج ---------- */
  .modules { margin-top: var(--space-8); }
  .package { padding: var(--space-6) var(--space-4); }
  .package__title { font-size: var(--fs-lg); }
  .package__chip  { font-size: 11px; padding: var(--space-1) var(--space-3); }
  .package__action .btn { width: 100%; }

  /* ---------- کارت‌های چرا ما ---------- */
  .why-card { padding: var(--space-5); }
  .why-card::after { font-size: 38px; top: var(--space-3); left: var(--space-4); }
  .why-card__icon { width: 48px; height: 48px; margin-bottom: var(--space-4); }

  /* ---------- نوار متحرک مشتریان ---------- */
  .logos-marquee__track { gap: var(--space-6); }
  .logos-marquee__name  { font-size: var(--fs-sm); }
  .logos-marquee__logo  { width: 42px; height: 42px; }

  /* ---------- FAQ ---------- */
  .faq-item__question {
    padding: var(--space-4);
    font-size: var(--fs-sm);
  }
  .faq-item__answer { padding: 0 var(--space-4) var(--space-4); }

  /* ---------- دکمه بازگشت به بالا ---------- */
  .to-top {
    width: 44px;
    height: 44px;
    bottom: var(--space-4);
    left: var(--space-4);
  }
  .to-top svg { width: 20px; height: 20px; }
  .scroll-progress { height: 2px; }

  /* ---------- صفحه تماس با ما ---------- */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form-card { padding: var(--space-5); }
  .page-hero { padding-block: var(--space-4) var(--space-6); }
  .page-hero__title { font-size: var(--fs-xl); }
  .info-card { padding: var(--space-4); }

  /* ---------- صفحه محصولات ---------- */
  .integrations { grid-template-columns: 1fr; }
  .arch__layer  { padding: var(--space-4); }
  .arch__node   { font-size: 11px; padding: var(--space-1) var(--space-3); }
  .cap-card__head { padding: var(--space-5); }
  .cap-list     { padding: var(--space-4) var(--space-5); }
  .cap-card__link { margin: 0 var(--space-5) var(--space-5); }
  .page-hero__actions .btn { width: 100%; }

  /* ---------- صفحه ماژول (LIS و مشابه) ---------- */
  .overview-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .overview-media { order: -1; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .benefit-stat { padding: var(--space-4); }
  .benefit-stat__value { font-size: var(--fs-xl); }

  /* ---------- وبلاگ ---------- */
  .blog-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .blog-filters { gap: var(--space-2); margin-bottom: var(--space-6); }
  .blog-filter { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }

  /* ---------- فوتر ---------- */
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .site-footer__about { max-width: 100%; }
  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* ---------- بخش مقالات صفحه اصلی ---------- */
  .articles-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .article-feature__body { padding: var(--space-5); }
  .article-feature__title { font-size: var(--fs-md); }
  .article-mini { padding: var(--space-2); gap: var(--space-3); }
  .article-mini__media { width: 64px; height: 64px; }

  /* ---------- اسلایدر اخبار صفحه اصلی ---------- */
  .news-slider { padding: var(--space-5); }
  .news-featured { grid-template-columns: 1fr; gap: var(--space-4); }
  .news-featured__title { font-size: var(--fs-lg); }

  /* ---------- CTA ---------- */
  .cta { padding: var(--space-8) var(--space-4); }
  .cta__desc { font-size: var(--fs-base); }
}

/* ===================================================================
   موبایل کوچک
   =================================================================== */
@media (max-width: 480px) {
  /* دکمه‌های اصلی تمام‌عرض برای لمس راحت‌تر */
  .hero__actions .btn,
  .cta__actions .btn {
    width: 100%;
  }

  .hero-credential__label { font-size: 12px; }

  /* عنوان لوگو در هدر کوچک‌تر تا جا شود */
  .site-logo { font-size: var(--fs-base); }
  .site-logo__img { width: 32px; height: 32px; }
}

/* ===================================================================
   تضمین اندازه مناسب برای لمس (دسترس‌پذیری)
   =================================================================== */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .main-nav__link,
  .menu-toggle,
  .faq-item__question {
    min-height: 44px;
  }
}