/* =========================================================
   MILO PAGE: SERVICES
   File: milo-page-services.css
   Layer: 04-pages
   Scope: Services page only

   Owns:
   - Hero
   - Services pillars intro + grid rhythm
   - Service card index / title / summary / list styling
   - Process section spacing/tuning
   - Case study preview tuning
   - Credibility section spacing/tuning
   - CTA tuning

   Notes:
   - Assumes shared modules already exist:
     * milo-case-study-preview
     * milo-credibility
     * milo-cta
     * milo-approach-editorial
   - Scoped to .milo-page-services only
========================================================= */

/* #region 0) SERVICES PAGE TOKENS */
.milo-page-services {
  /* #region Page Section Knobs */
  /* Section Padding Knobs */
  --milo-services-pad-top-sm: var(--milo-pad-fluid-top-sm);
  --milo-services-pad-bottom-sm: var(--milo-pad-fluid-bottom-sm);
  --milo-services-pad-top-md: var(--milo-pad-fluid-top-md);
  --milo-services-pad-bottom-md: var(--milo-pad-fluid-bottom-md);
  --milo-services-pad-top-lg: var(--milo-pad-fluid-top-lg);
  --milo-services-pad-bottom-lg: var(--milo-pad-fluid-bottom-lg);
  --milo-services-pad-top-xl: var(--milo-pad-fluid-top-xl);
  --milo-services-pad-bottom-xl: var(--milo-pad-fluid-bottom-xl);

  /* Section Gap Knobs */
  --milo-services-gap-2xs: var(--milo-gap-2xs);
  --milo-services-gap-xs: var(--milo-gap-xs);
  --milo-services-gap-sm: var(--milo-gap-fluid-sm);
  --milo-services-gap-md: var(--milo-gap-fluid-md);
  --milo-services-gap-lg: var(--milo-gap-fluid-lg);
  --milo-services-gap-xl: var(--milo-gap-fluid-xl);
  --milo-services-gap-2xl: var(--milo-gap-fluid-2xl);
  --milo-services-gap-3xl: var(--milo-gap-fluid-3xl);
  --milo-services-gap-4xl: var(--milo-gap-fluid-4xl);
  /* #endregion Page Section Knobs */

  /* #region Section Padding */
  --milo-services-hero-pad-top: var(--milo-services-pad-top-lg);
  --milo-services-hero-pad-bottom: var(--milo-services-pad-bottom-lg);

  --milo-services-pillars-pad-top: var(--milo-services-pad-top-sm);
  --milo-services-pillars-pad-bottom: var(--milo-services-pad-bottom-sm);

  --milo-services-process-pad-top: var(--milo-services-pad-top-sm);
  --milo-services-process-pad-bottom: var(--milo-services-pad-bottom-md);

  --milo-services-case-study-pad-top: var(--milo-services-pad-top-sm);
  --milo-services-case-study-pad-bottom: var(--milo-services-pad-bottom-sm);

  --milo-services-credibility-pad-top: var(--milo-services-pad-top-sm);
  --milo-services-credibility-pad-bottom: var(--milo-services-pad-bottom-lg);
  /* #endregion Section Padding */

  /* #region Grid Spacing */
  --milo-services-pillars-grid-column-gap: var(--milo-services-gap-lg);
  --milo-services-pillars-grid-row-gap: var(--milo-services-gap-lg);
  /* #endregion Grid Spacing */

  /* #region Section Text Measures and Indentation */
  --milo-services-intro-title-max: var(--milo-measure-24);
  --milo-services-intro-subline-max: var(--milo-measure-38);
  --milo-services-card-title-max: var(--milo-measure-16);
  --milo-services-card-body-max: var(--milo-measure-44);
  /* #endregion Section Text Measures and Indentation */

  /* #region Intro Spacing */
  --milo-services-intro-gap: var(--milo-services-gap-lg);
  --milo-services-intro-margin-bottom: var(--milo-offset-fluid-lg);
  /* #endregion Intro Spacing */

  /* #region Hero List Styling */
  --milo-services-hero-list-line-height: 1.4;
  --milo-services-hero-list-font-color: var(--milo-text-muted);
  --milo-services-hero-list-font-size: 0.95rem;
  --milo-services-hero-list-letter-spacing: 0;
  --milo-services-hero-list-gap: var(--milo-services-gap-sm)
    var(--milo-services-gap-xs);
  --milo-services-hero-list-max: 44rem;
  --milo-services-hero-list-dot-color: var(--milo-white-weak);
  --milo-services-hero-list-dot-content: "•";
  /* #endregion Hero List Styling */

  /* #region Pillars Styling */
  --milo-services-pillars-card-pad: var(--milo-card-pad-block-md)
    var(--milo-card-pad-block-sm) var(--milo-card-pad-block-md);

  --milo-services-pillars-glow: var(--milo-rule-center-base);

  /* #endregion Pillars Styling */

  /* #region Pillars card styling */
  --milo-services-pillars-card-label-opacity: 0.54;
  --milo-services-pillars-card-label-letter-spacing: 0.16em;
  --milo-services-pillars-card-radius: var(--milo-radius-lg);
  --milo-services-pillars-card-line-height: 1.45;
  --milo-services-pillars-card-font-size: 0.98em;
  --milo-services-pillars-card-font-color: var(--milo-text-soft);
  --milo-services-pillars-card-font-color-hover: var(--milo-text);
  /* #endregion Pillars card styling */

  /* #region Process fade */
  --milo-services-process-fade-height: 65px;
  --milo-services-process-fade-color: var(--milo-surface-lift-to-light-top);
  /* #endregion Process fade */

  /* Process heading offset */
  --milo-services-process-heading-shift-y: -6px;
  --milo-services-process-heading-shift-y-mobile: 0px;

  /* Pillars grid responsive columns */
  --milo-services-pillars-grid-columns-1024: repeat(2, minmax(0, 1fr));
  --milo-services-pillars-grid-columns-768: 1fr;

  /* Pillars grid item reset */
  --milo-services-pillars-grid-item-column-reset: auto;

  /* Hero list separator spacing */
  --milo-services-hero-list-dot-gap-inline: 8px;
  --milo-services-hero-list-dot-gap-inline-mobile-small: 11px;

  /* Pillars divider widths */
  --milo-services-pillars-rule-max-width: min(1180px, calc(100% - 64px));

  /* #region Reveal defaults */
  --milo-services-reveal-y-base: 10px;
  --milo-services-reveal-blur-base: 3px;

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

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

  --milo-services-reveal-y-media: 12px;
  --milo-services-reveal-blur-media: 3px;

  --milo-services-reveal-y-card: 12px;
  --milo-services-reveal-blur-card: 3px;
  /* #endregion Reveal defaults */
}

