/* ==========================================================================
   qgate.systems — Layout
   Container, grid helpers, section spacing
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.container--sm { max-width: var(--max-width-sm); }
.container--xs { max-width: var(--max-width-xs); }

/* Section rhythm */
.section {
  padding: var(--sp-24) 0;
}
.section--sm {
  padding: var(--sp-16) 0;
}

/* Grid helpers */
.grid {
  display: grid;
  gap: var(--sp-8);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--4,
  .grid--3,
  .grid--2 { grid-template-columns: 1fr; }
}

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