/* ============================================================
   LAYOUT.CSS — Containers, grids, section spacing
   ============================================================ */

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

.container-sm {
  width: 100%;
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-lg {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ---- Section Spacing ---- */
.section {
  padding-block: var(--space-10);
}

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

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

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

/* ---- Section backgrounds ---- */
.section--white   { background-color: var(--color-surface); }
.section--alt     { background-color: var(--color-surface-alt); }
.section--primary { background-color: var(--color-primary); color: #fff; }
.section--primary h1,
.section--primary h2,
.section--primary h3 { color: #fff; }

/* ---- Grids ---- */

/* Two halves */
.grid-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* Services card grid — auto-fill 3 col on desktop */
.grid-services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

/* Features — auto-fill 3 col */
.grid-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-8);
}

/* 3 col fixed */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* 4 col fixed */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* 2 col fixed */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* Contact 2-col: form + panel */
.grid-contact {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* ---- 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-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

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

/* ---- Section Header ---- */
.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.section-header .eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
}

.section-header h2 {
  font-size: clamp(var(--text-2xl), 3.75vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.section-header .lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* On dark sections */
.section--primary .section-header .eyebrow { color: var(--color-secondary-light); }
.section--primary .section-header h2       { color: #fff; }
.section--primary .section-header .lead    { color: rgba(255,255,255,0.75); }

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .grid-halves  { grid-template-columns: 1fr; gap: var(--space-10); }
  .grid-3       { grid-template-columns: repeat(2, 1fr); }
  .grid-4       { grid-template-columns: repeat(2, 1fr); }
  .grid-contact { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
  .container,
  .container-sm,
  .container-lg { padding-inline: var(--space-4); }

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

  .grid-3       { grid-template-columns: 1fr; }
  .grid-4       { grid-template-columns: 1fr; }
  .grid-2       { grid-template-columns: 1fr; }
  .grid-services { grid-template-columns: 1fr; }

  .section-header h2 { font-size: var(--text-2xl); }
}