/* #endregion SERVICES PAGE TOKENS */

/* #region 0.5) SERVICES PAGE REVEAL CASCADE */

/* #region MOTION DEFAULTS */
.milo-page-services .milo-reveal {
  --milo-delay: 0ms;
  --milo-reveal-y: var(--milo-services-reveal-y-base);
  --milo-reveal-blur: var(--milo-services-reveal-blur-base);
}

.milo-page-services .milo-h1.milo-reveal,
.milo-page-services .milo-h2.milo-reveal,
.milo-page-services .milo-h3.milo-reveal,
.milo-page-services .milo-h4.milo-reveal,
.milo-page-services .milo-heading-group.milo-reveal,
.milo-page-services .milo-body.milo-reveal,
.milo-page-services .elementor-widget-text-editor.milo-reveal,
.milo-page-services .milo-heading-subline.milo-reveal {
  --milo-reveal-y: var(--milo-services-reveal-y-copy);
  --milo-reveal-blur: var(--milo-services-reveal-blur-copy);
}

.milo-page-services .milo-media-frame.milo-reveal,
.milo-page-services .milo-case-study-preview__card.milo-reveal,
.milo-page-services .milo-page-services__card.milo-reveal,
.milo-page-services .milo-page-services__pillars-card.milo-reveal {
  --milo-reveal-y: var(--milo-services-reveal-y-media);
  --milo-reveal-blur: var(--milo-services-reveal-blur-media);
}
/* #endregion */

