/* ==========================================================================
   BRIXVEN — Layout: container, grid, section rhythm
   Generic helper classes (flex, gap, visually-hidden) live in utilities.css.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

/* 12 / 8 / 4 column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(var(--grid-columns-tablet), 1fr); }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(var(--grid-columns-mobile), 1fr); }
}

/* Section rhythm — every <section> uses these, never a one-off margin */
.section {
  padding-block: var(--space-section);
  position: relative;
}

.section--hero {
  padding-block: var(--space-hero) var(--space-section);
}

.section--huge {
  padding-block: var(--space-huge);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-section);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}