/* ═══════════════════════════════════════════
   NX Blocks – Advanced Columns
   ═══════════════════════════════════════════ */

/* ── Parent flex container ── */
.nx-advcols {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    --nx-col-count: 3;
    --nx-col-gap: 20px;
}
.nx-advcols.has-background-overlay {
    position: relative;
}
.nx-advcols-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.nx-advcols > .nx-advcol {
    position: relative;
    z-index: 1;
}

/* ── Content width variants ── */
.nx-advcols-boxed {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Child column ── */
.nx-advcol {
    box-sizing: border-box;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Default: equal width based on parent --nx-col-count */
    width: calc((100% - (var(--nx-col-count) - 1) * var(--nx-col-gap)) / var(--nx-col-count));
    flex-grow: 0;
    flex-shrink: 0;
}
/* When column has explicit width set, override defaults via inline styles */

/* Vertical alignment helper classes (when flex inner layout is NOT enabled) */
.nx-advcol.nx-advcol-valign-top    { display: flex; flex-direction: column; justify-content: flex-start; }
.nx-advcol.nx-advcol-valign-center { display: flex; flex-direction: column; justify-content: center; }
.nx-advcol.nx-advcol-valign-bottom { display: flex; flex-direction: column; justify-content: flex-end; }

/* ── Editor-only styles ── */
.nx-advcols-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 60px;
    --nx-col-count: 3;
    --nx-col-gap: 20px;
}

/* Gutenberg wraps each child in .wp-block containers + inner-blocks wrappers.
   We need the block-list__layout to become a flex container itself,
   and each direct .wp-block child to size correctly. */
.nx-advcols-editor > .block-editor-inner-blocks {
    display: contents;
}
.nx-advcols-editor > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-col-gap, 20px);
    width: 100%;
}

/* Each column wrapper in editor - properly size with percentage support */
.nx-advcols-editor > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
    min-width: 0;
    box-sizing: border-box;
    /* Default equal width based on column count */
    width: calc((100% - (var(--nx-col-count) - 1) * var(--nx-col-gap)) / var(--nx-col-count));
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 100%;
}

/* When column has explicit width, apply it to the wrapper */
.nx-advcols-editor > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-type="nx-blocks/advanced-column"] {
    /* Allow inline styles to override via the style attribute on the element */
}

/* ── Editor: width/flex-basis is set on .wp-block wrapper via a <style> tag
   injected per-block (data-block selector). Here .nx-advcol fills the wrapper. ── */
.nx-advcols-editor .nx-advcol {
    width: 100%;
    background: rgba(0,0,0,.02);
    border: 1px dashed #ddd;
    border-radius: 4px;
    min-height: 60px;
    box-sizing: border-box;
    transition: border-color .15s ease;
}
.nx-advcols-editor .nx-advcol:hover {
    border-color: #007cba;
}

/* Appender button in editor */
.nx-advcols-editor .block-list-appender {
    width: calc((100% - (var(--nx-col-count) - 1) * var(--nx-col-gap)) / var(--nx-col-count));
    flex-grow: 0;
    flex-shrink: 0;
}

/* ── Responsive defaults (low specificity – overridden by per-block <style>) ── */
@media (max-width: 1024px) {
    .nx-advcols:not([id]) {
        --nx-col-count: 2;
    }
}
@media (max-width: 767px) {
    .nx-advcols:not([id]) {
        --nx-col-count: 1;
    }
}

/* ── Alignment ── */
.nx-advcols.alignwide {
    width: auto;
    max-width: none;
}
.nx-advcols.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* ── Editor responsive adjustments ── */
@media (max-width: 1024px) {
    .nx-advcols-editor {
        --nx-col-count: 2;
    }
    .nx-advcols-editor > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
        width: calc((100% - (var(--nx-col-count) - 1) * var(--nx-col-gap)) / var(--nx-col-count));
    }
}
@media (max-width: 767px) {
    .nx-advcols-editor {
        --nx-col-count: 1;
    }
    .nx-advcols-editor > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
        width: calc((100% - (var(--nx-col-count) - 1) * var(--nx-col-gap)) / var(--nx-col-count));
    }
}