/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-cards.css
   Layer: Card System
   Version: 3.0

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s card system:
   - Shared card surface, border, radius, and elevation
   - Interactive hover / active / focus behavior
   - Variants:
     - minimal
     - soft
   - Composition helpers:
     - media-top
     - media-bottom
     - tight
   - Divider utility
   - Card-contained media safety
   - Reduced-motion behavior

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Card geometry and surface treatment
   - Interactive lift / press behavior
   - Card focus treatment
   - Variant-specific surface logic
   - Internal card flow helpers
   - Card-contained media neutralization
   - Divider utility inside cards

   Does NOT own:
   - Typography hierarchy
   - Section-level spacing or composition
   - Global media frame styling
   - Page/module-specific art direction
   - Grid/layout engine behavior outside card internals
========================================================= */

/* #region 0) COMPONENT TOKENS */
.milo-card {
  /* Geometry */
  --milo-card-radius: var(--milo-radius-lg);

  /* Base surface */
  --milo-card-bg: var(--milo-surface-tint-1);
  --milo-card-border-color: var(--milo-border-soft);

  /* Elevation + interaction */
  --milo-card-shadow-base: var(--milo-elev-1);
  --milo-card-shadow-hover: var(--milo-elev-card-hover);
  --milo-card-border-color-hover: var(--milo-pink-wash);

  --milo-card-lift: var(--milo-lift-sm);
  --milo-card-press: var(--milo-press-xs);

  /* Focus */
  --milo-card-focus-strong: var(--milo-focus-strong);
  --milo-card-focus-soft: var(--milo-focus-soft);
  --milo-card-outline-w: var(--milo-outline-w);
  --milo-card-outline-offset: var(--milo-outline-offset);

  /* Media treatment */
  --milo-card-media-radius-inset: var(--milo-radius-2xs);
  --milo-card-media-lift: var(--milo-lift-xs);

  /* Soft variant */
  --milo-card-soft-inset: var(--milo-surface-tint-1);
  --milo-card-soft-top: var(--milo-surface-tint-2);
  --milo-card-soft-mid: var(--milo-surface-tint-3);
  --milo-card-soft-end: transparent;
  --milo-card-soft-bg: var(--milo-surface-grad-soft);
  --milo-card-soft-shadow: inset 0 0 0 1px var(--milo-card-soft-inset);

  /* Internal composition */
  --milo-card-pad: var(--milo-space-md);
  --milo-card-pad-sm: var(--milo-space-md);
  --milo-card-pad-lg: var(--milo-space-xl);
  --milo-card-pad-tight: var(--milo-space-sm);

  --milo-card-gap: var(--milo-space-sm);
  --milo-card-gap-tight: var(--milo-space-xs);
  --milo-card-media-gap: var(--milo-space-md);

  /* Utilities */
  --milo-card-divider-margin: var(--milo-space-md);
  --milo-card-divider-color: var(--milo-divider, var(--milo-card-border-color));

  /* Active/current consumed values */
  --milo-card-bg-current: var(--milo-card-bg);
  --milo-card-border-current: var(--milo-card-border-color);
  --milo-card-shadow-current: var(--milo-card-shadow-base);
  --milo-card-shadow-hover-current: var(--milo-card-shadow-hover);
  --milo-card-hover-shift: calc(-1 * var(--milo-card-lift));
  --milo-card-active-shift: calc(
    -1 * (var(--milo-card-lift) - var(--milo-card-press))
  );

  /* Motion */
  --milo-card-transition-dur: var(--milo-med);
  --milo-card-transition-ease: var(--milo-ease);
}
/* #endregion */

/* #region 1) ELEMENTOR INNER WRAPPER FIX */
.milo-card,
.milo-card > .e-con-inner {
  border-radius: var(--milo-card-radius);
}

.milo-card > .e-con-inner {
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-clip: padding-box;
}
/* #endregion */

/* #region 2) BASE CARD */
.milo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--milo-card-gap);
  height: auto;
  min-height: 0;

  padding: var(--milo-card-pad);
  border-radius: var(--milo-card-radius);
  border: 1px solid var(--milo-card-border-current);
  background: var(--milo-card-bg-current);
  box-shadow: var(--milo-card-shadow-current);

  transition:
    border-color var(--milo-card-transition-dur)
      var(--milo-card-transition-ease),
    background var(--milo-card-transition-dur) var(--milo-card-transition-ease),
    box-shadow var(--milo-card-transition-dur) var(--milo-card-transition-ease),
    transform var(--milo-card-transition-dur) var(--milo-card-transition-ease);

  will-change: transform;
}

.milo-card--sm {
  padding: var(--milo-card-pad-sm);
}

.milo-card--lg {
  padding: var(--milo-card-pad-lg);
}
/* #endregion */

/* #region 3) INTERACTIVE DETECTION */
.milo-card.milo-card--interactive {
  cursor: pointer;
}

@supports selector(.milo-card:has(a)) {
  .milo-card:has(a) {
    cursor: pointer;
  }
}
/* #endregion */

