/* =========================================================
   MILO PAGE: WORK
   File: milo-page-work.css
   Layer: 04-pages
   Scope: Work page modules only

   Owns:
   - Hero
   - Case study preview intro + grid tuning
   - Credibility section spacing/tuning
   - Proof strip tuning
   - CTA tuning

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

/* #region 0) WORK PAGE TOKENS */
.milo-page-work {
  /* #region Section padding */
  --milo-work-hero-pad-top: var(--milo-pad-fluid-top-xl);
  --milo-work-hero-pad-bottom: var(--milo-pad-fluid-bottom-md);

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

  --milo-work-credibility-pad-top: var(--milo-pad-fluid-top-sm);
  --milo-work-credibility-pad-bottom: var(--milo-pad-fluid-bottom-md);

  --milo-work-approach-pad-top: var(--milo-pad-fluid-top-lg);
  --milo-work-approach-pad-bottom: var(--milo-pad-fluid-bottom-sm);

  --milo-work-proof-pad-top: var(--milo-pad-fluid-top-sm);
  --milo-work-proof-pad-bottom: var(--milo-pad-fluid-bottom-md);
  /* #endregion Section padding */

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

  /* #region Hero */
  --milo-work-hero-min-height: clamp(350px, 56vh, 500px);
  /* #endregion Hero */

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

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

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

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

  --milo-work-reveal-y-credibility: 12px;
  --milo-work-reveal-blur-credibility: 2.5px;
  /* #endregion Reveal defaults */

  /* #region Reveal delays */
  --milo-work-delay-0: 0ms;
  --milo-work-delay-1: 50ms;
  --milo-work-delay-2: 100ms;
  --milo-work-delay-3: 150ms;
  --milo-work-delay-4: 250ms;
  --milo-work-delay-5: 300ms;
  --milo-work-delay-6: 350ms;
  /* #endregion Reveal delays */
}
/* #endregion 0) WORK PAGE TOKENS */

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

/* #region Motion defaults */
.milo-page-work .milo-reveal {
  --milo-delay: var(--milo-work-delay-0);
  --milo-reveal-y: var(--milo-work-reveal-y-base);
  --milo-reveal-blur: var(--milo-work-reveal-blur-base);
}

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

.milo-page-work .milo-media-frame.milo-reveal,
.milo-page-work .milo-case-study-preview__card.milo-reveal {
  --milo-reveal-y: var(--milo-work-reveal-y-media);
  --milo-reveal-blur: var(--milo-work-reveal-blur-media);
}
/* #endregion Motion defaults */

/* #region HERO */
.milo-page-work .milo-page-work__hero .milo-page-work__hero-label.milo-reveal {
  --milo-delay: var(--milo-work-delay-0);
  --milo-reveal-y: var(--milo-work-reveal-y-label);
  --milo-reveal-blur: var(--milo-work-reveal-blur-label);
}

.milo-page-work .milo-page-work__hero .milo-page-work__hero-title.milo-reveal {
  --milo-delay: var(--milo-work-delay-1);
}

.milo-page-work
  .milo-page-work__hero
  .milo-page-work__hero-subline.milo-reveal {
  --milo-delay: var(--milo-work-delay-2);
}
/* #endregion HERO */

/* #region CASE STUDY PREVIEW */
.milo-page-work
  .milo-page-work__case-study
  .milo-case-study-preview__label.milo-reveal {
  --milo-delay: var(--milo-work-delay-0);
  --milo-reveal-y: var(--milo-work-reveal-y-label);
  --milo-reveal-blur: var(--milo-work-reveal-blur-label);
}

.milo-page-work
  .milo-page-work__case-study
  .milo-case-study-preview__title.milo-reveal {
  --milo-delay: var(--milo-work-delay-1);
}

.milo-page-work
  .milo-page-work__case-study
  .milo-case-study-preview__subline.milo-reveal {
  --milo-delay: var(--milo-work-delay-2);
}

.milo-page-work
  .milo-page-work__case-study
  .milo-case-study-preview__card.milo-reveal:nth-child(1) {
  --milo-delay: var(--milo-work-delay-4);
}

.milo-page-work
  .milo-page-work__case-study
  .milo-case-study-preview__card.milo-reveal:nth-child(2) {
  --milo-delay: var(--milo-work-delay-5);
}

.milo-page-work
  .milo-page-work__case-study
  .milo-case-study-preview__card.milo-reveal:nth-child(3) {
  --milo-delay: var(--milo-work-delay-6);
}
/* #endregion CASE STUDY PREVIEW */

/* #region CREDIBILITY */
.milo-page-work .milo-page-work__credibility .milo-reveal {
  --milo-delay: var(--milo-work-delay-0);
  --milo-reveal-y: var(--milo-work-reveal-y-credibility);
  --milo-reveal-blur: var(--milo-work-reveal-blur-credibility);
}
/* #endregion CREDIBILITY */

