/* =========================================================
   Simple CSS Grid Utilities (PicoCSS-compatible)
   No dependencies, no build step
   Drop into Rails asset pipeline
   ========================================================= */

/* -----------------------------
   Base grid container
------------------------------ */
.grid {
  display: grid;
  gap: var(--grid-gap, 1rem);
}

/* -----------------------------
   Column span utilities
   (works only inside .grid)
------------------------------ */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* -----------------------------
   12-column explicit grid mode
   Auto-activates when any col-* child is present.
   Uses :has() — Chrome 105+, Firefox 121+, Safari 15.4+.
   Older browsers fall back to auto-fit (Mode 1).
------------------------------ */
.grid:has(> [class*="col-"]) {
  grid-template-columns: repeat(12, 1fr);
}

/* -----------------------------
   Responsive col-md-* overrides (≥768px)
------------------------------ */
@media (min-width: 768px) {
  .col-md-1  { grid-column: span 1; }
  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-5  { grid-column: span 5; }
  .col-md-6  { grid-column: span 6; }
  .col-md-7  { grid-column: span 7; }
  .col-md-8  { grid-column: span 8; }
  .col-md-9  { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }
}

/* -----------------------------
   Alignment utilities
------------------------------ */
.items-start   { align-items: start; }
.items-center  { align-items: center; }
.items-end     { align-items: end; }

.justify-start  { justify-items: start; }
.justify-center { justify-items: center; }
.justify-end    { justify-items: end; }

/* -----------------------------
   Gap utilities (optional overrides)
------------------------------ */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* -----------------------------
   Responsive behavior (mobile-first)
------------------------------ */
@media (max-width: 768px) {

  /* Reset spans on mobile */
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    grid-column: span 12;
  }

}

/* -----------------------------
   Optional: container helper
   (keeps layouts consistent with Pico)
------------------------------ */
.container-narrow {
  max-width: 900px;
  margin-inline: auto;
}

.container-wide {
  max-width: 1200px;
  margin-inline: auto;
}