/* ==========================================================================
   RESPONSIVE.CSS — فقط مخصوص صفحه اصلی (index.html)
   این فایل بعد از style.css لود می‌شه، پس هر قانونی اینجا باشه رو style.css
   اورراید می‌کنه. کلاس‌های اینجا همه مخصوص صفحه اصلی‌ان (توی صفحات دیگه
   استفاده نمی‌شن)، پس خیالت راحت باشه دستکاریش به بقیه صفحات آسیب نمی‌زنه.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) هیرو صفحه اصلی — .hero, .hero-slider, .hero-actions, .hero-tag
   نکته: هدر position:fixed هست و روی هیرو شناوره؛ توی موبایل به‌جای
   بزرگ‌بودن صرف هیرو (vh)، از بالا فاصله ثابت می‌گیریم که متن هیچ‌وقت
   زیر منو نره، صرف‌نظر از اینکه متن چند خط بشه.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .hero-actions {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 36px;
    }
}

@media (max-width: 560px) {
    .hero {
        min-height: auto;
        align-items: flex-start;
        padding: 112px 0 44px;
    }

    .hero h1 {
        font-size: 27px;
        margin-bottom: 16px;
    }

    .hero p {
        font-size: 14px;
        margin-bottom: 26px;
    }

    .hero-tag {
        font-size: 10.5px;
        margin-bottom: 16px;
    }

    .hero-inner {
        padding-bottom: 0;
    }

    .hero-actions .btn {
        padding: 9px 12px !important;
        font-size: 12px !important;
        gap: 6px !important;
        max-width: 59%;
    }

    .testi-track {
        height: 300px !important;
    }

    .testi-slide.is-active {
        box-shadow: inset 0 0 24px rgba(20, 18, 16, .14);
    }
}

/* --------------------------------------------------------------------------
   2) گرید محصولات/راهکارها — .solutions, .sol-grid, .sol-card
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .sol-grid {
        grid-template-columns: 1fr;
        padding: 0 6px;
    }

    .sol-card {
        padding: 24px 18px;
    }
}

/* --------------------------------------------------------------------------
   3) گام‌های ساده «از طراحی تا مونتاژ» — .simple-steps
   منتقل‌شده از style.css
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .simple-steps {
        flex-direction: column;
        gap: 26px;
        align-items: flex-start;
    }

    .simple-steps::before {
        display: none;
    }

    .simple-step {
        width: auto;
        flex-direction: row;
        text-align: right;
        gap: 16px;
    }

    .simple-step-desc {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   4) گالری پروژه‌های منتخب — .proj-gallery, .proj-panel
   منتقل‌شده از style.css
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .proj-gallery {
        flex-direction: column;
        height: auto;
    }

    .proj-panel {
        flex-basis: 64px;
        height: 64px;
    }

    .proj-panel.active {
        flex-basis: 360px;
        height: 360px;
    }

    .proj-panel-label {
        writing-mode: horizontal-tb;
        padding: 0 20px;
    }
}

/* --------------------------------------------------------------------------
   5) ویدیو معرفی + آمار — .v-video-wrap, .v-stats-row
   توی موبایل ترتیب رو دستی عوض می‌کنیم: اول متن، بعد ویدیو، بعد ردیف آمار
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .intro-grid {
        display: flex;
        flex-direction: column;
    }

    /* intro-text رو "نامرئی" می‌کنیم تا h2/p/آمار مستقیم زیرمجموعه‌ی
       intro-grid حساب بشن و بشه با order جابه‌جاشون کرد */
    .intro-text {
        display: contents;
    }

    .intro-text h2,
    .intro-text > p {
        order: 1;
    }

    .v-video-wrap {
        order: 2;
        margin: 8px 0 4px;
    }

    .v-stats-row {
        order: 3;
    }
}

@media (max-width: 760px) {
    .v-stats-row {
        flex-wrap: wrap;
        gap: 20px 0;
    }

    .v-stat {
        flex: 1 1 50%;
        padding: 0 12px;
    }

    .v-stat::before {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   6) نظرات مشتریان — .testi-carousel, .testi-arrow, .testi-slide
   منتقل‌شده از style.css + رفع افتادگی/کمرنگی کارت تو موبایل
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .testi-slide {
        width: calc(80% - 20px);
    }
}

@media (max-width: 640px) {
    .testi-carousel {
        padding: 8px 46px 4px;
    }

    .testi-arrow {
        width: 34px;
        height: 34px;
        font-size: 15px;
        top: 38%;
    }
}

@media (max-width: 560px) {
    .testi-slide {
        width: calc(100% - 20px);
        aspect-ratio: auto;
        min-height: 260px;
        padding: 22px 20px 20px;
    }
}

