/* Utility CSS: grid helpers, spacing scale, and helper classes */

/* Spacing scale (multiples of 4px) */
:root{
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

/* Margin helpers */
.m-0{margin:0}
.mt-1{margin-top:var(--space-1)}
.mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}
.mb-2{margin-bottom:var(--space-2)}
.p-1{padding:var(--space-1)}
.p-2{padding:var(--space-2)}
.p-3{padding:var(--space-3)}

/* Simple responsive grid (float fallback) */
.grid{
  display:grid;
  gap:var(--space-4);
  grid-template-columns: repeat(12, 1fr);
  align-items:start;
}
.grid-col-6{grid-column: span 6;}
.grid-col-4{grid-column: span 4;}
.grid-col-3{grid-column: span 3;}
.grid-col-12{grid-column: span 12;}
@media (max-width: 768px){
  .grid{ grid-template-columns: repeat(6, 1fr); }
  .grid-col-6{grid-column: span 6;}
  .grid-col-4{grid-column: span 6;}
  .grid-col-3{grid-column: span 6;}
}

/* Utility text helpers */
.text-center{text-align:center}
.hide-on-mobile{display:inline-block}
@media (max-width:768px){ .hide-on-mobile{display:none} }

/* Simple card */
.card{padding:var(--space-4); border:1px solid #eee; border-radius:8px; background:#fff}