/* ==========================================================================
   UTILITIES — small single-purpose helpers
   Deliberately minimal. If a pattern needs three or more utilities to build,
   it should become a component in components.css instead.
   ========================================================================== */

/* --- Display & visibility ------------------------------------------------ */
.u-hidden        { display: none !important; }
.u-block         { display: block; }
.u-inline-block  { display: inline-block; }
.u-flex          { display: flex; }
.u-inline-flex   { display: inline-flex; }
.u-grid          { display: grid; }

/* Responsive visibility — used by the header (desktop nav vs mobile drawer) */
@media (max-width: 1023px) { .u-hide-below-lg { display: none !important; } }
@media (min-width: 1024px) { .u-hide-from-lg  { display: none !important; } }
@media (max-width: 767px)  { .u-hide-below-md { display: none !important; } }
@media (min-width: 768px)  { .u-hide-from-md  { display: none !important; } }

/* --- Flex helpers -------------------------------------------------------- */
.u-items-start   { align-items: flex-start; }
.u-items-center  { align-items: center; }
.u-items-end     { align-items: flex-end; }
.u-justify-start   { justify-content: flex-start; }
.u-justify-center  { justify-content: center; }
.u-justify-end     { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-wrap      { flex-wrap: wrap; }
.u-grow      { flex: 1 1 auto; }
.u-shrink-0  { flex: none; }

/* --- Text ---------------------------------------------------------------- */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-uppercase   { text-transform: uppercase; letter-spacing: var(--ls-label); }
.u-nowrap      { white-space: nowrap; }
.u-balance     { text-wrap: balance; }

/* Truncate to N lines — keeps card heights even in a grid */
.u-clamp-1,
.u-clamp-2,
.u-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.u-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.u-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* --- Spacing ------------------------------------------------------------- */
.u-mt-0  { margin-block-start: 0; }
.u-mt-2  { margin-block-start: var(--space-2); }
.u-mt-4  { margin-block-start: var(--space-4); }
.u-mt-6  { margin-block-start: var(--space-6); }
.u-mt-8  { margin-block-start: var(--space-8); }
.u-mt-12 { margin-block-start: var(--space-12); }
.u-mt-16 { margin-block-start: var(--space-16); }

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

.u-mx-auto { margin-inline: auto; }

/* --- Sizing -------------------------------------------------------------- */
.u-w-full  { width: 100%; }
.u-h-full  { height: 100%; }

/* --- Surface & border ---------------------------------------------------- */
.u-surface        { background-color: var(--color-surface); }
.u-surface-sunken { background-color: var(--color-surface-sunken); }
.u-bordered       { border: var(--border-hairline) solid var(--color-border); }
.u-border-top     { border-block-start: var(--border-hairline) solid var(--color-border); }
.u-border-bottom  { border-block-end: var(--border-hairline) solid var(--color-border); }
.u-rounded        { border-radius: var(--radius-lg); }
.u-rounded-sm     { border-radius: var(--radius-sm); }
.u-round-clip     { overflow: hidden; border-radius: var(--radius-lg); }

/* --- Elevation ----------------------------------------------------------- */
.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }
.u-shadow-lg { box-shadow: var(--shadow-lg); }

/* --- Position ------------------------------------------------------------ */
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-inset-0  { inset: 0; }
.u-sticky-top {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
}

/* --- Overflow ------------------------------------------------------------
   Wide content (spec tables, wide grids) must scroll inside its own box so
   the page body never scrolls horizontally. */
.u-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* --- Aspect ratio -------------------------------------------------------- */
.u-ratio-square { aspect-ratio: var(--ratio-square); }
.u-ratio-wide   { aspect-ratio: var(--ratio-wide); }

/* --- Order --------------------------------------------------------------- */
.u-order-first { order: -1; }
.u-order-last  { order: 99; }

/* On mobile, media should usually lead before its text column */
@media (max-width: 767px) {
  .u-order-first-mobile { order: -1; }
}