/* ============================================================
   trwn — Utility classes (4-pt grid)
   Use these instead of inline style="..." for spacing, layout
   and common typographic tweaks. Generated patterns informed
   by docs/inline-style-audit.md — top frequency-driven set.
   ============================================================ */

/* ----------------------------------------------------------
   Margin
   ---------------------------------------------------------- */
.m-0  { margin: 0; }
.m-auto { margin: 0 auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--sp-1, 4px); }
.mt-2 { margin-top: var(--sp-2, 8px); }
.mt-3 { margin-top: var(--sp-3, 12px); }
.mt-4 { margin-top: var(--sp-4, 16px); }
.mt-5 { margin-top: var(--sp-5, 20px); }
.mt-6 { margin-top: var(--sp-6, 24px); }
.mt-8 { margin-top: var(--sp-8, 32px); }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--sp-1, 4px); }
.mb-2  { margin-bottom: var(--sp-2, 8px); }
.mb-3  { margin-bottom: var(--sp-3, 12px); }
.mb-4  { margin-bottom: var(--sp-4, 16px); }
/* 18px is a recurring value — sp-4.5 approximation */
.mb-18 { margin-bottom: 18px; }
.mb-6  { margin-bottom: var(--sp-6, 24px); }
.mb-8  { margin-bottom: var(--sp-8, 32px); }

.ml-auto { margin-left: auto; }
.mr-1    { margin-right: var(--sp-1, 4px); }
.mr-auto { margin-right: auto; }

/* ----------------------------------------------------------
   Padding
   ---------------------------------------------------------- */
.p-0 { padding: 0; }
.p-2 { padding: var(--sp-2, 8px); }
.p-3 { padding: var(--sp-3, 12px); }
.p-4 { padding: var(--sp-4, 16px); }
.p-5 { padding: var(--sp-5, 20px); }
.p-6 { padding: var(--sp-6, 24px); }

/* ----------------------------------------------------------
   Flex / layout
   ---------------------------------------------------------- */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; min-width: 0; }

.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }

.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-1 { gap: var(--sp-1, 4px); }
.gap-2 { gap: var(--sp-2, 8px); }
.gap-3 { gap: var(--sp-3, 12px); }
.gap-4 { gap: var(--sp-4, 16px); }
.gap-6 { gap: var(--sp-6, 24px); }

/* ----------------------------------------------------------
   Grid — mobile-first, multi-column ≥768 px
   ---------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr;             gap: var(--sp-3, 12px); }
.grid-3 { display: grid; grid-template-columns: 1fr;             gap: var(--sp-3, 12px); }
.grid-4 { display: grid; grid-template-columns: 1fr;             gap: var(--sp-4, 16px); }

/* Audit shows "1fr 1fr" + gap:12px is the single most-common grid pattern (18×) */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

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

.text-xs   { font-size: 0.75rem; }   /* ~11-12px */
.text-sm   { font-size: 0.85rem; }   /* ~13-14px */
.text-base { font-size: 0.875rem; }  /* 14px */

.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }

.text-muted      { color: var(--trwn-warm-gray, #857C70); }
.text-muted-sm   { color: var(--trwn-warm-gray, #857C70); font-size: 0.85rem; }
.text-muted-xs   { color: var(--trwn-warm-gray, #857C70); font-size: 0.75rem; }
.text-accent     { color: var(--trwn-accent); }
.text-sage       { color: var(--trwn-sage); }
.text-no-decoration { color: inherit; text-decoration: none; }

/* Serif heading pattern (23× across templates) */
.heading-serif {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}

/* ----------------------------------------------------------
   Display
   ---------------------------------------------------------- */
.hidden          { display: none !important; }
.block           { display: block; }
.inline          { display: inline; }
.overflow-x-auto { overflow-x: auto; }

@media (max-width: 767.98px) { .hidden-mobile  { display: none !important; } }
@media (min-width: 768px)    { .hidden-desktop { display: none !important; } }

/* ----------------------------------------------------------
   Width / sizing
   ---------------------------------------------------------- */
.w-full  { width: 100%; }
.max-w-md { max-width: 480px; }
.max-w-lg { max-width: 640px; }
.max-w-xl { max-width: 960px; }

/* ----------------------------------------------------------
   Vertical-align helpers (icon alignment)
   ---------------------------------------------------------- */
.va-mid   { vertical-align: middle; }
.va-sub2  { vertical-align: -2px; }

/* ----------------------------------------------------------
   Misc
   ---------------------------------------------------------- */
.cursor-pointer { cursor: pointer; }
.border-none    { border: none; }
.bg-none        { background: none; }