/* =========================================
   Responsive CSS - Mobile Optimization
   Targeting: Tablet (768px) and Mobile (480px)
   ========================================= */

/* --- Tablet & Smaller Laptops (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .hero-container .hero_img {
        width: 60% !important;
        margin: 30px auto;
    }

    .hero_content {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Stats and Legacy Grids */
    .stats-grid,
    .legacy-grid,
    .footer-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }

    /* Navigation adjustments */
    .nav-container {
        padding: 0 15px !important;
    }
}

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

    /* Global Container Adjustments */
    .container,
    .nav-container,
    .login-container,
    .registration-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Typography Scaling */
    html {
        font-size: 15px;
        /* Slight reduction */
    }

    h1,
    .hero-title,
    .section-heading {
        font-size: 2.2rem !important;
        line-height: 1.3 !important;
    }

    h2,
    .section-title {
        font-size: 1.8rem !important;
    }

    /* Navbar */
    .header-nav {
        padding: 10px 0 !important;
    }

    .nav-logos {
        gap: 10px !important;
    }

    .nav-logos img {
        height: 35px !important;
    }

    .nav-menu {
        display: none !important;
        /* Hide desktop menu */
        /* Implementation for hamburger menu would go here if JS was added, 
       otherwise we rely on stacking or simplified nav */
    }

    /* Stack Header Elements */
    .nav-container {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 15px;
    }

    /* Hero Section */
    .hero-section {
        height: auto !important;
        min-height: 100vh;
        padding-top: 80px;
        align-items: flex-start !important;
    }

    .hero-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .hero_img {
        width: 80% !important;
    }

    /* Forms (Login/Register) */
    .login-box,
    .register-box {
        padding: 30px 20px !important;
        width: 100% !important;
    }

    .input-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .inputBox,
    .gender-group {
        grid-column: span 1 !important;
    }

    /* Events Grid */
    .events-grid,
    .home-events-grid,
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .event-card {
        padding: 25px !important;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 40px !important;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .social-icons {
        justify-content: center;
    }

    /* Specific Fixes */
    .btn-register,
    .btn-download,
    .view-btn,
    button[type="submit"] {
        width: 100% !important;
        display: block;
        text-align: center;
        margin-top: 15px;
    }
}

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

    /* Further Typography Reduction */
    h1,
    .hero-title,
    .section-heading {
        font-size: 1.8rem !important;
    }

    /* Header Compactness */
    .nav-logos img {
        height: 30px !important;
    }

    .header-nav {
        position: relative !important;
        /* Unstick on mobile if content covers it */
    }

    /* Form Elements */
    .login-container {
        padding: 20px 15px !important;
    }

    .login-box,
    .register-box {
        padding: 20px 15px !important;
        box-shadow: none !important;
        /* Flatter look on mobile */
        border: 1px solid #eee;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevent zoom on iOS */
        padding: 12px 10px !important;
    }

    /* Buttons Touch Targets */
    button,
    .btn,
    a.btn-register,
    input[type="submit"] {
        min-height: 44px;
        padding: 12px !important;
    }

    /* Backgrounds */
    body,
    .hero-section,
    .accreditation {
        background-attachment: scroll !important;
        /* Fix mobile performance/jitter */
    }

    /* Hide heavy decorative elements if needed */
    .hero_shape,
    .bg_shape {
        display: none;
    }

    /* Adjust modal/popups width */
    .swal2-popup {
        width: 90% !important;
        padding: 10px !important;
    }

    /* Event Cards */
    .event-meta-item {
        font-size: 0.8rem;
    }
}