/* Charmed Homes: layout, spacing, and measure utilities.
   Small, composable classes so page markup never carries layout/spacing/color
   in a style="" attribute. */

/* ---------- Spacing ---------- */

.mt-xs {
  margin-top: var(--space-xs);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mt-md {
  margin-top: var(--space-md);
}

/* ---------- Measure (max-width) ---------- */

.measure-3xs {
  max-width: 14ch;
}

.measure-2xs {
  max-width: 16ch;
}

.measure-sm {
  max-width: 44ch;
}

.measure-md {
  max-width: 46ch;
}

.measure-lg {
  max-width: 50ch;
}

.measure-prose {
  max-width: 60ch;
}

.measure-body {
  max-width: var(--measure);
}

.measure-form {
  max-width: 520px;
}

/* ---------- Text size ---------- */

.text-lead {
  font-size: 1.25rem;
}

.text-md {
  font-size: 1.125rem;
}

.text-sm {
  font-size: 0.9375rem;
}

/* ---------- Aspect ratios ---------- */

.ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.ratio-16-10 {
  aspect-ratio: 16 / 10;
}

/* ---------- Flex / grid patterns ---------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cta-row {
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

.split-panel {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}

.stat-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.teaser-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.contact-layout {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1.3fr 1fr;
  align-items: start;
}

@media (max-width: 820px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Misc ---------- */

.btn-block {
  width: 100%;
}

.success-box {
  padding: var(--space-md);
  background: var(--paper);
}