/**
 * Responsive Baseline CSS
 * 
 * This stylesheet contains ONLY structural and responsive rules.
 * It does NOT modify colors, fonts, font-weights, borders, or spacing
 * to preserve the existing visual design.
 * 
 * Purpose:
 * - Ensure fluid layouts across all resolutions
 * - Prevent horizontal overflow
 * - Provide mobile-first responsive utilities
 * - Ensure cross-browser compatibility
 * - Handle modern device features (notch, safe areas)
 */

/* ==========================================
   1. RESET AND BOX-SIZING (Non-invasive)
   ========================================== */

/* Modern box-sizing for predictable layouts */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================
   2. FLUID MEDIA (Images, Videos, SVG)
   ========================================== */

/* Ensure media elements are responsive by default */
img,
video,
svg,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* Prevent images from being larger than their container */
img {
    display: block;
}

/* SVG specific handling */
svg {
    max-height: 100%;
}

/* ==========================================
   3. VIEWPORT HANDLING AND SAFE AREAS
   ========================================== */

/* Support for devices with notch/safe areas */
body {
    /* Ensure body uses full viewport */
    min-height: 100vh;
    /* Support for notch devices - use safe area insets */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Fallback for 100vh on mobile (address bar handling) */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
}

/* ==========================================
   4. RESPONSIVE CONTAINER UTILITIES
   ========================================== */

/* Fluid container with max-width constraints */
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Table wrapper for horizontal scrolling */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================
   5. ASPECT RATIO UTILITIES
   ========================================== */

/* 16:9 aspect ratio container */
.aspect-16x9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 9/16 = 0.5625 */
    overflow: hidden;
}

.aspect-16x9 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4:3 aspect ratio container */
.aspect-4x3 {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 3/4 = 0.75 */
    overflow: hidden;
}

.aspect-4x3 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 1:1 aspect ratio (square) */
.aspect-1x1 {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}

.aspect-1x1 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cover image utility */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================
   6. RESPONSIVE GRID WRAPPER
   ========================================== */

/* Simple responsive grid utility */
.wrapper-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* ==========================================
   7. MOBILE-FIRST BREAKPOINTS
   ========================================== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .wrapper-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
    
    .container-fluid {
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container-fluid {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container-fluid {
        max-width: 1140px;
    }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
    .container-fluid {
        max-width: 1320px;
    }
}

/* ==========================================
   8. ACCESSIBILITY - REDUCED MOTION
   ========================================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   9. RESPONSIVE UTILITIES
   ========================================== */

/* Hide elements on specific breakpoints */
@media (max-width: 575.98px) {
    .d-none-mobile {
        display: none !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .d-none-tablet-sm {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .d-none-tablet {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .d-none-desktop {
        display: none !important;
    }
}

/* ==========================================
   10. FLEXBOX UTILITIES FOR RESPONSIVE LAYOUTS
   ========================================== */

/* Flex container utilities */
.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

/* Responsive flex direction */
@media (max-width: 767.98px) {
    .flex-column-mobile {
        flex-direction: column;
    }
}

/* ==========================================
   11. OVERFLOW PREVENTION
   ========================================== */

/* Prevent horizontal overflow on all elements */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* Ensure text doesn't cause overflow */
.text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==========================================
   12. RESPONSIVE FORMS
   ========================================== */

/* Make form inputs responsive */
input,
select,
textarea,
button {
    max-width: 100%;
}

/* 
 * Prevent auto-zoom on input focus in mobile Safari
 * 
 * NOTE: This is a technical fix, not a design change.
 * Mobile Safari automatically zooms when focusing on inputs with font-size < 16px.
 * We set a minimum of 16px ONLY to prevent this behavior, not to change design.
 * This overrides smaller font-sizes only when necessary for UX on mobile devices.
 */
@media (max-width: 767.98px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: max(16px, 1em);
    }
}

/* ==========================================
   13. PRINT STYLES
   ========================================== */

@media print {
    /* Ensure proper page breaks */
    img,
    video,
    svg {
        page-break-inside: avoid;
    }
    
    /* Reset viewport constraints for print */
    .container-fluid {
        max-width: 100%;
    }
}