/* #region HERO */
.milo-page-services .milo-page-services__hero .milo-heading-label.milo-reveal {
  --milo-delay: 0ms;
  --milo-reveal-y: var(--milo-services-reveal-y-label);
  --milo-reveal-blur: var(--milo-services-reveal-blur-label);
}

.milo-page-services .milo-page-services__hero .milo-h1.milo-reveal {
  --milo-delay: 50ms;
}

.milo-page-services
  .milo-page-services__hero
  .milo-heading-subline.milo-reveal {
  --milo-delay: 100ms;
}

.milo-page-services
  .milo-page-services__hero
  .milo-page-services__hero-list.milo-reveal {
  --milo-delay: 140ms;
}

.milo-page-services .milo-page-services__hero .milo-hero__actions.milo-reveal {
  --milo-delay: 200ms;
  --milo-reveal-y: var(--milo-services-reveal-y-base);
  --milo-reveal-blur: var(--milo-services-reveal-blur-copy);
}
/* #endregion */

/* #region PILLARS */
.milo-page-services .milo-page-services__pillars-label.milo-reveal {
  --milo-delay: 0ms;
  --milo-reveal-y: var(--milo-services-reveal-y-label);
  --milo-reveal-blur: var(--milo-services-reveal-blur-label);
}

.milo-page-services .milo-page-services__pillars-title.milo-reveal {
  --milo-delay: 80ms;
}

.milo-page-services .milo-page-services__pillars-subline.milo-reveal {
  --milo-delay: 100ms;
}

.milo-page-services
  .milo-page-services__pillars-grid
  .milo-page-services__pillars-card.milo-reveal:nth-child(1) {
  --milo-delay: 140ms;
}

.milo-page-services
  .milo-page-services__pillars-grid
  .milo-page-services__pillars-card.milo-reveal:nth-child(2) {
  --milo-delay: 180ms;
}

.milo-page-services
  .milo-page-services__pillars-grid
  .milo-page-services__pillars-card.milo-reveal:nth-child(3) {
  --milo-delay: 250ms;
}

.milo-page-services
  .milo-page-services__pillars-grid
  .milo-page-services__pillars-card.milo-reveal:nth-child(4) {
  --milo-delay: 290ms;
}

.milo-page-services
  .milo-page-services__pillars-grid
  .milo-page-services__pillars-card.milo-reveal:nth-child(5) {
  --milo-delay: 330ms;
}

.milo-page-services
  .milo-page-services__pillars-grid
  .milo-page-services__pillars-card.milo-reveal:nth-child(6) {
  --milo-delay: 360ms;
}
/* #endregion */

/* #region PROCESS */
.milo-page-services .milo-page-services__process .milo-reveal {
  --milo-delay: 0ms;
  --milo-reveal-y: var(--milo-services-reveal-y-card);
  --milo-reveal-blur: var(--milo-services-reveal-blur-card);
}
/* #endregion */

/* #region CASE STUDIES */
.milo-page-services
  .milo-page-services__case-study
  .milo-heading-label.milo-reveal {
  --milo-delay: 0ms;
  --milo-reveal-y: var(--milo-services-reveal-y-label);
  --milo-reveal-blur: var(--milo-services-reveal-blur-label);
}

.milo-page-services .milo-page-services__case-study .milo-h2.milo-reveal {
  --milo-delay: 50ms;
}

.milo-page-services
  .milo-page-services__case-study
  .milo-heading-subline.milo-reveal {
  --milo-delay: 100ms;
}

.milo-page-services
  .milo-page-services__case-study
  .milo-case-study-preview__card.milo-reveal:nth-child(1) {
  --milo-delay: 140ms;
}

.milo-page-services
  .milo-page-services__case-study
  .milo-case-study-preview__card.milo-reveal:nth-child(2) {
  --milo-delay: 180ms;
}

.milo-page-services
  .milo-page-services__case-study
  .milo-case-study-preview__card.milo-reveal:nth-child(3) {
  --milo-delay: 220ms;
}
/* #endregion */

/* #region CREDIBILITY */
.milo-page-services .milo-page-services__credibility .milo-reveal {
  --milo-delay: 0ms;
  --milo-reveal-y: var(--milo-services-reveal-y-copy);
  --milo-reveal-blur: var(--milo-services-reveal-blur-copy);
}
/* #endregion */

