/* ============================================================
   CallD.AI — Utility Classes
   Spacing, visibility, display, misc helpers
   ============================================================ */

/* ── Margin utilities ── */
.mt-0  { margin-block-start: 0; }
.mt-2  { margin-block-start: var(--sp-2); }
.mt-4  { margin-block-start: var(--sp-4); }
.mt-6  { margin-block-start: var(--sp-6); }
.mt-8  { margin-block-start: var(--sp-8); }
.mt-12 { margin-block-start: var(--sp-12); }
.mt-16 { margin-block-start: var(--sp-16); }

.mb-0  { margin-block-end: 0; }
.mb-2  { margin-block-end: var(--sp-2); }
.mb-4  { margin-block-end: var(--sp-4); }
.mb-6  { margin-block-end: var(--sp-6); }
.mb-8  { margin-block-end: var(--sp-8); }
.mb-12 { margin-block-end: var(--sp-12); }
.mb-16 { margin-block-end: var(--sp-16); }

/* ── Max width constraints ── */
.max-w-prose { max-width: 65ch; }
.max-w-sm    { max-width: 480px; }
.max-w-md    { max-width: 640px; }
.max-w-lg    { max-width: 800px; }

/* ── Visibility ── */
.hidden { display: none !important; }

.visible-mobile {
  display: none;
}

@media (max-width: 900px) {
  .hidden-mobile { display: none !important; }
  .visible-mobile { display: block; }
}

@media (max-width: 600px) {
  .hidden-sm { display: none !important; }
}

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }

/* ── Relative positioning (for absolute children) ── */
.relative { position: relative; }

/* ── Colour overrides ── */
.text-green  { color: var(--c-green); }
.text-teal   { color: var(--c-teal); }
.text-muted  { color: var(--c-muted); }
.text-ink    { color: var(--c-ink); }
.text-white  { color: var(--c-white); }
.text-cream  { color: var(--c-cream); }

/* ── Border-top separator ── */
.border-top {
  border-top: 1px solid var(--c-border);
  padding-block-start: var(--sp-8);
}

/* ── Full bleed (break out of container) ── */
.full-bleed {
  width: calc(100vw - (100vw - 100%));
  margin-inline-start: calc(-50vw + 50%);
}