/* responsive.css - قواعد التجاوب والشاشات المختلفة */

/* شاشات الحاسوب الكبيرة (Extra Large Screens - 1400px+) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-title {
        font-size: 4rem;
    }
}

/* شاشات الحاسوب العادية (Laptops & Desktops - 1200px - 1399px) */
@media (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }
}

/* شاشات الأجهزة المتوسطة والكبيرة (Tablets & Landscape Mobile - 768px - 991px) */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }

    /* ظل خفيف لقائمة الجوال الجانبية */
    .nav-menu {
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.35);
    }

    /* تحويل الهيرو إلى عمود واحد */
    .hero-section {
        padding-top: 96px;
        min-height: auto;
        padding-bottom: var(--space-3xl);
    }

    /* ترتيب رأي لليمين ورأي لليسار على الأجهزة اللوحية */
    #testimonials-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        gap: var(--space-lg);
    }

    #testimonials-grid > .card:nth-child(even) {
        transform: translateY(var(--space-lg));
    }
}

/* الهواتف الذكية (Mobile - Less than 768px) */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding-right: var(--space-md);
        padding-left: var(--space-md);
    }

    /* ضغط الهوامش العامة للشاشات الصغيرة */
    :root {
        --space-2xl: 32px;
        --space-3xl: 48px;
        --space-4xl: 64px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-desc {
        font-size: 0.98rem;
    }

    /* أزرار الهيرو بجانب بعضها أفقياً ومضبوطة لتناسب عرض الجوال */
    .hero-actions {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
    }

    .hero-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 11px 8px;
        font-size: 0.82rem;
        text-align: center;
        white-space: nowrap;
        border-radius: var(--radius-pill);
    }

    /* تحويل قسم الفريق إلى شريط تمرير أفقي ناعم بدون Scrollbar على الجوال */
    #team-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: var(--space-md) !important;
        padding: 4px 0 var(--space-lg);
        margin: 0 calc(-1 * var(--space-md));
        padding-right: var(--space-md);
        padding-left: var(--space-md);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #team-grid::-webkit-scrollbar {
        display: none;
    }

    #team-grid > .team-card {
        flex: 0 0 46%;
        width: 46%;
        min-width: 145px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        padding: var(--space-sm);
        border-radius: var(--radius-lg);
    }

    #team-grid > .team-card .team-img-container {
        margin-bottom: var(--space-xs);
        border-radius: var(--radius-md);
    }

    #team-grid > .team-card .team-name {
        font-size: 0.95rem;
    }

    #team-grid > .team-card .team-role-brief {
        font-size: 0.78rem;
    }

    /* قسم الأعمال المميزة: سلايدر أفقي مرن على الجوال (بدون Scrollbar ظاهر) */
    #works-grid,
    .featured-works-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: var(--space-md) !important;
        margin: 0 calc(-1 * var(--space-md));
        padding: 4px var(--space-md) var(--space-md);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #works-grid::-webkit-scrollbar,
    .featured-works-grid::-webkit-scrollbar {
        display: none;
    }

    #works-grid > .works-card {
        flex: 0 0 78%;
        width: 78%;
        min-width: 240px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    /* عمل واحد واضح + لمحة بسيطة من التالي (على الجوال) */
    .featured-works-grid > .works-card {
        flex: 0 0 80%;
        width: 80%;
        min-width: 0;
    }

    /* قسم آراء العملاء: سلايدر أفقي مضغوط وأنيق بدون Scrollbar على الجوال */
    #testimonials-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: var(--space-md) !important;
        padding: 4px 0 var(--space-lg);
        margin: 0 calc(-1 * var(--space-md));
        padding-right: var(--space-md);
        padding-left: var(--space-md);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #testimonials-grid::-webkit-scrollbar {
        display: none;
    }

    #testimonials-grid > .card {
        flex: 0 0 72%;
        width: 72%;
        min-width: 230px;
        padding: var(--space-lg) !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    /* تكثيف بطاقات الآراء في الجوال */
    .testimonial-quote {
        font-size: 0.88rem;
        line-height: 1.6;
        margin-bottom: var(--space-md);
    }

    .testimonial-avatar {
        width: 42px;
        height: 42px;
    }

    .contact-item {
        flex-direction: column;
        gap: var(--space-2xs);
    }
}

/* شاشات الجوال الصغيرة جداً (Small Mobile - 480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.7rem;
    }

    .hero-actions .btn {
        padding: 10px 6px;
        font-size: 0.78rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.55rem;
    }

    #team-grid > .team-card {
        flex: 0 0 46%;
        min-width: 135px;
    }

    #testimonials-grid > .card {
        flex: 0 0 76%;
        min-width: 210px;
    }

    #works-grid > .works-card {
        flex: 0 0 84%;
        min-width: 220px;
    }

    .featured-works-grid > .works-card {
        flex: 0 0 84%;
        width: 84%;
        min-width: 0;
    }
}