/* Xandriq - layout.css
 * Container (max-w 1120px), section spacing, grid helpers.
 */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-24);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--s-32);
  }
}

.section {
  padding: var(--s-80) 0;
}

.section--tight {
  padding: var(--s-48) 0;
}

.section--loose {
  padding: var(--s-96) 0;
}

.section--special {
  background: var(--c-special);
}

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

.section-header {
  margin-bottom: var(--s-40);
}

.section-header--centered {
  text-align: center;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

.section-header__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-text-dim);
  max-width: 640px;
}

.section-header--centered .section-header__lead {
  margin-left: auto;
  margin-right: auto;
}

.grid {
  display: grid;
  gap: var(--s-32);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-60-40 {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--s-64);
  align-items: center;
}

.grid-40-60 {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: var(--s-48);
  align-items: start;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-48);
}

@media (max-width: 1023px) {
  .grid-2, .grid-3, .grid-4, .grid-60-40, .grid-40-60, .two-col {
    grid-template-columns: 1fr;
  }
  .section {
    padding: var(--s-64) 0;
  }
  .section--loose {
    padding: var(--s-80) 0;
  }
}

@media (max-width: 767px) {
  .section {
    padding: var(--s-48) 0;
  }
  .section--loose {
    padding: var(--s-64) 0;
  }
}

.flex {
  display: flex;
  gap: var(--s-16);
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-between {
  justify-content: space-between;
  align-items: center;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-dim    { color: var(--c-text-dim); }
.text-accent { color: var(--c-accent); }

.mt-24 { margin-top: var(--s-24); }
.mt-32 { margin-top: var(--s-32); }
.mt-40 { margin-top: var(--s-40); }
.mt-48 { margin-top: var(--s-48); }
.mb-16 { margin-bottom: var(--s-16); }
.mb-24 { margin-bottom: var(--s-24); }
.mb-32 { margin-bottom: var(--s-32); }
.mb-40 { margin-bottom: var(--s-40); }