/* === Container === */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

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

.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; }

/* === Flex helpers === */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* === Section === */
.section {
  padding: var(--space-section) 0;
}
.section-dark {
  background: var(--color-black);
  color: var(--color-white);
}

/* === Responsive === */
@media (max-width: 1024px) {
  .col-md-4  { grid-column: span 4; }
  .col-md-6  { grid-column: span 6; }
  .col-md-12 { grid-column: span 12; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .grid { gap: 16px; }
  .col-sm-6  { grid-column: span 6; }
  .col-sm-12 { grid-column: span 12; }
  .section { padding: clamp(60px, 8vw, 100px) 0; }
  .hide-mobile { display: none !important; }
}

@media (max-width: 360px) {
  .container { padding: 0 16px; }
}