/* --------------------------------------------------------------------------
   7) آمار ساده (سکشن ویدیو/درباره) — .stats-plain, .stat-plain-value
   منتقل‌شده از style.css
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .stats-plain {
        flex-wrap: wrap;
        gap: 28px 36px;
    }
}

@media (max-width: 560px) {
    .stat-plain-value {
        font-size: 26px;
    }

    .stat-plain-value small {
        font-size: 18px;
    }
}

/* --------------------------------------------------------------------------
   8) سوالات متداول — .faq-wrap, .faq-q
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .faq-q {
        font-size: 14px;
        padding: 18px 0;
    }

    .faq-a p {
        font-size: 12.5px;
    }
}

/* ==========================================================================
   PRODUCTS PAGE — RESPONSIVE
   الهام‌گرفته از همون پترن‌های .about-hero / .chs-grid که قبلاً رسپانسیو کردیم
   ========================================================================== */

/* --- تبلت (900px) --- */
@media (max-width: 900px) {
    .prod-hero-slider {
        min-height: 58vh;
    }

    .prod-hero-text-wrap {
        min-height: 230px;
    }

    .prod-hero-text h1 {
        font-size: 30px;
    }

    .prod-hero-text p {
        font-size: 14px;
    }

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

/* --- موبایل بزرگ (760px) --- */
@media (max-width: 760px) {
    .prod-hero-slider {
        min-height: 62vh;
        padding-top: 150px;
    }

    .prod-hero-text-wrap {
        min-height: 260px;
    }

    .prod-hero-text h1 {
        font-size: 25px;
        line-height: 1.5;
    }

    .prod-hero-text p {
        font-size: 13.5px;
    }

    .prod-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .prod-hero-actions .btn {
        justify-content: center;
        max-width: 53%
    }

    .stage-cards {
        grid-template-columns: 1fr;
    }

    /* کرسر چرخ‌دنده روی دستگاه‌های لمسی معنی نداره، حذفش کن */
    .gear-hover {
        cursor: auto;
    }

    #gearCursor {
        display: none;
    }
}

