/* ── Grid layouts ─────────────────────────────────── */
.gaia-columns {
    display: grid;
    gap: 2rem;
}

.wp-block-gaia-columns.block-editor-block-list__layout {
    padding: 0;
}

.wp-block-gaia-columns .block-editor-inner-blocks {
    padding: 0 !important;
}

.gaia-columns--100         { grid-template-columns: 1fr;             }
.gaia-columns--50-50       { grid-template-columns: 1fr 1fr;         }
.gaia-columns--33-66       { grid-template-columns: 1fr 2fr;         }
.gaia-columns--66-33       { grid-template-columns: 2fr 1fr;         }
.gaia-columns--20-80       { grid-template-columns: 1fr 4fr;         }
.gaia-columns--80-20       { grid-template-columns: 4fr 1fr;         }
.gaia-columns--33-33-33    { grid-template-columns: 1fr 1fr 1fr;     }
.gaia-columns--25-50-25    { grid-template-columns: 1fr 2fr 1fr;     }
.gaia-columns--25-25-25-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* ── Align ────────────────────────────────────────── */
.gaia-columns--center { margin-left: auto; margin-right: auto; }
.gaia-columns--right  { margin-left: auto; margin-right: 0;    }

/* ── Width ────────────────────────────────────────── */
.gaia-columns--w-25  { max-width: 25%; }
.gaia-columns--w-50  { max-width: 50%; }
.gaia-columns--w-100 { max-width: 100%; }

/* ── Mobile: stack ────────────────────────────────── */
@media ( max-width: 768px ) {
    .gaia-columns--50-50,
    .gaia-columns--33-66,
    .gaia-columns--66-33,
    .gaia-columns--20-80,
    .gaia-columns--80-20,
    .gaia-columns--33-33-33,
    .gaia-columns--25-50-25,
    .gaia-columns--25-25-25-25 {
        grid-template-columns: 1fr;
    }

    /* Mobile gap variants */
    .gaia-columns--mgap-sm { gap: 0.5rem;  }
    .gaia-columns--mgap-md { gap: 1.5rem;  }
    .gaia-columns--mgap-lg { gap: 3rem;    }

    /* Width variants: reset on mobile */
    .gaia-columns--w-25,
    .gaia-columns--w-50,
    .gaia-columns--w-100 {
        max-width:    100% !important;
        margin-left:  0    !important;
        margin-right: 0    !important;
    }
}

/* ── Layout picker (editor only) ──────────────────── */
.gaia-columns-picker {
    padding: 1rem;
    border: 1px dashed var(--color-border-subtle, #ddd);
}

.gaia-columns-picker__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold, 700);
    margin-bottom: 0.75rem;
    color: var(--color-text-body, #1A1A1A);
}

.gaia-columns-picker__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gaia-columns-picker__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--color-border-subtle, #ddd);
    border-radius: var(--radius-4, 4px);
    background: var(--color-surface-subtle, #f9f9f9);
    cursor: pointer;
    transition: border-color 0.15s;
}

.gaia-columns-picker__btn:hover { border-color: var(--color-text-body, #1A1A1A); }

.gaia-columns-picker__icon {
    font-size: 1.4rem;
    letter-spacing: -0.05em;
    color: var(--color-text-muted, #999999);
}

.gaia-columns-picker__label {
    font-size: 0.7rem;
    color: var(--color-text-muted, #999999);
    white-space: nowrap;
}

/* ── Editor: fix margin:auto centering in grid ────── */
.wp-block-gaia-columns.block-editor-block-list__layout > .wp-block {
    margin-left:  0 !important;
    margin-right: 0 !important;
    width:        100% !important;
}