/* ==========================================================================
   استایل واکنش‌گرا (Responsive) - پایانه گوهرسنگ‌ها
   Breakpoints: Mobile < 768px | Tablet 768-1024px | Desktop > 1024px
   ========================================================================== */

/* ---------- تبلت و دسکتاپ کوچک (<= 1024px) ---------- */
@media (max-width: 1024px) {
    :root {
        --section-padding: 60px;
        --gap: 24px;
    }

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

    .features-grid,
    .stats-grid,
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    /* منوی موبایل فعال می‌شود */
    .menu-toggle {
        display: flex;
    }

    .header__menu-inner {
        justify-content: flex-end;
    }

    /* کشوی منو (drawer تیره) */
    .nav {
        position: fixed;
        top: 0;
        right: -320px;
        width: 300px;
        height: 100vh;
        background-color: var(--color-header-top);
        box-shadow: var(--shadow-lg);
        padding: 24px 0;
        transition: right var(--transition);
        z-index: 999;
        overflow-y: auto;
        margin: 0;
    }

    .nav.is-open {
        right: 0;
    }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-inline: 12px;
    }

    .nav__item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav__link {
        height: auto;
        padding: 14px 14px;
        font-size: 1rem;
        justify-content: space-between;
        border-radius: var(--radius);
    }

    /* زیرمنو روی موبایل: آکوردئونی، داخل جریان */
    .nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: none;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius);
        padding: 4px 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition);
    }

    .nav__item.is-expanded > .nav__submenu {
        max-height: 320px;
    }

    .nav__item.is-expanded > .nav__link i.caret {
        transform: rotate(180deg);
    }

    .nav__submenu a {
        padding-inline-start: 32px;
        font-size: 0.92rem;
    }

    /* خوشنویسی روی تبلت کوچک‌تر */
    .header__calligraphy img { height: 32px; }
}

/* ---------- موبایل (<= 768px) ---------- */
@media (max-width: 768px) {
    :root {
        --section-padding: 50px;
        --fs-h2: 1.6rem;
        --fs-h3: 1.3rem;
        --topbar-height: 58px;
        --menubar-height: 48px;
        --header-height: 106px;
    }

    .container {
        padding-inline: 16px;
    }

    /* خوشنویسی روی موبایل پنهان می‌شود تا جا باز شود */
    .header__calligraphy { display: none; }

    /* ابزارها فشرده‌تر */
    .tool-btn { min-width: 36px; height: 36px; padding: 0 10px; }

    /* لوگو فشرده */
    .logo__img { width: 42px; height: 42px; }

    .logo__title {
        font-size: 0.95rem;
    }

    .logo__subtitle {
        display: none;
    }

    /* بنر اصلی */
    .hero {
        min-height: 90vh;
        text-align: center;
    }

    .hero__content {
        margin: 0 auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* گریدها تک‌ستونه */
    .cards-grid,
    .news-grid,
    .features-grid,
    .contact-grid,
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 16px;
    }

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

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .footer__title::after {
        right: 50%;
        transform: translateX(50%);
    }

    .footer__about .logo,
    .footer__social {
        justify-content: center;
    }

    .footer__contact li {
        justify-content: center;
        text-align: right;
    }

    .footer__links a {
        justify-content: center;
    }

    /* بلوک‌های دوستونه تک‌ستونه */
    .media-block,
    .media-block--reverse {
        grid-template-columns: 1fr;
        direction: rtl;
        gap: 30px;
    }

    .media-block--reverse .media-block__img {
        order: -1;
    }

    /* کارت‌ها و باکس‌ها */
    .intro__box {
        padding: 36px 24px;
    }

    .intro__box p {
        font-size: 1.05rem;
    }

    .cta-box {
        padding: 40px 24px;
    }

    .cta-box::before {
        font-size: 8rem;
    }

    .contact-form {
        padding: 28px 20px;
    }

    .stat__number {
        font-size: 2.4rem;
    }

    .section-header {
        margin-bottom: 36px;
    }

    /* دکمه‌های شناور کوچک‌تر */
    .back-to-top {
        bottom: 20px;
        left: 20px;
        width: 44px;
        height: 44px;
    }

    /* جدول داده‌ها قابل اسکرول افقی */
    .table-wrap {
        overflow-x: auto;
    }

    .data-table {
        min-width: 520px;
    }
}

/* ---------- موبایل کوچک (<= 480px) ---------- */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .hero__badge {
        font-size: 0.8rem;
    }

    .header__actions {
        gap: 6px;
    }
}

/* ---------- کاهش حرکت برای دسترسی‌پذیری ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- پس‌زمینه ثابت روی موبایل غیرفعال (کارایی) ---------- */
@media (max-width: 1024px) {
    .stats {
        background-attachment: scroll;
    }
}

/* ==========================================================================
   واکنش‌گرایی اجزای جدید (ستون‌های محصول، نقش پایانه، دانشنامه)
   ========================================================================== */
@media (max-width: 1024px) {
    .pillars-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
    .role-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .role-grid { grid-template-columns: repeat(2, 1fr); }
    .stones-grid { grid-template-columns: repeat(2, 1fr); }
    .quote-box { padding: 30px 22px; }
    .quote-box p { font-size: 1.05rem; }
    .faq-question { font-size: 0.98rem; padding: 16px 18px; }
}

@media (max-width: 480px) {
    .role-grid { grid-template-columns: 1fr; }
    .stones-grid { grid-template-columns: 1fr; }
}

/* ---------- نقل‌قول رهبری و معرفی شخصیت ---------- */
@media (max-width: 768px) {
    .leader-quote,
    .person-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 20px;
        gap: 22px;
    }
    .leader-quote__body p { font-size: 1.02rem; line-height: 2; }
    .person-card { border-inline-start: none; border-top: 5px solid var(--color-secondary); }
}

/* ---------- پرچم هدر در موبایل ---------- */
@media (max-width: 768px) {
    .header__flag { width: 28px; }
    .logo__title { font-size: 0.98rem; }
}
@media (max-width: 480px) {
    .header__flag { width: 24px; margin-inline-end: 2px; }
}