/* ==========================================================================
   MOBILE-FIRST / RESPONSIVE OVERRIDES
   Goal: Transform Desktop-First site into Mobile-First Experience
   Strategy: Override desktop defaults for smaller screens (max-width) 
   and Ensure base styles (min-width) where applicable for new elements.
   ========================================================================== */

/* --- 1. GLOBAL LAYOUT & TYPOGRAPHY --- */

/* Mobile Base (Default overrides for small screens) */
@media (max-width: 1024px) {
    :root {
        --container-width: 100%;
        /* Fluid container */
    }

    body {
        font-size: 16px;
        /* Ideal reading size */
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }

    .container {
        padding: 0 20px;
        /* Safe area padding */
        width: 100%;
        max-width: 100%;
    }

    .section {
        padding: 60px 0;
        /* Reduced vertical spacing */
    }
}

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

    h1,
    .hero-title {
        font-size: 2rem !important;
        /* ~32px */
        line-height: 1.2 !important;
    }

    h2,
    .section-title {
        font-size: 1.75rem !important;
        /* ~28px */
    }

    h3 {
        font-size: 1.25rem !important;
        /* ~20px */
    }

    p {
        font-size: 1rem !important;
        /* 16px */
        line-height: 1.6 !important;
    }
}


/* --- 2. HEADER & NAVIGATION --- */

/* Mobile Header (Hamburger) handled in menu-refactor.css overrides */
@media (max-width: 900px) {
    header {
        position: fixed !important;
        width: 100%;
        height: auto;
        padding: 10px 0 !important;
    }

    .logo-img {
        height: 60px !important;
        /* Smaller logo for mobile */
    }

    /* Navigation Drawer is handled by active class in JS, 
       but we ensure it's off-canvas here if needed */
}


/* --- 3. SECTIONS & GRIDS --- */

/* Convert Multi-Col Grids to Single Column Stack */
@media (max-width: 900px) {

    .grid-2,
    .grid-3,
    .grid-4,
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* Reverse order capability if needed */
    .grid-reverse-mobile {
        flex-direction: column-reverse !important;
    }
}


/* --- 4. CARDS (EXPERIENCES & PACKAGES) --- */

@media (max-width: 768px) {

    .card,
    .package-card,
    .experience-card {
        width: 100% !important;
        margin: 0 !important;
        max-width: 400px;
        /* Prevent too wide on tablets */
        margin-inline: auto !important;
        /* Center */
    }

    .card-img,
    .package-thumb {
        height: 200px !important;
        /* Fixed height for consistency */
        object-fit: cover;
    }
}


/* --- 5. FORMS & BUTTONS --- */

@media (max-width: 768px) {
    .form-group {
        margin-bottom: 20px;
    }

    .form-input,
    .form-select,
    textarea {
        width: 100% !important;
        height: 50px !important;
        /* Larger touch target */
        font-size: 16px !important;
        /* Prevent iOS zoom */
    }

    button,
    .btn,
    .btn-nav {
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 48px !important;
        /* Accessibility minimum */
        padding: 12px !important;
        font-size: 1rem !important;
    }
}


/* --- 6. ADMIN PANEL RESPONSIVENESS --- */

@media (max-width: 1024px) {

    /* Admin Sidebar turns into Drawer */
    .sidebar {
        transform: translateX(-100%);
        z-index: 1000;
        width: 280px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0 !important;
        width: 100%;
    }

    .hamburger-admin {
        display: flex !important;
        /* Show hamburger */
    }

    /* Overlay for sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-overlay.active {
        display: block;
    }
}

/* Admin Tables to Cards */
@media (max-width: 768px) {

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    /* Hide headers */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 20px;
        border: 1px solid #333;
        border-radius: 8px;
        background: var(--bg-card);
        padding: 15px;
    }

    td {
        border: none;
        position: relative;
        padding-left: 0;
        padding-bottom: 10px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .action-buttons {
        flex-direction: row;
        gap: 10px;
        width: 100%;
    }

    .btn-action {
        flex: 1;
        justify-content: center;
    }
}


/* --- 7. UTILITIES --- */

/* Hide on mobile */
.desktop-only {
    display: none !important;
}

/* Show on desktop */
@media (min-width: 1025px) {
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }
}