/* ==========================================================================
   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;
    }
}

@media (min-width: 760px) {
    .proj-filter-bar {
        flex-direction: row-reverse;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
}

@media (max-width: 900px) {
    #projGrid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    #projGrid .proj-archive-img {
        aspect-ratio: 16/10;
    }
}

@media (max-width: 560px) {
    #projGrid {
        display: grid !important;
        flex-wrap: unset;
        overflow-x: visible;
        scroll-snap-type: none;
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .post-hero {
        padding: 130px 0 30px;
    }

    .post-hero .breadcrumb {
        flex-wrap: wrap;
        font-size: 11.5px;
        gap: 4px;
    }

    .post-hero .blog-post-cat {
        margin: 14px 0 10px;
    }

    .proj-hero-sub {
        font-size: 13.5px;
        margin: -4px 0 14px;
    }

    .post-hero-meta {
        gap: 12px;
    }

    .post-hero-meta span {
        font-size: 12px;
    }
}

@media (max-width: 560px) {
    .blog-grid .proj-archive-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

.coop-audience-grid,
.coop-model-grid,
.coop-process-grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .coop-audience-grid,
    .coop-model-grid,
    .coop-model-grid[style] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .coop-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coop-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .coop-audience-grid,
    .coop-model-grid,
    .coop-model-grid[style] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 560px) {
    .coop-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* جلوگیری از سرریز کلی صفحه در هر شرایطی */
body {
    overflow-x: hidden;
}

@media (max-width: 900px) {
    .coop-process-grid[style] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .coop-process-grid[style] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}