/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-who.css
   Layer: Who We Work With Module (Intro + Cards + Dividers)
   Version: 4.0
========================================================= */

/* #region 0) SAFETY */
.milo-who,
.milo-who * {
  box-sizing: border-box;
}
/* #endregion */

/* #region 1) MODULE TOKENS */
.milo-who {
  position: relative;
  overflow: hidden;

  /* #region Grid */
  --milo-who-grid-gap: var(--milo-gap-grid);
  --milo-who-grid-pad-top: var(--milo-space-lg);
  --milo-who-grid-columns: repeat(3, minmax(0, 1fr));

  --milo-who-grid-columns-desktop-narrow: repeat(3, minmax(0, 1fr));
  --milo-who-grid-columns-tablet: minmax(200px, max-content)
    repeat(auto-fill, 200px) 300px;
  --milo-who-grid-columns-mobile: 1fr;

  --milo-who-grid-column-gap-desktop-narrow: var(--milo-gap-grid);
  --milo-who-grid-column-gap-tablet: clamp(32px, 6vw, 64px);
  --milo-who-grid-row-gap-tablet: clamp(24px, 4vw, 48px);

  --milo-who-grid-pad-top-desktop-narrow: var(--milo-space-lg);
  --milo-who-grid-pad-top-tablet: clamp(20px, 3vw, 28px);
  --milo-who-grid-pad-top-mobile: var(--milo-space-md);

  --milo-who-grid-max-tablet: 100%;
  /* #endregion Grid */

  /* #region Rules */
  --milo-who-rule: var(--milo-divider-strong);
  --milo-who-rule-soft: var(--milo-divider);

  --milo-who-top-rule-width: 100%;
  --milo-who-top-rule-width-tablet: 100px;

  --milo-who-top-rule-background: var(--milo-rule-center-weak);

  --milo-who-divider-background: var(--milo-rule-subtle);
  /* #endregion Rules */

  /* #region Intro */
  --milo-who-title-max: 24ch;
  --milo-who-title-max-desktop-narrow: 22ch;
  --milo-who-title-max-mobile: 10ch;
  --milo-who-title-max-mobile-small: 9ch;

  --milo-who-subline-max: 40ch;
  --milo-who-subline-max-desktop-narrow: 36ch;
  --milo-who-subline-max-mobile: 30ch;
  --milo-who-subline-max-mobile-small: 26ch;

  --milo-who-subline-margin-top: var(--milo-space-sm);
  --milo-who-subline-margin-bottom: var(--milo-space-md);
  /* #endregion Intro */

  /* #region Card rhythm */
  --milo-who-stack-max: 28ch;
  --milo-who-stack-max-desktop-narrow: 26ch;
  --milo-who-stack-max-tablet: 32ch;
  --milo-who-stack-max-mobile: 28ch;
  --milo-who-stack-max-mobile-small: 24ch;
  --milo-who-stack-gap-mobile: var(--milo-space-sm);

  --milo-who-space-label: 12px;
  --milo-who-space-label-desktop-narrow: 10px;
  --milo-who-space-label-tablet: 10px;
  --milo-who-space-label-mobile: 6px;
  --milo-who-space-label-mobile-small: 5px;

  --milo-who-label-minh: 34px;
  --milo-who-label-minh-desktop-narrow: 30px;
  --milo-who-label-max-tablet: 20ch;

  --milo-who-body-max-tablet: 26ch;
  --milo-who-body-max-mobile-small: 22ch;
  --milo-who-body-margin-bottom-tablet: 10px;
  /* #endregion Card rhythm */

  /* #region Desktop alignment */
  --milo-who-card-1-margin-left: clamp(28px, 1vw, 56px);
  --milo-who-card-1-margin-left-desktop-narrow: clamp(14px, 1vw, 28px);
  --milo-who-card-1-margin-right: auto;

  --milo-who-card-2-padding-inline: clamp(14px, 1.8vw, 24px);
  --milo-who-card-2-padding-inline-desktop-narrow: clamp(8px, 1.2vw, 16px);

  --milo-who-card-3-margin-left: auto;
  --milo-who-card-3-margin-right: clamp(-8px, -1vw, -16px);
  --milo-who-card-3-margin-right-desktop-narrow: clamp(-4px, -0.6vw, -10px);
  /* #endregion Desktop alignment */

  /* #region Mobile stagger */
  --milo-who-card-2-pad-left-mobile: 8px;
  --milo-who-card-3-pad-left-mobile: 16px;
  --milo-who-card-2-pad-left-mobile-small: 4px;
  --milo-who-card-3-pad-left-mobile-small: 8px;
  /* #endregion Mobile stagger */

  /* #region Divider geometry */
  --milo-who-divider-inset-top: 58px;
  --milo-who-divider-inset-bot: 28px;
  --milo-who-divider-inset-top-desktop-narrow: 54px;
  --milo-who-divider-inset-bot-desktop-narrow: 24px;
  --milo-who-divider-inset-top-tablet: 54px;
  --milo-who-divider-inset-bot-tablet: 24px;
  --milo-who-divider-opacity: 0.7;
  /* #endregion Divider geometry */

  /* #region Motion */
  --milo-who-transition-dur: 200ms;
  --milo-who-transition-ease: var(--milo-ease, ease);

  --milo-who-reveal-y-base: 10px;
  --milo-who-reveal-blur-base: 3px;

  --milo-who-reveal-y-copy: 8px;
  --milo-who-reveal-blur-copy: 2px;

  --milo-who-reveal-y-label: 6px;
  --milo-who-reveal-blur-label: 1.5px;

  --milo-who-reveal-y-card: 10px;
  --milo-who-reveal-blur-card: 2.5px;

  --milo-who-delay-0: 0ms;
  --milo-who-delay-1: 60ms;
  --milo-who-delay-2: 120ms;
  --milo-who-delay-3: 180ms;
  --milo-who-delay-4: 240ms;
  --milo-who-delay-5: 300ms;
  /* #endregion Motion */
}
/* #endregion */

