/* ==========================================================================
   utilities.css — Atomic Helper Classes
   ========================================================================== */

/* ── Accessibility ────────────────────────────────────────────────────── */
.visually-hidden,
.sr-only {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.not-sr-only {
  position: static;
  inline-size: auto;
  block-size: auto;
  clip: auto;
}

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

/* ── Flex helpers ─────────────────────────────────────────────────────── */
.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; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.flex-1 { flex: 1 1 0%; }

/* ── Spacing (margin) ─────────────────────────────────────────────────── */
.m-0  { margin: 0; }
.mt-0 { margin-block-start: 0; }
.mt-sm { margin-block-start: var(--space-sm); }
.mt-md { margin-block-start: var(--space-md); }
.mt-lg { margin-block-start: var(--space-lg); }
.mt-xl { margin-block-start: var(--space-xl); }
.mb-sm { margin-block-end: var(--space-sm); }
.mb-md { margin-block-end: var(--space-md); }
.mb-lg { margin-block-end: var(--space-lg); }
.mx-auto { margin-inline: auto; }

/* ── Width ────────────────────────────────────────────────────────────── */
.w-full { inline-size: 100%; }
.max-w-prose  { max-inline-size: var(--measure); }
.max-w-narrow { max-inline-size: var(--container-narrow); }

/* ── Text ─────────────────────────────────────────────────────────────── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.uppercase   { text-transform: uppercase; }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* ── Color / surface ──────────────────────────────────────────────────── */
.bg-surface   { background-color: var(--color-surface); }
.bg-alt       { background-color: var(--color-surface-alt); }
.bg-brand     { background-color: var(--color-brand); color: var(--color-white); }
.color-white  { color: var(--color-white); }
.color-muted  { color: var(--color-muted); }

/* ── Radius / shadow ──────────────────────────────────────────────────── */
.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-pill); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── Borders ──────────────────────────────────────────────────────────── */
.border     { border: 1px solid var(--color-line-soft); }
.border-top { border-block-start: 1px solid var(--color-line); }

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

/* ── Responsive visibility ────────────────────────────────────────────── */
@media (max-width: 48rem) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 48.0625rem) {
  .show-mobile { display: none !important; }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
}