/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-hero.css
   Layer: Hero Module (Above-the-Fold Authority)
   Version: 4.0
========================================================= */

/* #region 0) HERO TOKENS */
.milo-hero {
  /* Image / media tuning */
  --milo-hero-image-opacity: 1;
  --milo-hero-image-saturate: 0.82;
  --milo-hero-image-contrast: 1.04;
  --milo-hero-image-brightness: 0.76;
  --milo-hero-image-scale: 1;

  /* Background fallback */
  --milo-hero-base: var(--milo-bg-hero);

  --milo-hero-image: none;
  --milo-hero-image-position: center center;
  --milo-hero-image-size: cover;
  --milo-hero-image-repeat: no-repeat;

  /* Content width + rhythm */
  --milo-hero-inner-pad-inline: clamp(32px, 6vw, 120px);
  --milo-hero-content-max: 780px;
  --milo-hero-title-max: 16ch;
  --milo-hero-subline-max: 42rem;
  --milo-hero-actions-gap: 14px;
  --milo-hero-actions-margin-top: clamp(12px, 2vw, 18px);
  --milo-hero-link-gap: 8px;
  --milo-hero-link-color: var(--milo-text-soft);

  /* Vertical spacing */
  --milo-hero-pad-top: clamp(140px, 18vh, 220px);
  --milo-hero-pad-bottom: clamp(120px, 16vh, 200px);

  /* Height */
  --milo-hero-min-h: auto;

  /* #region 6.7) HERO OVERLAYS + HERO FADES */

  --milo-h-overlay: linear-gradient(
    180deg,
    rgb(10 10 11 / 0.86) 0%,
    rgb(10 10 11 / 0.56) 28%,
    rgb(10 10 11 / 0.34) 52%,
    rgb(18 18 20 / 0.94) 100%
  );

  --milo-h-overlay-strong: linear-gradient(
    180deg,
    rgb(10 10 11 / 0.9) 0%,
    rgb(10 10 11 / 0.62) 28%,
    rgb(10 10 11 / 0.34) 52%,
    rgb(10 10 11 / 0.08) 78%,
    rgb(10 10 11 / 0) 100%
  );

  --milo-h-overlay-light-anchor: linear-gradient(
    100deg,
    rgb(255 255 255 / 0.06) 0%,
    rgb(255 255 255 / 0.03) 35%,
    rgb(255 255 255 / 0.012) 55%,
    rgb(255 255 255 / 0) 75%
  );

  --milo-h-overlay-fade-bottom: linear-gradient(
    180deg,
    var(--milo-bg-base-0) 62%,
    var(--milo-bg-base-18) 74%,
    var(--milo-bg-base-42) 84%,
    var(--milo-bg-base-72) 92%,
    var(--milo-bg-base) 100%
  );

  --milo-hero-bg-overlay: var(--milo-h-overlay);

  /* #endregion 6.7) HERO OVERLAYS + HERO FADES */

  /* Title / subline polish */
  --milo-hero-title-text-shadow: 0 1px 2px var(--milo-shadow-color-45);
  --milo-hero-title-text-wrap: balance;
  --milo-hero-subline-text-wrap: pretty;

  /* Subtle hero devices */
  --milo-hero-fade-h: 160px;
  --milo-hero-field-left: var(--milo-section-field-left-soft);
  --milo-hero-field-right: var(--milo-section-field-right-soft);
  --milo-hero-rule-color: rgb(255 255 255 / 0.06);
  --milo-hero-rule-offset-bottom: calc(var(--milo-space-md) * -1);

  /* Editorial variant defaults */
  --milo-hero-editorial-pad-top: clamp(108px, 12vh, 144px);
  --milo-hero-editorial-pad-bottom: clamp(68px, 8vh, 96px);
  --milo-hero-editorial-content-max: 54rem;
  --milo-hero-editorial-title-max: 18ch;
  --milo-hero-editorial-subline-max: 44ch;
  --milo-hero-editorial-subline-margin-bottom: 10px;
  --milo-hero-editorial-actions-margin-top: 8px;
  --milo-hero-editorial-actions-gap: 6px;

  /* Feature variant defaults */
  --milo-hero-feature-pad-top: clamp(132px, 16vh, 196px);
  --milo-hero-feature-pad-bottom: clamp(96px, 12vh, 152px);
  --milo-hero-feature-title-max: 16ch;
  --milo-hero-feature-subline-max: 36ch;
  --milo-hero-feature-grid-gap-tablet: var(--milo-space-xl);

  /* Compact variant defaults */
  --milo-hero-compact-pad-top: clamp(104px, 12vh, 144px);
  --milo-hero-compact-pad-bottom: clamp(72px, 9vh, 112px);
  --milo-hero-compact-content-max: 700px;
  --milo-hero-compact-subline-max: 46ch;

  /* Motion */
  --milo-hero-transition-dur: 220ms;
  --milo-hero-transition-ease: var(--milo-ease, ease);

  position: relative;
  isolation: isolate;
  min-height: var(--milo-hero-min-h);
  /* background-color: var(--milo-hero-base); */
  color: var(--milo-text);
}
/* #endregion */

