/* ==========================================================================
   MB Grid Block — Editor + Frontend styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: base grid layout is handled by PHP-generated inline <style>,
   but we set sensible defaults here for the editor preview
   -------------------------------------------------------------------------- */

/* Editor: wrapper so Gutenberg's appender doesn't break the preview */
.mb-grid-editor-wrapper {
    position: relative;
}

/* Frontend: actual grid element (styles come from PHP inline <style>) */
.mb-grid {
    box-sizing: border-box;
    width: 100%;
}

/* ==========================================================================
   EDITOR: apply grid to the inner blocks layout wrapper so the appender
   sits inside the grid flow and can be spanned to full width.
   ========================================================================== */
.mb-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid !important;
    grid-template-columns: repeat(var(--mb-cols, 3), 1fr);
    column-gap: var(--mb-col-gap, 20px);
    row-gap: var(--mb-row-gap, 20px);
    align-items: var(--mb-align-items, stretch);
    justify-items: var(--mb-justify-items, stretch);
}

/* Appender ("Dodaj blok") spans all columns — always visible */
.mb-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender,
.mb-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-default-block-appender {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
    margin-top: 4px;
}

/* Grid items */
.mb-grid-item {
    box-sizing: border-box;
    min-width: 0; /* prevent blowout on flex/grid children */
}

/* --------------------------------------------------------------------------
   Editor chrome
   -------------------------------------------------------------------------- */

/* Device-tab toolbar */
.mb-device-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e4e7;
}

.mb-device-tab {
    flex: 0 0 auto;
}

.mb-device-tab .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* Active device tab highlight */
.mb-device-tab.is-active,
.mb-device-tab[aria-pressed="true"] {
    background: #1e1e1e;
    color: #fff;
    border-color: #1e1e1e;
}

/* Breakpoint hint */
.mb-breakpoint-hint {
    font-size: 11px;
    color: #757575;
    margin: 0 0 8px;
    font-style: italic;
}

/* Panel content spacing */
.mb-device-panel {
    padding-top: 4px;
}

/* Grid editor visual: show outline on items in editor */
.block-editor-block-list__layout .mb-grid > .block-editor-block-list__layout > [data-type="mb-blocks/grid-item"] > .block-editor-block-list__block-edit,
.block-editor-block-list__layout .mb-grid-item {
    outline: 1px dashed rgba(0, 0, 0, 0.15);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Font-size for component help texts
   -------------------------------------------------------------------------- */
.components-base-control__help {
    font-size: 11px;
}