/**
 * ============================================================
 * ملف التنسيقات المتجاوبة - أكاديمية كود ليدر
 * responsive.css
 * ============================================================
 * 
 * نقاط التوقف (Breakpoints):
 * - Mobile:  أقل من 576px
 * - Tablet:  576px - 991px
 * - Desktop: 992px فأكثر
 * - Large:   1200px فأكثر
 * ============================================================
 */


/* ============================================================
   الشاشات الكبيرة (1200px فأكثر)
   ============================================================ */
@media (min-width: 1200px) {
    .hero-title {
        font-size: 3.2rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
}


/* ============================================================
   التابلت (576px - 991px)
   ============================================================ */
@media (max-width: 991.98px) {
    /* --- الهيرو --- */
    #hero {
        padding-top: calc(var(--navbar-height) + 20px);
        padding-bottom: 40px;
        min-height: auto;
    }
    
    .hero-title { font-size: 2.2rem; }
    .hero-description { font-size: 0.95rem; }
    
    .hero-image-wrapper { margin-bottom: 30px; }
    .hero-image { max-width: 350px; }
    
    .floating-card { padding: 8px 12px; }
    .floating-card-icon { width: 36px; height: 36px; font-size: 1rem; }
    .floating-card-text .fc-title { font-size: 0.72rem; }
    .floating-card-text .fc-subtitle { font-size: 0.62rem; }
    
    /* --- Navbar --- */
    .navbar-collapse {
        background: var(--bg-white);
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        padding: 16px;
        margin-top: 8px;
        box-shadow: var(--shadow-lg);
    }
    
    .navbar .nav-link { padding: 10px 16px !important; text-align: right; }
    .btn-cta { width: 100%; text-align: center; margin-top: 8px; }
    
    /* --- شريط STEM --- */
    .stem-bar {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px 20px;
    }
    .stem-title { justify-content: center; font-size: 1rem; }
    
    /* --- التصنيفات --- */
    .categories-section { padding: 60px 0; }
    .section-title { font-size: 1.7rem; }
    
    /* --- الإحصائيات --- */
    .stat-number { font-size: 2rem; }
    .stat-icon { font-size: 1.6rem; }
    
    /* --- خارطة الطريق --- */
    .roadmap-timeline::before { right: 20px; }
    .roadmap-item { padding: 0 60px 30px 0; }
    .roadmap-marker { right: 5px; }
    .roadmap-content { padding: 22px; }
    .roadmap-stage-title { font-size: 1.15rem; }
    
    /* --- لماذا نحن --- */
    .why-us-section { padding: 60px 0; }
    
    /* --- الفيديو --- */
    .video-cta-section { padding: 60px 0; }
    .video-cta-title { font-size: 1.6rem; }
    
    /* --- الكورسات --- */
    .courses-section { padding: 60px 0; }
    
    /* --- المشاريع --- */
    .projects-section { padding: 60px 0; }
    
    /* --- الآراء --- */
    .testimonials-section { padding: 60px 0; }
    .testimonial-card { padding: 30px; }
    .carousel-control-prev { right: -40px; }
    .carousel-control-next { left: -40px; }
    
    /* --- المشاريع --- */
    .projects-section { padding: 60px 0; }
    
    /* للتابلت: بطاقتان في كل صف */
    #projectsCarousel .carousel-item .row > div {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* --- الخصم --- */
    .discount-card { padding: 36px; }
    .discount-title { font-size: 1.5rem; }
    .discount-percent { font-size: 1.8rem; }
    
    /* --- FAQ --- */
    .faq-section { padding: 60px 0; }
    
    /* --- التسجيل --- */
    .registration-section { padding: 60px 0; }
    
    /* --- الفوتر --- */
    .site-footer { padding: 48px 0 0; }
}


/* ============================================================
   الموبايل (أقل من 576px)
   ============================================================ */
