/*
 * Project-specific grid utilities.
 *
 * Keep the breakpoint decisions aligned with docs/agent/grid.md.
 */

.layout-grid {
  display: grid;
  gap: var(--pico-spacing);
}

.grid2,
.grid3,
.grid4,
.grid6,
.grid12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
  gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
}

.grid2 > *,
.grid3 > *,
.grid4 > *,
.grid6 > *,
.grid12 > * {
  min-width: 0;
}

.grid2 {
  --grid-columns-mobile: 1;
  --grid-columns-tablet: 2;
  --grid-columns-desktop: 2;
}

.grid3 {
  --grid-columns-mobile: 1;
  --grid-columns-tablet: 2;
  --grid-columns-desktop: 3;
}

.grid4 {
  --grid-columns-mobile: 1;
  --grid-columns-tablet: 2;
  --grid-columns-desktop: 4;
}

.grid6 {
  --grid-columns-mobile: 2;
  --grid-columns-tablet: 4;
  --grid-columns-desktop: 6;
}

.grid12 {
  --grid-columns-mobile: 4;
  --grid-columns-tablet: 8;
  --grid-columns-desktop: 12;
}

@media (min-width: 600px) {
  .grid2,
  .grid3,
  .grid4,
  .grid6,
  .grid12 {
    grid-template-columns: repeat(var(--grid-columns-tablet), minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .grid2,
  .grid3,
  .grid4,
  .grid6,
  .grid12 {
    grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr));
  }
}

.layout-grid--quarter {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
  .layout-grid--quarter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }
}

.grid-demo-item {
  display: grid;
  min-height: 3rem;
  place-items: center;
  border: var(--pico-border-width) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  color: var(--pico-muted-color);
  font-family: var(--pico-font-family-monospace);
  font-size: var(--theme-font-size-mono);
}