/* #region CTA */
.milo-page-services .milo-page-services__cta .milo-h2.milo-reveal {
  --milo-delay: 0ms;
  --milo-reveal-y: var(--milo-services-reveal-y-copy);
  --milo-reveal-blur: var(--milo-services-reveal-blur-copy);
}

.milo-page-services .milo-page-services__cta .milo-cta__subline.milo-reveal {
  --milo-delay: 100ms;
  --milo-reveal-y: var(--milo-services-reveal-y-copy);
  --milo-reveal-blur: var(--milo-services-reveal-blur-copy);
}

.milo-page-services .milo-page-services__cta .milo-cta__btn.milo-reveal {
  --milo-delay: 200ms;
  --milo-reveal-y: var(--milo-services-reveal-y-base);
  --milo-reveal-blur: var(--milo-services-reveal-blur-copy);
}

.milo-page-services .milo-page-services__cta .milo-cta__link.milo-reveal {
  --milo-delay: 260ms;
  --milo-reveal-y: var(--milo-services-reveal-y-copy);
  --milo-reveal-blur: var(--milo-services-reveal-blur-copy);
}
/* #endregion */

/* #endregion SERVICES PAGE REVEAL CASCADE */

/* #region 1) SERVICES PAGE SHELL */
.milo-page-services .milo-section {
  position: relative;
  overflow: clip;
}

.milo-page-services .milo-inner {
  position: relative;
  z-index: 1;
}

.milo-page-services .milo-page-services__pillars-intro {
  gap: var(--milo-services-intro-gap);
  padding-bottom: var(--milo-services-intro-margin-bottom);
}

.milo-page-services .milo-page-services__pillars-title h2 {
  max-width: var(--milo-services-intro-title-max);
}

.milo-page-services .milo-page-services__pillars-subline p {
  max-width: var(--milo-services-intro-subline-max);
}

.milo-page-services .milo-page-services__pillars-card-title h3 {
  max-width: var(--milo-services-card-title-max);
}

.milo-page-services .milo-page-services__pillars-card-body p {
  max-width: var(--milo-services-card-body-max);
}

/* #endregion SERVICES PAGE SHELL */

/* #region 2) SERVICES HERO */
/* Hero section padding */
.milo-page-services .milo-page-services__hero {
  --milo-section-pad-top: var(--milo-services-hero-pad-top);
  --milo-section-pad-bottom: var(--milo-services-hero-pad-bottom);

  --milo-section-bg: var(--milo-bg-hero);
  --milo-section-before-display: block;
  --milo-section-before-bg: var(--milo-section-surface-hero);
}

.milo-page-services .milo-hero-grid__aside {
  align-self: end;
}

/* Hero inline list styling */
.milo-page-services .milo-page-services__hero-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--milo-services-hero-list-gap, 0.75rem);
  max-width: var(--milo-services-hero-list-max);
  color: var(--milo-services-hero-list-font-color);
  font-size: var(--milo-services-hero-list-font-size);
  line-height: var(--milo-services-hero-list-line-height);
  letter-spacing: var(--milo-services-hero-list-letter-spacing);
}

/* Each item stays on one line and gets a dot */
.milo-page-services .milo-page-services__hero-list span {
  display: flex;
  align-items: center;
  gap: var(--milo-services-hero-list-dot-gap-inline, 0.75rem);
  white-space: nowrap;
  cursor: pointer;
}

/* Dot before every item */
.milo-page-services .milo-page-services__hero-list span::before {
  content: var(--milo-services-hero-list-dot-content, "•");
  color: var(--milo-services-hero-list-dot-color);
  flex: 0 0 auto;
}

/* #endregion SERVICES HERO */

/* #region 3) SERVICES APPROACH PILLARS */
.milo-page-services .milo-page-services__pillars {
  --milo-section-pad-top: var(--milo-services-pillars-pad-top);
  --milo-section-pad-bottom: var(--milo-services-pillars-pad-bottom);

  --milo-section-bg: var(--milo-section-surface-lift);

  --milo-section-before-display: block;
  --milo-section-before-inset: 0 auto auto 0;
  --milo-section-before-height: 1px;
  --milo-section-before-transform: none;
  --milo-section-before-bg: var(--milo-services-pillars-glow);

  --milo-section-after-display: block;
  --milo-section-after-inset: auto auto -1px 0;
  --milo-section-after-height: 2px;
  --milo-section-after-transform: none;
  --milo-section-after-bg: var(--milo-services-pillars-glow);
}

