/* ============================================================
   📱 MOBILE.CSS - فایل قاطع responsive
   آخرین CSS که load می‌شه - همه چی override می‌کنه
   ============================================================ */

/* === قفل کامل صفحه === */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    margin: 0;
    padding: 0;
}

/* جلوگیری از overflow در همه عناصر */
*, *::before, *::after {
    box-sizing: border-box;
    max-width: 100%;
}

/* تصاویر */
img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   📱 MOBILE FIRST (تا 767px)
   ============================================================ */
@media screen and (max-width: 767px) {
    
    /* Container */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        margin: 0 auto !important;
    }
    
    /* Hero */
    .hero {
        padding: 1.5rem 0 !important;
    }
    
    .hero-top {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .hero h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .hero p {
        font-size: 0.92rem !important;
        line-height: 1.7 !important;
    }
    
    .hero-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .hero-actions .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Hero stats */
    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Hero slider wrap */
    .hero-slider-wrap {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .hero-slider,
    .hero-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* ============================================
       🎯 اسلایدرها روی موبایل - یک کارت visible
       ============================================ */
    
    /* services-slider-wrap = container کلی */
    .services-slider-wrap,
    .clients-slider-wrap,
    .news-slider-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.4rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* viewport = جایی که اسلاید نمایش داده میشه */
    .services-viewport {
        flex: 1 1 auto !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        display: block !important;
        border-radius: 12px !important;
    }
    
    /* track = خط افقی کارت‌ها */
    .services-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
        transition: transform 0.5s ease !important;
        will-change: transform !important;
    }
    
    /* کارت‌های خدمات و محصولات و اخبار: ۱ کارت کامل */
    .services-track .service-card-new,
    .services-track .news-card-new,
    #servicesTrack > *,
    #productsTrack > *,
    #newsTrack > * {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* کارت مشتری: ۲ کارت در یک view */
    #clientsTrack > .client-card-new,
    .clients-slider-wrap .client-card-new {
        flex: 0 0 calc(50% - 0.375rem) !important;
        width: calc(50% - 0.375rem) !important;
        min-width: calc(50% - 0.375rem) !important;
        max-width: calc(50% - 0.375rem) !important;
        margin: 0 !important;
    }
    
    /* فلش‌ها */
    .services-arrow {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
        padding: 0 !important;
    }
    
    /* محتوای کارت‌ها */
    .service-card-new {
        padding: 1.25rem 1rem !important;
        text-align: right !important;
    }
    
    .service-name-new {
        font-size: 1.05rem !important;
    }
    
    .service-desc-new {
        font-size: 0.85rem !important;
        min-height: auto !important;
    }
    
    /* کارت اخبار */
    .news-card-new {
        max-width: 100% !important;
    }
    
    .news-card-image {
        aspect-ratio: 16/9 !important;
        max-height: 200px !important;
        height: auto !important;
    }
    
    .news-card-title {
        font-size: 0.9rem !important;
    }
    
    /* کارت مشتری */
    .client-card-new {
        padding: 1rem 0.5rem !important;
    }
    
    .client-logo-new {
        width: 50px !important;
        height: 50px !important;
    }
    
    .client-card-new .client-name-new {
        font-size: 0.75rem !important;
        min-height: 30px !important;
    }
    
    .client-card-new .client-industry-new {
        font-size: 0.62rem !important;
        padding: 0.15rem 0.45rem !important;
    }
    
    /* hero slider داخل صفحه اصلی */
    .slider-wrapper {
        aspect-ratio: 16/10 !important;
    }
    
    .slide {
        padding: 1rem !important;
    }
    
    .slide-icon {
        font-size: 2.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .slide-content h3 {
        font-size: 1.05rem !important;
    }
    
    .slide-content p {
        font-size: 0.82rem !important;
    }
    
    .slider-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 1rem !important;
    }
    
    /* تیترها */
    .section-header h2,
    .services-main-title {
        font-size: 1.5rem !important;
    }
    
    .section-header p {
        font-size: 0.88rem !important;
    }
    
    /* فاصله sections */
    section {
        padding: 2.5rem 0 !important;
    }
    
    /* صفحه خدمات */
    .services-hero {
        padding: 2rem 0 !important;
    }
    
    .services-hero h1 {
        font-size: 1.7rem !important;
    }
    
    .services-hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .services-cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .service-pro-card {
        grid-template-columns: 1fr !important;
    }
    
    .service-pro-card .service-pro-side {
        flex-direction: row !important;
        padding: 1rem 1.25rem !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
    }
    
    .service-pro-card .service-pro-num {
        font-size: 1.75rem !important;
    }
    
    .why-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* navbar روی موبایل */
    .navbar {
        max-width: 100% !important;
    }
    
    /* فوتر */
    .main-footer {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}


/* ============================================================
   📱💻 تبلت (768-991)
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 991px) {
    
    .container {
        max-width: 720px !important;
    }
    
    .hero-top {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .hero-stats {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .hero-slider-wrap {
        grid-template-columns: 1fr !important;
    }
    
    /* اسلایدرها: ۲ کارت */
    .services-track .service-card-new {
        flex: 0 0 calc(50% - 0.5rem) !important;
        min-width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
    
    /* مشتریان: ۴ کارت */
    .client-card-new {
        flex: 0 0 calc(25% - 0.75rem) !important;
        min-width: calc(25% - 0.75rem) !important;
        max-width: calc(25% - 0.75rem) !important;
    }
    
    /* اخبار: ۲ کارت */
    .news-card-new {
        flex: 0 0 calc(50% - 0.5rem) !important;
        min-width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
    
    .services-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .why-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ============================================================
   💻 لپ‌تاپ و دسکتاپ (992+)
   ============================================================ */
@media screen and (min-width: 992px) {
    
    /* اسلایدرها: ۳-۴ کارت */
    .services-track .service-card-new {
        flex: 0 0 calc(25% - 0.94rem) !important;
        min-width: calc(25% - 0.94rem) !important;
        max-width: calc(25% - 0.94rem) !important;
    }
    
    .client-card-new {
        flex: 0 0 calc(16.666% - 1.04rem) !important;
        min-width: calc(16.666% - 1.04rem) !important;
        max-width: calc(16.666% - 1.04rem) !important;
    }
    
    .news-card-new {
        flex: 0 0 calc(33.333% - 0.834rem) !important;
        min-width: calc(33.333% - 0.834rem) !important;
        max-width: calc(33.333% - 0.834rem) !important;
    }
}

/* ============================================================
   📱 موبایل - sidebar اخبار اسلایدی
   ============================================================ */

@media screen and (max-width: 767px) {
    
    /* hero-sidebar تبدیل به اسلایدر */
    .hero-sidebar {
        position: relative !important;
        padding: 1rem !important;
        overflow: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .hero-sidebar .sidebar-title {
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* container اخبار = اسلایدر افقی */
    .hero-sidebar > .sidebar-news-list,
    .hero-sidebar {
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* تبدیل sidebar items به ردیف افقی */
    .hero-sidebar {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* container اخبار wrap با scroll افقی */
    .hero-sidebar .sidebar-news-item {
        flex: 0 0 100% !important;
        scroll-snap-align: start !important;
    }
    
    /* لینک "همه اخبار" آخر sidebar */
    .hero-sidebar .sidebar-link-more {
        margin-top: 0.5rem !important;
    }
}


/* sidebar-news-list - روی موبایل اسلایدی */
@media screen and (max-width: 767px) {
    .sidebar-news-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .sidebar-news-list::-webkit-scrollbar {
        display: none !important;
    }
    
    .sidebar-news-list .sidebar-news-item {
        flex: 0 0 80% !important;
        min-width: 80% !important;
        max-width: 80% !important;
        scroll-snap-align: start !important;
        background: rgba(255, 255, 255, 0.05) !important;
        padding: 0.75rem !important;
        border-radius: 10px !important;
        border: 1px solid rgba(212, 175, 55, 0.15) !important;
    }
    
    .sidebar-news-list .sidebar-news-item:hover {
        background: rgba(212, 175, 55, 0.1) !important;
    }
}

/* روی دسکتاپ همون ستونی */
@media screen and (min-width: 768px) {
    .sidebar-news-list {
        display: flex !important;
        flex-direction: column !important;
    }
}