.widget-grid {
  display: grid;
  grid-template-columns: var(--cols, 1fr);
  gap: var(--gap, 1rem);
}

.widget-grid .widget-cell {
  grid-column: var(--gc, auto);
  grid-row: var(--gr, auto);
}

/* Preview grid used by WidgetPreviewService */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 90px;
  gap: 6px;
}

.preview-grid .preview-card {
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  padding: .5rem;
  display: flex;
  align-items: center;
  grid-column: var(--gc, auto);
  grid-row: var(--gr, auto);
}

/* ----- New: Widget Grid utilities (non-breaking) ----- */
/* Use alongside Bootstrap. If parent has wg-grid, items can span rows/cols. */
.wg-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 180px; /* base row height; pairs with height spans */
  gap: 1rem;
}

.wg-item { grid-column: span 12; grid-row: span 1; }

/* width mapping: 1..4 -> 3/6/9/12 columns */
.wg-w1 { grid-column: span 3; }
.wg-w2 { grid-column: span 6; }
.wg-w3 { grid-column: span 9; }
.wg-w4 { grid-column: span 12; }

/* height mapping: 1..4 -> rows */
.wg-h1 { grid-row: span 1; }
.wg-h2 { grid-row: span 2; }
.wg-h3 { grid-row: span 3; }
.wg-h4 { grid-row: span 4; }