/* pillars grid alignment and gap spacing */
.milo-page-services .milo-page-services__pillars-grid {
  align-items: start;
  column-gap: var(--milo-services-pillars-grid-column-gap);
  row-gap: var(--milo-services-pillars-grid-row-gap);
}

/* Pillars card styling */
.milo-page-services .milo-page-services__pillars-card {
  padding: var(--milo-services-pillars-card-pad);
  border-radius: var(--milo-services-pillars-card-radius);
}

/* Pillars card label styling */
.milo-page-services
  .milo-page-services__pillars-card-label
  .elementor-heading-title {
  margin-bottom: var(--milo-services-gap-xs);
  opacity: var(--milo-services-pillars-card-label-opacity);
  letter-spacing: var(--milo-services-pillars-card-label-letter-spacing);
}

/* Add spacing between card label and card title */
.milo-page-services .milo-page-services__pillars-card-title h3 {
  margin-bottom: var(--milo-services-gap-xs);
}

/* Add spacing between bottom of card title and top of list */
.milo-page-services .milo-page-services__pillars-card-list {
  margin-top: var(--milo-services-gap-2xs);
}

/* Style the icon list as a grid to allow for consistent spacing between items, and remove default list spacing */
.milo-page-services
  .milo-page-services__pillars-card-list
  .elementor-icon-list-items {
  display: grid;
  gap: var(--milo-services-gap-2xs);
}

/* Remove default margins from list items to allow for custom spacing via grid gap */
.milo-page-services
  .milo-page-services__pillars-card-list
  .elementor-icon-list-item {
  margin: 0;
}

/* Pillars card list item styling */
.milo-page-services
  .milo-page-services__pillars-card-list
  .elementor-icon-list-text {
  color: var(--milo-services-pillars-card-font-color);
  font-size: var(--milo-services-pillars-card-font-size);
  line-height: var(--milo-services-pillars-card-line-height);
}

/* Pillars card hover state to increase card label opacity and brighten list item text */
.milo-page-services
  .milo-page-services__pillars-card:hover
  .milo-page-services__pillars-card-list
  .elementor-icon-list-text {
  color: var(--milo-services-pillars-card-font-color-hover);
}
/* #endregion SERVICES APPROACH PILLARS */

/* #region 4) SERVICES PROCESS */
/* Process section Padding */
.milo-page-services .milo-page-services__process {
  --milo-section-pad-top: var(--milo-services-process-pad-top);
  --milo-section-pad-bottom: var(--milo-services-process-pad-bottom);

  --milo-section-bg: var(--milo-bg-lift);
  --milo-section-before-display: block;
  --milo-section-before-bg: var(--milo-services-process-fade-color);
  --milo-section-before-height: var(--milo-services-process-fade-height);
}

.milo-page-services
  .milo-page-services__process
  .milo-approach-editorial__text-stack {
  transform: translateY(var(--milo-services-process-heading-shift-y));
}
/* #endregion SERVICES PROCESS */

/* #region 5) SERVICES CASE STUDY PREVIEW */
/* Case study section padding */
.milo-page-services .milo-page-services__case-study {
  --milo-section-pad-top: var(--milo-services-case-study-pad-top);
  --milo-section-pad-bottom: var(--milo-services-case-study-pad-bottom);

  --milo-section-bg: var(--milo-bg-base);
}
/* #endregion SERVICES CASE STUDY PREVIEW */

/* #region 6) SERVICES CREDIBILITY */
/* Credibility section padding */
.milo-page-services .milo-page-services__credibility {
  --milo-section-pad-top: var(--milo-services-credibility-pad-top);
  --milo-section-pad-bottom: var(--milo-services-credibility-pad-bottom);

  --milo-section-bg: var(--milo-bg-base);
}
/* #endregion SERVICES CREDIBILITY */

