/*
 * CTA Section Mobile Fix - تحسين قسم الدعوة لاتخاذ إجراء في وضع الهاتف فقط
 * بدون التأثير على باقي الصفحات
 */

/* ===== MOBILE RESPONSIVE (768px and below) ===== */
@media (max-width: 768px) {
    
    /* === استهداف قسم CTA فقط === */
    section.relative.py-20.px-4.overflow-hidden.bg-white {
        padding: 2rem 1rem !important;
    }
    
    /* === إخفاء التأثيرات الثقيلة فقط في CTA === */
    section.relative.py-20.px-4.overflow-hidden.bg-white .absolute.inset-0.overflow-hidden {
        display: none !important;
    }
    
    /* === تحسين العنوان === */
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
    }
    
    /* === تحسين الوصف === */
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__description {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin: 1rem auto !important;
    }
    
    /* === تحسين الأزرار - نفس تنسيق الهيرو سكشن === */
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(0.75rem, 2vh, 1.25rem) !important;
        align-items: center !important;
        margin-top: 1.5rem !important;
    }
    
    /* === حجم الأزرار المناسب - نفس تنسيق الهيرو سكشن === */
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__button {
        width: auto !important;
        padding: clamp(0.75rem, 2vh, 1rem) clamp(1.5rem, 3vw, 2.5rem) !important;
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 2rem !important;
    }
}

/* ===== EXTRA SMALL SCREENS (640px and below) ===== */
@media (max-width: 640px) {
    
    section.relative.py-20.px-4.overflow-hidden.bg-white {
        padding: 1.5rem 0.75rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__title {
        font-size: 1.3rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__description {
        font-size: 0.9rem !important;
        margin: 0.75rem auto !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__buttons {
        gap: clamp(0.75rem, 2vh, 1.25rem) !important;
        margin-top: 1.25rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__button {
        padding: clamp(0.75rem, 2vh, 1rem) clamp(1.5rem, 3vw, 2.5rem) !important;
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    }
}

/* ===== VERY SMALL SCREENS (480px and below) ===== */
@media (max-width: 480px) {
    
    section.relative.py-20.px-4.overflow-hidden.bg-white {
        padding: 1.25rem 0.5rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__title {
        font-size: 1.2rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__description {
        font-size: 0.85rem !important;
        margin: 0.75rem auto !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__buttons {
        gap: clamp(0.75rem, 2vh, 1.25rem) !important;
        margin-top: 1rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__button {
        padding: clamp(0.75rem, 2vh, 1rem) clamp(1.5rem, 3vw, 2.5rem) !important;
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    }
}

/* ===== ULTRA SMALL SCREENS (360px and below) ===== */
@media (max-width: 360px) {
    
    section.relative.py-20.px-4.overflow-hidden.bg-white {
        padding: 1rem 0.4rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__title {
        font-size: 1.1rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__description {
        font-size: 0.8rem !important;
        margin: 0.5rem auto !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__buttons {
        gap: clamp(0.75rem, 2vh, 1.25rem) !important;
        margin-top: 0.75rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__button {
        padding: clamp(0.75rem, 2vh, 1rem) clamp(1.5rem, 3vw, 2.5rem) !important;
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    }
}

/* ===== LANDSCAPE MODE (max-height: 500px) ===== */
@media (max-height: 500px) and (max-width: 768px) {
    
    section.relative.py-20.px-4.overflow-hidden.bg-white {
        padding: 1rem 0.75rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__title {
        font-size: 1.3rem !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__description {
        font-size: 0.85rem !important;
        margin: 0.5rem auto !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__buttons {
        gap: clamp(0.75rem, 2vh, 1.25rem) !important;
        margin-top: 0.75rem !important;
        flex-direction: column !important;
    }
    
    section.relative.py-20.px-4.overflow-hidden.bg-white .cta-section__button {
        padding: clamp(0.75rem, 2vh, 1rem) clamp(1.5rem, 3vw, 2.5rem) !important;
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    }
}