/* #region 2) REVEAL CASCADE */
.milo-who .milo-reveal {
  --milo-delay: var(--milo-who-delay-0);
  --milo-reveal-y: var(--milo-who-reveal-y-base);
  --milo-reveal-blur: var(--milo-who-reveal-blur-base);
}

.milo-who .milo-who__label.milo-heading-label.milo-reveal {
  --milo-delay: var(--milo-who-delay-0);
  --milo-reveal-y: var(--milo-who-reveal-y-label);
  --milo-reveal-blur: var(--milo-who-reveal-blur-label);
}

.milo-who .milo-who__title.milo-reveal {
  --milo-delay: var(--milo-who-delay-1);
  --milo-reveal-y: var(--milo-who-reveal-y-copy);
  --milo-reveal-blur: var(--milo-who-reveal-blur-copy);
}

.milo-who .milo-who__subline.milo-reveal {
  --milo-delay: var(--milo-who-delay-2);
  --milo-reveal-y: var(--milo-who-reveal-y-copy);
  --milo-reveal-blur: var(--milo-who-reveal-blur-copy);
}

.milo-who .milo-who__grid > .milo-who__card.milo-reveal:nth-child(1) {
  --milo-delay: var(--milo-who-delay-3);
  --milo-reveal-y: var(--milo-who-reveal-y-card);
  --milo-reveal-blur: var(--milo-who-reveal-blur-card);
}

.milo-who .milo-who__grid > .milo-who__card.milo-reveal:nth-child(2) {
  --milo-delay: var(--milo-who-delay-4);
  --milo-reveal-y: var(--milo-who-reveal-y-card);
  --milo-reveal-blur: var(--milo-who-reveal-blur-card);
}

.milo-who .milo-who__grid > .milo-who__card.milo-reveal:nth-child(3) {
  --milo-delay: var(--milo-who-delay-5);
  --milo-reveal-y: var(--milo-who-reveal-y-card);
  --milo-reveal-blur: var(--milo-who-reveal-blur-card);
}
/* #endregion */

