/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-approach.css
   Layer: Approach Module (Editorial Method Rail)
   Version: 2.0

   PURPOSE
   ----------------------------------------------------------------
   Presents the Milo methodology as an editorial two-column sequence:
   - Left column: intro anchor and supporting copy
   - Right column: step rail with sequential methodology blocks
   - Optional sticky behavior on large screens
   - Subtle motion and state transitions
   - Reduced-motion safe fallback

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Editorial two-column module structure
   - Left-column anchor treatment
   - Right-column rail and step rhythm
   - Spine and node visual system
   - Step state styling (hover / active / past / future)
   - Responsive tuning within the module
   - Reduced-motion handling for module-owned motion

   DOES NOT OWN
   ----------------------------------------------------------------
   - Global grid primitive behavior
   - Global typography scale
   - Global button or link systems
   - Page-level art direction outside this module
   - Sticky header behavior
========================================================= */

/* #region 0) MODULE TOKENS */
.milo-approach-editorial {
  /* Layout */
  --milo-approach-wrap-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  --milo-approach-wrap-gap: clamp(48px, 6vw, 96px);

  /* Intro text */
  --milo-approach-title-max: 24ch;
  --milo-approach-subline-max: 34ch;
  --milo-approach-text-max: var(--milo-measure-48);
  --milo-approach-text-rule-width: 72px;
  --milo-approach-text-rule-margin-top: var(--milo-space-lg);
  --milo-approach-text-rule-height: 1px;
  --milo-approach-text-rule-background: var(--milo-divider);
  --milo-approach-text-rule-opacity: 0.6;

  /* Left column motion */
  --milo-approach-text-transition-dur: 260ms;
  --milo-approach-text-transition-ease: var(--milo-ease, ease);

  /* Rail */
  --milo-approach-rail-max: 46rem;
  --milo-approach-rail-gap: var(--milo-space-md);
  --milo-approach-rail-pad-y: clamp(12px, 1.8vw, 18px);
  --milo-approach-rail-pad-x: clamp(16px, 2vw, 24px);
  --milo-approach-rail-top-trim: 0;
  --milo-approach-spine-offset: 4px;
  --milo-approach-step-indent: 16px;

  --milo-approach-spine-width: 1px;
  --milo-approach-spine-base-opacity: 1;
  --milo-approach-spine-progress-opacity: 0.75;

  --milo-rule-spine-background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 15%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.04) 85%,
    rgba(255, 255, 255, 0) 100%
  );

  --milo-rule-spine-progress-background: linear-gradient(
    180deg,
    rgba(245, 201, 200, 0) 0%,
    rgba(245, 201, 200, 0)
      calc(var(--milo-approach-spine-progress, 0) * 100% - 7%),
    rgba(245, 201, 200, 0.22)
      calc(var(--milo-approach-spine-progress, 0) * 100%),
    rgba(245, 201, 200, 0)
      calc(var(--milo-approach-spine-progress, 0) * 100% + 10%),
    rgba(245, 201, 200, 0) 100%
  );

  --milo-approach-spine-background: var(--milo-rule-spine-background);

  --milo-approach-spine-progress-background: var(
    --milo-rule-spine-progress-background
  );

  /* Step block rhythm */
  --milo-approach-step-gap: var(--milo-space-sm);
  --milo-approach-step-first-pad-top: 12px;
  --milo-approach-step-separator-margin-top: clamp(12px, 1.5vw, 16px);
  --milo-approach-step-separator-pad-top: clamp(8px, 1vw, 12px);
  --milo-approach-step-separator-border: 1px solid var(--milo-divider);

  /* Step motion + state */
  --milo-approach-step-transition-dur: 220ms;
  --milo-approach-step-transition-ease: var(--milo-ease, ease);

  --milo-approach-step-shift-hover: -1px;
  --milo-approach-step-shift-active: -1px;

  --milo-approach-step-opacity: 0.7;
  --milo-approach-step-opacity-active: 1;
  --milo-approach-step-opacity-past: 0.86;
  --milo-approach-step-opacity-future: 0.58;

  /* Node */
  --milo-node-background: radial-gradient(
    circle at center,
    rgba(245, 201, 200, 0.82) 0%,
    rgba(245, 201, 200, 0.42) 44%,
    rgba(245, 201, 200, 0.06) 100%
  );

  --milo-approach-node-size: 6px;
  --milo-approach-node-top: 0.65em;
  --milo-approach-node-radius: 999px;

  --milo-approach-node-opacity-min: 0.28;
  --milo-approach-node-opacity-gain: 0.55;
  --milo-approach-node-scale-min: 0.92;
  --milo-approach-node-scale-gain: 0.22;

  --milo-approach-node-background: var(--milo-node-background);

  --milo-approach-node-shadow:
    0 0 0 calc(1px + (var(--milo-step-progress, 0) * 3px))
      var(--milo-shadow-ambient-pink),
    0 0 calc(6px + (var(--milo-step-progress, 0) * 10px))
      var(--milo-shadow-ambient-pink-soft);

  /* Step typography */
  --milo-approach-step-label-margin-bottom: 6px;
  --milo-approach-step-label-size: 11px;
  --milo-approach-step-label-line-height: 1.2;
  --milo-approach-step-label-letter-spacing: 0.16em;
  --milo-approach-step-label-weight: 500;
  --milo-approach-step-label-color: var(--milo-text-meta);
  --milo-approach-step-label-color-hover: var(--milo-pink-medium);
  --milo-approach-step-label-color-active: var(--milo-pink-strong);

  --milo-approach-step-title-margin-bottom: 6px;
  --milo-approach-step-title-size: clamp(20px, 1.9vw, 24px);
  --milo-approach-step-title-line-height: 1.14;
  --milo-approach-step-title-weight: 400;
  --milo-approach-step-title-color: var(--milo-text);
  --milo-approach-step-title-color-hover: var(--milo-text-strong);

  --milo-approach-step-body-max: 30rem;
  --milo-approach-step-body-size: var(--milo-body);
  --milo-approach-step-body-line-height: 1.6;
  --milo-approach-step-body-color: var(--milo-text-soft);
  --milo-approach-step-body-color-active: var(--milo-text);

  /* Sticky desktop behavior */
  --milo-approach-sticky-top: calc(var(--milo-header-height, 88px) + 120px);
  --milo-approach-sticky-progress-shift-y: -2px;
  --milo-approach-sticky-progress-scale-gain: 0.012;
  --milo-approach-sticky-progress-opacity-gain: 0.03;

  --milo-approach-stuck-shift-y: -2px;
  --milo-approach-stuck-scale: 0.96;
  --milo-approach-stuck-opacity: 0.92;

  --milo-approach-sticky-transition-dur: 120ms;
  --milo-approach-sticky-transition-ease: linear;
}
/* #endregion */

