
/* ZP_FB_SECTION_COLUMNS_PARITY_V1 */

/* Native Botble shortcode: Section only. */
.zp-facebook--shortcode[data-zp-section-layout="columns"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget {
    display: grid !important;
    grid-template-columns:
        minmax(0, var(--zp-section-info-width, 25%))
        minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, auto) !important;
    gap: 12px !important;
    align-items: start !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    position: relative !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget > .zp-fb-widget__info {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget > .zp-fb-widget__header {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget > .zp-fb-widget__feed {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget > .zp-fb-widget__info,
.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget > .zp-fb-widget__header,
.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget > .zp-fb-widget__feed {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow-wrap: anywhere;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget__cover,
.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget__feed,
.zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget__posts {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Admin preview: activated only by the Section layout controller. */
.zp-section-columns-parity {
    display: grid !important;
    grid-template-columns:
        minmax(0, var(--zp-section-info-width, 25%))
        minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    align-content: start !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
}

.zp-section-columns-parity > .zp-section-columns-parity-info {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}

.zp-section-columns-parity > .zp-section-columns-parity-header {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.zp-section-columns-parity > .zp-section-columns-parity-feed {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.zp-section-columns-parity > .zp-section-columns-parity-right {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.zp-section-columns-parity .zp-section-columns-parity-block {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    .zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget,
    .zp-section-columns-parity {
        display: flex !important;
        flex-direction: column !important;
    }

    .zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget > .zp-fb-widget__info,
    .zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget > .zp-fb-widget__header,
    .zp-facebook--shortcode[data-zp-section-layout="columns"] .zp-fb-widget > .zp-fb-widget__feed {
        width: 100% !important;
    }
}


/* ZP_FB_SECTION_COLUMN_HEADER_ALIGNMENT_V2 */

/* Section preview: left information, right header and feed. */

.zp-section-columns-parity {
    grid-auto-flow: row !important;
    grid-auto-rows: min-content !important;
    align-items: start !important;
    align-content: start !important;
    isolation: isolate;
}

.zp-section-columns-parity > .zp-section-columns-parity-info {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.zp-section-columns-parity > .zp-section-columns-parity-header {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.zp-section-columns-parity > .zp-section-columns-parity-feed {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.zp-section-columns-parity > .zp-section-columns-parity-right {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}

.zp-section-columns-parity > .zp-section-columns-parity-header,
.zp-section-columns-parity > .zp-section-columns-parity-feed,
.zp-section-columns-parity > .zp-section-columns-parity-right {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-self: start !important;
    margin-inline: 0 !important;
}

.zp-section-columns-parity [data-zp-block="header"],
.zp-section-columns-parity [data-zp-block="feed"] {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.zp-section-columns-parity [data-zp-block="header"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.zp-section-columns-parity [data-zp-block="header"]
:is(
    .zp-fb-widget__identity,
    .zp-fb-header__identity,
    .zp-facebook-header__identity
) {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.zp-section-columns-parity [data-zp-block="header"]
:is(h1, h2, h3, h4, p, strong) {
    max-width: 100% !important;
    overflow-wrap: anywhere;
}

/* Section shortcode frontend: identical right-column boundaries. */

.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget {
    grid-auto-flow: row !important;
    grid-auto-rows: min-content !important;
    align-items: start !important;
    align-content: start !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget > .zp-fb-widget__info {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget > .zp-fb-widget__header {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget > .zp-fb-widget__feed {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget > .zp-fb-widget__header,
.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget > .zp-fb-widget__feed {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget__identity {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget__identity :is(h1, h2, h3, h4, p, strong) {
    max-width: 100% !important;
    overflow-wrap: anywhere;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget__cover {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.zp-facebook--shortcode[data-zp-section-layout="columns"]
.zp-fb-widget__cover img {
    display: block;
    max-width: 100% !important;
}

@media (max-width: 767px) {
    .zp-section-columns-parity,
    .zp-facebook--shortcode[data-zp-section-layout="columns"]
    .zp-fb-widget {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .zp-section-columns-parity > .zp-section-columns-parity-info,
    .zp-section-columns-parity > .zp-section-columns-parity-header,
    .zp-section-columns-parity > .zp-section-columns-parity-feed,
    .zp-section-columns-parity > .zp-section-columns-parity-right,
    .zp-facebook--shortcode[data-zp-section-layout="columns"]
    .zp-fb-widget > .zp-fb-widget__info,
    .zp-facebook--shortcode[data-zp-section-layout="columns"]
    .zp-fb-widget > .zp-fb-widget__header,
    .zp-facebook--shortcode[data-zp-section-layout="columns"]
    .zp-fb-widget > .zp-fb-widget__feed {
        width: 100% !important;
        max-width: 100% !important;
    }
}
