/* Extended container classes */
.container-wide {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

.container-fluid-wide {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

/* Full width with inner spacing */
.container-full {
    width: 100%;
    max-width: 100%;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
    margin-right: auto;
    margin-left: auto;
}

/* Screen edge to edge */
.container-edge {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
}

/* 95% width container */
.container-95 {
    width: 95%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
}

/* 90% width container */
.container-90 {
    width: 90%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
}

/* Responsive wider containers */
@media (min-width: 1400px) {
    .container-xxl-wide {
        max-width: 1540px; /* Wider than default 1320px */
    }
}

@media (min-width: 1200px) {
    .container-xl-wide {
        max-width: 1440px; /* Wider than default 1140px */
    }
}

@media (min-width: 992px) {
    .container-lg-wide {
        max-width: 1300px; /* Wider than default 960px */
    }
}

@media (min-width: 768px) {
    .container-md-wide {
        max-width: 900px; /* Wider than default 720px */
    }
}

@media (min-width: 576px) {
    .container-sm-wide {
        max-width: 700px; /* Wider than default 540px */
    }
}

/* Expansive sections */
.section-expansive {
    width: 100%;
    padding: 4rem 0;
}

.section-expansive-lg {
    width: 100%;
    padding: 6rem 0;
}

.section-expansive-xl {
    width: 100%;
    padding: 8rem 0;
}

/* Fluid grid container */
.container-fluid-expansive {
    --bs-gutter-x: 2.5rem;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

/* Container with negative margins for more space */
.container-negative {
    width: calc(100% + 3rem);
    max-width: calc(100% + 3rem);
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 2rem 1.5rem;
}

/* Hero/feature container */
.container-hero {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

/* Split container (half width, half full) */
.container-split {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

@media (min-width: 992px) {
    .container-split {
        grid-template-columns: 50% 50%;
    }
}

/* Masonry-style container */
.container-masonry {
    column-count: 1;
    column-gap: 2rem;
    width: 100%;
}

@media (min-width: 768px) {
    .container-masonry {
        column-count: 2;
    }
}

@media (min-width: 1200px) {
    .container-masonry {
        column-count: 3;
    }
}

/* Container with bleed effect */
.container-bleed {
    position: relative;
    width: 100%;
    padding: 3rem 0;
}

.container-bleed::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50vw;
    right: -50vw;
    bottom: 0;
    width: 200vw;
    z-index: -1;
}

/* Centered but wide content */
.container-content-wide {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 3rem;
}

/* Dashboard/Admin layout container */
.container-dashboard {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

/* Gallery/portfolio container */
.container-gallery {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.container-gallery .row {
    --bs-gutter-x: 0;
}

/* E-commerce product grid container */
.container-products {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Blog/content container */
.container-blog-wide {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
}

/* Utility classes for more space */
.more-space {
    margin: 3rem 0;
    padding: 3rem 0;
}

.more-space-lg {
    margin: 5rem 0;
    padding: 5rem 0;
}

.more-space-xl {
    margin: 8rem 0;
    padding: 8rem 0;
}

/* Inner spacing utilities */
.inner-space {
    padding: 2rem !important;
}

.inner-space-lg {
    padding: 3rem !important;
}

.inner-space-xl {
    padding: 4rem !important;
}

/* Remove constraints */
.no-max-width {
    max-width: none !important;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

/* Aspect ratio containers for more visual space */
.container-aspect-16x9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.container-aspect-4x3 {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
}

.container-aspect-21x9 {
    position: relative;
    width: 100%;
    padding-top: 42.86%; /* 21:9 Aspect Ratio */
}

.container-aspect-1x1 {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
}

.container-aspect > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}