/* #region 1) HERO BASE */
.milo-hero,
.milo-hero::before,
.milo-hero::after {
  box-sizing: border-box;
}

.milo-hero .milo-inner {
  position: relative;
  z-index: 2;
  padding-inline: var(--milo-hero-inner-pad-inline);
}

.milo-hero.milo-flush .milo-inner {
  padding-top: var(--milo-hero-pad-top);
  padding-bottom: var(--milo-hero-pad-bottom);
}

.milo-hero .milo-heading-group {
  max-width: var(--milo-hero-content-max);
}

.milo-hero__title,
.milo-hero__subline,
.milo-hero__actions {
  min-width: 0;
}
/* #endregion */

/* #region 2) HERO BACKGROUND LAYER */
.milo-hero__bg {
  position: relative;
  overflow: hidden;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--milo-hero-base);
  background-image: var(--milo-hero-image);
  background-position: var(--milo-hero-image-position);
  background-size: var(--milo-hero-image-size);
  background-repeat: var(--milo-hero-image-repeat);
  transition:
    background-color var(--milo-hero-transition-dur)
      var(--milo-hero-transition-ease),
    background-image var(--milo-hero-transition-dur)
      var(--milo-hero-transition-ease);
}

.milo-hero__img,
.milo-hero__bg img,
.milo-hero__bg video,
.milo-hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.milo-hero__img,
.milo-hero__bg img,
.milo-hero__bg video {
  opacity: var(--milo-hero-image-opacity);
  transform: scale(var(--milo-hero-image-scale));
  transform-origin: center center;
  filter: saturate(var(--milo-hero-image-saturate))
    contrast(var(--milo-hero-image-contrast))
    brightness(var(--milo-hero-image-brightness));
}

.milo-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--milo-hero-bg-overlay);
}
/* #endregion */

/* #region 2.5) HERO OVERLAY MODIFIERS */
.milo-hero--strong .milo-hero__bg,
.milo-hero__bg--strong {
  --milo-hero-bg-overlay:
    var(--milo-h-overlay-light-anchor), var(--milo-h-overlay-strong),
    var(--milo-h-overlay-fade-bottom);
}

.milo-hero--soft .milo-hero__bg,
.milo-hero__bg--soft {
  --milo-hero-bg-overlay:
    var(--milo-h-overlay-light-anchor), var(--milo-h-overlay),
    var(--milo-h-overlay-fade-bottom);
}

.milo-hero--no-light .milo-hero__bg,
.milo-hero__bg--no-light {
  --milo-hero-bg-overlay:
    var(--milo-h-overlay-strong), var(--milo-h-overlay-fade-bottom);
}
/* #endregion */

/* #region 3) SHARED SUB-ELEMENTS */
.milo-hero__title h1 {
  max-width: var(--milo-hero-title-max);
  text-shadow: var(--milo-hero-title-text-shadow);
  text-wrap: var(--milo-hero-title-text-wrap);
}

.milo-hero__subline {
  margin-inline: 0;
  max-width: 100%;
}

.milo-hero__subline p {
  max-width: var(--milo-hero-subline-max);
  text-wrap: var(--milo-hero-subline-text-wrap);
}

.milo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--milo-hero-actions-gap);
  margin-top: var(--milo-hero-actions-margin-top);
}

.milo-hero__link a,
.milo-hero-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--milo-hero-link-gap);
  white-space: nowrap;
  color: var(--milo-hero-link-color) !important;
}
/* #endregion */

/* #region 4) IMAGE-BACKGROUND HELPER */
.milo-hero--image-bg {
  overflow: clip;
}

.milo-hero--image-bg .milo-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.milo-hero--image-bg .milo-hero__bg::after {
  pointer-events: none;
}

.milo-hero--image-bg .milo-inner {
  position: relative;
  z-index: 2;
}

.milo-hero--image-bg .milo-inner,
.milo-hero--image-bg .milo-inner * {
  pointer-events: auto;
}
/* #endregion */

