.wp-block-rcp-columns-plus {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.wp-block-rcp-columns-plus.has-hover-shadow:hover {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    transform: translateY(-2px);
}

.wp-block-rcp-columns-plus .rcp-columns-plus__inner {
    display: var(--rcp-display-desktop, grid);
    width: 100%;
    row-gap: var(--rcp-gap-desktop, 24px);
    column-gap: var(--rcp-col-gap-desktop, var(--rcp-gap-desktop, 24px));
    flex-wrap: var(--rcp-wrap-desktop, wrap);
    grid-template-columns: repeat(var(--rcp-cols-desktop, 2), minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
}

.wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks {
    width: 100%;
    max-width: none;
    grid-column: 1 / -1;
}

/* Gutenberg editor has an extra wrapper. Keep it full-width and move layout to block list. */
.editor-styles-wrapper .wp-block-rcp-columns-plus .rcp-columns-plus__inner {
    display: block !important;
}

.editor-styles-wrapper .wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
}

.editor-styles-wrapper .wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: var(--rcp-display-desktop, grid) !important;
    width: 100% !important;
    row-gap: var(--rcp-gap-desktop, 24px);
    column-gap: var(--rcp-col-gap-desktop, var(--rcp-gap-desktop, 24px));
    flex-wrap: var(--rcp-wrap-desktop, wrap);
    grid-template-columns: repeat(var(--rcp-cols-desktop, 2), minmax(0, 1fr));
    align-items: stretch;
}

/* In editor, keep the parent wrapper neutral and apply layout only to block list. */
.wp-block-rcp-columns-plus .rcp-columns-plus__inner:has(> .block-editor-inner-blocks) {
    display: block;
}

.wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: var(--rcp-display-desktop, grid);
    width: 100%;
    row-gap: var(--rcp-gap-desktop, 24px);
    column-gap: var(--rcp-col-gap-desktop, var(--rcp-gap-desktop, 24px));
    flex-wrap: var(--rcp-wrap-desktop, wrap);
    grid-template-columns: repeat(var(--rcp-cols-desktop, 2), minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
}

.wp-block-rcp-columns-plus .rcp-columns-plus__inner > .wp-block-column,
.wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column {
    min-width: 0;
    min-height: 48px;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    margin: 0 !important;
}

.wp-block-rcp-columns-plus .rcp-columns-plus__inner > .wp-block-column:empty,
.wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-column:empty {
    outline: 1px dashed rgba(148, 163, 184, 0.8);
    outline-offset: -1px;
}

/* If trailing columns are empty, use the first populated column as the actual grid/flex wrapper. */
.wp-block-rcp-columns-plus .rcp-columns-plus__inner:has(> .wp-block-column:last-child:empty) > .wp-block-column:last-child {
    display: none;
}

.wp-block-rcp-columns-plus .rcp-columns-plus__inner:has(> .wp-block-column:last-child:empty) > .wp-block-column:first-child {
    display: var(--rcp-display-desktop, grid);
    row-gap: var(--rcp-gap-desktop, 24px);
    column-gap: var(--rcp-col-gap-desktop, var(--rcp-gap-desktop, 24px));
    flex-wrap: var(--rcp-wrap-desktop, wrap);
    grid-template-columns: repeat(var(--rcp-cols-desktop, 2), minmax(0, 1fr));
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
}

.wp-block-rcp-columns-plus .rcp-columns-plus__inner:has(> .wp-block-column:last-child:empty) > .wp-block-column:first-child > * {
    min-width: 0;
}

