/* =============================================================
   SPRUCE PROJECT — Layout
   ============================================================= */

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

/* --- Sections --- */
.section {
  padding-block: var(--space-2xl);
}

.section--hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 0;
  padding-top: var(--nav-height);
  position: relative;
  overflow: hidden;
}

.section--alt {
  background-color: var(--color-surface);
}

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

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

.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-12 { grid-column: span 12; }

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

/* --- Responsive grid collapse --- */
@media (max-width: 1023px) {
  .col-4, .col-5, .col-6, .col-7, .col-8 {
    grid-column: span 12;
  }
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
  .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 {
    grid-column: span 4;
  }
  .section {
    padding-block: var(--space-xl);
  }
  .section--hero {
    min-height: 100svh;
  }
}