/**
 * Developmizer Site — Layout
 *
 * Container widths, section padding, grid/stack/cluster utilities.
 * All logical properties (inset-inline, padding-block, etc.) for RTL safety.
 */

/* -----------------------------------------------------------------------------
 * Container
 * -------------------------------------------------------------------------- */

.dz-container {
  width: 100%;
  max-width: var(--dz-container);
  margin-inline: auto;
  padding-inline: var(--dz-content-padding);
}
.dz-container--narrow { max-width: var(--dz-container-narrow); }
.dz-container--wide   { max-width: var(--dz-container-wide); }
.dz-container--prose  { max-width: var(--dz-container-prose); }

/* -----------------------------------------------------------------------------
 * Section — vertical rhythm
 * -------------------------------------------------------------------------- */

.dz-section {
  padding-block: var(--dz-space-16);
}
@media (min-width: 1024px) {
  .dz-section { padding-block: var(--dz-space-24); }
}
.dz-section--tight { padding-block: var(--dz-space-12); }
.dz-section--loose { padding-block: var(--dz-space-20); }

/* -----------------------------------------------------------------------------
 * Grid
 * -------------------------------------------------------------------------- */

.dz-grid {
  display: grid;
  gap: var(--dz-space-6);
}
.dz-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dz-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dz-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .dz-grid-2,
  .dz-grid-3,
  .dz-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
 * Stack (vertical spacing via gap)
 * -------------------------------------------------------------------------- */

.dz-stack {
  display: flex;
  flex-direction: column;
}
.dz-stack-1 { gap: var(--dz-space-1); }
.dz-stack-2 { gap: var(--dz-space-2); }
.dz-stack-3 { gap: var(--dz-space-3); }
.dz-stack-4 { gap: var(--dz-space-4); }
.dz-stack-6 { gap: var(--dz-space-6); }
.dz-stack-8 { gap: var(--dz-space-8); }
.dz-stack-12 { gap: var(--dz-space-12); }

/* -----------------------------------------------------------------------------
 * Cluster (horizontal wrapping)
 * -------------------------------------------------------------------------- */

.dz-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dz-space-4);
  align-items: center;
}
.dz-cluster-2 { gap: var(--dz-space-2); }
.dz-cluster-6 { gap: var(--dz-space-6); }

/* -----------------------------------------------------------------------------
 * Center (flex center helper)
 * -------------------------------------------------------------------------- */

.dz-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -----------------------------------------------------------------------------
 * Text alignment
 * -------------------------------------------------------------------------- */

.dz-text-center { text-align: center; }
.dz-text-start  { text-align: start; }
.dz-text-end    { text-align: end; }