/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-cta.css
   Layer: CTA Module (Split + Stacked + Centered)
   Version: 3.0

   PURPOSE
   ----------------------------------------------------------------
   Provides a flexible call-to-action module that supports:
   - Split CTA layout (copy + actions)
   - Stacked editorial CTA layout
   - Centered heading presentation
   - Decorative rule element
   - CTA-specific tinting for headline and link treatments
   - Subline behavior within CTA compositions

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - CTA-scoped color knobs
   - CTA internal split layout behavior
   - Stacked variant adjustments
   - Center variant adjustments
   - Rule element styling
   - CTA-specific headline/link tinting
   - CTA subline alignment and spacing cleanup
   - CTA responsive behavior

   Does NOT own:
   - Global grid primitive behavior
   - Global button styling and variants
   - Global link underline behavior
   - Global typography scale
   - Global section spacing and containment
   - Page-level art direction
========================================================= */

/* #region 0) CTA TOKENS */
.milo-cta {
  /* Color */
  --milo-cta-headline-color: var(--milo-text);
  --milo-cta-link-color: var(--milo-pink-strong);
  --milo-cta-subline-color: var(--milo-text-soft);
  --milo-cta-rule-color: var(--milo-pink-wash);

  /* Rule */
  --milo-cta-rule-width: 56px;
  --milo-cta-rule-height: 1px;
  --milo-cta-rule-margin-bottom: 0;

  /* Shared sizing */
  --milo-cta-stack-max: 560px;
  --milo-cta-center-max: 620px;
  --milo-cta-actions-max: 420px;
  --milo-cta-title-max-stacked: 22ch;
  --milo-cta-title-max-center: 18ch;
  --milo-cta-subline-max-stacked: 38ch;
  --milo-cta-subline-max-center: 34ch;

  /* Shared spacing */
  --milo-cta-split-gap: clamp(32px, 4vw, 72px);
  --milo-cta-head-gap: clamp(14px, 1.6vw, 18px);
  --milo-cta-center-gap: clamp(14px, 1.8vw, 20px);
  --milo-cta-center-head-gap: clamp(12px, 1.4vw, 16px);
  --milo-cta-btn-margin-top-stacked: 12px;
  --milo-cta-link-margin-top-stacked: -6px;
  --milo-cta-btn-margin-top-center: 4px;
  --milo-cta-link-margin-top-center: 2px;

  /* Alignment */
  --milo-cta-actions-justify: end;
  --milo-cta-head-align: flex-start;
  --milo-cta-head-text-align: left;
  --milo-cta-center-align: start;
  --milo-cta-btn-align: start;
  --milo-cta-link-align: start;

  /* Split layout */
  --milo-cta-split-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  --milo-cta-split-align: center;

  /* Button padding hook */
  --milo-cta-button-padding-inline-mobile: 18px;

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

  position: relative;
  overflow: hidden;
}
/* #endregion */

/* #region 1) SPLIT LAYOUT */
.milo-cta__split {
  --milo-grid-cols-def: var(--milo-cta-split-columns);
  --milo-grid-align: var(--milo-cta-split-align);
  gap: var(--milo-cta-split-gap);
}

.milo-cta__actions {
  justify-self: var(--milo-cta-actions-justify);
  width: min(100%, var(--milo-cta-actions-max));
}
/* #endregion */

/* #region 2) STACKED VARIANT */
.milo-cta--stacked .milo-cta__stack {
  max-width: var(--milo-cta-stack-max);
}

.milo-cta--stacked .milo-cta__head {
  gap: var(--milo-cta-head-gap);
}

.milo-cta--stacked .milo-cta__title h2 {
  width: 100%;
  max-width: var(--milo-cta-title-max-stacked);
  margin: 0;
  text-align: var(--milo-cta-head-text-align);
}

.milo-cta--stacked .milo-cta__subline {
  width: 100%;
  margin: 0;
}

.milo-cta--stacked .milo-cta__subline p {
  max-width: var(--milo-cta-subline-max-stacked);
  margin: 0;
  text-align: var(--milo-cta-head-text-align);
  padding-left: 0;
}

.milo-cta--stacked .milo-cta__btn {
  width: auto;
  min-width: 0;
  margin-top: var(--milo-cta-btn-margin-top-stacked);
}

.milo-cta--stacked .milo-cta__link {
  margin-top: var(--milo-cta-link-margin-top-stacked);
}
/* #endregion */

/* #region 3) CENTER VARIANT */
.milo-cta--center .milo-cta__center {
  width: min(100%, var(--milo-cta-center-max));
  margin-inline: auto;
  gap: var(--milo-cta-center-gap);
  align-items: var(--milo-cta-center-align);
}

.milo-cta--center .milo-cta__head {
  display: flex;
  flex-direction: column;
  align-items: var(--milo-cta-head-align);
  gap: var(--milo-cta-center-head-gap);
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  text-align: var(--milo-cta-head-text-align);
}

.milo-cta--center .milo-cta__rule {
  margin-bottom: var(--milo-cta-rule-margin-bottom);
}

