/* ===========================================================================
   ATBIO UI Framework / Layout
   Shared primitives. No page-specific sizing or module selectors.
   =========================================================================== */

.ui-container,
.ui-container--wide,
.ui-container--narrow {
  width: min(100% - (var(--ui-container-padding) * 2), var(--ui-container-max));
  margin-inline: auto;
}

.ui-container--wide {
  width: min(100% - (var(--ui-container-padding) * 2), var(--ui-container-wide));
}

.ui-container--narrow {
  width: min(100% - (var(--ui-container-padding) * 2), var(--ui-container-narrow));
}

.ui-section { padding-block: var(--ui-section-space-md); }
.ui-section--xs { padding-block: var(--ui-section-space-xs); }
.ui-section--sm { padding-block: var(--ui-section-space-sm); }
.ui-section--lg { padding-block: var(--ui-section-space-lg); }

.ui-grid {
  display: grid;
  grid-template-columns: repeat(var(--ui-grid-columns), minmax(0, 1fr));
  gap: var(--ui-grid-gap);
}

.ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-col-span-12 { grid-column: span 12; }
.ui-col-span-8 { grid-column: span 8; }
.ui-col-span-6 { grid-column: span 6; }
.ui-col-span-4 { grid-column: span 4; }
.ui-col-span-3 { grid-column: span 3; }

.ui-stack { display: flex; flex-direction: column; gap: var(--ui-space-6); }
.ui-stack--sm { gap: var(--ui-space-4); }
.ui-stack--lg { gap: var(--ui-space-8); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-4); }