/* --- موبایل کوچک (480px) --- */
@media (max-width: 480px) {
    .prod-hero-slider {
        min-height: 66vh;
        padding-top: 140px;
    }

    .prod-hero-text-wrap {
        min-height: 290px;
    }

    .prod-hero-text h1 {
        font-size: 21px;
    }

    .prod-hero-progress {
        height: 2px;
    }

    .cat-body {
        padding: 18px 16px;
    }

    .cat-tags {
        gap: 6px;
    }

    .cat-tag {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* --- تشخیص دستگاه بدون هاور واقعی (لمسی) --- */
@media (hover: none) and (pointer: coarse) {
    .gear-hover {
        cursor: auto;
    }

    #gearCursor {
        display: none !important;
    }
}

/* --- موبایل متوسط (560px) --- */
@media (max-width: 560px) {
    .prod-hero-slider {
        min-height: 64vh;
    }

    .prod-hero-text-wrap {
        min-height: 270px;
    }

    .prod-hero-text h1 {
        font-size: 23px;
    }

    .quick-contact-grid {
        grid-template-columns: 1fr;
    }

    .cat-tags {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .adv-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SERVICES PAGE — RESPONSIVE (موبایل)
   ========================================================================== */
@media (max-width: 760px) {

    /* ۱) تیتر و متن هیرو — سه سایز کوچیک‌تر */
    .prd-hero-text h1,
    .prod-hero-text h1 {
        font-size: 22px;
        line-height: 1.5;
    }

    .prd-hero-text p,
    .prod-hero-text p {
        font-size: 13px;
    }

    /* ۲) دکمه‌های هیرو — حداکثر عرض ۵۳٪ */
    .prd-hero-actions .btn,
    .prod-hero-actions .btn {
        max-width: 53%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ۳) سکشن ویدیو+معرفی — تیتر، بعد ویدیو، بعد آمار */
    .intro-grid {
        display: flex;
        flex-direction: column;
    }

    .intro-text {
        display: contents;
    }

    .intro-text .eyebrow,
    .intro-text h2 {
        order: 1;
        font-size: 23px;
    }

    .intro-text p {
        order: 2;
    }

    .v-video-wrap {
        order: 3;
        margin: 20px 0;
        width: 100%;
    }

    .stats-plain {
        order: 4;
    }
}

/* ==========================================================================
   BLOG PAGE — RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .blog-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .blog-grid .blog-post-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

@media (max-width: 760px) {

    .result-timeline {
        display: flow;
    }
}

/* ==========================================================================
   ABOUT PAGE — RESPONSIVE
   ========================================================================== */

/* --- ۱) هیرو تمام‌عرض (about-hero) --- */
@media (max-width: 900px) {
    .about-hero {
        min-height: 70vh;
    }

    .about-hero-grid {
        justify-content: flex-start !important;
        padding-right: 24px !important;
        padding-left: 24px !important;
    }

    .about-hero-text {
        max-width: 100%;
        text-align: right;
    }

    .about-hero-text h1 {
        font-size: 28px;
    }

    .about-hero-text .breadcrumb {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .about-hero {
        min-height: auto;
        padding: 150px 0 60px;
    }

    .about-hero-text h1 {
        font-size: 24px;
        line-height: 1.5;
    }

    .about-hero-text p {
        font-size: 13.5px;
    }

    .about-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .about-hero-actions .btn {
        justify-content: center;
    }

    .about-hero-tag {
        display: none;
    }

    /* روی موبایل لمسی، افکت هاور و درخشش دنبال ماوس معنی نداره */
    #aboutHeroSparkle {
        display: none;
    }
}

/* --- ۲) متالیست در یک نگاه (glance-dark-section) --- */
@media (max-width: 760px) {
    .glance-dark-section {
        padding: 60px 0;
    }

    .glance-dark-content h2 {
        font-size: 24px;
    }

    .glance-dark-content p {
        font-size: 13.5px;
    }

    /* باکس‌های سابقه فعالیت کوچیک‌تر */
    .glance-stats-v2 {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .glance-stat-card-v2 {
        padding: 16px 10px;
    }

    .glance-stat-icon-v2 {
        width: 34px;
        height: 34px;
        margin-bottom: 8px;
    }

    .glance-stat-icon-v2 svg {
        width: 15px;
        height: 15px;
    }

    .glance-stat-value {
        font-size: 18px;
    }

    .glance-stat-value small {
        font-size: 12px;
    }

    .glance-stat-label-v2 {
        font-size: 10.5px;
        margin-top: 6px;
    }
}

@media (max-width: 420px) {
    .glance-stats-v2 {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* --- ۳) زنجیره یکپارچه خدمات (chain-showcase) --- */
@media (max-width: 900px) {
    .chain-showcase-stage {
        height: 380px;
    }
}

@media (max-width: 640px) {
    .chain-showcase-stage {
        height: 300px;
    }

    .cs-caption {
        padding: 20px 18px;
    }

    .cs-caption h4 {
        font-size: 17px;
    }

    .cs-caption p {
        font-size: 12.5px;
    }

    .chain-showcase-nav {
        gap: 6px;
    }

    .cs-navlabel {
        font-size: 11.5px;
    }
}

/* --- ۴) زیرساخت تولید (zir-section) --- */
.zir-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 900px) {
    .zir-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .zir-image {
        aspect-ratio: 16/9;
    }

    .zir-content h2 {
        font-size: 24px;
    }
}

@media (max-width: 760px) {
    .zir-section {
        padding: 56px 0;
    }

    .zir-stats {
        gap: 12px;
    }

    .zir-stat {
        min-width: 140px;
        padding: 16px 18px;
    }

    .zir-stat-value {
        font-size: 21px;
    }

    .chain-row {
        gap: 6px;
    }

    .chain-row-sep {
        display: none;
    }

    .chain-row-item {
        width: 88px;
    }

    .chain-row-icon {
        width: 42px;
        height: 42px;
    }

    .chain-row-label {
        font-size: 11px;
    }
}

/* --- ۵) پروژه‌های منتخب (proj-bento) — استک عمودی ساده با گپ مطمئن --- */
@media (max-width: 760px) {
    .proj-bento {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
        grid-auto-rows: unset;
        gap: 16px;
    }

    .proj-bento-card,
    .proj-bento-card.large {
        grid-column: unset;
        grid-row: unset;
        width: 100%;
        aspect-ratio: 4/3;
        height: auto;
    }

    .proj-bento-title {
        font-size: 15px;
    }

    .proj-bento-card.large .proj-bento-title {
        font-size: 18px;
    }
}

/* --- ۶) مزیت‌ها / چرا متالیست (adv-grid) — فلکس با گپ مطمئن --- */
@media (max-width: 900px) {
    .adv-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 22px !important;
        margin-top: 40px;
    }

    .adv-card {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .adv-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .adv-footer h3 {
        font-size: 17px;
    }
}

/* --- ۷) گواهینامه‌ها (cert-logo) --- */
@media (max-width: 640px) {
    .cert-logo {
        flex: 0 0 150px;
        height: 200px;
    }
}

/* --- ۸) عمومی: بج روی عکس (cap-badge) رو موبایل حذف کن --- */
@media (max-width: 640px) {
    .cap-badge {
        display: none;
    }

    .glance-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* --- ۹) فوتر CTA (foot-cta) --- */
@media (max-width: 760px) {
    .foot-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: right;
        gap: 16px;
    }

    .foot-cta h3 {
        font-size: 19px;
    }
}