/* #region 4) INTERACTIVE STATES */
.milo-card.milo-card--interactive:hover {
  transform: translateY(var(--milo-card-hover-shift));
  box-shadow: var(--milo-card-shadow-hover-current);
  border-color: var(--milo-card-border-color-hover);
}

@supports selector(.milo-card:has(a)) {
  .milo-card:has(a):hover {
    transform: translateY(var(--milo-card-hover-shift));
    box-shadow: var(--milo-card-shadow-hover-current);
    border-color: var(--milo-card-border-color-hover);
  }
}

.milo-card.milo-card--interactive:active {
  transform: translateY(var(--milo-card-active-shift));
}

@supports selector(.milo-card:has(a)) {
  .milo-card:has(a):active {
    transform: translateY(var(--milo-card-active-shift));
  }
}

.milo-card.milo-card--interactive:focus-visible {
  outline: var(--milo-card-outline-w) solid var(--milo-card-focus-strong);
  outline-offset: var(--milo-card-outline-offset);
  border-radius: var(--milo-card-radius);
}

.milo-card:focus-within {
  outline: var(--milo-card-outline-w) solid var(--milo-card-focus-soft);
  outline-offset: var(--milo-card-outline-offset);
  border-radius: var(--milo-card-radius);
}
/* #endregion */

/* #region 5) VARIANTS */

/* #region 5A) MINIMAL */
.milo-card.milo-card--minimal {
  --milo-card-bg-current: transparent;
  --milo-card-border-current: transparent;
  --milo-card-shadow-current: none;
  --milo-card-shadow-hover-current: none;
}

.milo-card.milo-card--minimal {
  border: 0;
}

.milo-card.milo-card--minimal.milo-card--interactive:hover {
  transform: translateY(calc(-1 * var(--milo-card-media-lift)));
  box-shadow: none;
}

@supports selector(.milo-card:has(a)) {
  .milo-card.milo-card--minimal:has(a):hover {
    transform: translateY(calc(-1 * var(--milo-card-media-lift)));
    box-shadow: none;
  }
}
/* #endregion */

/* #region 5B) SOFT */
.milo-card.milo-card--soft {
  --milo-card-bg-current: var(--milo-card-soft-bg);
  --milo-card-border-current: transparent;
  --milo-card-shadow-current: var(--milo-card-soft-shadow);
  --milo-card-shadow-hover-current: var(--milo-card-soft-shadow);

  border: 0;
}
/* #endregion */

/* #endregion */

/* #region 6) COMPOSITION HELPERS */
/* #region 6A) MEDIA TOP */
.milo-card.milo-card--media-top {
  display: flex;
  flex-direction: column;
}

.milo-card.milo-card--media-top > :first-child {
  margin-bottom: calc(var(--milo-card-media-gap) - var(--milo-card-gap));
}

.milo-card.milo-card--media-top > .e-con-inner {
  display: flex;
  flex-direction: column;
  gap: var(--milo-card-gap);
}
/* #endregion */

/* #region 6B) MEDIA BOTTOM */
.milo-card.milo-card--media-bottom {
  display: flex;
  flex-direction: column;
}

.milo-card.milo-card--media-bottom > :last-child {
  margin-top: calc(var(--milo-card-media-gap) - var(--milo-card-gap));
}

.milo-card.milo-card--media-bottom > .e-con-inner {
  display: flex;
  flex-direction: column;
  gap: var(--milo-card-gap);
}
/* #endregion */

/* #region 6C) TIGHT */
.milo-card.milo-card--tight {
  padding: var(--milo-card-pad-tight);
  gap: var(--milo-card-gap-tight);
}

.milo-card.milo-card--tight > .e-con-inner {
  gap: var(--milo-card-gap-tight);
}

.milo-card.milo-card--tight .milo-card-divider {
  margin: var(--milo-card-gap-tight) 0;
}
/* #endregion */

/* #endregion */

/* #region 7) CARD-CONTAINED MEDIA SAFETY */
.milo-card .milo-media-frame {
  background: none;
  border: none;
  box-shadow: none;
}

.milo-card.milo-card--media-top .milo-media-frame,
.milo-card.milo-card--media-bottom .milo-media-frame {
  box-shadow: none;
}
/* #endregion */

/* #region 8) UTILITIES */
.milo-card .milo-card-divider {
  height: 1px;
  margin: var(--milo-card-divider-margin) 0;
  background: var(--milo-card-divider-color);
}
/* #endregion */

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

  .milo-card.milo-card--interactive:hover,
  .milo-card.milo-card--interactive:active {
    transform: none !important;
    box-shadow: var(--milo-card-shadow-current) !important;
    border-color: var(--milo-card-border-current) !important;
  }

  @supports selector(.milo-card:has(a)) {
    .milo-card:has(a):hover,
    .milo-card:has(a):active {
      transform: none !important;
      box-shadow: var(--milo-card-shadow-current) !important;
      border-color: var(--milo-card-border-current) !important;
    }
  }
}
/* #endregion */