/**
 * Responsive Enhancement Styles
 * Additional responsive patterns and mobile optimizations
 */

/* Advanced Responsive Grid */
.advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

@media (max-width: 600px) {
    .advanced-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .advanced-grid {
        gap: 12px;
    }
}

/* Responsive Breakpoint Classes */
@media (max-width: 575px) {
    .d-xs-none { display: none !important; }
    .d-xs-block { display: block !important; }
    .d-xs-flex { display: flex !important; }
}

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

@media (min-width: 768px) and (max-width: 991px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}

/* Mobile-Specific Layouts */
.mobile-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .mobile-stack {
        flex-direction: row;
        gap: 20px;
    }
}

/* Responsive Text Scaling */
.responsive-title {
    font-size: clamp(18px, 4vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: break-word;
}

.responsive-subtitle {
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 500;
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: break-word;
}

.responsive-body {
    font-size: clamp(14px, 2.5vw, 16px);
    line-height: 1.6;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Responsive Spacing System */
.spacing-xs { margin: 8px 0; }
.spacing-sm { margin: 12px 0; }
.spacing-md { margin: 16px 0; }
.spacing-lg { margin: 24px 0; }
.spacing-xl { margin: 32px 0; }

@media (max-width: 767px) {
    .spacing-xs { margin: 4px 0; }
    .spacing-sm { margin: 8px 0; }
    .spacing-md { margin: 12px 0; }
    .spacing-lg { margin: 16px 0; }
    .spacing-xl { margin: 20px 0; }
}

/* Responsive Padding System */
.padding-xs { padding: 8px; }
.padding-sm { padding: 12px; }
.padding-md { padding: 16px; }
.padding-lg { padding: 24px; }
.padding-xl { padding: 32px; }

@media (max-width: 767px) {
    .padding-xs { padding: 4px; }
    .padding-sm { padding: 8px; }
    .padding-md { padding: 12px; }
    .padding-lg { padding: 16px; }
    .padding-xl { padding: 20px; }
}

/* Responsive Width Classes */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }

@media (max-width: 767px) {
    .w-25,
    .w-50,
    .w-75 {
        width: 100% !important;
    }
}

/* Responsive Flex Classes */
.flex-column-mobile {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

@media (max-width: 767px) {
    .flex-column-mobile {
        flex-direction: column;
        gap: 12px;
    }
}

/* Container Queries Support (Future-proofing) */
@supports (container-type: inline-size) {
    .container-responsive {
        container-type: inline-size;
    }
    
    @container (max-width: 400px) {
        .container-item {
            flex-direction: column;
        }
    }
}

/* Responsive Animation Control */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .responsive-card,
    .responsive-container {
        border: 2px solid currentColor;
    }
    
    .responsive-text {
        color: currentColor;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .responsive-container {
        background: #1a1a1a;
        color: #ffffff;
    }
    
    .responsive-card {
        background: #2a2a2a;
        border-color: #444;
    }
}

/* Viewport-Based Sizing */
.vh-100 { height: 100vh; }
.vw-100 { width: 100vw; max-width: 100vw; }

/* Safe Area Support (iOS notch) */
@supports (padding: max(0px)) {
    .safe-area-padding {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* Critical Overflow Prevention */
html, body, #page, #main, .site, .site-main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive Debug (Development Only) */
@media (max-width: 767px) {
    body::before {
        content: 'Mobile View';
        position: fixed;
        top: 0;
        right: 0;
        background: red;
        color: white;
        padding: 4px 8px;
        font-size: 10px;
        z-index: 9999;
        display: none; /* Enable for debugging */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body::before {
        content: 'Tablet View';
        position: fixed;
        top: 0;
        right: 0;
        background: orange;
        color: white;
        padding: 4px 8px;
        font-size: 10px;
        z-index: 9999;
        display: none; /* Enable for debugging */
    }
}

@media (min-width: 1024px) {
    body::before {
        content: 'Desktop View';
        position: fixed;
        top: 0;
        right: 0;
        background: green;
        color: white;
        padding: 4px 8px;
        font-size: 10px;
        z-index: 9999;
        display: none; /* Enable for debugging */
    }
}