/**
 * Compositions - Layout Primitives
 * Drewniane Theme
 */

/* ========================================
   CONTAINER
   ======================================== */

.container {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ========================================
   GRID
   ======================================== */

.grid {
  display: grid;
  gap: var(--grid-gap, var(--gap-gutter));
}

/* Responsive Grid Variants */
.grid[data-columns="2"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid[data-columns="3"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid[data-columns="4"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.grid[data-columns="5"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.grid[data-columns="6"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

/* Fixed columns for larger screens */
@media (min-width: 1024px) {
  .grid[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ========================================
   STACK (Vertical Flow)
   ======================================== */

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-block-start: var(--stack-gap, var(--gap-flow));
}

/* ========================================
   CLUSTER (Horizontal Wrap)
   ======================================== */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--gap-gutter));
  align-items: var(--cluster-align, center);
}

/* ========================================
   FLOW (Prose Spacing)
   ======================================== */

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* ========================================
   CENTER
   ======================================== */

.center {
  box-sizing: content-box;
  max-inline-size: var(--center-max, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--center-padding, var(--container-padding));
}

/* ========================================
   FULL BLEED
   ======================================== */

.full-bleed {
  inline-size: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}

/* ========================================
   UTILITIES
   ======================================== */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text Alignment */
.text-center {
  text-align: center;
}

/* Section Spacing */
.section-space {
  padding-block: var(--section-padding);
}