@media (max-width: 1024px) {
    .wp-block-rcp-columns-plus .rcp-columns-plus__inner {
        display: var(--rcp-display-tablet, grid);
        row-gap: var(--rcp-gap-tablet, 16px);
        column-gap: var(--rcp-col-gap-tablet, var(--rcp-gap-tablet, 16px));
        flex-wrap: var(--rcp-wrap-tablet, wrap);
        grid-template-columns: repeat(var(--rcp-cols-tablet, 2), minmax(0, 1fr));
    }

    .wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: var(--rcp-display-tablet, grid);
        row-gap: var(--rcp-gap-tablet, 16px);
        column-gap: var(--rcp-col-gap-tablet, var(--rcp-gap-tablet, 16px));
        flex-wrap: var(--rcp-wrap-tablet, wrap);
        grid-template-columns: repeat(var(--rcp-cols-tablet, 2), minmax(0, 1fr));
    }

    .wp-block-rcp-columns-plus .rcp-columns-plus__inner:has(> .wp-block-column:last-child:empty) > .wp-block-column:first-child {
        display: var(--rcp-display-tablet, grid);
        row-gap: var(--rcp-gap-tablet, 16px);
        column-gap: var(--rcp-col-gap-tablet, var(--rcp-gap-tablet, 16px));
        flex-wrap: var(--rcp-wrap-tablet, wrap);
        grid-template-columns: repeat(var(--rcp-cols-tablet, 2), minmax(0, 1fr));
        grid-column: 1 / -1;
        width: 100% !important;
        max-width: none !important;
    }

    .editor-styles-wrapper .wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: var(--rcp-display-tablet, grid) !important;
        row-gap: var(--rcp-gap-tablet, 16px);
        column-gap: var(--rcp-col-gap-tablet, var(--rcp-gap-tablet, 16px));
        flex-wrap: var(--rcp-wrap-tablet, wrap);
        grid-template-columns: repeat(var(--rcp-cols-tablet, 2), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .wp-block-rcp-columns-plus .rcp-columns-plus__inner {
        display: var(--rcp-display-mobile, flex);
        row-gap: var(--rcp-gap-mobile, 12px);
        column-gap: var(--rcp-col-gap-mobile, var(--rcp-gap-mobile, 12px));
        flex-wrap: var(--rcp-wrap-mobile, wrap);
        grid-template-columns: repeat(var(--rcp-cols-mobile, 1), minmax(0, 1fr));
    }

    .wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: var(--rcp-display-mobile, flex);
        row-gap: var(--rcp-gap-mobile, 12px);
        column-gap: var(--rcp-col-gap-mobile, var(--rcp-gap-mobile, 12px));
        flex-wrap: var(--rcp-wrap-mobile, wrap);
        grid-template-columns: repeat(var(--rcp-cols-mobile, 1), minmax(0, 1fr));
    }

    .wp-block-rcp-columns-plus .rcp-columns-plus__inner:has(> .wp-block-column:last-child:empty) > .wp-block-column:first-child {
        display: var(--rcp-display-mobile, flex);
        row-gap: var(--rcp-gap-mobile, 12px);
        column-gap: var(--rcp-col-gap-mobile, var(--rcp-gap-mobile, 12px));
        flex-wrap: var(--rcp-wrap-mobile, wrap);
        grid-template-columns: repeat(var(--rcp-cols-mobile, 1), minmax(0, 1fr));
        grid-column: 1 / -1;
        width: 100% !important;
        max-width: none !important;
    }

    .editor-styles-wrapper .wp-block-rcp-columns-plus .rcp-columns-plus__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
        display: var(--rcp-display-mobile, flex) !important;
        row-gap: var(--rcp-gap-mobile, 12px);
        column-gap: var(--rcp-col-gap-mobile, var(--rcp-gap-mobile, 12px));
        flex-wrap: var(--rcp-wrap-mobile, wrap);
        grid-template-columns: repeat(var(--rcp-cols-mobile, 1), minmax(0, 1fr));
    }
}

.wp-block-rcp-columns-plus.has-reveal-animation {
    opacity: 0;
}

.wp-block-rcp-columns-plus.has-reveal-animation.is-visible {
    opacity: 1;
}

.wp-block-rcp-columns-plus.anim-fade-up {
    transform: translateY(18px);
}

.wp-block-rcp-columns-plus.anim-fade-up.is-visible {
    transform: translateY(0);
}

.wp-block-rcp-columns-plus.anim-fade-in {
    transform: none;
}

.wp-block-rcp-columns-plus.anim-zoom-in {
    transform: scale(0.97);
}

.wp-block-rcp-columns-plus.anim-zoom-in.is-visible {
    transform: scale(1);
}

/* Editor-only: never animate Columns Plus blocks in block editor preview. */
.editor-styles-wrapper .wp-block-rcp-columns-plus.rcp-editor-no-anim,
.editor-styles-wrapper .wp-block-rcp-columns-plus.rcp-editor-no-anim.has-reveal-animation,
.editor-styles-wrapper .wp-block-rcp-columns-plus.rcp-editor-no-anim.anim-fade-up,
.editor-styles-wrapper .wp-block-rcp-columns-plus.rcp-editor-no-anim.anim-zoom-in,
.editor-styles-wrapper .wp-block-rcp-columns-plus.has-reveal-animation,
.editor-styles-wrapper .wp-block-rcp-columns-plus.anim-fade-up,
.editor-styles-wrapper .wp-block-rcp-columns-plus.anim-zoom-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.rcp-columns-plus__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
