/*
 * grid-styles.css
 * Reusable layout grid for moval.org.
 *
 * Generic, component-agnostic column system. Use it to lay out cards,
 * stats, logos, forms, image galleries — anything that sits in rows/columns.
 * Keeps LAYOUT separate from COMPONENTS (see card-styles.css for the boxes).
 *
 * ---------------------------------------------------------------------------
 * QUICK START
 * ---------------------------------------------------------------------------
 *   Fixed columns (collapse responsively):
 *     <ul class="grid grid--3"> ... </ul>
 *
 *   Auto-fit columns (fill the row, wrap as needed, no media queries):
 *     <div class="grid grid--auto"> ... </div>
 *
 *   Adjust the min card width for auto-fit with the --grid-min variable:
 *     <div class="grid grid--auto" style="--grid-min: 320px;"> ... </div>
 *
 * Works on <ul>/<ol> (list bullets removed) or any container (div/section).
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --grid-gap:      1.6rem;   /* default gutter */
  --grid-gap-sm:   0.8rem;
  --grid-gap-lg:   2.6rem;
  --grid-min:      260px;    /* min column width for .grid--auto */
  --grid-bp-md:    900px;    /* tablet breakpoint */
  --grid-bp-sm:    670px;    /* phone breakpoint  */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
.grid {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;          /* harmless on non-list containers */
}

/* ==========================================================================
   3. FIXED COLUMN COUNTS
   --------------------------------------------------------------------------
   Collapse: 5/6 -> 3, 3/4 -> 2, everything -> 1 on phones.
   ========================================================================== */
.grid--1 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

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

/* ==========================================================================
   4. AUTO-FIT  (responsive with no breakpoints)
   --------------------------------------------------------------------------
   Columns are at least --grid-min wide and grow to fill the row.
   .grid--fill keeps empty tracks; default (auto-fit) collapses them.
   ========================================================================== */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
}
.grid--fill {
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
}

/* ==========================================================================
   5. GUTTER MODIFIERS
   ========================================================================== */
.grid--gap-sm   { gap: var(--grid-gap-sm); }
.grid--gap-lg   { gap: var(--grid-gap-lg); }
.grid--gap-none { gap: 0; }

/* ==========================================================================
   6. ALIGNMENT MODIFIERS
   ========================================================================== */
.grid--top     { align-items: start; }
.grid--middle  { align-items: center; }
.grid--bottom  { align-items: end; }
.grid--stretch { align-items: stretch; }   /* default; equal-height children */

.grid--center-x { justify-content: center; }   /* center tracks when they don't fill the row */

/* ==========================================================================
   7. SPANS  (let one child take more columns; needs a fixed-column grid)
   --------------------------------------------------------------------------
   e.g. <li class="grid__col-span-2"> inside .grid--4
   ========================================================================== */
.grid__col-span-2 { grid-column: span 2; }
.grid__col-span-3 { grid-column: span 3; }
.grid__col-span-full { grid-column: 1 / -1; }

@media (max-width: 670px) {
  .grid__col-span-2,
  .grid__col-span-3 { grid-column: auto; }
}