/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-layout.css
   Layer: Structural Layout Utilities
   Version: 1.x

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s structural layout primitives and utilities.

   This file defines HOW layout behaves.
   It does not define WHAT layout values are.

   All structural geometry must originate from tokens.

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - .milo-section vertical rhythm
   - .milo-inner containment + fluid widths
   - .milo-layered stacking system
   - .milo-flush helper
   - Text measure utilities
   - Gutter utilities
   - Divider utilities
   - Section head utility
   - Under-header offset helper
   - Alignment utilities

   Does NOT own:
   - Colors
   - Shadows
   - Motion curves
   - Typography hierarchy
   - Decorative treatments
   - Component-specific spacing
   - Background/environment styling
   - Grid engine behavior
   - Module visual identity

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

/* #region 1) FLUSH ROOT */
.milo-flush {
  padding: 0 !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
}

.elementor-element.milo-flush.e-con,
.elementor-element.milo-flush.e-con-full,
.elementor-element.milo-flush.e-con-boxed {
  padding: 0 !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
}
/* #endregion 1) FLUSH ROOT */

/* #region 2) BACKGROUND LAYER STACK */
.milo-layered {
  position: relative;
  isolation: isolate;
  z-index: 0 !important;
}

.milo-layered .elementor-background-overlay,
.milo-layered .elementor-background-slideshow,
.milo-layered .elementor-background-video-container {
  z-index: 0 !important;
}

.milo-layered.milo-layered--transparent-overlay .elementor-background-overlay {
  background: transparent !important;
  opacity: 1 !important;
}

.milo-layered__content {
  position: relative;
  z-index: 2;
}

.milo-layered .elementor-widget,
.milo-layered .elementor-widget-wrap {
  position: relative;
  z-index: 2;
}
/* #endregion 2) BACKGROUND LAYER STACK */

/* #region 3) INNER CONTAINERS */
.milo-inner {
  width: 100%;
  max-width: var(--milo-inner-fluid);
  margin-inline: auto;
  padding-inline: var(--milo-gutter);
}

.milo-inner--wide {
  max-width: var(--milo-inner-wide-fluid);
}

.milo-inner--narrow {
  max-width: var(--milo-inner-narrow-fluid);
}

.milo-inner--tight {
  padding-inline: calc(var(--milo-gutter) - var(--milo-inner-tight-offset));
}
/* #endregion 3) INNER CONTAINERS */

/* #region 4) TEXT MEASURE BASE */
.milo-measure,
.milo-measure .elementor-widget-container {
  width: 100%;
  max-width: var(--milo-measure);
}

.milo-measure--center {
  margin-inline: auto;
}
/* #endregion 4) TEXT MEASURE BASE */

/* #region 5) TEXT MEASURE SCALE */
.milo-measure--18 .elementor-widget-container,
.milo-measure--18 .elementor-widget-container > * {
  --milo-measure: clamp(16ch, 19ch + 0.6vw, 18ch);
}

.milo-measure--24 .elementor-widget-container,
.milo-measure--24 .elementor-widget-container > * {
  --milo-measure: clamp(20ch, 22ch + 0.8vw, 24ch);
}

.milo-measure--34 .elementor-widget-container,
.milo-measure--34 .elementor-widget-container > * {
  --milo-measure: clamp(26ch, 30ch + 1vw, 34ch);
}

.milo-measure--44 .elementor-widget-container,
.milo-measure--44 .elementor-widget-container > * {
  --milo-measure: clamp(34ch, 38ch + 1.3vw, 44ch);
}

.milo-measure--52 .elementor-widget-container,
.milo-measure--52 .elementor-widget-container > * {
  --milo-measure: clamp(38ch, 46ch + 1.5vw, 52ch);
}

.milo-measure--64 .elementor-widget-container,
.milo-measure--64 .elementor-widget-container > * {
  --milo-measure: clamp(50ch, 58ch + 1.8vw, 64ch);
}

.milo-measure--72 .elementor-widget-container,
.milo-measure--72 .elementor-widget-container > * {
  --milo-measure: clamp(56ch, 66ch + 2vw, 72ch);
}
/* #endregion 5) TEXT MEASURE SCALE */

