/* ============================================================
   Atlas Utilities — small, single-purpose helper classes.
   All u-* prefixed to avoid colliding with components (f-*).
   Use sparingly; prefer named components when a pattern repeats.
   ============================================================ */

/* -------- Layout: stack & inline -------- */
.u-stack          { display: flex; flex-direction: column; }
.u-stack-1        { gap: var(--f-space-1); }
.u-stack-2        { gap: var(--f-space-2); }
.u-stack-3        { gap: var(--f-space-3); }
.u-stack-4        { gap: var(--f-space-4); }
.u-stack-5        { gap: var(--f-space-5); }
.u-stack-6        { gap: var(--f-space-6); }
.u-stack-8        { gap: var(--f-space-8); }

.u-row            { display: flex; align-items: center; }
.u-row-1          { gap: var(--f-space-1); }
.u-row-2          { gap: var(--f-space-2); }
.u-row-3          { gap: var(--f-space-3); }
.u-row-4          { gap: var(--f-space-4); }
.u-row-6          { gap: var(--f-space-6); }
.u-row--between   { justify-content: space-between; }
.u-row--center    { justify-content: center; }
.u-row--end       { justify-content: flex-end; }
.u-row--start     { justify-content: flex-start; }
.u-row--baseline  { align-items: baseline; }
.u-row--start-cross { align-items: flex-start; }
.u-row--end-cross   { align-items: flex-end; }

.u-grow           { flex: 1; min-width: 0; }
.u-shrink-0       { flex-shrink: 0; }

.u-flex-center    { display: flex; align-items: center; justify-content: center; }
.u-grid-center    { display: grid; place-items: center; }

/* -------- Layout: width / height -------- */
.u-w-full         { width: 100%; }
.u-h-full         { height: 100%; }
.u-min-w-0        { min-width: 0; }
.u-max-w-prose    { max-width: var(--f-prose-max); }
.u-max-w-content  { max-width: var(--f-content-max); }
.u-mx-auto        { margin-left: auto; margin-right: auto; }

/* -------- Visibility -------- */
.u-hidden               { display: none !important; }
.u-invisible            { visibility: hidden; }
.u-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive show/hide */
@media (max-width: 767px)  { .u-md\:hidden { display: none !important; } }
@media (min-width: 768px)  { .u-md\:only   { } .u-mobile\:only { display: none !important; } }

/* -------- Text -------- */
.u-text-center    { text-align: center; }
.u-text-left      { text-align: left; }
.u-text-right     { text-align: right; }
.u-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.u-text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.u-text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.u-text-uppercase { text-transform: uppercase; letter-spacing: var(--f-ls-wider); }

/* -------- Color hooks (use sparingly; prefer component classes) -------- */
.u-ink            { color: var(--f-ink); }
.u-ink-soft       { color: var(--f-ink-soft); }
.u-ink-muted      { color: var(--f-ink-muted); }
.u-ink-accent     { color: var(--f-accent); }
.u-ink-success    { color: var(--f-success-strong); }
.u-ink-error      { color: var(--f-error-strong); }
.u-bg             { background: var(--f-bg); }
.u-bg-raised      { background: var(--f-bg-raised); }
.u-bg-sunken      { background: var(--f-bg-sunken); }

/* -------- Spacing helpers -------- */
.u-p-0  { padding: 0; }
.u-p-2  { padding: var(--f-space-2); }
.u-p-3  { padding: var(--f-space-3); }
.u-p-4  { padding: var(--f-space-4); }
.u-p-5  { padding: var(--f-space-5); }
.u-p-6  { padding: var(--f-space-6); }
.u-px-3 { padding-left: var(--f-space-3); padding-right: var(--f-space-3); }
.u-px-4 { padding-left: var(--f-space-4); padding-right: var(--f-space-4); }
.u-px-6 { padding-left: var(--f-space-6); padding-right: var(--f-space-6); }
.u-py-2 { padding-top: var(--f-space-2); padding-bottom: var(--f-space-2); }
.u-py-3 { padding-top: var(--f-space-3); padding-bottom: var(--f-space-3); }
.u-py-4 { padding-top: var(--f-space-4); padding-bottom: var(--f-space-4); }
.u-mt-2 { margin-top: var(--f-space-2); }
.u-mt-3 { margin-top: var(--f-space-3); }
.u-mt-4 { margin-top: var(--f-space-4); }
.u-mt-6 { margin-top: var(--f-space-6); }
.u-mb-2 { margin-bottom: var(--f-space-2); }
.u-mb-3 { margin-bottom: var(--f-space-3); }
.u-mb-4 { margin-bottom: var(--f-space-4); }
.u-mb-6 { margin-bottom: var(--f-space-6); }

/* -------- Borders & radii -------- */
.u-border         { border: 1px solid var(--f-border); }
.u-border-soft    { border: 1px solid var(--f-border-soft); }
.u-border-t       { border-top: 1px solid var(--f-border-soft); }
.u-border-b       { border-bottom: 1px solid var(--f-border-soft); }
.u-rounded-sm     { border-radius: var(--f-radius-sm); }
.u-rounded-md     { border-radius: var(--f-radius-md); }
.u-rounded-lg     { border-radius: var(--f-radius-lg); }
.u-rounded-xl     { border-radius: var(--f-radius-xl); }
.u-rounded-pill   { border-radius: var(--f-radius-pill); }

/* -------- Cursor & interaction -------- */
.u-clickable      { cursor: pointer; user-select: none; }
.u-disabled       { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.u-no-select      { user-select: none; -webkit-user-select: none; }

/* -------- Misc -------- */
.u-relative       { position: relative; }
.u-absolute       { position: absolute; }
.u-inset-0        { inset: 0; }
.u-z-raised       { z-index: var(--f-z-raised); }
.u-z-sticky       { z-index: var(--f-z-sticky); }
.u-z-overlay      { z-index: var(--f-z-overlay); }
.u-overflow-hidden{ overflow: hidden; }
.u-overflow-auto  { overflow: auto; }
.u-scroll-y       { overflow-y: auto; overflow-x: hidden; }
.u-aspect-square  { aspect-ratio: 1 / 1; }
.u-aspect-video   { aspect-ratio: 16 / 9; }