/* ============================================
   UTILITIES — Reusable Utility Classes
   ============================================ */

/* ── Positioning ── */
.pos-absolute { position: absolute; }
.pos-relative { position: relative; }

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

.flex-col     { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-start   { align-items: flex-start; }

.gap-sm       { gap: var(--space-sm); }
.gap-md       { gap: var(--space-md); }
.gap-lg       { gap: var(--space-lg); }

/* ── Glass Effect ── */
.glass {
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border: 1px solid var(--color-glass-border);
    box-shadow: var(--shadow-soft);
}

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

/* ── Image ── */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}