/* ==========================================================================
   GATE PASS — Grid & Layout Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-5); } }

/* 12-column grid */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }

/* Auto-fit card grid */
.grid-cards {
  display: grid;
  /* 150px min lets two stat cards sit side-by-side on a 375px viewport
     (2 × 150 + 16 gap = 316 ≤ 343 content width). Above ~640px the grid
     naturally flows to 3-4 columns. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .grid-cards { gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Column spans */
.col-12,.col-6,.col-4,.col-3,.col-8,.col-9 { grid-column: span 12; }
@media (min-width: 640px) { .col-6,.col-4,.col-3 { grid-column: span 6; } }
@media (min-width: 1024px) {
  .col-9 { grid-column: span 9; }
  .col-8 { grid-column: span 8; }
  .col-6 { grid-column: span 6; }
  .col-4 { grid-column: span 4; }
  .col-3 { grid-column: span 3; }
}

/* Spacing */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }

/* Visibility */
.hide-mobile { display: none; }
@media (min-width: 768px) {
  .hide-mobile  { display: revert; }
  .hide-desktop { display: none; }
}