/* #region 7) SERVICES CTA */
.milo-page-services .milo-page-services__cta {
  --milo-section-bg: var(--milo-section-surface-cta);
  --milo-section-before-display: block;
  --milo-section-before-bg: var(--milo-section-light-cta);
}
/* #endregion SERVICES CTA */

/* #region 8) SERVICES RESPONSIVE */

@media (max-width: 1199.98px) {
  .milo-page-services {
    /* Text Measure adjustments */
    --milo-services-intro-title-max: var(--milo-measure-24);
    --milo-services-intro-subline-max: var(--milo-measure-40);
    --milo-services-card-title-max: var(--milo-measure-20);
    --milo-services-card-body-max: var(--milo-measure-32);

    --milo-services-pillars-card-radius: calc(var(--milo-radius-lg) - 2px);
  }
}

@media (max-width: 1024px) {
  .milo-page-services {
    /* Text Measure adjustments */
    --milo-services-intro-title-max: var(--milo-measure-20);
    --milo-services-intro-subline-max: var(--milo-measure-34);
    --milo-services-card-title-max: var(--milo-measure-20);
    --milo-services-card-body-max: var(--milo-measure-32);

    --milo-services-hero-list-font-size: 0.72rem;
    --milo-services-hero-list-letter-spacing: 0.1em;
  }

  /* Adjust grid to 2 columns, and reset auto-placement for cards 4 and 5 to keep them in flow under card 2 */
  .milo-page-services .milo-page-services__pillars-grid {
    grid-template-columns: var(--milo-services-pillars-grid-columns-1024);
  }

  /* Reset auto-placement for cards 4 and 5 to keep them in flow under card 2 */
  .milo-page-services .milo-page-services__pillars-grid > *:nth-child(4),
  .milo-page-services .milo-page-services__pillars-grid > *:nth-child(5) {
    grid-column: var(--milo-services-pillars-grid-item-column-reset);
  }
}

@media (max-width: 767.98px) {
  .milo-page-services {
    /* Text Measure adjustments */
    --milo-services-intro-title-max: var(--milo-measure-24);
    --milo-services-intro-subline-max: var(--milo-measure-38);
    --milo-services-card-title-max: var(--milo-measure-20);
    --milo-services-card-body-max: var(--milo-measure-38);

    --milo-services-hero-list-font-size: 0.7rem;
    --milo-services-hero-list-max: 26rem;

    --milo-services-pillars-card-radius: calc(var(--milo-radius-lg) - 4px);

    --milo-services-process-heading-shift-y: var(
      --milo-services-process-heading-shift-y-mobile
    );
  }

  /* Stack to single column and adjust spacing */
  .milo-page-services .milo-page-services__pillars-grid {
    grid-template-columns: var(--milo-services-pillars-grid-columns-768);
  }
}

@media (max-width: 479.98px) {
  .milo-page-services {
    /* Text Measure adjustments */
    --milo-services-intro-title-max: var(--milo-measure-14);
    --milo-services-intro-subline-max: 90%;
    --milo-services-card-title-max: var(--milo-measure-14);
    --milo-services-card-body-max: var(--milo-measure-28);

    --milo-services-hero-list-font-size: 0.68rem;
    --milo-services-hero-list-letter-spacing: 0.08em;
    --milo-services-hero-list-max: 20rem;
  }

  /* Add Dot before first item in hero inline list */
  .milo-page-services
    .milo-page-services__hero-inline-list
    span:first-child::before {
    content: var(--milo-services-hero-list-dot-content);
    color: var(--milo-services-hero-list-dot-color);
    margin-right: var(--milo-services-hero-list-dot-gap-inline-mobile-small);
    margin-left: 0;
  }
}

/* #endregion SERVICES RESPONSIVE */

/* #region 9) SERVICES REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-page-services .milo-reveal,
  .milo-page-services .milo-page-services__pillars-card,
  .milo-page-services .milo-page-services__pillars-card * {
    transition: none !important;
    animation: none !important;
  }

  .milo-page-services
    .milo-page-services__process
    .milo-approach-editorial__text-stack {
    transform: none;
  }
}
/* #endregion SERVICES REDUCED MOTION */