/* ══════════════════════════════════════════════════════════════════════
   IPTV Americans — Utility Classes (v1.0)
   ──────────────────────────────────────────────────────────────────────
   Atomic helpers for spacing, alignment, display, typography.
   Use sparingly — reach for system components first, utilities second.

   Naming convention: .u-{property}-{value} or .u-{shortcut}
   e.g. .u-mt-4 = margin-top: var(--space-4)
        .u-flex = display: flex
        .u-center = align centred

   Load order: AFTER design-system.css
   ══════════════════════════════════════════════════════════════════════ */


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


/* ─── Flex helpers ─────────────────────────────────────────────────── */
.u-flex-col       { flex-direction: column; }
.u-flex-wrap      { flex-wrap: wrap; }
.u-flex-1         { flex: 1; }
.u-flex-grow      { flex-grow: 1; }
.u-flex-shrink-0  { flex-shrink: 0; }

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

.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-justify-around   { justify-content: space-around; }

.u-self-start     { align-self: flex-start; }
.u-self-center    { align-self: center; }
.u-self-end       { align-self: flex-end; }


/* ─── Gap (works for flex + grid) ───────────────────────────────────── */
.u-gap-1   { gap: var(--space-1); }
.u-gap-2   { gap: var(--space-2); }
.u-gap-3   { gap: var(--space-3); }
.u-gap-4   { gap: var(--space-4); }
.u-gap-5   { gap: var(--space-5); }
.u-gap-6   { gap: var(--space-6); }
.u-gap-7   { gap: var(--space-7); }
.u-gap-8   { gap: var(--space-8); }


/* ─── Margin ───────────────────────────────────────────────────────── */
.u-m-0  { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }

.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-9 { margin-top: var(--space-9); }

.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-7 { margin-bottom: var(--space-7); }
.u-mb-8 { margin-bottom: var(--space-8); }
.u-mb-9 { margin-bottom: var(--space-9); }

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


/* ─── Padding ──────────────────────────────────────────────────────── */
.u-p-0   { padding: 0; }
.u-p-3   { padding: var(--space-3); }
.u-p-4   { padding: var(--space-4); }
.u-p-5   { padding: var(--space-5); }
.u-p-6   { padding: var(--space-6); }
.u-p-7   { padding: var(--space-7); }

.u-px-3  { padding-inline: var(--space-3); }
.u-px-4  { padding-inline: var(--space-4); }
.u-px-5  { padding-inline: var(--space-5); }
.u-px-6  { padding-inline: var(--space-6); }

.u-py-3  { padding-block: var(--space-3); }
.u-py-4  { padding-block: var(--space-4); }
.u-py-5  { padding-block: var(--space-5); }
.u-py-6  { padding-block: var(--space-6); }
.u-py-7  { padding-block: var(--space-7); }
.u-py-8  { padding-block: var(--space-8); }


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


/* ─── Type scale ────────────────────────────────────────────────────── */
.u-text-xs    { font-size: var(--fs-xs); }
.u-text-sm    { font-size: var(--fs-sm); }
.u-text-base  { font-size: var(--fs-base); }
.u-text-lg    { font-size: var(--fs-lg); }
.u-text-xl    { font-size: var(--fs-xl); }
.u-text-2xl   { font-size: var(--fs-2xl); }
.u-text-3xl   { font-size: var(--fs-3xl); }
.u-text-4xl   { font-size: var(--fs-4xl); }


/* ─── Font weight ───────────────────────────────────────────────────── */
.u-fw-normal   { font-weight: 400; }
.u-fw-semi     { font-weight: 600; }
.u-fw-bold     { font-weight: 700; }
.u-fw-extra    { font-weight: 800; }


/* ─── Text colour (dark surface) ────────────────────────────────────── */
.u-text-fg         { color: var(--color-fg); }
.u-text-muted      { color: var(--color-muted); }
.u-text-primary    { color: var(--color-primary); }
.u-text-accent     { color: var(--color-accent); }
.u-text-good       { color: var(--color-good); }
.u-text-amber      { color: var(--color-amber); }

/* Text colour (light surface) */
.u-text-navy       { color: var(--color-navy); }
.u-text-slate      { color: var(--color-fg-on-light-soft); }


/* ─── Container widths ──────────────────────────────────────────────── */
.u-container-wide    { max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--w-mobile-padding); }
.u-container-content { max-width: var(--w-content); margin-inline: auto; padding-inline: var(--w-mobile-padding); }


/* ─── Visually hidden (screen-reader-only) ──────────────────────────── */
.u-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}


/* ─── Misc ──────────────────────────────────────────────────────────── */
.u-uppercase     { text-transform: uppercase; letter-spacing: var(--ls-wider); }
.u-truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-rounded       { border-radius: var(--radius); }
.u-rounded-lg    { border-radius: var(--radius-lg); }
.u-rounded-pill  { border-radius: var(--radius-pill); }
.u-shadow-card   { box-shadow: var(--shadow-card); }
.u-no-underline  { text-decoration: none; }