/* #region 5) SUBTLE HERO DEVICE FOUNDATION */
.milo-hero--fade-bottom,
.milo-hero--field-left,
.milo-hero--field-right,
.milo-hero--rule {
  overflow: clip;
}

.milo-hero--field-left::before,
.milo-hero--field-right::before,
.milo-hero--fade-bottom::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
/* #endregion */

/* #region 6) HERO SHAPING DEVICES */
.milo-hero--field-left::before {
  inset: 0;
  z-index: 0;
  background: var(--milo-hero-field-left);
}

.milo-hero--field-right::before {
  inset: 0;
  z-index: 0;
  background: var(--milo-hero-field-right);
}

.milo-hero--fade-bottom::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--milo-hero-fade-h);
  z-index: 1;
  background: var(--milo-h-overlay-fade-bottom);
}

.milo-hero--rule .milo-inner {
  position: relative;
}

.milo-hero--rule .milo-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--milo-hero-rule-offset-bottom);
  height: 1px;
  pointer-events: none;
  background: var(--milo-hero-rule-color);
}
/* #endregion */

/* #region 7) VARIANTS */

/* #region 7.1) VARIANT EDITORIAL */
.milo-hero--editorial {
  --milo-hero-pad-top: var(--milo-hero-editorial-pad-top);
  --milo-hero-pad-bottom: var(--milo-hero-editorial-pad-bottom);
  --milo-hero-min-h: auto;
  --milo-hero-content-max: var(--milo-hero-editorial-content-max);
  --milo-hero-title-max: var(--milo-hero-editorial-title-max);
  --milo-hero-subline-max: var(--milo-hero-editorial-subline-max);
  --milo-hero-actions-margin-top: var(--milo-hero-editorial-actions-margin-top);
  --milo-hero-actions-gap: var(--milo-hero-editorial-actions-gap);
}

.milo-hero--editorial .milo-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.milo-hero--editorial .milo-hero__subline {
  margin-bottom: var(--milo-hero-editorial-subline-margin-bottom);
}
/* #endregion */

/* #region 7.2) VARIANT FEATURE */
.milo-hero--feature {
  --milo-hero-pad-top: var(--milo-hero-feature-pad-top);
  --milo-hero-pad-bottom: var(--milo-hero-feature-pad-bottom);
  --milo-hero-min-h: auto;
  --milo-hero-title-max: var(--milo-hero-feature-title-max);
  --milo-hero-subline-max: var(--milo-hero-feature-subline-max);
}

.milo-hero--feature .milo-grid {
  align-items: start;
}

.milo-hero--feature .milo-grid__lead,
.milo-hero--feature .milo-grid__aside {
  min-width: 0;
}
/* #endregion */

/* #region 7.3) VARIANT COMPACT */
.milo-hero--compact {
  --milo-hero-pad-top: var(--milo-hero-compact-pad-top);
  --milo-hero-pad-bottom: var(--milo-hero-compact-pad-bottom);
  --milo-hero-min-h: auto;
  --milo-hero-content-max: var(--milo-hero-compact-content-max);
  --milo-hero-subline-max: var(--milo-hero-compact-subline-max);
}
/* #endregion */

/* #region 7.4) VARIANT CENTER */
.milo-hero--center {
  text-align: center;
}

.milo-hero--center .milo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.milo-hero--center .milo-heading-group {
  margin-inline: auto;
}

.milo-hero--center .milo-hero__title h1,
.milo-hero--center .milo-hero__subline p {
  margin-inline: auto;
  text-align: center;
}

.milo-hero--center .milo-hero__subline {
  margin-inline: auto;
}

.milo-hero--center .milo-hero__actions {
  justify-content: center;
}
/* #endregion */

/* #endregion */

/* #region 8) LOAD SAFETY */
html:not(.milo-loaded) .milo-hero .milo-hero__bg,
html:not(.milo-loaded) .milo-hero .milo-media,
html:not(.milo-loaded) .milo-hero .milo-media img,
html:not(.milo-loaded) .milo-hero .elementor-background-video-container,
html:not(.milo-loaded) .milo-hero .elementor-background-slideshow {
  transition: none !important;
}

.milo-hero .elementor-background-video-container,
.milo-hero .elementor-background-slideshow {
  background-color: var(--milo-hero-base) !important;
}
/* #endregion */

/* #region 9) TITLE STABILITY */
html:not(.milo-fonts-ready) .milo-hero__title h1 {
  opacity: 0 !important;
  transform: translateY(6px);
}

