/* ===========================================
   Mobile Enhancements - Premiere School
   Enhanced mobile experience for all screens
   =========================================== */

/* ==================== ROOT MOBILE ADJUSTMENTS ==================== */
:root {
    --mobile-header-height: 60px;
    --mobile-padding: 16px;
    --mobile-gap: 12px;
    --mobile-radius: 12px;
    --touch-target: 44px;
}

/* ==================== GLOBAL MOBILE FIXES ==================== */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--mobile-header-height);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==================== MOBILE TYPOGRAPHY ==================== */
@media (max-width: 768px) {
    body {
        font-size: 15px;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

/* ==================== MOBILE HEADER IMPROVEMENTS ==================== */
@media (max-width: 1024px) {
    /* Improve mobile header */
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    /* Better logo sizing on mobile */
    header .flex-shrink-0 img {
        height: 36px !important;
    }

    /* Hide long text on smaller screens */
    header .hidden.sm\\:block h1 {
        font-size: 0.8rem;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 640px) {
    /* Even smaller header on mobile */
    header .flex-shrink-0 img {
        height: 32px !important;
    }

    /* Hide school name, show only logo */
    header .hidden.sm\\:block {
        display: none !important;
    }
}

/* ==================== MOBILE NAVIGATION ==================== */
@media (max-width: 1024px) {
    /* Full-screen mobile menu */
    #mobileMenu {
        max-height: calc(100vh - var(--mobile-header-height));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #mobileMenu a {
        padding: 14px 20px;
        border-bottom: 1px solid #f1f5f9;
    }

    /* Larger touch targets */
    #mobileMenuBtn {
        padding: 10px;
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }
}

/* ==================== MOBILE HERO SECTION ==================== */
@media (max-width: 768px) {
    /* Hero key features - wrap better */
    .hero-features {
        gap: 8px;
    }

    .hero-features > div {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    /* Hero image container */
    .relative.mx-auto.max-w-lg {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    /* Quote dots navigation */
    #quoteDots {
        justify-content: center;
    }
}

/* ==================== MOBILE CARDS & GRIDS ==================== */
@media (max-width: 768px) {
    /* Card improvements */
    .rounded-2xl,
    .rounded-3xl {
        border-radius: var(--mobile-radius);
    }

    /* Card padding - only on mobile */
    .mobile-card-padding {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 480px) {
    /* Smaller screens spacing */
    .mobile-card-padding {
        padding: 12px;
    }
}

/* ==================== MOBILE TESTIMONIALS ==================== */
@media (max-width: 768px) {
    /* Testimonial cards */
    .testimonial-slide,
    [class*="testimonial"] {
        padding: var(--mobile-padding);
    }

    /* Profile images */
    .w-16.h-16,
    .w-20.h-20 {
        width: 48px !important;
        height: 48px !important;
    }

    /* Stars rating */
    .text-accent-400.text-lg,
    .fa-star {
        font-size: 0.875rem !important;
    }
}

/* ==================== MOBILE FORMS ==================== */
@media (max-width: 768px) {
    /* Form container */
    form, .registration-form {
        padding: var(--mobile-padding) !important;
    }

    /* Form rows - stack on mobile */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Input fields - larger for touch */
    input, select, textarea {
        min-height: var(--touch-target);
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px 16px !important;
        border-radius: 8px !important;
    }

    /* Labels */
    label, .form-label {
        font-size: 0.875rem;
        margin-bottom: 6px;
    }

    /* Buttons - full width and larger */
    button[type="submit"],
    .btn-submit,
    .btn-primary,
    .btn-next,
    .btn-prev {
        width: 100%;
        min-height: var(--touch-target);
        font-size: 1rem;
        padding: 14px 20px !important;
    }

    /* Multi-step form progress */
    .multi-step-progress {
        overflow-x: auto;
        padding: 0 10px;
        margin: 0 -10px 30px;
        -webkit-overflow-scrolling: touch;
    }

    .step-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .step-title {
        font-size: 9px !important;
        max-width: 50px !important;
    }

    /* Step navigation - stack buttons */
    .step-navigation {
        flex-direction: column;
        gap: 12px;
    }

    .step-navigation .btn-prev,
    .step-navigation .btn-next {
        width: 100%;
        order: 1;
    }

    .step-navigation .btn-prev {
        order: 2;
    }
}

@media (max-width: 480px) {
    .step-circle {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .step-title {
        display: none !important;
    }
}

/* ==================== MOBILE FOOTER ==================== */
@media (max-width: 768px) {
    footer {
        padding: 40px var(--mobile-padding) 20px !important;
    }

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

    /* Center footer content */
    footer .flex.items-center.gap-3 {
        justify-content: center;
    }

    footer .flex.gap-3 {
        justify-content: center;
    }

    footer ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer li {
        text-align: center;
    }

    /* Social links - larger touch targets */
    footer a[class*="w-10"] {
        width: 44px !important;
        height: 44px !important;
    }

    /* Bottom footer */
    footer .border-t .flex {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    footer .border-t .flex > div {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 30px 12px 16px !important;
    }

    footer .grid {
        gap: 24px !important;
    }

    footer p, footer li, footer a {
        font-size: 0.85rem;
    }
}

/* ==================== MOBILE GALLERY ==================== */
@media (max-width: 768px) {
    /* Gallery filters - horizontal scroll */
    .flex.flex-wrap.justify-center.gap-3.mb-12 {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        padding: 0 var(--mobile-padding);
        margin: 0 calc(-1 * var(--mobile-padding)) 24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .flex.flex-wrap.justify-center.gap-3.mb-12::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }

    /* Gallery grid */
    #galleryGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Gallery items */
    #galleryGrid > div {
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    #galleryGrid {
        grid-template-columns: 1fr !important;
    }

    .filter-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* ==================== MOBILE CONTACT PAGE ==================== */
@media (max-width: 768px) {
    /* Contact grid - stack */
    .grid.lg\\:grid-cols-5 {
        grid-template-columns: 1fr !important;
    }

    .lg\\:col-span-2 {
        grid-column: span 1 !important;
        order: 2;
    }

    .lg\\:col-span-3 {
        grid-column: span 1 !important;
        order: 1;
    }

    /* Contact sidebar - not sticky on mobile */
    .sticky.top-24 {
        position: static !important;
    }
}

/* ==================== MOBILE ABOUT PAGE ==================== */
@media (max-width: 768px) {
    /* Leadership cards - stack */
    .grid.lg\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Profile section */
    .w-40.h-40 {
        width: 120px !important;
        height: 120px !important;
    }
}

/* ==================== MOBILE ANNOUNCEMENT BAR ==================== */
@media (max-width: 768px) {
    #announcementBar {
        padding: 10px 40px 10px var(--mobile-padding);
        font-size: 0.8rem;
    }

    #announcementBar p {
        padding-right: 0;
        font-size: 0.8rem;
    }

    #announcementBar button {
        right: 8px;
    }
}

/* ==================== MOBILE TOP BAR ==================== */
@media (max-width: 768px) {
    .hidden.md\\:block {
        display: none !important;
    }
}

/* ==================== SCROLL IMPROVEMENTS ==================== */
@media (max-width: 768px) {
    /* Smooth scrolling for internal links */
    html {
        scroll-behavior: smooth;
    }

    /* Momentum scrolling */
    .overflow-x-auto,
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Hide scrollbars but allow scrolling */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
}

/* ==================== LOADING STATES ==================== */
@media (max-width: 768px) {
    /* Spinner sizing */
    .spinner, .animate-spin {
        width: 24px;
        height: 24px;
    }

    /* Skeleton loading */
    .animate-pulse {
        animation-duration: 1.5s;
    }
}

/* ==================== SAFE AREAS (Notch devices) ==================== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        header {
            padding-left: max(var(--mobile-padding), env(safe-area-inset-left));
            padding-right: max(var(--mobile-padding), env(safe-area-inset-right));
        }

        footer {
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }

        /* Fixed bottom buttons */
        .fixed.bottom-6 {
            bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
        }
    }
}

