/* =============================================================
   UTILITIES — Single-purpose helper classes
   Zelken MD Plastic Surgery
   ============================================================= */

/* ============================================================
   TEXT ALIGNMENT
   ============================================================ */
.text-center,
.center { text-align: center; }

.text-left  { text-align: left; }
.text-right { text-align: right; }

/* ============================================================
   PROSE — Constrained readable text column
   ============================================================ */
.prose { max-width: var(--measure); }

.prose p { color: rgba(22, 22, 15, .78); font-weight: 300; }

/* ============================================================
   STACKING
   ============================================================ */
.stack-sm > * + * { margin-top: .8rem; }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }

/* ============================================================
   BUTTON ROW
   ============================================================ */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-row.center,
.btn-row--center { justify-content: center; }

.btn-row--end { justify-content: flex-end; }

/* ============================================================
   SPACING — Margin top
   ============================================================ */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* ============================================================
   SPACING — Margin bottom
   ============================================================ */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ============================================================
   SPACING — Padding top / bottom
   ============================================================ */
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }

.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }

/* ============================================================
   CENTERING
   ============================================================ */
.mx-auto { margin-inline: auto; }

/* ============================================================
   DISPLAY
   ============================================================ */
.hidden          { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html    { scroll-behavior: auto; }
}