/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-inline.css
   Layer: Layout Primitives
   Version: 1.x

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s lightweight inline flex utilities for:
   - horizontal UI groups
   - alignment helpers
   - gap utilities
   - simple row/column inline patterns

   This primitive is not intended for major page structure.
   Use milo-grid for page layouts and content grids.
   Use milo-stack for vertical flow patterns.

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Inline grouping patterns
   - Horizontal and vertical alignment helpers
   - Gap utilities for compact inline groups
   - Small child utilities for common inline behaviors

   Does NOT own:
   - Page layout
   - Section structure
   - Card or module-specific layout
   - Global spacing tokens

   ARCHITECTURE
   ----------------------------------------------------------------
   - .milo-inline is the canonical primitive
   - .milo-flex remains as a temporary compatibility alias
   - Modifiers adjust direction, justification, alignment, wrapping, and gap
   - Child utilities handle spacer/grow/shrink behavior
   - Elementor flex containers are normalized when Milo classes are present

========================================================= */

/* #region 1) BASE INLINE */
.milo-inline,
.milo-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--milo-gap-sm);

  /* Elementor flex var normalization */
  --flex-direction: row;
  --align-items: center;
}

.e-con.e-flex.milo-inline,
.e-con-inner.e-flex.milo-inline,
.e-con.e-flex.milo-flex,
.e-con-inner.e-flex.milo-flex {
  display: flex !important;
  flex-direction: row !important;
  --flex-direction: row !important;
}

.milo-inline > *,
.milo-flex > * {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
}
/* #endregion 1) BASE INLINE */

/* #region 2) DIRECTION */
.milo-inline--row,
.milo-flex--row {
  flex-direction: row;
}

.milo-inline--col,
.milo-flex--col {
  flex-direction: column;
  align-items: stretch;
}
/* #endregion 2) DIRECTION */

/* #region 3) WRAP */
.milo-inline--wrap,
.milo-flex--wrap {
  flex-wrap: wrap;
}

.milo-inline--nowrap,
.milo-flex--nowrap {
  flex-wrap: nowrap;
}
/* #endregion 3) WRAP */

/* #region 4) JUSTIFICATION */
.milo-inline--start,
.milo-flex--start {
  justify-content: flex-start;
}

.milo-inline--center,
.milo-flex--center {
  justify-content: center;
}

.milo-inline--end,
.milo-flex--end {
  justify-content: flex-end;
}

.milo-inline--between,
.milo-flex--between {
  justify-content: space-between;
}
/* #endregion 4) JUSTIFICATION */

/* #region 5) ALIGNMENT */
.milo-inline--align-start,
.milo-flex--align-start {
  align-items: flex-start;
}

.milo-inline--align-center,
.milo-flex--align-center {
  align-items: center;
}

.milo-inline--align-end,
.milo-flex--align-end {
  align-items: flex-end;
}
/* #endregion 5) ALIGNMENT */

/* #region 6) GAP UTILITIES */
.milo-inline--gap-xs,
.milo-flex--gap-xs {
  gap: var(--milo-space-xs);
}

.milo-inline--gap-sm,
.milo-flex--gap-sm {
  gap: var(--milo-space-sm);
}

.milo-inline--gap-md,
.milo-flex--gap-md {
  gap: var(--milo-space-md);
}

.milo-inline--gap-lg,
.milo-flex--gap-lg {
  gap: var(--milo-space-lg);
}
/* #endregion 6) GAP UTILITIES */

/* #region 7) CHILD UTILITIES */
.milo-inline-spacer,
.milo-flex-spacer {
  margin-left: auto;
}

.milo-inline-grow,
.milo-flex-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.milo-inline-noshrink,
.milo-flex-noshrink {
  flex-shrink: 0;
}
/* #endregion 7) CHILD UTILITIES */