/**
 * Full-Width Layout Fix
 * Extends sections to full viewport width while maintaining content readability
 */

/* Remove any accidental margin/padding on body */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Make sections span full width */
section {
    width: 100%;
    max-width: 100vw;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Keep container content centered and readable */
.container {
    width: 100%;
    max-width: 1400px; /* Slightly wider than 1200px for better use of space */
    margin: 0 auto;
    padding: 0 24px;
}

/* Full-width sections that should stretch edge to edge */
.hero-section,
.ecosystem-visualization,
.vigthoria-products-section {
    width: 100%;
    max-width: 100vw;
    padding-left: 0;
    padding-right: 0;
}

/* Product cards grid should use more available space */
.vigthoria-products-section .container {
    max-width: 1600px;
}

.vigthoria-products-section .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    justify-content: center;
    max-width: 100%;
}

.vigthoria-products-section .col {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

/* Footer should span full width */
footer, .footer {
    width: 100%;
    max-width: 100vw;
}

/* Hero section full width background */
.hero-section {
    background-size: cover;
    background-position: center;
}

/* Ensure no horizontal scrollbar */
main, article, .main-content {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Large screen optimizations */
@media (min-width: 1440px) {
    .container {
        max-width: 1600px;
        padding: 0 48px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }
    
    .vigthoria-products-section .container {
        max-width: 1900px;
    }
}

/* Mobile: Ensure full width on small screens */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}