/* 
 * Kaisergarten Restaurant - Responsive Spacing Utilities
 * Mobile-first approach with proper section sizing
 * Prevents oversized sections on mobile devices
 */

/* ===== SECTION SPACING - MOBILE FIRST ===== */

/* Base mobile spacing (< 768px) */
.section {
    padding: 3rem 0;
}

.section-sm {
    padding: 2rem 0;
}

.section-lg {
    padding: 4rem 0;
}

.section-xl {
    padding: 5rem 0;
}

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
    .section {
        padding: 4rem 0;
    }
    
    .section-sm {
        padding: 3rem 0;
    }
    
    .section-lg {
        padding: 5rem 0;
    }
    
    .section-xl {
        padding: 6rem 0;
    }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
    .section {
        padding: 5rem 0;
    }
    
    .section-sm {
        padding: 3.5rem 0;
    }
    
    .section-lg {
        padding: 6rem 0;
    }
    
    .section-xl {
        padding: 7rem 0;
    }
}

/* Large Desktop (≥ 1280px) */
@media (min-width: 1280px) {
    .section {
        padding: 6rem 0;
    }
    
    .section-sm {
        padding: 4rem 0;
    }
    
    .section-lg {
        padding: 7rem 0;
    }
    
    .section-xl {
        padding: 8rem 0;
    }
}

/* ===== HERO SECTION HEIGHTS ===== */

/* Mobile-first hero heights */
.hero-section {
    min-height: 50vh;
    max-height: 600px;
}

/* Tablet */
@media (min-width: 768px) {
    .hero-section {
        min-height: 55vh;
        max-height: 650px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .hero-section {
        min-height: 60vh;
        max-height: 700px;
    }
}

/* Large Desktop */
@media (min-width: 1280px) {
    .hero-section {
        min-height: 65vh;
        max-height: 750px;
    }
}

/* Compact hero variant for subpages */
.hero-section-compact {
    min-height: 40vh;
    max-height: 500px;
}

@media (min-width: 768px) {
    .hero-section-compact {
        min-height: 45vh;
        max-height: 550px;
    }
}

@media (min-width: 1024px) {
    .hero-section-compact {
        min-height: 50vh;
        max-height: 600px;
    }
}

/* ===== CONTAINER PADDING ===== */

.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ===== UTILITY SPACING CLASSES ===== */

/* Margin utilities - responsive */
.mt-responsive {
    margin-top: 1.5rem;
}

.mb-responsive {
    margin-bottom: 1.5rem;
}

.my-responsive {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .mt-responsive {
        margin-top: 2rem;
    }
    
    .mb-responsive {
        margin-bottom: 2rem;
    }
    
    .my-responsive {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .mt-responsive {
        margin-top: 3rem;
    }
    
    .mb-responsive {
        margin-bottom: 3rem;
    }
    
    .my-responsive {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

/* Padding utilities - responsive */
.pt-responsive {
    padding-top: 1.5rem;
}

.pb-responsive {
    padding-bottom: 1.5rem;
}

.py-responsive {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .pt-responsive {
        padding-top: 2rem;
    }
    
    .pb-responsive {
        padding-bottom: 2rem;
    }
    
    .py-responsive {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .pt-responsive {
        padding-top: 3rem;
    }
    
    .pb-responsive {
        padding-bottom: 3rem;
    }
    
    .py-responsive {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* ===== GRID/FLEX GAP UTILITIES ===== */

.gap-responsive {
    gap: 1rem;
}

@media (min-width: 768px) {
    .gap-responsive {
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .gap-responsive {
        gap: 2rem;
    }
}

.gap-responsive-lg {
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .gap-responsive-lg {
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .gap-responsive-lg {
        gap: 3rem;
    }
}

/* ===== CARD/COMPONENT PADDING ===== */

.card-padding-responsive {
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .card-padding-responsive {
        padding: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .card-padding-responsive {
        padding: 2rem;
    }
}

/* ===== LANDSCAPE MOBILE FIXES ===== */

/* Reduce hero heights in landscape mode on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section,
    .hero-section-compact {
        min-height: 70vh;
        max-height: none;
    }
    
    .section,
    .section-lg,
    .section-xl {
        padding: 2rem 0;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .section,
    .section-sm,
    .section-lg,
    .section-xl {
        padding: 1.5rem 0;
        page-break-inside: avoid;
    }
    
    .hero-section {
        min-height: auto;
        max-height: none;
        page-break-after: always;
    }
}