/**
 * Kaisergarten - Mobile Optimization CSS
 * Comprehensive mobile fixes to prevent oversized sections
 * Apply this AFTER all component styles
 */

/* ===== GLOBAL MOBILE SECTION OPTIMIZATION ===== */

@media (max-width: 768px) {
    /* Reduce all section padding globally */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Prevent sections from being too tall */
    section {
        min-height: auto !important;
    }
    
    /* Container optimization */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Hide decorative elements that add height */
    .floating-elements,
    .chinese-symbols-float,
    .chinese-lanterns {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Even more compact on small mobile */
    section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ===== IMAGE STACKING PREVENTION ===== */

@media (max-width: 768px) {
    /* Hide image sides that stack and create tall sections */
    .teaser-image-side,
    .events-visual-side,
    .about-image,
    .feature-image-side {
        display: none !important;
    }
    
    /* Make grids single column */
    .a-la-carte-grid,
    .events-split-container,
    .about-content,
    .feature-content {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

/* ===== CARD COMPACT MODE ===== */

@media (max-width: 768px) {
    /* Make cards more compact */
    .card,
    .feature-card,
    .category-card,
    .buffet-card {
        padding: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Reduce card grid gaps */
    .card-grid,
    .feature-grid,
    .category-grid {
        gap: 1rem !important;
    }
}

/* ===== HERO SECTION OPTIMIZATION ===== */

@media (max-width: 768px) {
    .hero-section {
        min-height: 45vh !important;
        max-height: none !important; /* Remove max-height restriction */
    }
    
    .hero-content {
        padding: 2rem 1rem !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: 40vh !important;
        max-height: none !important; /* Remove max-height restriction */
    }
    
    .hero-content {
        padding: 1.5rem 1rem !important;
    }
}

/* ===== TEXT CONTENT OPTIMIZATION ===== */

@media (max-width: 768px) {
    /* Reduce heading sizes */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Reduce paragraph spacing */
    p {
        margin-bottom: 1rem !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
}

/* ===== SPACING UTILITIES OVERRIDE ===== */

@media (max-width: 768px) {
    /* Override excessive margins */
    .mt-lg, .my-lg {
        margin-top: 1.5rem !important;
    }
    
    .mb-lg, .my-lg {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-xl, .my-xl,
    .mt-xxl, .my-xxl,
    .mt-xxxl, .my-xxxl {
        margin-top: 2rem !important;
    }
    
    .mb-xl, .my-xl,
    .mb-xxl, .my-xxl,
    .mb-xxxl, .my-xxxl {
        margin-bottom: 2rem !important;
    }
    
    /* Override excessive padding */
    .pt-lg, .py-lg {
        padding-top: 1.5rem !important;
    }
    
    .pb-lg, .py-lg {
        padding-bottom: 1.5rem !important;
    }
    
    .pt-xl, .py-xl,
    .pt-xxl, .py-xxl,
    .pt-xxxl, .py-xxxl {
        padding-top: 2rem !important;
    }
    
    .pb-xl, .py-xl,
    .pb-xxl, .py-xxl,
    .pb-xxxl, .py-xxxl {
        padding-bottom: 2rem !important;
    }
}

/* ===== GRID OPTIMIZATION ===== */

@media (max-width: 768px) {
    /* Force single column on mobile for most grids */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Allow 2-column for small items only */
    .grid-mobile-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== FEATURE PILLS/BADGES COMPACT ===== */

@media (max-width: 768px) {
    .pill,
    .badge,
    .feature-pill {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.85rem !important;
    }
}

/* ===== BUTTON GROUP MOBILE ===== */

@media (max-width: 768px) {
    .btn-group,
    .button-group,
    .cta-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .btn-group .btn,
    .button-group .btn,
    .cta-buttons .btn {
        width: 100% !important;
    }
}

/* ===== TESTIMONIAL/REVIEW OPTIMIZATION ===== */

@media (max-width: 768px) {
    .testimonial-card,
    .review-card {
        padding: 1.25rem !important;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ===== CHINESE DECORATION ELEMENTS ===== */

@media (max-width: 768px) {
    /* Hide or minimize decorative Chinese elements */
    .chinese-symbol,
    .chinese-decor,
    .chinese-pattern,
    .floating-element {
        display: none !important;
    }
    
    /* Keep some but make them smaller */
    .chinese-frame,
    .chinese-divider {
        margin: 1rem 0 !important;
    }
    
    .chinese-seal {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
    }
}

/* ===== GALLERY/IMAGE GRID ===== */

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    .gallery-item {
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
}

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

/* ===== FORM OPTIMIZATION ===== */

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .form-group {
        margin-bottom: 1rem !important;
    }
}

/* ===== LOCATION/MAP SECTIONS ===== */

@media (max-width: 768px) {
    .location-grid {
        grid-template-columns: 1fr !important;
    }
    
    .location-map {
        height: 300px !important;
        margin-top: 1.5rem !important;
    }
}

/* ===== PRICING TABLES/CARDS ===== */

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .pricing-card {
        padding: 1.5rem 1.25rem !important;
    }
}

/* ===== FOOTER OPTIMIZATION ===== */

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .footer-column {
        text-align: center !important;
    }
}

/* ===== MODAL/OVERLAY MOBILE ===== */

@media (max-width: 768px) {
    .modal-content {
        width: 95% !important;
        max-height: 90vh !important;
        padding: 1.5rem !important;
    }
}

/* ===== SPECIFIC SECTION FIXES ===== */

@media (max-width: 768px) {
    /* Menu section - allow sticky navigation */
    .menu-section {
        overflow: visible !important;
    }
    
    /* A la carte teaser - prevent huge sections */
    .a-la-carte-teaser {
        padding: 2rem 0 100px 0 !important;
    }
    
    .a-la-carte-teaser::after {
        height: 100px !important;
    }
    
    /* Events section - already optimized but enforce */
    .events-showcase-unique {
        min-height: auto !important;
    }
    
    /* Buffet experience - ensure compact */
    .buffet-experience-section {
        padding: 2.5rem 0 !important;
    }
    
    /* Intro section - compact */
    .intro-section-modern {
        padding: 2rem 0 !important;
    }
    
    /* Chinese testimonials transition - reduce height */
    .chinese-testimonials-transition {
        padding: 2rem 0 !important;
    }
}

@media (max-width: 480px) {
    /* Even more compact */
    .a-la-carte-teaser {
        padding: 1.5rem 0 80px 0 !important;
    }
    
    .a-la-carte-teaser::after {
        height: 80px !important;
    }
    
    .buffet-experience-section {
        padding: 2rem 0 !important;
    }
    
    .intro-section-modern {
        padding: 1.5rem 0 !important;
    }
}

/* ===== DEBUG MODE (remove in production) ===== */
/*
@media (max-width: 768px) {
    section {
        outline: 2px solid red !important;
    }
    
    section::before {
        content: attr(class);
        position: absolute;
        top: 0;
        left: 0;
        background: red;
        color: white;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        z-index: 9999;
    }
}
*/

/* ===== LANDSCAPE MODE FIXES ===== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 60vh !important;
    }
    
    section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ===== ACCESSIBILITY - MAINTAIN TOUCH TARGETS ===== */

@media (max-width: 768px) {
    /* Ensure interactive elements remain tappable */
    a, button, .btn, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Exception for icon-only buttons */
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }
}