/* =======================
   UNIVERSAL CONTENT CONTAINER
   Automatically works with or without Bootstrap columns
   ======================= */

/* Main Content Section */
.content-section {
    padding: 4rem 0;
    background-color: #ffffff;
    width: 100%;
    clear: both;
}

/* Content Wrapper - Universal container that handles both scenarios */
.content-wrapper {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* If Bootstrap .row is used inside, compensate for negative margins */
.content-wrapper > .row {
    margin-left: -15px;
    margin-right: -15px;
}

/* If direct Bootstrap columns are used without .row wrapper, create implicit row */
.content-wrapper > [class*="col-"] {
    float: left;
}

.content-wrapper > [class*="col-"]:first-child {
    clear: left;
}

/* Width Variations */
.content-wrapper--narrow {
    max-width: 800px;
}

.content-wrapper--wide {
    max-width: 1400px;
}

.content-wrapper--full {
    max-width: 100%;
}

/* Background Variations */
.content-section--light {
    background-color: #f8f9fa;
}

.content-section--dark {
    background-color: #2c3e50;
    color: white;
}

.content-section--gray {
    background-color: #e9ecef;
}

/* Spacing Variations */
.content-section--narrow-padding {
    padding: 2rem 0;
}

.content-section--wide-padding {
    padding: 6rem 0;
}

.content-section--no-top {
    padding-top: 0;
}

.content-section--no-bottom {
    padding-bottom: 0;
}

/* Ensure proper clearfix for all scenarios */
.content-section::after,
.content-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive Design */
@media (max-width: 992px) {
    .content-section {
        padding: 3rem 0;
    }
    .content-section--narrow-padding {
        padding: 1.5rem 0;
    }
    .content-section--wide-padding {
        padding: 4rem 0;
    }
}

@media (max-width: 768px) {
    .content-section {
        padding: 2rem 0;
    }
    .content-section--narrow-padding {
        padding: 1rem 0;
    }
    .content-section--wide-padding {
        padding: 3rem 0;
    }
    .content-wrapper {
        padding: 0 15px;
    }
}