html.milo-fonts-ready .milo-hero__title h1,
html.milo-loaded:not(.milo-fonts-ready) .milo-hero__title h1 {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 620ms var(--milo-ease),
    transform 620ms var(--milo-ease);
}

html.milo-loaded:not(.milo-fonts-ready) .milo-hero__title h1 {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.milo-fonts-ready) .milo-hero__title h1 {
    opacity: 1 !important;
    transform: none;
  }

  html.milo-fonts-ready .milo-hero__title h1,
  html.milo-loaded:not(.milo-fonts-ready) .milo-hero__title h1 {
    transition: none;
  }
}
/* #endregion */

/* #region 10) RESPONSIVE */

@media (max-width: 1199.98px) {
  .milo-hero {
    --milo-hero-actions-margin-top: clamp(14px, 3vw, 24px);

    --milo-hero-editorial-pad-top: clamp(102px, 11vh, 132px);
    --milo-hero-editorial-pad-bottom: clamp(64px, 7vh, 84px);
    --milo-hero-editorial-title-max: 17ch;
    --milo-hero-editorial-subline-max: 42ch;

    --milo-hero-feature-pad-top: clamp(120px, 14vh, 168px);
    --milo-hero-feature-pad-bottom: clamp(84px, 10vh, 128px);
    --milo-hero-feature-title-max: 15ch;
    --milo-hero-feature-subline-max: 34ch;

    --milo-hero-compact-pad-top: clamp(96px, 11vh, 128px);
    --milo-hero-compact-pad-bottom: clamp(64px, 8vh, 96px);
  }
}

@media (max-width: 1024px) {
  .milo-hero {
    --milo-hero-actions-gap: 12px;

    --milo-hero-editorial-title-max: 18ch;
    --milo-hero-editorial-subline-max: 34ch;

    --milo-hero-feature-title-max: 14ch;
    --milo-hero-feature-subline-max: 32ch;

    --milo-hero-compact-subline-max: 40ch;
  }

  .milo-hero--feature .milo-grid {
    gap: var(--milo-hero-feature-grid-gap-tablet);
  }
}

@media (max-width: 767.98px) {
  .milo-hero {
    --milo-hero-fade-h: 120px;
    --milo-hero-actions-gap: 12px;

    --milo-hero-editorial-pad-top: clamp(104px, 12vh, 132px);
    --milo-hero-editorial-pad-bottom: clamp(72px, 9vh, 104px);
    --milo-hero-editorial-title-max: 16.5ch;
    --milo-hero-editorial-subline-max: 38ch;

    --milo-hero-feature-pad-top: clamp(104px, 12vh, 132px);
    --milo-hero-feature-pad-bottom: clamp(72px, 9vh, 104px);
    --milo-hero-feature-title-max: 13ch;
    --milo-hero-feature-subline-max: 32ch;

    --milo-hero-compact-pad-top: clamp(92px, 10vh, 120px);
    --milo-hero-compact-pad-bottom: clamp(60px, 7vh, 88px);
    --milo-hero-compact-subline-max: 40ch;
  }
}

@media (max-width: 479.98px) {
  .milo-hero {
    --milo-hero-fade-h: 96px;
    --milo-hero-actions-gap: 10px;

    --milo-hero-editorial-pad-top: clamp(92px, 13vh, 116px);
    --milo-hero-editorial-pad-bottom: clamp(56px, 7vh, 80px);
    --milo-hero-editorial-title-max: 15ch;
    --milo-hero-editorial-subline-max: 34ch;

    --milo-hero-feature-pad-top: clamp(92px, 13vh, 116px);
    --milo-hero-feature-pad-bottom: clamp(56px, 7vh, 80px);
    --milo-hero-feature-title-max: 15ch;
    --milo-hero-feature-subline-max: 32ch;

    --milo-hero-compact-pad-top: clamp(84px, 10vh, 108px);
    --milo-hero-compact-pad-bottom: clamp(52px, 6vh, 72px);
  }
}

/* #endregion */

/* #region 11) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-hero,
  .milo-hero::before,
  .milo-hero::after,
  .milo-hero .milo-inner,
  .milo-hero .milo-hero__bg,
  .milo-hero .milo-hero__bg::after,
  .milo-hero .milo-hero__actions,
  .milo-hero .milo-hero__link a,
  .milo-hero .milo-hero-link a {
    transition: none !important;
    animation: none !important;
  }
  .milo-hero__img,
  .milo-hero__bg img,
  .milo-hero__bg video {
    transform: none !important;
  }
}
/* #endregion */