/* #region 1) BASE MODULE */
.milo-approach-editorial__wrap {
  grid-template-columns: var(--milo-approach-wrap-columns);
  align-items: start;
  gap: var(--milo-approach-wrap-gap);
}

.milo-approach-editorial__title h2 {
  max-width: var(--milo-approach-title-max);
}

.milo-approach-editorial__subline p {
  max-width: var(--milo-approach-subline-max);
}
/* #endregion */

/* #region 2) LEFT COLUMN */
.milo-approach-editorial__text-column {
  position: relative;
  min-width: 0;
  transform-origin: top left;
  transition:
    transform var(--milo-approach-text-transition-dur)
      var(--milo-approach-text-transition-ease),
    opacity var(--milo-approach-text-transition-dur)
      var(--milo-approach-text-transition-ease),
    filter var(--milo-approach-text-transition-dur)
      var(--milo-approach-text-transition-ease);
}

.milo-approach-editorial__text-stack {
  position: relative;
  max-width: var(--milo-approach-text-max);
}

.milo-approach-editorial__text-stack::after {
  content: "";
  display: block;
  width: var(--milo-approach-text-rule-width);
  height: var(--milo-approach-text-rule-height);
  margin-top: var(--milo-approach-text-rule-margin-top);
  background: var(--milo-approach-text-rule-background);
  opacity: var(--milo-approach-text-rule-opacity);
}
/* #endregion */

