/* ============================================================
   UBCMS FRONTEND CENTER ALIGNMENT RESTORE V20
   Restores the centered public-page canvas used by the earlier
   Gallery Center fix. Load this AFTER portal_builder_frontend.css.
   ============================================================ */

/* The public website canvas itself must be centered. */
.ubp-page,
.ubp-page * {
    box-sizing: border-box;
}

/* Standard content containers: always centered in the viewport. */
.ubp-page .ubp-container {
    width: min(var(--ubp-container, 1180px), 92%) !important;
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ubp-page .ubp-container-wide {
    width: min(var(--ubp-container-wide, 1450px), 96%) !important;
    max-width: 1450px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ubp-page .ubp-container-full {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ------------------------------------------------------------
   IMAGE GALLERY
   Preserve the V14 wrapper -> row -> image centering behavior.
   ------------------------------------------------------------ */
.ubp-page .ubp-gallery-wrapper {
    width: 100%;
    max-width: var(--ubp-gallery-max, 1180px);
    box-sizing: border-box;
}

.ubp-page .ubp-gallery-wrapper-center,
.ubp-page .ubp-gallery-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.ubp-page .ubp-gallery-wrapper-left,
.ubp-page .ubp-gallery-align-left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.ubp-page .ubp-gallery-wrapper-right,
.ubp-page .ubp-gallery-align-right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.ubp-page .ubp-gallery-wrapper-full,
.ubp-page .ubp-gallery-align-full {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ubp-page .ubp-gallery-wrapper-center .ubp-gallery-row {
    justify-content: center !important;
}

/* ------------------------------------------------------------
   COLUMNS
   Center the column group itself. The visual builder stores
   max_width and alignment; these rules prevent a later stylesheet
   from pushing the group to the right edge.
   ------------------------------------------------------------ */
.ubp-page .ubp-columns {
    width: 100%;
    max-width: var(--ubp-columns-max, 1180px);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Compatibility with current/older renderer class names. */
.ubp-page .ubp-columns-wrapper,
.ubp-page .ubp-columns-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.ubp-page .ubp-columns-align-left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.ubp-page .ubp-columns-align-right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.ubp-page .ubp-columns-align-full {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Common builder components remain inside the centered canvas. */
.ubp-page .ubp-rich-text,
.ubp-page .ubp-heading,
.ubp-page .ubp-image,
.ubp-page .ubp-video,
.ubp-page .ubp-video-frame,
.ubp-page .ubp-button-wrap,
.ubp-page .ubp-cta,
.ubp-page .ubp-card-grid,
.ubp-page .ubp-testimonial-grid,
.ubp-page .ubp-feature-grid,
.ubp-page .ubp-pricing-grid,
.ubp-page .ubp-stats {
    max-width: 100%;
}

/* Mobile stays centered and uses the available screen width. */
@media (max-width: 700px) {
    .ubp-page .ubp-container {
        width: 92% !important;
    }
    .ubp-page .ubp-container-wide {
        width: 94% !important;
    }
    .ubp-page .ubp-columns {
        width: 100% !important;
    }
}