/* =========================================================
   MILO UTILITIES
   File: milo-utilities.css
   Layer: Utilities

   PURPOSE
   ---------------------------------------------------------
   Single-purpose helper classes for:
   - visibility
   - accessibility
   - text alignment/wrapping
   - overflow/positioning
   - z-index escapes
   - width/layout escapes
   - lightweight surface/effect helpers
   - interaction helpers
   - optional responsive visibility helpers

   RULES
   ---------------------------------------------------------
   - Prefix: .milo-u-
   - No component styling
   - No layout systems (handled in primitives)
   - No page-specific logic
   - No module overrides
   - Keep specificity low
========================================================= */

/* #region 1) VISIBILITY */
.milo-u-hidden {
  display: none !important;
}

.milo-u-invisible {
  visibility: hidden !important;
}

.milo-u-visible {
  visibility: visible !important;
}
/* #endregion */

/* #region 2) ACCESSIBILITY */
.milo-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;
}
/* #endregion */

/* #region 3) TEXT */
.milo-u-text-left {
  text-align: left !important;
}

.milo-u-text-center {
  text-align: center !important;
}

.milo-u-text-right {
  text-align: right !important;
}

.milo-u-nowrap {
  white-space: nowrap !important;
}

.milo-u-balance {
  text-wrap: balance;
}
/* #endregion */

/* #region 4) OVERFLOW + POSITIONING */
.milo-u-overflow-hidden {
  overflow: hidden !important;
}

.milo-u-overflow-visible {
  overflow: visible !important;
}

.milo-u-relative {
  position: relative !important;
}

.milo-u-absolute {
  position: absolute !important;
}

.milo-u-isolate {
  isolation: isolate;
}
/* #endregion */

/* #region 5) Z-INDEX */
.milo-u-z-0 {
  z-index: 0;
}

.milo-u-z-1 {
  z-index: 1;
}

.milo-u-z-2 {
  z-index: 2;
}

.milo-u-z-10 {
  z-index: 10;
}

.milo-u-z-20 {
  z-index: 20;
}
/* #endregion */

/* #region 6) WIDTH + LAYOUT ESCAPES */
.milo-u-full-width {
  width: 100% !important;
}

.milo-u-max-none {
  max-width: none !important;
}

.milo-u-center-auto {
  margin-inline: auto;
}
/* #endregion */

/* #region 7) SURFACE + EFFECT */
.milo-u-border-subtle {
  border: 1px solid var(--milo-divider);
}

.milo-u-glass {
  background: var(--milo-surface-hairline);
  -webkit-backdrop-filter: var(--milo-glass-blur);
  backdrop-filter: var(--milo-glass-blur);
}

.milo-u-blur-soft {
  filter: blur(8px);
}

.milo-u-shadow-soft {
  box-shadow: 0 10px 30px var(--milo-shadow-ambient-strong);
}
/* #endregion */

/* #region 8) INTERACTION */
.milo-u-pointer {
  cursor: pointer;
}

.milo-u-no-pointer {
  pointer-events: none;
}

.milo-u-transition {
  transition: all var(--milo-ease, 0.3s ease);
}
/* #endregion */

/* #region 9) RESPONSIVE VISIBILITY */
@media (max-width: 767px) {
  .milo-u-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .milo-u-hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .milo-u-hide-desktop {
    display: none !important;
  }
}
/* #endregion */