/* #region 3) RIGHT COLUMN RAIL */
.milo-approach-editorial__step-column {
  position: relative;
  display: grid;
  gap: var(--milo-approach-rail-gap);
  min-width: 0;
  width: 100%;
  max-width: var(--milo-approach-rail-max);
  justify-self: stretch;
  padding: var(--milo-approach-rail-pad-y) var(--milo-approach-rail-pad-x);

  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.milo-approach-editorial__step-column::before {
  content: "";
  position: absolute;
  top: var(--milo-approach-rail-top-trim);
  bottom: 0;
  left: calc(
    var(--milo-approach-rail-pad-x) + var(--milo-approach-spine-offset) -
      (var(--milo-approach-spine-width) / 2)
  );
  width: var(--milo-approach-spine-width);
  opacity: var(--milo-approach-spine-base-opacity);
  background: var(--milo-approach-spine-background);
}

.milo-approach-editorial__step-column::after {
  content: "";
  position: absolute;
  top: var(--milo-approach-rail-top-trim);
  bottom: 0;
  left: calc(
    var(--milo-approach-rail-pad-x) + var(--milo-approach-spine-offset) -
      (var(--milo-approach-spine-width) / 2)
  );
  width: var(--milo-approach-spine-width);
  pointer-events: none;
  opacity: var(--milo-approach-spine-progress-opacity);
  background: var(--milo-approach-spine-progress-background);
}
/* #endregion */

/* #region 4) STEP BLOCKS */
.milo-approach-editorial__step {
  position: relative;
  gap: var(--milo-approach-step-gap);
  padding-left: var(--milo-approach-step-indent);
  opacity: var(--milo-approach-step-opacity);

  transition:
    opacity var(--milo-approach-step-transition-dur)
      var(--milo-approach-step-transition-ease),
    transform var(--milo-approach-step-transition-dur)
      var(--milo-approach-step-transition-ease);
}

.milo-approach-editorial__step:first-child {
  padding-top: var(--milo-approach-step-first-pad-top);
}

.milo-approach-editorial__step + .milo-approach-editorial__step {
  margin-top: var(--milo-approach-step-separator-margin-top);
  padding-top: var(--milo-approach-step-separator-pad-top);
  border-top: var(--milo-approach-step-separator-border);
}

.milo-approach-editorial__step:hover {
  transform: translateY(var(--milo-approach-step-shift-hover));
}

.milo-approach-editorial__step.is-active {
  opacity: var(--milo-approach-step-opacity-active);
  transform: translateY(var(--milo-approach-step-shift-active));
}

.milo-approach-editorial__step.is-past {
  opacity: var(--milo-approach-step-opacity-past);
}

.milo-approach-editorial__step.is-future {
  opacity: var(--milo-approach-step-opacity-future);
}

.milo-approach-editorial__step::before {
  content: "";
  position: absolute;
  top: var(--milo-approach-node-top);
  left: calc(
    var(--milo-approach-spine-offset) - (var(--milo-approach-node-size) / 2)
  );
  width: var(--milo-approach-node-size);
  height: var(--milo-approach-node-size);
  border-radius: var(--milo-approach-node-radius);
  pointer-events: none;

  opacity: calc(
    var(--milo-approach-node-opacity-min) +
      (var(--milo-step-progress, 0) * var(--milo-approach-node-opacity-gain))
  );
  transform: scale(
    calc(
      var(--milo-approach-node-scale-min) +
        (var(--milo-step-progress, 0) * var(--milo-approach-node-scale-gain))
    )
  );

  background: var(--milo-approach-node-background);
  box-shadow: var(--milo-approach-node-shadow);

  transition:
    transform var(--milo-approach-step-transition-dur)
      var(--milo-approach-step-transition-ease),
    opacity var(--milo-approach-step-transition-dur)
      var(--milo-approach-step-transition-ease),
    box-shadow var(--milo-approach-step-transition-dur)
      var(--milo-approach-step-transition-ease),
    background var(--milo-approach-step-transition-dur)
      var(--milo-approach-step-transition-ease);
}

.milo-approach-editorial__step.is-active::before {
  opacity: 1;
}
/* #endregion */

/* #region 5) STEP TYPOGRAPHY */
.milo-approach-editorial__step-label,
.milo-approach-editorial__step-title,
.milo-approach-editorial__step-body {
  transition:
    color var(--milo-approach-step-transition-dur)
      var(--milo-approach-step-transition-ease),
    opacity var(--milo-approach-step-transition-dur)
      var(--milo-approach-step-transition-ease);
}

.milo-approach-editorial__step-label {
  display: block;
  margin: 0 0 var(--milo-approach-step-label-margin-bottom);
  font-size: var(--milo-approach-step-label-size);
  line-height: var(--milo-approach-step-label-line-height);
  letter-spacing: var(--milo-approach-step-label-letter-spacing);
  text-transform: uppercase;
  font-weight: var(--milo-approach-step-label-weight);
  color: var(--milo-approach-step-label-color);
}

.milo-approach-editorial__step-title {
  margin: 0 0 var(--milo-approach-step-title-margin-bottom);
  font-family: var(--milo-sans, inherit);
  font-size: var(--milo-approach-step-title-size);
  line-height: var(--milo-approach-step-title-line-height);
  font-weight: var(--milo-approach-step-title-weight);
  color: var(--milo-approach-step-title-color);
}

.milo-approach-editorial__step-body {
  margin: 0;
  max-width: var(--milo-approach-step-body-max);
  font-size: var(--milo-approach-step-body-size);
  line-height: var(--milo-approach-step-body-line-height);
  color: var(--milo-approach-step-body-color);
}

.milo-approach-editorial__step:hover .milo-approach-editorial__step-label {
  color: var(--milo-approach-step-label-color-hover);
}

.milo-approach-editorial__step:hover .milo-approach-editorial__step-title,
.milo-approach-editorial__step.is-active .milo-approach-editorial__step-title {
  color: var(--milo-approach-step-title-color-hover);
}

.milo-approach-editorial__step.is-active .milo-approach-editorial__step-label {
  color: var(--milo-approach-step-label-color-active);
}

.milo-approach-editorial__step.is-active .milo-approach-editorial__step-body {
  color: var(--milo-approach-step-body-color-active);
}
/* #endregion */

/* #region 6) DESKTOP ONLY */
@media (min-width: 1025px) {
  .milo-approach-editorial__text-column {
    --milo-sticky-progress: 0;

    position: sticky;
    top: var(--milo-approach-sticky-top);
    align-self: start;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;

    transform: translateY(
        calc(
          var(--milo-sticky-progress) *
            var(--milo-approach-sticky-progress-shift-y)
        )
      )
      scale(
        calc(
          1 -
            (
              var(--milo-sticky-progress) *
                var(--milo-approach-sticky-progress-scale-gain)
            )
        )
      );
    opacity: calc(
      1 -
        (
          var(--milo-sticky-progress) *
            var(--milo-approach-sticky-progress-opacity-gain)
        )
    );

    transition:
      transform var(--milo-approach-sticky-transition-dur)
        var(--milo-approach-sticky-transition-ease),
      opacity var(--milo-approach-sticky-transition-dur)
        var(--milo-approach-sticky-transition-ease);
  }

  .milo-approach-editorial--stuck .milo-approach-editorial__text-column {
    transform: translateY(var(--milo-approach-stuck-shift-y))
      scale(var(--milo-approach-stuck-scale));
    opacity: var(--milo-approach-stuck-opacity);
  }
}
/* #endregion */

/* #region 7) RESPONSIVE TUNING */
@media (max-width: 1199.98px) {
  .milo-approach-editorial {
    --milo-approach-wrap-gap: clamp(36px, 4vw, 64px);

    --milo-approach-title-max: 20ch;
    --milo-approach-subline-max: 32ch;

    --milo-approach-rail-max: 42rem;
    --milo-approach-rail-pad-y: 12px;
    --milo-approach-rail-pad-x: 20px;
    --milo-approach-spine-offset: 7px;
    --milo-approach-step-indent: 18px;

    --milo-approach-step-title-size: clamp(19px, 1.7vw, 22px);
    --milo-approach-step-body-max: 28rem;
  }
}

@media (max-width: 1024px) {
  .milo-approach-editorial {
    --milo-approach-wrap-columns: 1fr;
    --milo-approach-wrap-gap: clamp(32px, 5vw, 56px);

    --milo-approach-text-max: 42rem;
    --milo-approach-text-rule-width: 56px;
    --milo-approach-text-rule-margin-top: var(--milo-space-md);

    --milo-approach-rail-pad-y: 20px;
    --milo-approach-rail-pad-x: 20px;
    --milo-approach-spine-offset: 0px;
    --milo-approach-step-indent: 24px;
    --milo-approach-rail-top-trim: 28px;
    --milo-approach-rail-gap: 0;
    --milo-approach-rail-max: 100%;

    --milo-approach-step-opacity: 0.78;
    --milo-approach-step-opacity-past: 0.88;
    --milo-approach-step-opacity-future: 0.7;
    --milo-approach-step-shift-active: 0px;

    --milo-approach-step-title-size: clamp(20px, 2.4vw, 24px);
    --milo-approach-step-body-max: 40ch;
  }

  .milo-approach-editorial__text-column {
    position: relative;
    top: auto;
    transform: none !important;
    opacity: 1 !important;
    align-self: start;
    will-change: auto;
  }

  .milo-approach-editorial__step-column::before,
  .milo-approach-editorial__step-column::after {
    top: var(--milo-approach-rail-top-trim);
  }

  .milo-approach-editorial__step {
    width: fit-content;
  }

  .milo-approach-editorial__step.is-active {
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .milo-approach-editorial {
    --milo-approach-wrap-gap: 28px;

    --milo-approach-text-max: 100%;
    --milo-approach-title-max: 15ch;
    --milo-approach-subline-max: 34ch;
    --milo-approach-text-rule-width: 44px;
    --milo-approach-text-rule-margin-top: 18px;

    --milo-approach-rail-pad-y: 10px;
    --milo-approach-rail-pad-x: 10px;
    --milo-approach-rail-top-trim: 18px;
    --milo-approach-step-indent: 18px;

    --milo-approach-step-gap: 8px;
    --milo-approach-step-first-pad-top: 10px;
    --milo-approach-step-separator-margin-top: 12px;
    --milo-approach-step-separator-pad-top: 12px;

    --milo-approach-step-label-margin-bottom: 4px;
    --milo-approach-step-label-size: 10px;
    --milo-approach-step-label-letter-spacing: 0.16em;

    --milo-approach-step-title-size: clamp(18px, 5vw, 21px);
    --milo-approach-step-title-line-height: 1.18;

    --milo-approach-step-body-max: 36ch;
    --milo-approach-step-body-line-height: 1.55;

    --milo-approach-node-top: 0.55em;

    --milo-approach-step-shift-hover: 0px;
    --milo-approach-step-opacity-past: 0.88;
    --milo-approach-step-opacity-future: 0.88;
  }
}

@media (max-width: 479.98px) {
  .milo-approach-editorial {
    --milo-approach-wrap-gap: 24px;

    --milo-approach-title-max: 14ch;

    --milo-approach-rail-pad-x: 8px;
    --milo-approach-step-indent: 16px;

    --milo-approach-step-gap: 7px;
    --milo-approach-step-title-size: clamp(17px, 5.4vw, 19px);
    --milo-approach-step-body-size: 0.98rem;
    --milo-approach-step-body-max: 34ch;

    --milo-approach-text-rule-width: 36px;
  }
}
/* #endregion */

/* #region 8) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-approach-editorial__text-column,
  .milo-approach-editorial__step,
  .milo-approach-editorial__step-label,
  .milo-approach-editorial__step-title,
  .milo-approach-editorial__step-body,
  .milo-approach-editorial__step::before,
  .milo-approach-editorial__step-column::after {
    transition: none !important;
    animation: none !important;
  }

  .milo-approach-editorial__text-column,
  .milo-approach-editorial--stuck .milo-approach-editorial__text-column,
  .milo-approach-editorial__step,
  .milo-approach-editorial__step:hover,
  .milo-approach-editorial__step.is-active {
    transform: none !important;
    opacity: 1;
  }

  .milo-approach-editorial__step.is-past,
  .milo-approach-editorial__step.is-future {
    opacity: 1;
  }
}
/* #endregion */