/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-heading-group.css
   Layer: Heading Group
   Version: 2.0

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s reusable heading block pattern:
   - Label
   - Title
   - Subline
   - Optional divider
   - Optional label rule

   This component establishes predictable internal rhythm for
   heading stacks without owning typography scale or section layout.

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Heading group internal rhythm
   - Alignment modifiers
   - Optional divider styling
   - Optional label rule styling
   - Elementor safety resets within the group
   - Subline widget normalization
   - Reduced-motion handling for heading-group-owned motion

   Does NOT own:
   - Section padding or global vertical rhythm
   - Container max-width or gutters
   - Typography scale or font hierarchy
   - Global link behavior
   - Global divider token definitions
========================================================= */

/* #region 0) COMPONENT TOKENS */
.milo-heading-group {
  /* Base rhythm */
  --milo-heading-gap: var(--milo-stack-sm);
  --milo-heading-gap-hero: var(--milo-stack-md);
  --milo-heading-gap-tight: var(--milo-gap-xs);
  --milo-heading-gap-loose: var(--milo-gap-lg);

  /* Section padding */
  --milo-heading-pad-top-section: var(--milo-stack-xl);
  --milo-heading-pad-bottom-section: var(--milo-stack-lg);
  --milo-heading-pad-top-gutter: var(--milo-stack-lg);
  --milo-heading-pad-bottom-gutter: var(--milo-stack-md);

  /* Alignment */
  --milo-heading-align-items: flex-start;
  --milo-heading-text-align: left;

  /* Divider */
  --milo-heading-divider-height: 1px;
  --milo-heading-divider-color: var(--milo-divider);
  --milo-heading-divider-opacity: 0.9;

  /* Label rules */
  --milo-heading-rule-color: var(--milo-border-subtle);
  --milo-heading-rule-opacity-under: 0.6;
  --milo-heading-rule-opacity-side: 0.55;

  --milo-heading-rule-under-pad: 0.45rem;
  --milo-heading-rule-under-w: 2.25rem;

  --milo-heading-rule-side-w: 2.25rem;
  --milo-heading-rule-side-gap: 0.7rem;
  --milo-heading-rule-side-nudge: 0;

  /* Subline */
  --milo-heading-subline-color: var(--milo-text-soft);
  --milo-heading-subline-font-family: var(--milo-sans);
  --milo-heading-subline-line-height: var(--milo-lh-body);

  /* Motion */
  --milo-heading-transition-dur: var(--milo-fast);
  --milo-heading-transition-ease: var(--milo-ease);

  display: flex;
  flex-direction: column;
  gap: var(--milo-heading-gap);
  align-items: var(--milo-heading-align-items);
  text-align: var(--milo-heading-text-align);
}
/* #endregion */

/* #region 1) BASE VARIANTS */
.milo-heading-group--hero {
  gap: var(--milo-heading-gap-hero);
}

/* Stack density only */
.milo-heading-group--tight {
  gap: var(--milo-heading-gap-tight);
}

.milo-heading-group--loose {
  gap: var(--milo-heading-gap-loose);
}

/* Padding ownership is explicit */
.milo-heading-group--no-top {
  padding-top: 0;
}

.milo-heading-group--no-bottom {
  padding-bottom: 0;
}

.milo-heading-group--section {
  padding-top: var(--milo-heading-pad-top-section);
  padding-bottom: var(--milo-heading-pad-bottom-section);
}

.milo-heading-group--gutter {
  padding-top: var(--milo-heading-pad-top-gutter);
  padding-bottom: var(--milo-heading-pad-bottom-gutter);
}
/* #endregion */

/* #region 2) ALIGNMENT MODIFIERS */
.milo-heading-group--center {
  --milo-heading-align-items: center;
  --milo-heading-text-align: center;
}

.milo-heading-group--left {
  --milo-heading-align-items: flex-start;
  --milo-heading-text-align: left;
}
/* #endregion */

/* #region 3) DIVIDER SUPPORT */
.milo-heading-group--divider .milo-heading-group__divider {
  width: 100%;
  height: var(--milo-heading-divider-height);
  background: var(--milo-heading-divider-color);
  opacity: var(--milo-heading-divider-opacity);
}
/* #endregion */