.milo-cta--center .milo-cta__title h2 {
  width: 100%;
  max-width: var(--milo-cta-title-max-center);
  margin: 0;
  text-align: var(--milo-cta-head-text-align);
}

.milo-cta--center .milo-cta__subline {
  width: 100%;
  margin: 0;
}

.milo-cta--center .milo-cta__subline p {
  max-width: var(--milo-cta-subline-max-center);
  margin: 0;
  text-align: var(--milo-cta-head-text-align);
  padding-left: 0;
}

.milo-cta--center .milo-cta__btn {
  align-self: var(--milo-cta-btn-align);
  width: auto;
  min-width: 0;
  margin-top: var(--milo-cta-btn-margin-top-center);
}

.milo-cta--center .milo-cta__btn .elementor-button {
  min-width: 0;
}

.milo-cta--center .milo-cta__link {
  align-self: var(--milo-cta-link-align);
  margin-top: var(--milo-cta-link-margin-top-center);
  text-align: var(--milo-cta-head-text-align);
}
/* #endregion */

/* #region 4) RULE ELEMENT */
.milo-cta__rule {
  display: block;
  margin-bottom: var(--milo-cta-rule-margin-bottom);
  --divider-border-width: 0;
}

.milo-cta__rule .elementor-divider {
  flex: 0 0 auto;
  width: var(--milo-cta-rule-width);
}

.milo-cta__rule .elementor-divider .elementor-divider-separator {
  height: var(--milo-cta-rule-height);
  min-height: var(--milo-cta-rule-height);
  background-color: var(--milo-cta-rule-color);
  --divider-color: none;
}
/* #endregion */

/* #region 5) TINTING */
.milo-cta__title .elementor-heading-title {
  color: var(--milo-cta-headline-color);
}

.milo-cta__link a,
.milo-cta__link .elementor-heading-title {
  color: var(--milo-cta-link-color);
  text-decoration: none !important;
}
/* #endregion */

/* #region 6) SUBLINE BEHAVIOR */
.milo-cta .milo-cta__subline {
  align-self: flex-start;
  color: var(--milo-cta-subline-color);
}

.milo-cta .milo-cta__subline .elementor-widget-container {
  margin-inline: auto !important;
}

.milo-cta
  .milo-cta__subline.elementor-widget-text-editor
  .elementor-widget-container
  p {
  margin: 0;
}
/* #endregion */

/* #region 7) RESPONSIVE */

@media (max-width: 1199.98px) {
  .milo-cta {
    --milo-cta-rule-width: 60px;
    --milo-cta-stack-max: 520px;
    --milo-cta-center-max: 580px;
    --milo-cta-head-gap: 16px;
    --milo-cta-center-gap: 18px;
    --milo-cta-title-max-center: 16ch;
    --milo-cta-subline-max-stacked: 32ch;
    --milo-cta-subline-max-center: 32ch;
    --milo-cta-btn-margin-top-stacked: 10px;
    --milo-cta-link-margin-top-stacked: -4px;
  }
}

@media (max-width: 1024px) {
  .milo-cta {
    --milo-cta-split-columns: 1fr;
    --milo-cta-split-gap: 24px;
    --milo-cta-actions-justify: start;

    --milo-cta-rule-width: 56px;
    --milo-cta-stack-max: 500px;
    --milo-cta-center-max: 540px;
    --milo-cta-title-max-stacked: 18ch;
    --milo-cta-title-max-center: 18ch;
    --milo-cta-subline-max-stacked: 26ch;
    --milo-cta-subline-max-center: 26ch;
  }

  .milo-cta__actions {
    width: 100%;
    max-width: var(--milo-cta-actions-max);
  }
}

@media (max-width: 767.98px) {
  .milo-cta {
    --milo-cta-rule-width: 48px;
    --milo-cta-stack-max: 100%;
    --milo-cta-center-max: 100%;
    --milo-cta-head-gap: 14px;
    --milo-cta-center-gap: 16px;
    --milo-cta-title-max-stacked: 14ch;
    --milo-cta-title-max-center: 14ch;
    --milo-cta-subline-max-stacked: 32ch;
    --milo-cta-subline-max-center: 32ch;
    --milo-cta-btn-margin-top-stacked: 8px;
    --milo-cta-link-margin-top-stacked: 8px;
    --milo-cta-btn-margin-top-center: 8px;
    --milo-cta-link-margin-top-center: 8px;
  }
}

@media (max-width: 479.98px) {
  .milo-cta {
    --milo-cta-rule-width: 40px;
    --milo-cta-head-gap: 12px;
    --milo-cta-center-gap: 14px;
    --milo-cta-subline-max-stacked: 26ch;
    --milo-cta-subline-max-center: 26ch;
    --milo-cta-button-padding-inline-mobile: 18px;
  }

  .milo-cta--center .milo-cta__btn .elementor-button,
  .milo-cta--stacked .milo-cta__btn .elementor-button {
    padding-inline: var(--milo-cta-button-padding-inline-mobile);
  }
}

/* #endregion */

/* #region 8) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-cta,
  .milo-cta * {
    transition: none !important;
    animation: none !important;
  }
}
/* #endregion */