/* #region 6) SECTION SPACING */
.milo-section {
  padding-block: var(--milo-section-pad);
  position: relative;
  overflow: clip;

  --milo-section-bg: transparent;

  --milo-section-pad-top: var(--milo-pad-fluid-top-md);
  --milo-section-pad-bottom: var(--milo-pad-fluid-bottom-md);

  --milo-section-before-display: none;
  --milo-section-before-inset: 0 auto auto 0;
  --milo-section-before-width: 100%;
  --milo-section-before-height: 100%;
  --milo-section-before-bg: none;
  --milo-section-before-size: cover;
  --milo-section-before-position: center;
  --milo-section-before-repeat: no-repeat;
  --milo-section-before-left: auto;
  --milo-section-before-right: auto;
  --milo-section-before-transform: none;

  --milo-section-after-display: none;
  --milo-section-after-inset: auto 0 0 0;
  --milo-section-after-width: 100%;
  --milo-section-after-height: 100%;
  --milo-section-after-bg: none;
  --milo-section-after-size: cover;
  --milo-section-after-position: center;
  --milo-section-after-repeat: no-repeat;
  --milo-section-after-left: auto;
  --milo-section-after-right: auto;
  --milo-section-after-transform: none;
}

.milo-section {
  background: var(--milo-section-bg);
  padding-top: var(--milo-section-pad-top);
  padding-bottom: var(--milo-section-pad-bottom);
}

.milo-section::before,
.milo-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.milo-section::before {
  display: var(--milo-section-before-display);
  inset: var(--milo-section-before-inset);
  height: var(--milo-section-before-height);
  width: var(--milo-section-before-width);
  background: var(--milo-section-before-bg);
  background-size: var(--milo-section-before-size);
  background-position: var(--milo-section-before-position);
  background-repeat: var(--milo-section-before-repeat);
}

.milo-section::after {
  display: var(--milo-section-after-display);
  inset: var(--milo-section-after-inset);
  height: var(--milo-section-after-height);
  width: var(--milo-section-after-width);
  background: var(--milo-section-after-bg);
  background-size: var(--milo-section-after-size);
  background-position: var(--milo-section-after-position);
  background-repeat: var(--milo-section-after-repeat);
}

.milo-section > .milo-inner,
.milo-section > .e-con,
.milo-section > .elementor-element,
.milo-section > * {
  position: relative;
  z-index: 1;
}

.milo-section--none {
  padding-block: var(--milo-section-pad-none);
}

.milo-section--10 {
  padding-block: var(--milo-section-pad-10);
}

.milo-section--tight {
  padding-block: var(--milo-section-pad-tight);
}

.milo-section--loose {
  padding-block: var(--milo-section-pad-loose);
}
/* #endregion 6) SECTION SPACING */

/* #region 7) INNER GUTTERS */
.milo-gutter {
  padding-inline: var(--milo-gutter);
}

.milo-gutter--tight {
  padding-inline: calc(var(--milo-gutter) - var(--milo-gutter-tight-offset));
}
/* #endregion 7) INNER GUTTERS */

/* #region 8) DIVIDERS */
.milo-section--divider-top {
  border-top: var(--milo-divider-w) solid var(--milo-divider);
}

.milo-section--divider-bottom {
  border-bottom: var(--milo-divider-w) solid var(--milo-divider);
}

.milo-section--divider-bottom + .milo-section--divider-top {
  border-top: 0;
}

.milo-divider {
  width: 100%;
  height: 1px;
  background: var(--milo-divider);
}
/* #endregion 8) DIVIDERS */

/* #region 9) SECTION HEAD UTILITY */
.milo-section__head {
  display: flex;
  flex-direction: column;
  max-width: var(--milo-measure-head);
}

.milo-section__head > * + * {
  margin-top: var(--milo-space-xs);
}

.milo-section__head p {
  max-width: var(--milo-measure-body);
}
/* #endregion 9) SECTION HEAD UTILITY */

/* #region 10) UNDER FIXED HEADER */
.milo-under-header {
  margin-top: calc(-1 * var(--milo-header-h, 90px)) !important;
  padding-top: var(--milo-header-h, 90px) !important;
}
/* #endregion 10) UNDER FIXED HEADER */

/* #region 11) ALIGNMENT UTILITIES */
.milo-center {
  margin-left: auto;
  margin-right: auto;
}

.milo-text-center .elementor-heading-title,
.milo-text-center .elementor-widget-container,
.milo-text-center p,
.milo-text-center li {
  text-align: center;
}

.milo-text-left .elementor-heading-title,
.milo-text-left .elementor-widget-container,
.milo-text-left p,
.milo-text-left li {
  text-align: left;
}

.milo-right {
  text-align: right;
}
/* #endregion 11) ALIGNMENT UTILITIES */

/* #region 12) RESPONSIVE ADJUSTMENTS */
@media (max-width: 1024px) {
  .milo-under-header {
    margin-top: calc(-1 * var(--milo-header-h-tablet, 84px)) !important;
    padding-top: var(--milo-header-h-tablet, 84px) !important;
  }
}

@media (max-width: 767.98px) {
  .milo-under-header {
    margin-top: calc(-1 * var(--milo-header-h-mobile, 72px)) !important;
    padding-top: var(--milo-header-h-mobile, 72px) !important;
  }
}
/* #endregion 12) RESPONSIVE ADJUSTMENTS */