/* page.css - Auto-generated page layout styles */
/* Generated: 2026-03-12T15:01:55+00:00 */

/* Page Content Container */
.page-content {
    min-height: 50vh;
    width: 100%;
}

/* Page Section */
.page-section {
    width: 100%;
    
    box-sizing: border-box;
}

/* If the user applies flex styles to the page wrapper, force sections/containers to span full width */
.page-section > .container,
.page-section > .container-fluid {
    width: 100%;
}

/* Full-width section - ensure container-fluid is truly full width */
.page-section > .container-fluid {
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

/* Standard contained section - use normal container width */
.page-section > .container {
    max-width: var(--container-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* Scope row styles to page content only, not templates */
.page-content .row,
.page-section .row {
    margin-bottom: 2rem;
}

/* Fix for columns - ensure Bootstrap column classes work correctly */
.page-content .row > [class*="col-"],
.page-section .row > [class*="col-"] {
    min-width: 0;
    box-sizing: border-box;
}

/* Ensure col-12 is full width ONLY when not accompanied by responsive classes */
.page-content .row > .col-12:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]):not([class*="col-xxl-"]),
.page-section .row > .col-12:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]):not([class*="col-xxl-"]) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Ensure col-md-12 is full width at medium breakpoint and up */
@media (min-width: 768px) {
    .page-content .row > .col-md-12,
    .page-section .row > .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* Ensure columns stay on the same row when they sum to 12 */
@media (min-width: 768px) {
    .page-content .row > [class*="col-md-"],
    .page-section .row > [class*="col-md-"] {
        flex-shrink: 0;
    }
}

/* Sticky column behavior - only on medium+ screens */
@media (min-width: 768px) {
    .sticky-column {
        position: sticky;
        top: var(--sticky-offset, 20px);
        align-self: flex-start;
    }
}

/* ========================================
   Responsive Breakpoint Overrides
   (Configured in Site Settings)
   ======================================== */

/* Mobile: 1 column(s) per row (under 576px) */
@media (max-width: 575.98px) {
    .page-content .page-section .row > [class*="col-"]:not([class*="col-12"]):not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-lg-"]):not([class*="col-xl-"]):not([class*="col-xxl-"]),
    .page-section .row > [class*="col-"]:not([class*="col-12"]):not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-lg-"]):not([class*="col-xl-"]):not([class*="col-xxl-"]) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Tablet: 2 column(s) per row (576px - 991.98px) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .page-content .page-section .row > [class*="col-"]:not([class*="col-12"]):not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-lg-"]):not([class*="col-xl-"]):not([class*="col-xxl-"]),
    .page-section .row > [class*="col-"]:not([class*="col-12"]):not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-lg-"]):not([class*="col-xl-"]):not([class*="col-xxl-"]) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}