/* ==================== BACK TO TOP BUTTON ==================== */
@media (max-width: 768px) {
    #backToTop {
        width: 44px;
        height: 44px;
        right: var(--mobile-padding);
        bottom: 80px;
    }
}

/* ==================== MODALS ON MOBILE ==================== */
@media (max-width: 768px) {
    /* Lightbox / Modal adjustments */
    .fixed.inset-0 {
        padding: var(--mobile-padding);
    }

    /* Modal content */
    .fixed.inset-0 > div {
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Close button */
    .fixed.inset-0 button[aria-label="Close"],
    .modal-close {
        width: 44px;
        height: 44px;
        top: 12px;
        right: 12px;
    }
}

/* ==================== UTILITY MOBILE CLASSES ==================== */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-center {
        text-align: center !important;
        justify-content: center !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-padding {
        padding: var(--mobile-padding) !important;
    }

    .mobile-no-padding {
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    .xs-hidden {
        display: none !important;
    }

    .xs-full-width {
        width: 100% !important;
    }
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .blur-xl, .blur-2xl, .blur-3xl {
        filter: blur(12px);
    }

    /* Disable complex animations on low-end devices */
    @media (prefers-reduced-motion: reduce) {
        .animate-pulse,
        .animate-bounce {
            animation: none !important;
        }
    }
}