/* 12-column layout grid (auto row heights). */
.slcs-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: min-content;
    gap: 20px;
    margin-top: 24px;
    align-items: start;
}
.slcs-grid-cell { position: relative; min-width: 0; }

/* Edit mode affordances. */
.slcs-grid--edit .slcs-grid-cell {
    outline: 1px dashed var(--sl-silver, #A0A3A5);
    outline-offset: 4px;
    cursor: grab;
}
.slcs-grid--edit .slcs-grid-cell:hover { outline-color: var(--sl-navy, #002046); }
.slcs-grid-dragging { opacity: 0.7; cursor: grabbing; z-index: 5; }
.slcs-grid-resize {
    position: absolute; top: 0; right: -3px; width: 10px; height: 100%;
    cursor: ew-resize; border-radius: 3px;
}
.slcs-grid--edit .slcs-grid-resize { background: linear-gradient(to right, transparent, rgba(0,32,70,0.15)); }
.slcs-grid--edit .slcs-grid-resize:hover { background: var(--sl-navy, #002046); opacity: 0.6; }

/* Responsive: collapse to a single column on narrow screens. */
@media (max-width: 720px) {
    .slcs-grid { grid-template-columns: 1fr; }
    .slcs-grid-cell { grid-column: 1 / -1 !important; }
}

/* ---- v2: per-tile edit toolbar (width presets + reorder) ---- */
.slcs-grid--edit .slcs-grid-cell { position: relative; outline: 1px dashed var(--sl-silver,#A0A3A5); outline-offset: 4px; }
.slcs-grid--edit .slcs-grid-cell:hover { outline-color: var(--sl-navy,#002046); }
.slcs-tile-tools {
    position: absolute; top: -14px; left: 8px; z-index: 6;
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--sl-navy,#002046); padding: 3px 5px; border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0,32,70,.35);
}
.slcs-tt-drag { cursor: grab; color: #fff; font-size: 14px; padding: 0 4px; user-select: none; }
.slcs-tt-drag:active { cursor: grabbing; }
.slcs-tt-w, .slcs-tt-btn {
    font-size: .72rem; font-weight: 700; line-height: 1; padding: 3px 6px;
    border: 1px solid transparent; border-radius: 4px; background: transparent; color: #fff; cursor: pointer;
}
.slcs-tt-w:hover, .slcs-tt-btn:hover { background: rgba(255,255,255,.18); }
.slcs-tt-w.on { background: #fff; color: var(--sl-navy,#002046); }
.slcs-grid-dragging { opacity: .5; }
.slcs-drop-before { box-shadow: -3px 0 0 0 var(--sl-navy-accent,#0A3D73); }
.slcs-drop-after  { box-shadow:  3px 0 0 0 var(--sl-navy-accent,#0A3D73); }

/* Content edit/delete toolbar (✎/🗑) shows on hover in normal admin view;
   in Arrange-Layout mode the full toolbar (width/drag) is always visible. */
.slcs-grid:not(.slcs-grid--edit) .slcs-tile-tools { opacity: 0; transition: opacity .12s ease; }
.slcs-grid:not(.slcs-grid--edit) .slcs-grid-cell:hover .slcs-tile-tools { opacity: 1; }