/* #region 3) INTRO */
.milo-who .milo-who__title h2 {
  max-width: var(--milo-who-title-max);
}

.milo-who .milo-who__subline p {
  max-width: var(--milo-who-subline-max);
  margin-top: var(--milo-who-subline-margin-top);
  margin-bottom: var(--milo-who-subline-margin-bottom);
  margin-inline: auto;
}
/* #endregion */

/* #region 4) GRID + TOP RULE */
.milo-who__grid {
  position: relative;
  grid-template-columns: var(--milo-who-grid-columns);
  padding-top: var(--milo-who-grid-pad-top);
}

.milo-who__grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: var(--milo-who-top-rule-width);
  height: 1px;
  pointer-events: none;
  background: var(--milo-who-top-rule-background);
}
/* #endregion */

/* #region 5) CARD STRUCTURE */
.milo-who__card {
  position: relative;
  min-width: 0;
}

.milo-who__stack {
  width: 100%;
  max-width: var(--milo-who-stack-max);
  margin-inline: auto;
}

.milo-who__card-label {
  min-height: var(--milo-who-label-minh);
  margin-bottom: var(--milo-who-space-label);
}
/* #endregion */

/* #region 6) DESKTOP CARD ALIGNMENT */
.milo-who__card:nth-child(1) .milo-who__stack {
  margin-left: var(--milo-who-card-1-margin-left);
  margin-right: var(--milo-who-card-1-margin-right);
}

.milo-who__card:nth-child(2) .milo-who__stack {
  padding-inline: var(--milo-who-card-2-padding-inline);
}

.milo-who__card:nth-child(3) .milo-who__stack {
  margin-left: var(--milo-who-card-3-margin-left);
  margin-right: var(--milo-who-card-3-margin-right);
}
/* #endregion */

/* #region 7) DESKTOP DIVIDERS */
@media (min-width: 1025px) {
  .milo-who__card:not(:first-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--milo-who-grid-gap) * -0.5);
    top: var(--milo-who-divider-inset-top);
    bottom: var(--milo-who-divider-inset-bot);
    width: 1px;
    opacity: var(--milo-who-divider-opacity);
    pointer-events: none;
    background: var(--milo-who-divider-background);
  }
}
/* #endregion */

/* #region 8) RESPONSIVE */
@media (max-width: 1199.98px) {
  .milo-who {
    --milo-who-grid-columns: var(--milo-who-grid-columns-desktop-narrow);
    --milo-who-grid-pad-top: var(--milo-who-grid-pad-top-desktop-narrow);

    --milo-who-title-max: var(--milo-who-title-max-desktop-narrow);
    --milo-who-subline-max: var(--milo-who-subline-max-desktop-narrow);

    --milo-who-stack-max: var(--milo-who-stack-max-desktop-narrow);
    --milo-who-space-label: var(--milo-who-space-label-desktop-narrow);
    --milo-who-label-minh: var(--milo-who-label-minh-desktop-narrow);

    --milo-who-card-1-margin-left: var(
      --milo-who-card-1-margin-left-desktop-narrow
    );
    --milo-who-card-2-padding-inline: var(
      --milo-who-card-2-padding-inline-desktop-narrow
    );
    --milo-who-card-3-margin-right: var(
      --milo-who-card-3-margin-right-desktop-narrow
    );

    --milo-who-divider-inset-top: var(
      --milo-who-divider-inset-top-desktop-narrow
    );
    --milo-who-divider-inset-bot: var(
      --milo-who-divider-inset-bot-desktop-narrow
    );
  }

  .milo-who__grid {
    column-gap: var(--milo-who-grid-column-gap-desktop-narrow);
  }
}