@media (max-width: 575.98px) {
    /* --- الهيرو --- */
    #hero {
        padding-top: calc(var(--navbar-height) + 10px);
        padding-bottom: 30px;
    }
    .hero-title { font-size: 1.75rem; }
    .hero-description { font-size: 0.9rem; margin-bottom: 24px; }
    .hero-image { max-width: 280px; }
    .hero-buttons { flex-direction: column; }
    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.9rem;
    }
    
    /* --- شريط STEM --- */
    .stem-logo { width: 60px; height: 60px; }
    .stem-title { font-size: 0.9rem; }
    .stem-description { font-size: 0.8rem; }
    
    /* --- التصنيفات --- */
    .categories-section { padding: 48px 0; }
    .section-header { margin-bottom: 32px; }
    .section-title { font-size: 1.5rem; }
    .section-subtitle { font-size: 0.85rem; }
    .category-card { padding: 16px 18px; }
    .category-icon { width: 44px; height: 44px; min-width: 44px; font-size: 1.2rem; }
    .category-name { font-size: 0.88rem; }
    
    /* --- الإحصائيات --- */
    .stats-section { padding: 40px 0; }
    .stat-number { font-size: 1.6rem; }
    .stat-suffix { font-size: 1.2rem; }
    .stat-label { font-size: 0.78rem; }
    .stat-icon { font-size: 1.3rem; margin-bottom: 8px; }
    
    /* --- خارطة الطريق --- */
    .roadmap-section { padding: 48px 0; }
    .roadmap-timeline::before { right: 16px; }
    .roadmap-item { padding: 0 50px 24px 0; }
    .roadmap-marker { right: 0; width: 30px; height: 30px; font-size: 0.85rem; }
    .roadmap-content { padding: 18px; }
    .roadmap-stage-title { font-size: 1.05rem; }
    .roadmap-description { font-size: 0.88rem; }
    .roadmap-course { font-size: 0.75rem; padding: 4px 10px; }
    .roadmap-header { gap: 8px; }
    .roadmap-age-badge { font-size: 0.78rem; padding: 3px 10px; }
    
    /* --- لماذا نحن --- */
    .why-us-section { padding: 48px 0; }
    .why-card { padding: 24px 18px; }
    .why-icon { width: 54px; height: 54px; font-size: 1.3rem; }
    .why-title { font-size: 1rem; }
    .why-desc { font-size: 0.85rem; }
    
    /* --- الفيديو --- */
    .video-cta-section { padding: 48px 0; }
    .video-cta-title { font-size: 1.35rem; }
    .video-cta-desc { font-size: 0.9rem; }
    
    /* --- الكورسات --- */
    .courses-section { padding: 48px 0; }
    .filter-group { gap: 8px; }
    .filter-btn { padding: 5px 12px; font-size: 0.8rem; }
    .filter-label { font-size: 0.82rem; }
    .course-card-header { padding: 18px; }
    .course-card-body { padding: 16px 18px 20px; }
    .course-card-title { font-size: 1rem; }
    .course-card-desc { font-size: 0.82rem; }
    .price-amount { font-size: 1.1rem; }
    .cf-cat-cards { gap: 8px; flex-wrap: wrap; }
    .cf-cat-card { padding: 10px 12px 9px; flex: 0 1 calc(50% - 4px); }
    .cf-cat-icon { width: 36px; height: 36px; font-size: 1rem; }
    .cf-cat-name { font-size: 0.7rem; max-width: 100%; }
    .cf-row-cats { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
    .cf-row-cats .cf-label { padding-top: 0; width: auto; }
    
    /* --- المشاريع --- */
    .projects-section { padding: 48px 0; }
    
    /* للموبايل: بطاقة واحدة فقط في كل صف */
    #projectsCarousel .carousel-item .row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .project-card { padding: 20px 16px; }
    .project-icon { width: 48px; height: 48px; font-size: 1.2rem; }
    .project-title { font-size: 0.88rem; }
    
    /* --- الآراء --- */
    .testimonials-section { padding: 48px 0; }
    .testimonial-card { padding: 24px 18px; }
    .testimonial-text { font-size: 0.95rem; }
    .testimonial-quote { font-size: 2rem; }
    .carousel-control-prev,
    .carousel-control-next { display: none; }
    .carousel-nav-btn { width: 36px; height: 36px; }
    
    /* --- الخصم --- */
    .discount-section { padding: 40px 0; }
    .discount-card { padding: 28px 20px; }
    .discount-title { font-size: 1.3rem; }
    .discount-percent { font-size: 1.6rem; }
    .discount-desc { font-size: 0.88rem; }
    .discount-circle { width: 120px; height: 120px; }
    .discount-number { font-size: 1.8rem; }
    .discount-label { font-size: 0.85rem; }
    .btn-discount { padding: 12px 24px; font-size: 0.9rem; width: 100%; justify-content: center; }
    
    /* --- FAQ --- */
    .faq-section { padding: 48px 0; }
    .faq-section .accordion-button { font-size: 0.9rem; padding: 14px 18px; }
    .faq-section .accordion-body { font-size: 0.88rem; padding: 12px 18px 16px; }
    
    /* --- التسجيل --- */
    .registration-section { padding: 48px 0; }
    .step-icon { width: 60px; height: 60px; font-size: 1.3rem; }
    .step-title { font-size: 0.95rem; }
    .step-desc { font-size: 0.82rem; }
    .contact-bar { padding: 18px; }
    .contact-bar .row > div { margin-bottom: 12px; }
    .contact-value { font-size: 0.88rem; }
    
    /* --- الفوتر --- */
    .site-footer { padding: 40px 0 0; }
    .footer-heading { font-size: 0.95rem; margin-bottom: 14px; }
    .footer-links a { font-size: 0.85rem; }
    .footer-contact a { font-size: 0.85rem; }
    .footer-social a { width: 36px; height: 36px; font-size: 1rem; }
}