/* ============================================================
   responsive.css = Mobile-First Responsive Breakpoints
   Online Shia Quran Academy
   ============================================================ */

/* === Mobile (up to 576px) === */
@media (max-width: 575px) {
    .container { padding: 0 var(--spacing-md); }
    .section { padding: var(--spacing-2xl) 0; }
    .section--lg { padding: var(--spacing-3xl) 0; }
    .section-header { margin-bottom: var(--spacing-xl); } /* Reduced for better flow */

    /* Grid */
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
    
    /* Why Us / Benefit Cards - Mobile Override */
    .why-us .grid--4 { gap: var(--spacing-md); }
    .why-us .benefit-card {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }
    .why-us .benefit-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }
    .why-us h4 { font-size: 1.1rem; margin-bottom: 2px; }
    /* Process Steps Timeline - Mobile */
    .steps-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        position: relative;
        padding-left: 20px;
    }
    .steps-grid::before {
        display: block;
        content: '';
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 41px; /* Center of the number badge (20px padding + 21px half-width) */
        width: 3px;
        height: auto;
        background: linear-gradient(to bottom, var(--color-primary-pale), var(--color-primary), var(--color-primary-pale));
        z-index: 0;
    }
    .steps-grid .step-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding-left: 65px;
    }
    .steps-grid .step-number {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
    }
    .steps-grid .step-icon { display: none; } /* Hide icon to emphasize the sleek timeline */
    .steps-grid .step-item h3 { margin-top: 5px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .form-group.full-width { grid-column: auto; }

    /* Header */
    .mobile-menu-toggle { display: flex; }
    .header-actions .btn { display: none; }
    .nav-menu { display: none; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); }
    .footer-bottom .container { flex-direction: column; text-align: center; }
    /* Quick Links + Our Courses: side-by-side 2 columns on mobile */
    .footer-links-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }

    /* Hero = mobile-first */
    .hero-main {
        padding: 90px 0 50px;
        min-height: auto;
    }
    .hero-center h1 { font-size: clamp(1.65rem, 8vw, 2rem); }
    .hero-center { padding: 0 var(--spacing-md); } /* Increased from sm to match container */
    .hero-badge { font-size: 0.72rem; padding: 5px 12px; white-space: normal; text-align: center; }
    /* Hero actions = stack on mobile */
    .hero-center .hero-actions { flex-direction: column; }
    .hero-center .hero-actions .btn { width: 100%; justify-content: center; }
    /* Trust row = keep single row on mobile */
    .hero-trust-row { 
        gap: var(--spacing-sm) var(--spacing-md); 
        justify-content: flex-start; /* Allow items to start from left and scroll if needed */
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* CTA */
    .cta-buttons { flex-direction: column; align-items: center; }
    .cta-banner { padding: var(--spacing-xl); }
    .cta-arabic { font-size: 1.2rem; }

    /* Pricing */
    .pricing-cards-grid { grid-template-columns: 1fr !important; }

    /* Page Hero */
    .page-hero { padding: calc(var(--header-height) + var(--topbar-height) + var(--spacing-lg)) 0 var(--spacing-2xl); }
    .page-hero h1 { font-size: 1.75rem; }

    /* Course double col layout */
    .course-detail-grid { grid-template-columns: 1fr !important; }
    .teacher-grid { grid-template-columns: 1fr !important; }

    /* Section label = prevent long labels from overflowing */
    .section-label { white-space: normal; text-align: center; justify-content: center; }
    .section-desc { font-size: var(--font-size-base); }
}

/* === Small Tablet (576=767px) === */
@media (min-width: 576px) and (max-width: 767px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid::before { display: none; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }

    .mobile-menu-toggle { display: flex; }
    .header-actions .btn { display: none; }
    .nav-menu { display: none; }

    /* Hero tablet fix */
    .hero-main { padding: 100px 0 60px; min-height: auto; }
    .hero-center .hero-actions { flex-direction: column; }
    .hero-center .hero-actions .btn { justify-content: center; }
    /* Footer: keep side-by-side on small tablet too */
    .footer-links-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
}