@media (max-width: 1024px) {
  .milo-who {
    --milo-who-divider-inset-top: var(--milo-who-divider-inset-top-tablet);
    --milo-who-divider-inset-bot: var(--milo-who-divider-inset-bot-tablet);

    --milo-who-stack-max: var(--milo-who-stack-max-tablet);
    --milo-who-space-label: var(--milo-who-space-label-tablet);
  }

  .milo-who__grid {
    max-width: var(--milo-who-grid-max-tablet);
    margin-inline: auto;
    grid-template-columns: var(--milo-who-grid-columns-tablet);
    row-gap: var(--milo-who-grid-row-gap-tablet);
    padding-top: var(--milo-who-grid-pad-top-tablet);
    column-gap: var(--milo-who-grid-column-gap-tablet);
  }

  .milo-who__grid::before {
    width: var(--milo-who-top-rule-width-tablet);
  }

  .milo-who__card:not(:first-child)::before {
    content: none;
  }

  .milo-who__card-title .elementor-heading-title {
    min-height: 0;
  }

  .milo-who__stack,
  .milo-who__card:nth-child(1) .milo-who__stack,
  .milo-who__card:nth-child(2) .milo-who__stack,
  .milo-who__card:nth-child(3) .milo-who__stack {
    max-width: var(--milo-who-stack-max);
    margin-left: 0;
    margin-right: 0;
    padding-inline: 0;
    transform: none;
  }

  .milo-who__card-label {
    min-height: 0;
    max-width: var(--milo-who-label-max-tablet);
  }

  .milo-who__card-body p {
    min-height: 0;
    max-width: var(--milo-who-body-max-tablet);
    margin-bottom: var(--milo-who-body-margin-bottom-tablet);
  }
}

@media (max-width: 767.98px) {
  .milo-who {
    --milo-who-grid-columns: var(--milo-who-grid-columns-mobile);
    --milo-who-grid-pad-top: var(--milo-who-grid-pad-top-mobile);
    --milo-who-stack-max: var(--milo-who-stack-max-mobile);
    --milo-who-space-label: var(--milo-who-space-label-mobile);
    --milo-who-title-max: var(--milo-who-title-max-mobile);
    --milo-who-subline-max: var(--milo-who-subline-max-mobile);
  }

  .milo-who__grid {
    grid-template-columns: var(--milo-who-grid-columns);
    padding-top: var(--milo-who-grid-pad-top);
  }

  .milo-who__stack {
    max-width: var(--milo-who-stack-max);
    gap: var(--milo-who-stack-gap-mobile);
  }

  .milo-who__card:nth-child(2) {
    padding-left: var(--milo-who-card-2-pad-left-mobile);
  }

  .milo-who__card:nth-child(3) {
    padding-left: var(--milo-who-card-3-pad-left-mobile);
  }
}

@media (max-width: 479.98px) {
  .milo-who {
    --milo-who-title-max: var(--milo-who-title-max-mobile-small);
    --milo-who-subline-max: var(--milo-who-subline-max-mobile-small);
    --milo-who-stack-max: var(--milo-who-stack-max-mobile-small);
    --milo-who-space-label: var(--milo-who-space-label-mobile-small);
    --milo-who-card-2-pad-left-mobile: var(
      --milo-who-card-2-pad-left-mobile-small
    );
    --milo-who-card-3-pad-left-mobile: var(
      --milo-who-card-3-pad-left-mobile-small
    );
  }

  .milo-who__card-body p {
    max-width: var(--milo-who-body-max-mobile-small);
  }
}
/* #endregion 8) RESPONSIVE */

/* #region 9) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-who {
    --milo-who-reveal-y-base: 0px;
    --milo-who-reveal-blur-base: 0px;

    --milo-who-reveal-y-copy: 0px;
    --milo-who-reveal-blur-copy: 0px;

    --milo-who-reveal-y-label: 0px;
    --milo-who-reveal-blur-label: 0px;

    --milo-who-reveal-y-card: 0px;
    --milo-who-reveal-blur-card: 0px;

    --milo-who-delay-0: 0ms;
    --milo-who-delay-1: 0ms;
    --milo-who-delay-2: 0ms;
    --milo-who-delay-3: 0ms;
    --milo-who-delay-4: 0ms;
    --milo-who-delay-5: 0ms;
  }

  .milo-who,
  .milo-who * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}
/* #endregion 9) REDUCED MOTION */