/* andnewme Utilities — v1.0
   Single-purpose helper classes. Depends on theme.css variables. */

/* ─── Display ────────────────────────────────────────────── */
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-block  { display: block; }
.d-none   { display: none; }
.d-inline { display: inline; }
.d-inline-flex { display: inline-flex; }

/* ─── Flex Helpers ───────────────────────────────────────── */
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

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

.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }

/* ─── Grid ───────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

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

/* ─── Text Size ──────────────────────────────────────────── */
.text-xs  { font-size: 11px; }
.text-sm  { font-size: 13px; }
.text-md  { font-size: 15px; }
.text-lg  { font-size: 17px; }
.text-xl  { font-size: 20px; }
.text-2xl { font-size: 24px; }

/* ─── Font Weight ────────────────────────────────────────── */
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }

/* ─── Colors ─────────────────────────────────────────────── */
.text-primary { color: var(--color-primary); }
.text-peach   { color: var(--color-peach); }
.text-copper  { color: var(--color-copper); }
.text-dark    { color: var(--color-dark); }
.text-muted   { color: var(--color-text-muted); }
.text-white   { color: var(--color-white); }
.text-green   { color: var(--color-green); }

.bg-primary { background: var(--color-primary); }
.bg-peach   { background: var(--color-peach); }
.bg-dark    { background: var(--color-dark); }
.bg-green   { background: var(--color-green); }
.bg-white   { background: var(--color-white); }
.bg-alt     { background: var(--color-bg); }

/* ─── Spacing — Margin ───────────────────────────────────── */
.m-0  { margin: 0; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }

.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ─── Spacing — Padding ──────────────────────────────────── */
.p-0   { padding: 0; }
.p-8   { padding: 8px; }
.p-12  { padding: 12px; }
.p-16  { padding: 16px; }
.p-20  { padding: 20px; }
.p-24  { padding: 24px; }
.p-32  { padding: 32px; }
.p-40  { padding: 40px; }

.py-8   { padding-top: 8px;  padding-bottom: 8px; }
.py-16  { padding-top: 16px; padding-bottom: 16px; }
.py-24  { padding-top: 24px; padding-bottom: 24px; }
.py-32  { padding-top: 32px; padding-bottom: 32px; }
.py-48  { padding-top: 48px; padding-bottom: 48px; }
.py-64  { padding-top: 64px; padding-bottom: 64px; }
.py-80  { padding-top: 80px; padding-bottom: 80px; }

.px-16  { padding-left: 16px; padding-right: 16px; }
.px-24  { padding-left: 24px; padding-right: 24px; }

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

/* ─── Border Radius ──────────────────────────────────────── */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 100px; }
.rounded-circle { border-radius: 50%; }

/* ─── Border ─────────────────────────────────────────────── */
.border { border: 1px solid var(--color-border); }
.border-top    { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-0 { border: none; }

/* ─── Shadow ─────────────────────────────────────────────── */
.shadow-sm { box-shadow: 0 1px 4px rgba(14,36,33,0.07); }
.shadow-md { box-shadow: 0 4px 16px rgba(14,36,33,0.10); }
.shadow-lg { box-shadow: 0 8px 32px rgba(14,36,33,0.14); }
.shadow-0  { box-shadow: none; }

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

/* ─── Position ───────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* ─── Visibility ─────────────────────────────────────────── */
.visible   { visibility: visible; }
.invisible { visibility: hidden; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── Aspect Ratios ──────────────────────────────────────── */
.aspect-video  { aspect-ratio: 16/9; }
.aspect-square { aspect-ratio: 1/1; }
.aspect-4-3    { aspect-ratio: 4/3; }

/* ─── Image Fit ──────────────────────────────────────────── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ─── Responsive Visibility ──────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}
@media (max-width: 900px) {
  .hide-tablet { display: none !important; }
}