/* #region PROOF STRIP */
.milo-page-work .milo-page-work__proof .milo-reveal {
  --milo-delay: var(--milo-work-delay-0);
  --milo-reveal-y: var(--milo-work-reveal-y-copy);
  --milo-reveal-blur: var(--milo-work-reveal-blur-copy);
}
/* #endregion PROOF STRIP */

/* #region CTA */
.milo-page-work .milo-page-work__cta .milo-cta__head.milo-reveal {
  --milo-delay: var(--milo-work-delay-0);
  --milo-reveal-y: var(--milo-work-reveal-y-copy);
  --milo-reveal-blur: var(--milo-work-reveal-blur-copy);
}

.milo-page-work .milo-page-work__cta .milo-cta__subline.milo-reveal {
  --milo-delay: var(--milo-work-delay-1);
  --milo-reveal-y: var(--milo-work-reveal-y-copy);
  --milo-reveal-blur: var(--milo-work-reveal-blur-copy);
}

.milo-page-work .milo-page-work__cta .milo-cta__btn.milo-reveal {
  --milo-delay: var(--milo-work-delay-2);
  --milo-reveal-y: var(--milo-work-reveal-y-base);
  --milo-reveal-blur: var(--milo-work-reveal-blur-copy);
}

.milo-page-work .milo-page-work__cta .milo-cta__link.milo-reveal {
  --milo-delay: var(--milo-work-delay-3);
  --milo-reveal-y: var(--milo-work-reveal-y-copy);
  --milo-reveal-blur: var(--milo-work-reveal-blur-copy);
}
/* #endregion CTA */

/* #endregion 0.5) WORK PAGE REVEAL CASCADE */

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

.milo-page-work .milo-inner {
  position: relative;
  z-index: 1;
}
/* #endregion 1) PAGE SHELL */

/* #region 2) HERO */
.milo-page-work .milo-page-work__hero {
  min-height: var(--milo-work-hero-min-height);
  --milo-section-pad-top: var(--milo-work-hero-pad-top);
  --milo-section-pad-bottom: var(--milo-work-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-section-after-display: block;
  --milo-section-after-bg: var(--milo-section-fade-to-lift);
}
/* #endregion 2) HERO */

/* #region 3) CASE STUDY PREVIEW */
.milo-page-work .milo-page-work__case-study {
  --milo-section-pad-top: var(--milo-work-case-study-pad-top);
  --milo-section-pad-bottom: var(--milo-work-case-study-pad-bottom);

  --milo-section-bg: var(--milo-bg-base);
  --milo-section-before-display: block;
  --milo-section-before-bg: var(--milo-section-surface-lift);
}
/* #endregion 3) CASE STUDY PREVIEW */

/* #region 4) CREDIBILITY */
.milo-page-work .milo-page-work__credibility {
  --milo-section-pad-top: var(--milo-work-credibility-pad-top);
  --milo-section-pad-bottom: var(--milo-work-credibility-pad-bottom);

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

/* #region 5) APPROACH */
.milo-page-work .milo-page-work__approach {
  --milo-section-pad-top: var(--milo-work-approach-pad-top);
  --milo-section-pad-bottom: var(--milo-work-approach-pad-bottom);

  --milo-section-bg: var(--milo-bg-base);
}
/* #endregion 5) APPROACH */

/* #region 6) PROOF STRIP */
.milo-page-work .milo-page-work__proof {
  --milo-section-pad-top: var(--milo-work-proof-pad-top);
  --milo-section-pad-bottom: var(--milo-work-proof-pad-bottom);

  --milo-section-bg: var(--milo-bg-base);
}
/* #endregion 6) PROOF STRIP */

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

/* #region 8) RESPONSIVE */
@media (max-width: 1024px) {
  .milo-page-work {
    --milo-work-hero-min-height: clamp(320px, 56vh, 440px);
  }
}

@media (max-width: 479.98px) {
  .milo-page-work {
    --milo-work-hero-min-height: clamp(250px, 56vh, 350px);
  }
}
/* #endregion 8) RESPONSIVE */

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

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

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

    --milo-work-reveal-y-media: 0px;
    --milo-work-reveal-blur-media: 0px;

    --milo-work-reveal-y-credibility: 0px;
    --milo-work-reveal-blur-credibility: 0px;

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

  .milo-page-work .milo-reveal,
  .milo-page-work .milo-media-frame,
  .milo-page-work .milo-case-study-preview__card,
  .milo-page-work .milo-credibility,
  .milo-page-work .milo-proof,
  .milo-page-work .milo-cta {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}
/* #endregion 9) REDUCED MOTION */