/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-grid.css
   Layer: Grid Engine
   Version: 1.x

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s canonical grid primitive and its generic variants.

   This file owns:
   - Base grid behavior
   - Variable-driven column systems
   - Ratio/split layouts
   - Rail layouts
   - Span utilities
   - Generic breakpoint collapse for grid variants

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - .milo-grid primitive
   - Grid variants and variable setters
   - Ratio and spec split layouts
   - Span utilities
   - Rail layout behavior
   - Grid-level responsive collapse rules

   Does NOT own:
   - Section spacing
   - Containment widths
   - Background/environment styling
   - Typography
   - Module-specific art direction
   - Page-specific ratio overrides

   ARCHITECTURE
   ----------------------------------------------------------------
   - .milo-grid is the canonical grid engine
   - Variants set variables or grid patterns
   - Modules may override grid variables locally
   - Responsive collapse lives here, not in layout.css

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

/* #region 1) BASE GRID ENGINE */
.milo-grid {
  display: grid;
  gap: var(--milo-gap-grid);

  grid-template-columns: var(--milo-grid-cols-def, none);
  grid-auto-flow: var(--milo-grid-auto-flow, row);
  grid-auto-columns: var(--milo-grid-auto-cols, auto);

  align-items: var(--milo-grid-align, start);
  justify-items: var(--milo-grid-justify-items, stretch);
  justify-content: var(--milo-grid-justify, normal);
}

/* Force grid when Elementor container is still in flex mode */
.milo-grid.e-flex,
.e-con.e-flex.milo-grid,
.e-con-inner.e-flex.milo-grid {
  display: grid;
}

/* Prevent children from forcing overflow */
.milo-grid > *,
.milo-grid.e-flex > *,
.e-con.e-flex.milo-grid > *,
.e-con-inner.e-flex.milo-grid > * {
  min-width: 0;
}
/* #endregion 1) BASE GRID ENGINE */

/* #region 2) FIXED COLUMN VARIANTS */
.milo-grid--2 {
  --milo-grid-cols-def: repeat(2, minmax(0, 1fr));
}

.milo-grid--3 {
  --milo-grid-cols-def: repeat(3, minmax(0, 1fr));
}

.milo-grid--4 {
  --milo-grid-cols-def: repeat(4, minmax(0, 1fr));
}

.milo-grid--cols {
  --milo-grid-cols-def: repeat(var(--milo-grid-cols), minmax(0, 1fr));
}
/* #endregion 2) FIXED COLUMN VARIANTS */

/* #region 3) AUTO / CONTENT VARIANTS */
.milo-grid--auto {
  --milo-grid-cols-def: repeat(
    auto-fit,
    minmax(min(100%, var(--milo-grid-min)), 1fr)
  );
}

.milo-grid--auto-sm {
  --milo-grid-min: var(--milo-grid-min-sm);
}

.milo-grid--auto-md {
  --milo-grid-min: var(--milo-grid-min-md);
}

.milo-grid--auto-lg {
  --milo-grid-min: var(--milo-grid-min-lg);
}

.milo-grid--content {
  --milo-grid-cols-def: repeat(
    auto-fit,
    minmax(min(100%, var(--milo-grid-min)), max-content)
  );
}

.milo-grid--logos {
  --milo-grid-min: var(--milo-grid-logo);
}
/* #endregion 3) AUTO / CONTENT VARIANTS */

/* #region 4) BEHAVIOR VARIANTS */
.milo-grid--dense {
  --milo-grid-auto-flow: dense;
}

.milo-grid--cards {
  --milo-grid-align: stretch;
}

.milo-grid--cards > * {
  min-width: 0;
  height: auto;
}

.elementor-editor-active .milo-grid--cards > * {
  height: auto;
}

.milo-grid--center {
  --milo-grid-justify: center;
  --milo-grid-justify-items: center;
}

.milo-grid--list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* #endregion 4) BEHAVIOR VARIANTS */

/* #region 5) RAIL VARIANT */
.milo-grid--rail {
  --milo-grid-auto-flow: column;
  --milo-grid-auto-cols: minmax(var(--milo-rail-col), 1fr);

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--milo-space-2xs);
}

.milo-grid--rail > * {
  min-width: 0;
  scroll-snap-align: start;
}
/* #endregion 5) RAIL VARIANT */

/* #region 6) SPAN UTILITIES */
.milo-span-2 {
  grid-column: span 2;
}

.milo-span-3 {
  grid-column: span 3;
}

.milo-span-full {
  grid-column: 1 / -1;
}

.milo-rowspan-2 {
  grid-row: span 2;
}

.milo-rowspan-3 {
  grid-row: span 3;
}
/* #endregion 6) SPAN UTILITIES */

/* #region 7) RATIO / SPEC LAYOUTS */
.milo-grid--ratio {
  grid-template-columns:
    minmax(0, var(--milo-grid-ratio-a, 1.15fr))
    minmax(0, var(--milo-grid-ratio-b, 0.85fr));
  align-items: center;
}

.milo-grid__lead {
  max-width: 52rem;
}

.milo-grid__aside {
  width: 100%;
  max-width: 32rem;
  justify-self: center;
}

/* Readable text column + flexible media column */
.milo-grid--spec {
  grid-template-columns: minmax(420px, 500px) minmax(0, 1fr);
}

/* Reverse spec split */
.milo-grid--spec-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
}
/* #endregion 7) RATIO / SPEC LAYOUTS */

/* #region 8) RESPONSIVE COLLAPSE */
@media (max-width: 1024px) {
  .milo-grid--2 {
    --milo-grid-cols-def: repeat(
      var(--milo-grid-2-cols-tablet, 1),
      minmax(0, 1fr)
    );
  }

  .milo-grid--3 {
    --milo-grid-cols-def: repeat(
      var(--milo-grid-3-cols-tablet, 2),
      minmax(0, 1fr)
    );
  }

  .milo-grid--4 {
    --milo-grid-cols-def: repeat(
      var(--milo-grid-4-cols-tablet, 2),
      minmax(0, 1fr)
    );
  }

  .milo-grid--cols {
    --milo-grid-cols-def: repeat(
      var(--milo-grid-cols-tablet, var(--milo-grid-cols)),
      minmax(0, 1fr)
    );
  }

  .milo-grid--auto {
    --milo-grid-min: var(--milo-grid-min-tablet, var(--milo-grid-min));
  }
}

@media (max-width: 767.98px) {
  .milo-grid--2,
  .milo-grid--3,
  .milo-grid--4 {
    --milo-grid-cols-def: repeat(1, minmax(0, 1fr));
  }

  .milo-grid--cols {
    --milo-grid-cols-def: repeat(
      var(--milo-grid-cols-mobile, 1),
      minmax(0, 1fr)
    );
  }

  .milo-grid--auto {
    --milo-grid-min: var(--milo-grid-min-mobile, var(--milo-grid-min));
  }

  .milo-span-2,
  .milo-span-3 {
    grid-column: 1 / -1;
  }

  .milo-grid--ratio,
  .milo-grid--spec,
  .milo-grid--spec-reverse {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
/* #endregion 8) RESPONSIVE COLLAPSE */