/* ==========================================================================
   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); } }

/* Desktop width discipline. Screens are designed mobile-first; without a cap
   their cards and forms stretch across the whole desktop/tablet window and
   float lopsided in the 1200px container. Each screen's root section takes a
   .page size so content sits in a deliberate centered column. Phones are
   unaffected — the caps only bite above these widths.
     --sm  narrow forms (profile)
     --md  card/list screens (resident, scan, reports)
     --lg  data-dense admin screens (users, audit, analytics, estates) */
.page { width: 100%; margin-inline: auto; }
.page--sm { max-width: 560px; }
.page--md { max-width: 680px; }
.page--lg { max-width: 960px; }

/* 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)); }
}
.p-5  { padding: var(--space-5); }

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