/* layout.css — Grid system, section spacing, responsive helpers */

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

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

/* Background variants */
.bg-black {
  background-color: var(--color-bg-black);
}

.bg-dark {
  background-color: var(--color-bg-dark);
}

.bg-light {
  background-color: var(--color-bg-light);
}

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

.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-5  { grid-column: span 5; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.col-full { grid-column: 1 / -1; }

/* Two-column layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.two-col-60-40 {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: var(--space-lg);
  align-items: start;
}

.two-col-55-45 {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-lg);
  align-items: start;
}

/* Three-column layout */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
}

/* Two-column card grid */
.two-col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-card);
}

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }

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

/* Stack — vertical spacing between children */
.stack > * + * {
  margin-top: var(--space-md);
}

.stack-sm > * + * {
  margin-top: var(--space-sm);
}

.stack-lg > * + * {
  margin-top: var(--space-lg);
}

/* ---------------------- */
/* Responsive Breakpoints */
/* ---------------------- */

/* Tablet: 768px */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-12 {
    grid-column: span 1;
  }

  .two-col,
  .two-col-60-40,
  .two-col-55-45 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .three-col {
    grid-template-columns: 1fr;
  }

  .two-col-grid {
    grid-template-columns: 1fr;
  }
}

/* Desktop: 1024px */
@media (min-width: 1024px) {
  /* layout already defaults to desktop */
}