/* Front-end output: the class is added by render_block_core/columns. */
.rcs-responsive-columns {
    display: grid !important;
    grid-template-columns: repeat(var(--rcs-desktop-cols, 4), minmax(0, 1fr));
    gap: var(--wp--style--block-gap, 1.5rem);
}

.rcs-responsive-columns > .wp-block-column {
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0;
}

/* Editor preview: the class may be added to the block wrapper depending on the WP version/editor DOM. */
.editor-styles-wrapper .rcs-editor-responsive-columns.wp-block-columns,
.editor-styles-wrapper .rcs-editor-responsive-columns > .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(var(--rcs-desktop-cols, 4), minmax(0, 1fr));
    gap: var(--wp--style--block-gap, 1.5rem);
}

.editor-styles-wrapper .rcs-editor-responsive-columns.wp-block-columns > .wp-block-column,
.editor-styles-wrapper .rcs-editor-responsive-columns > .wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0;
}

@media (max-width: 1024px) {
    .rcs-responsive-columns,
    .editor-styles-wrapper .rcs-editor-responsive-columns.wp-block-columns,
    .editor-styles-wrapper .rcs-editor-responsive-columns > .wp-block-columns {
        grid-template-columns: repeat(var(--rcs-tablet-cols, 2), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .rcs-responsive-columns,
    .editor-styles-wrapper .rcs-editor-responsive-columns.wp-block-columns,
    .editor-styles-wrapper .rcs-editor-responsive-columns > .wp-block-columns {
        grid-template-columns: repeat(var(--rcs-mobile-cols, 1), minmax(0, 1fr));
    }
}