/* ==============================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   Breakpoints: 991px, 768px, 480px, 360px
   ============================================== */

/* Global overflow fix */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Tablet 991px --- */
@media (max-width: 991px) {
    .hero .container { padding: 40px 30px 50px; border-radius: 24px; }
    .feature-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .contact-grid { grid-template-columns: 1fr !important; }
    .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .about-grid { grid-template-columns: 1fr !important; }
    .stories-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- Mobile 768px --- */
@media (max-width: 768px) {

    /* Navbar */
    .mobile-menu-btn { display: flex !important; }
    .nav-links {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: white;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        z-index: 999;
        font-size: 1.2rem;
    }
    .nav-links.active { display: flex; }
    .nav-actions a:not(.btn-primary) { padding: 5px 10px !important; font-size: 0.85rem !important; }
    .nav-actions .btn-primary { padding: 8px 12px !important; font-size: 0.85rem !important; }
    .nav-actions { gap: 8px !important; }

    /* Hero */
    .hero { padding: 100px 15px 40px; }
    .hero .container {
        padding: 30px 20px 40px;
        border-radius: 20px;
        flex-direction: column;
        gap: 20px;
    }
    .hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
    .hero p { font-size: 0.95rem; }
    .hero-btns { flex-direction: column; gap: 12px; }
    .hero-btns .btn { width: 100%; justify-content: center; padding: 12px 20px; }
    .hero-image { width: 100% !important; max-width: 280px; margin: 0 auto; }

    /* Stats */
    .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .stat-item.leaf-shape { padding: 15px 10px; min-height: 80px; }
    .stat-item h3 { font-size: 1.5rem; }

    /* Typography */
    .section-title { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 30px; }
    .section-header { margin-bottom: 40px; }

    /* Section padding */
    .features, .services, .trust, .benefits-recruitment,
    .career-recruitment, .gallery-section { padding: 50px 0; }

    /* All grids: single column */
    .feature-grid { grid-template-columns: 1fr !important; gap: 20px; margin-top: 30px; }
    .services-grid { grid-template-columns: 1fr !important; gap: 15px; }
    .stories-grid { grid-template-columns: 1fr !important; gap: 20px; }
    .career-grid { grid-template-columns: 1fr !important; gap: 30px; }
    .benefits-card { grid-template-columns: 1fr !important; padding: 25px !important; gap: 20px !important; }
    .benefits-grid { grid-template-columns: 1fr !important; }
    .contact-grid { grid-template-columns: 1fr !important; gap: 30px; }
    .about-grid { grid-template-columns: 1fr !important; gap: 30px; }
    .testimonials { grid-template-columns: 1fr !important; }
    .hero-mission { grid-template-columns: 1fr !important; }

    /* Feature cards */
    .feature-card { padding: 35px 25px; }
    .story-card { padding: 25px 20px !important; }

    /* Gallery */
    .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr !important; gap: 30px; }
    .footer-bottom { flex-direction: column !important; gap: 10px; text-align: center; }

    /* Lead form */
    .lead-form-card { padding: 25px 20px; }

    /* Stacked flex */
    .future-stats { flex-direction: column; gap: 12px; }
    .career-btns { flex-direction: column; gap: 12px; }
    .career-btns .btn { width: 100%; justify-content: center; }

    /* Stories page */
    .story-item { flex-direction: column !important; gap: 20px; }
    .story-img, .story-content { width: 100% !important; }

    /* Join team */
    .join-team-banner { flex-direction: column; padding: 15px 20px; border-radius: 20px; text-align: center; }

    /* Admin panel responsive */
    .flex.h-screen { flex-direction: column !important; height: auto !important; overflow: visible !important; }
    aside.w-64 {
        width: 100% !important;
        height: auto !important;
        flex-direction: column !important;
    }
    aside.w-64 nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 8px !important;
        gap: 6px !important;
        flex-wrap: nowrap;
    }
    aside.w-64 nav button {
        white-space: nowrap !important;
        width: auto !important;
        min-width: auto !important;
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        flex-shrink: 0;
    }
    aside.w-64 > div:last-child { display: none !important; }
    main.flex-1 {
        overflow-y: visible !important;
        height: auto !important;
        padding: 16px !important;
    }

    /* Admin tables */
    .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* --- Small Mobile 480px --- */
@media (max-width: 480px) {
    .container { padding: 0 15px; }
    .hero { padding: 90px 10px 30px; }
    .hero .container {
        padding: 25px 15px 30px;
        border-radius: 16px;
        border-left: 5px solid var(--accent);
    }
    .hero h1 { font-size: 1.7rem; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .btn { padding: 11px 18px; font-size: 0.9rem; }
    .lead-form-card { padding: 20px 15px; border-radius: 16px; }
    .feature-card { padding: 25px 18px; border-radius: 20px; }
    .service-card { padding: 25px 18px; border-radius: 20px; }
}

/* --- Very Small 360px --- */
@media (max-width: 360px) {
    .hero h1 { font-size: 1.5rem; }
    .logo { font-size: 1.2rem; }
    .gallery-grid { grid-template-columns: 1fr !important; }
    .stats { grid-template-columns: 1fr 1fr; }
}