/* #region 4) ELEMENTOR SAFETY */
.milo-heading-group .elementor-widget-heading .elementor-heading-title {
  margin: 0;
}
/* #endregion */

/* #region 5) LABEL RULES */
/* Default: under-label rule */
.milo-heading-group:not(.milo-heading-group--label-rule-side)
  .milo-heading-label {
  position: relative;
  display: inline-block;
  padding-bottom: var(--milo-heading-rule-under-pad);
}

.milo-heading-group:not(.milo-heading-group--label-rule-side)
  .milo-heading-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--milo-heading-rule-under-w);
  height: 1px;
  background: var(--milo-heading-rule-color);
  opacity: var(--milo-heading-rule-opacity-under);
}

/* Explicit side rule */
.milo-heading-group--label-rule-side .milo-heading-label {
  display: inline-flex;
  align-items: center;
}

.milo-heading-group--label-rule-side .milo-heading-label::after {
  content: "";
  width: var(--milo-heading-rule-side-w);
  height: 1px;
  margin-left: var(--milo-heading-rule-side-gap);
  background: var(--milo-heading-rule-color);
  opacity: var(--milo-heading-rule-opacity-side);
  transform: translateY(var(--milo-heading-rule-side-nudge));
}
/* #endregion */

/* #region 6) SUBLINE NORMALIZATION */
.milo-heading-subline {
  color: var(--milo-heading-subline-color);
}

.milo-heading-subline.elementor-widget-text-editor .elementor-widget-container {
  font-family: var(--milo-heading-subline-font-family);
  line-height: var(--milo-heading-subline-line-height);
  color: inherit;
}

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

/* #region 7) RESPONSIVE */

@media (max-width: 1199.98px) {
  .milo-heading-group {
    --milo-heading-gap-loose: var(--milo-gap-md);
    --milo-heading-pad-top-section: var(--milo-stack-lg);
    --milo-heading-pad-bottom-section: var(--milo-stack-md);
    --milo-heading-pad-top-gutter: var(--milo-stack-md);
    --milo-heading-pad-bottom-gutter: var(--milo-stack-sm);

    --milo-heading-rule-under-w: 2rem;
    --milo-heading-rule-side-w: 2rem;
    --milo-heading-rule-side-gap: 0.6rem;
  }

  .milo-heading-group--hero {
    gap: var(--milo-gap-md);
  }
}

@media (max-width: 1024px) {
  .milo-heading-group {
    --milo-heading-gap-hero: var(--milo-stack-sm);
    --milo-heading-gap-loose: var(--milo-gap-md);
    --milo-heading-pad-top-section: var(--milo-stack-lg);
    --milo-heading-pad-bottom-section: var(--milo-stack-md);
    --milo-heading-pad-top-gutter: var(--milo-stack-md);
    --milo-heading-pad-bottom-gutter: var(--milo-stack-sm);
  }
}

@media (max-width: 767.98px) {
  .milo-heading-group {
    --milo-heading-gap: var(--milo-gap-xs);
    --milo-heading-gap-hero: var(--milo-gap-sm);
    --milo-heading-gap-loose: var(--milo-gap-sm);

    --milo-heading-pad-top-section: var(--milo-stack-md);
    --milo-heading-pad-bottom-section: var(--milo-stack-sm);
    --milo-heading-pad-top-gutter: var(--milo-stack-sm);
    --milo-heading-pad-bottom-gutter: var(--milo-gap-xs);

    --milo-heading-rule-under-w: 1.8rem;
    --milo-heading-rule-side-w: 1.8rem;
    --milo-heading-rule-side-gap: 0.5rem;
  }
}

@media (max-width: 479.98px) {
  .milo-heading-group {
    --milo-heading-gap: 0.375rem;
    --milo-heading-gap-hero: var(--milo-gap-xs);
    --milo-heading-gap-loose: var(--milo-gap-xs);

    --milo-heading-rule-under-pad: 0.35rem;
    --milo-heading-rule-under-w: 1.5rem;
    --milo-heading-rule-side-w: 1.5rem;
    --milo-heading-rule-side-gap: 0.45rem;
  }
}

/* #endregion */

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

  .milo-heading-group--label-rule-side .milo-heading-label::after {
    transform: none !important;
  }
}
/* #endregion */