/* === Tablet (768=1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid::before { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    /* On tablet, footer-links-row shows as a single cell spanning = let it be contents */
    .footer-links-row { display: contents; }

     /* Show mobile menu on tablet too */
    .nav-menu { display: none; }
    .mobile-menu-toggle { display: flex; }
    .header-actions .btn { display: none; }

    .teacher-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* === Desktop (1025px+) === */
@media (min-width: 1025px) {
    .mobile-menu-toggle { display: none !important; }
    .nav-menu { display: flex !important; }

    .hero-split-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--spacing-3xl);
    }

    .course-detail-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* === Large Desktop (1280px+) === */
@media (min-width: 1280px) {
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* === Utilities === */
.hidden-mobile { display: block; }
.visible-mobile { display: none; }

@media (max-width: 767px) {
    .hidden-mobile { display: none !important; }
    .visible-mobile { display: block !important; }
    .text-center-mobile { text-align: center !important; }
    .section-label { justify-content: center; }
}

/* === Top Bar hidden on scroll (desktop) === */
@media (min-width: 1025px) {
    .global-header.scrolled .top-bar {
        height: 0;
        overflow: hidden;
    }
    .global-header.scrolled .main-nav {
        box-shadow: var(--shadow-lg);
    }
}

/* === Course page grid === */
.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

@media (max-width: 1024px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .course-grid { grid-template-columns: 1fr; } }

/* === Teachers grid === */
.teacher-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
}

@media (max-width: 1024px) { .teacher-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .teacher-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .teacher-grid { grid-template-columns: repeat(2, 1fr); } }

/* === Blog grid === */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .blog-grid { grid-template-columns: 1fr; } }

/* === Course Card Premium Mobile Fixes === */
@media (max-width: 575px) {
    .course-card-premium .card-image { height: 160px; }
    .course-card-premium .card-body { padding: var(--spacing-md); }
    .course-card-premium .card-description { 
        display: -webkit-box; 
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: var(--spacing-md);
        font-size: 0.8rem;
    }
    .course-card-premium .card-features {
        display: flex;
        gap: 6px;
        margin-bottom: var(--spacing-lg);
        padding-top: var(--spacing-sm);
    }
    .course-card-premium .card-features span { font-size: 0.7rem; }
}

/* === Benefits grid === */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 576px) { .benefits-grid { grid-template-columns: 1fr; } }

/* === Testimonials grid === */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

@media (max-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .testimonials-grid { grid-template-columns: 1fr; } }

/* === Pricing cards === */
.pricing-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

@media (max-width: 1024px) { .pricing-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .pricing-cards-grid { grid-template-columns: 1fr; } }

/* === Enhanced Course Grid === */
@media (max-width: 1024px) { .course-grid-enhanced { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .course-grid-enhanced { grid-template-columns: 1fr; } }

/* === Students Success Grid === */
@media (max-width: 1024px) {
    .success-content-grid { grid-template-columns: 1fr; }
    .success-cta-box { position: static; }
}

/* === Hero arabic text mobile === */
@media (max-width: 575px) {
    .hero-arabic-text { font-size: 1.1rem; }
}

/* === Course Page & Spacing Optimizations === */
@media (max-width: 767px) {
    .section { padding: 2.5rem 0 !important; }
    .section--sm { padding: 1.5rem 0 !important; }
    .section-header { margin-bottom: 1.25rem !important; }
    .section-title { margin-bottom: 0.5rem !important; }
    
    /* How it Works / Subscription Cards */
    .grid--4 { gap: 0.75rem !important; }
    .grid--4 > div { padding: 1rem !important; }
    .grid--4 i { margin-bottom: 0.4rem !important; }
    .grid--4 h3 { margin-bottom: 0.25rem !important; }
    
    /* Button spacing */
    .mt-xl { margin-top: 1rem !important; }
    .mt-3xl { margin-top: 2rem !important; }
    
    /* Course grid spacing */
    .course-grid { gap: 1rem !important; }
    .course-card-wrap { margin-bottom: 0 !important; }
}

/* Compact sections on Desktop too */
@media (min-width: 1025px) {
    .section { padding: 4.5rem 0; }
    .section--sm { padding: 3rem 0; }
}