/* Layout system: grid (12 cols), flex utilities and layout patterns using tokens */

/* Row using CSS Grid with 12 equal columns */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-2);
  width: 100%;
}

/* Column spans */
.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; }

/* Responsive helpers */
@media (min-width: var(--bp-sm)) {
  .col-sm-12 { grid-column: span 12; }
  .col-sm-6  { grid-column: span 6; }
  .col-sm-4  { grid-column: span 4; }
  .col-sm-3  { grid-column: span 3; }
}
@media (min-width: var(--bp-md)) {
  .col-md-12 { grid-column: span 12; }
  .col-md-6  { grid-column: span 6; }
  .col-md-4  { grid-column: span 4; }
  .col-md-3  { grid-column: span 3; }
}
@media (min-width: var(--bp-lg)) {
  .col-lg-12 { grid-column: span 12; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-3  { grid-column: span 3; }
}

/* Flexbox utilities */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-8 { gap: var(--space-1); }
.gap-16 { gap: var(--space-2); }
.gap-24 { gap: var(--space-3); }

/* Container */
.container{ max-width: 1200px; margin: 0 auto; padding: 0 var(--space-3); }

/* Examples */
.impact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.projects-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: var(--bp-md)) { .projects-grid{ grid-template-columns: repeat(2,1fr);} }
@media (min-width: var(--bp-lg)) { .projects-grid{ grid-template-columns: repeat(3,1fr);} }

/* Small helpers */
.hide-sm { display: none; }
@media (min-width: var(--bp-sm)) { .hide-sm { display: initial; } }