/* Native 12-column content grid (no Bootstrap) */

.kd-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block: 1.25rem;
}

.kd-grid__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%;
}

.kd-grid--gap-sm .kd-grid__row {
  gap: 0.75rem;
}

.kd-grid--gap-md .kd-grid__row {
  gap: 1.25rem;
}

.kd-grid--gap-lg .kd-grid__row {
  gap: 2rem;
}

.kd-grid__col {
  min-width: 0;
  grid-column: span var(--kd-col-xs, 12);
}

@media (min-width: 576px) {
  .kd-grid__col {
    grid-column: span var(--kd-col-sm, var(--kd-col-xs, 12));
  }
}

@media (min-width: 768px) {
  .kd-grid__col {
    grid-column: span var(--kd-col-md, var(--kd-col-sm, var(--kd-col-xs, 12)));
  }
}

@media (min-width: 992px) {
  .kd-grid__col {
    grid-column: span var(--kd-col-lg, var(--kd-col-md, var(--kd-col-sm, var(--kd-col-xs, 12))));
  }
}

@media (min-width: 1200px) {
  .kd-grid__col {
    grid-column: span var(--kd-col-xl, var(--kd-col-lg, var(--kd-col-md, var(--kd-col-sm, var(--kd-col-xs, 12)))));
  }
}

.kd-edit-mode .kd-grid__col[data-kd-slot] {
  min-height: 3rem;
}

.kd-edit-mode .kd-grid__col[data-kd-slot]:empty::before {
  content: attr(data-kd-empty-label, "Click to add content");
  display: block;
  padding: 0.75rem;
  border: 1px dashed var(--kd-line, #e2e8ed);
  color: var(--kd-ink-soft, #5b6b7a);
  font-size: 0.85rem;
  border-radius: 0.35rem;
}