/* Mobile Responsive Enhancements for Naveena Talent High School */

/* Base responsive utilities */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* Mobile Navigation Improvements */
@media (max-width: 768px) {
    .mobile-nav-open {
        overflow: hidden;
    }
    
    #mobileMenu a {
        font-size: 16px;
        padding: 12px 16px;
    }
}

/* Typography Responsiveness */
@media (max-width: 640px) {
    h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1.25rem !important;
    }
    
    p, li {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* Hero Section Mobile Optimization */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
    }
    
    .hero-section h1 {
        font-size: 1.875rem !important;
    }
    
    .hero-section p {
        font-size: 0.875rem !important;
    }
}

/* Button Responsiveness */
@media (max-width: 640px) {
    a[class*="px-"], button[class*="px-"] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 0.875rem;
    }
    
    .btn-large {
        width: 100%;
        display: block;
    }
}

/* Grid Layout Mobile Adjustments */
@media (max-width: 768px) {
    .grid {
        gap: 1.5rem !important;
    }
    
    [class*="grid-cols-"] {
        grid-template-columns: 1fr !important;
    }
    
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Card Mobile Optimization */
@media (max-width: 640px) {
    [class*="p-6"], [class*="p-8"], [class*="p-10"] {
        padding: 1.5rem !important;
    }
    
    [class*="rounded-xl"], [class*="rounded-2xl"] {
        border-radius: 0.75rem !important;
    }
}

/* Form Mobile Improvements */
@media (max-width: 640px) {
    input, select, textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    form {
        padding: 1rem;
    }
    
    label {
        font-size: 0.875rem;
    }
}

/* Footer Mobile Layout */
@media (max-width: 768px) {
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    footer .col-span-2 {
        grid-column: span 1 !important;
    }
    
    footer h3, footer h4 {
        font-size: 1.125rem !important;
    }
    
    footer .flex.space-x-4 {
        justify-content: center;
    }
}

/* Modal Mobile Responsiveness */
@media (max-width: 640px) {
    .modal {
        padding: 10px !important;
    }
    
    .modal-content {
        max-height: 90vh !important;
        border-radius: 15px !important;
        margin: 0;
    }
    
    .modal-content h2 {
        font-size: 1.5rem !important;
    }
}

/* Stats Section Mobile */
@media (max-width: 640px) {
    .stats-section .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .stats-section div {
        padding: 1rem 0.5rem;
    }
}

/* Image Responsiveness */
img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    img[class*="h-20"], img[class*="h-24"] {
        height: 3rem !important;
        width: 3rem !important;
    }
}

/* Gallery Mobile Layout */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .gallery-item {
        height: auto !important;
        min-height: 200px;
    }
    
    .video-thumbnail {
        width: 100%;
        aspect-ratio: 16/9;
    }
}

/* Contact Page Mobile */
@media (max-width: 768px) {
    .contact-cards .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    iframe {
        height: 300px !important;
    }
}

/* Scrolling Banner Mobile */
@media (max-width: 640px) {
    .animate-scroll, .animate-scroll-fast {
        font-size: 0.875rem !important;
    }
    
    .banner-top {
        top: 56px !important; /* Adjust for smaller nav height */
    }
}

/* Admission Form Mobile */
@media (max-width: 640px) {
    #admissionForm .grid {
        grid-template-columns: 1fr !important;
    }
    
    .form-benefits .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* Review Cards Mobile */
@media (max-width: 768px) {
    .review-cards .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* Chairman Message Section Mobile */
@media (max-width: 768px) {
    .chairman-section .grid {
        grid-template-columns: 1fr !important;
    }
    
    .chairman-section .order-1,
    .chairman-section .order-2 {
        order: 0 !important;
    }
}

/* Feature Cards Mobile */
@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: 1fr !important;
    }
    
    .feature-card {
        margin-bottom: 1rem;
    }
}

/* About Page Values Section */
@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* Touch Target Improvements for Mobile */
@media (max-width: 768px) {
    a, button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    nav a, nav button {
        padding: 12px 16px;
    }
}

/* Spacing Adjustments for Mobile */
@media (max-width: 640px) {
    section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* Fixed Navigation Spacing Mobile */
@media (max-width: 768px) {
    body {
        padding-top: 0;
    }
    
    nav.fixed + * {
        margin-top: 0;
    }
}

/* Flex Layout Mobile Adjustments */
@media (max-width: 640px) {
    .flex.space-x-4,
    .flex.gap-4 {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    
    .flex-col-mobile {
        flex-direction: column;
    }
}

/* Benefits Section Mobile */
@media (max-width: 640px) {
    .benefits-badges .flex {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
    
    .benefits-badges span {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
    }
}

/* Lightbox Mobile Optimization */
@media (max-width: 640px) {
    .lightbox img {
        max-width: 95% !important;
        max-height: 80% !important;
    }
    
    .lightbox-controls button {
        padding: 0.75rem 1rem;
        font-size: 1.25rem;
    }
}

/* Success Popup Mobile */
@media (max-width: 640px) {
    .success-popup {
        min-width: 280px !important;
        max-width: 90% !important;
        padding: 20px 25px !important;
    }
    
    .success-icon {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Scrollbar Styling for Mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 2px;
    }
}

/* Accessibility: Larger tap targets */
@media (max-width: 768px) {
    .close-btn,
    .play-button,
    [class*="rounded-full"][class*="w-10"] {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* Prevent horizontal scroll */
@media (max-width: 768px) {
    .overflow-hidden-mobile {
        overflow-x: hidden;
    }
    
    .max-w-full-mobile {
        max-width: 100%;
    }
}

/* Table Responsiveness (if any) */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Landscape Mobile Adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .hero-section {
        padding-top: 80px !important;
        padding-bottom: 30px !important;
    }
}

/* Very Small Screens (< 375px) */
@media (max-width: 374px) {
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.375rem !important;
    }
    
    .container, .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .text-xs {
        font-size: 0.625rem !important;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Performance: GPU Acceleration for Animations */
@media (max-width: 768px) {
    .animate-fadeInUp,
    .animate-scroll,
    .animate-scroll-fast,
    [class*="transition"] {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}