/* ============================================
   UTILITIES.CSS — Ooi Solutions
   Helper classes for spacing, text, 
   visibility, and accessibility.
   DO NOT put component styles here.
   ============================================ */

/* ── DISPLAY HELPERS ── */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--space-xs); }
.gap-md { gap: var(--space-sm); }
.gap-lg { gap: var(--space-md); }

/* ── SPACING HELPERS ── */
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-sm { margin-bottom: var(--space-xs); }
.mb-md { margin-bottom: var(--space-sm); }
.mb-lg { margin-bottom: var(--space-lg); }
.py-section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

/* ── TEXT HELPERS ── */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

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

/* Global focus styles for accessibility (Keyboard navigation) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
/* Remove default focus for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

/* ── IMAGE / MEDIA HELPERS ── */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-contain { width: 100%; height: 100%; object-fit: contain; display: block; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }

/* ── CONTAINER HELPER ── */
.container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}
@media (min-width: 768px) {
    .container { padding-left: 48px; padding-right: 48px; }
}