/* Layout — container, grids, backgrounds, text colors, spacing utilities */

/* ========== LAYOUT ========== */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

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

.section-py {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

@media (min-width: 1024px) {
  .section-py {
    padding-top: var(--space-28);
    padding-bottom: var(--space-28);
  }
}

.grid-2 {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.grid-3 {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-4 {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ========== BACKGROUNDS ========== */

.bg-white    { background-color: var(--color-white); }
.bg-stone    { background-color: var(--color-stone-warm); }
.bg-slate    { background-color: var(--color-slate-deep); }

/* ========== TEXT COLORS ========== */

.text-white      { color: var(--color-white); }
.text-accent     { color: var(--color-accent); }
.text-accent-light { color: var(--color-accent-light); }
.text-slate      { color: var(--color-slate-deep); }
.text-gray-300   { color: var(--color-gray-300); }
.text-gray-400   { color: var(--color-gray-400); }
.text-gray-500   { color: var(--color-gray-500); }
.text-gray-600   { color: var(--color-gray-600); }

/* ========== UTILITIES ========== */

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.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); }
.mt-4   { margin-top: var(--space-4); }
.mt-6   { margin-top: var(--space-6); }
.mt-8   { margin-top: var(--space-8); }
.mb-2   { margin-bottom: var(--space-2); }
.mb-3   { margin-bottom: var(--space-3); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-6   { margin-bottom: var(--space-6); }
.mb-8   { margin-bottom: var(--space-8); }
.mb-12  { margin-bottom: var(--space-12); }
.mb-16  { margin-bottom: var(--space-16); }
.w-full { width: 100%; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.mx-auto   { margin-left: auto; margin-right: auto; }
.relative  { position: relative; }
.overflow-hidden { overflow: hidden; }

/* Lead form responsive grid */
@media (max-width: 640px) {
  .lead-form-contact-grid {
    grid-template-columns: 1fr !important;
  }
}