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

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s media framing system:
   - A consistent “frame” treatment for images/video
   - Token-driven surface, border, inner hairline, and elevation
   - Optional interactive lift/grade on hover
   - Variants for elevated and dark contexts
   - Aspect-ratio helpers for reliable cropping
   - Safety rules to ensure media never draws its own borders/shadows

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Media frame component (.milo-media-frame)
     - radius, overflow handling
     - background + border + inner hairline
     - shadow stack and hover polish
     - interactive lift behavior (opt-in)
   - Media element safety inside frames
     - strips borders/outlines/shadows from img/video inside frames
     - enforces block display and inherited radius
   - Link-wrapped auto interaction (progressive enhancement via :has)
   - Frame variants:
     - .milo-media-frame--elevated
     - .milo-media-frame--dark
   - Aspect ratio helpers:
     - .milo-media-aspect, .milo-media-aspect--*
     - object-fit cover rules for framed media
   - Card compatibility bridge
     - prevents double-lift when a media frame sits inside an interactive card
   - Reduced-motion behavior for media interactions

   Does NOT own:
   - Global layout containment (widths, gutters, section padding)
   - Typography hierarchy
   - Global motion token values or easing curves
   - Card interaction rules (owned by milo-cards.css)
   - CTA-specific colors or tokens
========================================================= */

/* #region 0) COMPONENT TOKENS */
.milo-media-frame {
  /* Geometry */
  --milo-media-frame-pad: var(--milo-space-sm);
  --milo-media-frame-radius: var(--milo-radius-md);
  --milo-media-frame-inner-radius: calc(
    var(--milo-media-frame-radius) - var(--milo-media-frame-pad)
  );
  --milo-media-lift: var(--milo-lift-sm);

  /* Base surface */
  --milo-media-bg: var(--milo-surface-tint-1);
  --milo-media-border-color: var(--milo-divider);
  --milo-media-inner-color: var(--milo-surface-media-inner);

  /* Base shadow */
  --milo-media-shadow-base: var(--milo-shadow-media);
  --milo-media-shadow-hover: var(--milo-shadow-media-hover);

  /* Elevated variant tokens */
  --milo-media-elev-bg: var(--milo-surface-media-elevated);
  --milo-media-elev-border-color: var(--milo-border);
  --milo-media-elev-inner-color: var(--milo-surface-media-elevated-inner);
  --milo-media-elev-shadow-hover: var(--milo-elev-media-hover);

  /* Dark variant tokens */
  --milo-media-dark-bg: var(--milo-surface-media-dark);
  --milo-media-dark-border-color: var(--milo-border-media-dark);
  --milo-media-dark-inner-color: var(--milo-surface-media-dark);

  /* Hover polish */
  --milo-media-hover-sat: var(--milo-sat-103);
  --milo-media-hover-con: var(--milo-con-103);
  --milo-media-hover-sat-elev: var(--milo-sat-104);
  --milo-media-hover-con-elev: var(--milo-con-104);
  --milo-media-hover-sat-dark: var(--milo-sat-102);
  --milo-media-hover-con-dark: var(--milo-con-105);

  /* Active consumed values */
  --milo-media-frame-bg-current: var(--milo-media-bg);
  --milo-media-frame-border-current: var(--milo-media-border-color);
  --milo-media-frame-inner-current: var(--milo-media-inner-color);
  --milo-media-frame-shadow-current: var(--milo-media-shadow-base);
  --milo-media-frame-shadow-hover-current: var(--milo-media-shadow-hover);
  --milo-media-frame-hover-sat-current: var(--milo-media-hover-sat);
  --milo-media-frame-hover-con-current: var(--milo-media-hover-con);

  /* Motion */
  --milo-media-transition-dur: var(--milo-med);
  --milo-media-transition-ease: var(--milo-ease);

  box-sizing: border-box;
  position: relative;
  padding: var(--milo-media-frame-pad);
  border-radius: var(--milo-media-frame-radius);
  overflow: hidden;

  background: var(--milo-media-frame-bg-current);
  border: 1px solid var(--milo-media-frame-border-current);

  box-shadow:
    inset 0 0 0 1px var(--milo-media-frame-inner-current),
    var(--milo-media-frame-shadow-current);

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

  will-change: transform;
}
/* #endregion */

/* #region 1) MEDIA ELEMENT SAFETY */
.milo-media-frame .milo-media,
.milo-media-frame .milo-media img,
.milo-media-frame .milo-media video,
.milo-media-frame .milo-media-frame img,
.milo-media-frame .milo-media-frame video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: inherit;
}

.milo-media-frame .milo-media {
  overflow: hidden;
  border-radius: var(--milo-media-frame-inner-radius);
}

.milo-media-frame .elementor-widget-container,
.milo-media-frame .elementor-widget-image,
.milo-media-frame figure {
  max-width: 100%;
}
/* #endregion */

/* #region 2) FRAME INTERACTION */
.milo-media-frame.milo-media--interactive {
  cursor: pointer;
}

.milo-media-frame.milo-media--interactive:hover {
  transform: translateY(calc(-1 * var(--milo-media-lift)));
  filter: saturate(var(--milo-media-frame-hover-sat-current))
    contrast(var(--milo-media-frame-hover-con-current));
  box-shadow: var(--milo-media-frame-shadow-hover-current);
}

@supports selector(a:has(.milo-media-frame)) {
  a:has(.milo-media-frame) {
    display: block;
  }

  a:has(.milo-media-frame):hover .milo-media-frame {
    transform: translateY(calc(-1 * var(--milo-media-lift)));
    filter: saturate(var(--milo-media-frame-hover-sat-current))
      contrast(var(--milo-media-frame-hover-con-current));
    box-shadow: var(--milo-media-frame-shadow-hover-current);
  }
}
/* #endregion */

/* #region 3) ELEVATED VARIANT */
.milo-media-frame.milo-media-frame--elevated {
  --milo-media-frame-bg-current: var(--milo-media-elev-bg);
  --milo-media-frame-border-current: var(--milo-media-elev-border-color);
  --milo-media-frame-inner-current: var(--milo-media-elev-inner-color);
  --milo-media-frame-shadow-hover-current: var(--milo-media-elev-shadow-hover);
  --milo-media-frame-hover-sat-current: var(--milo-media-hover-sat-elev);
  --milo-media-frame-hover-con-current: var(--milo-media-hover-con-elev);
}
/* #endregion */

/* #region 4) DARK VARIANT */
.milo-media-frame.milo-media-frame--dark {
  --milo-media-frame-bg-current: var(--milo-media-dark-bg);
  --milo-media-frame-border-current: var(--milo-media-dark-border-color);
  --milo-media-frame-inner-current: var(--milo-media-dark-inner-color);
  --milo-media-frame-hover-sat-current: var(--milo-media-hover-sat-dark);
  --milo-media-frame-hover-con-current: var(--milo-media-hover-con-dark);
}
/* #endregion */

/* #region 5) ASPECT RATIO HELPERS */
/* Aspect ratio belongs to the inner media box. */
.milo-media-aspect,
.milo-media-aspect--1x1,
.milo-media-aspect--16x9,
.milo-media-aspect--4x5,
.milo-media-aspect--3x2 {
  display: block;
  overflow: hidden;
  border-radius: inherit;
}

.milo-media-aspect {
  aspect-ratio: 16 / 9;
}

.milo-media-aspect--1x1 {
  aspect-ratio: 1 / 1;
}

.milo-media-aspect--16x9 {
  aspect-ratio: 16 / 9;
}

.milo-media-aspect--4x5 {
  aspect-ratio: 4 / 5;
}

.milo-media-aspect--3x2 {
  aspect-ratio: 3 / 2;
}

/* Elementor bridge inside aspect boxes */
.milo-media-aspect .elementor-widget,
.milo-media-aspect .elementor-widget-container,
.milo-media-aspect .elementor-widget-image,
.milo-media-aspect .elementor-widget-image .elementor-image,
.milo-media-aspect figure,
[class*="milo-media-aspect--"] .elementor-widget,
[class*="milo-media-aspect--"] .elementor-widget-container,
[class*="milo-media-aspect--"] .elementor-widget-image,
[class*="milo-media-aspect--"] .elementor-widget-image .elementor-image,
[class*="milo-media-aspect--"] figure {
  width: 100%;
  height: 100%;
}

/* Actual media fill */
.milo-media-aspect img,
.milo-media-aspect video,
[class*="milo-media-aspect--"] img,
[class*="milo-media-aspect--"] video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.milo-media-aspect--contain img,
.milo-media-aspect--contain video {
  object-fit: contain;
}

.milo-media-ratio {
  width: 100%;
  overflow: hidden;
}

.milo-media-ratio__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.milo-media-ratio--article {
  aspect-ratio: 16 / 10;
}

.milo-media-ratio--article .milo-media-ratio__img {
  object-position: top center;
}

.milo-media-ratio--social {
  aspect-ratio: 1 / 1;
}

.milo-media-ratio--social .milo-media-ratio__img {
  object-position: center;
}

.milo-media-ratio--brand {
  aspect-ratio: 4 / 3;
}

.milo-media-ratio--brand .milo-media-ratio__img {
  object-position: center;
}

.milo-media-ratio--natural {
  aspect-ratio: auto;
}

.milo-media-ratio--natural .milo-media-ratio__img {
  height: auto;
  object-fit: initial;
}
/* #endregion */

/* #region 6) CARD COMPATIBILITY */
.milo-card--interactive:hover .milo-media-frame {
  transform: none;
  box-shadow: none;
  filter: saturate(1.02);
}

.milo-card--interactive:hover .milo-media-frame.milo-media-frame--elevated {
  filter: saturate(1.03) contrast(1.02);
}

.milo-card--interactive:hover .milo-media-frame.milo-media-frame--dark {
  filter: saturate(1.02) contrast(1.03);
}
/* #endregion */

/* #region 7) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-media-frame,
  .milo-media-frame *,
  a:has(.milo-media-frame) .milo-media-frame {
    transition: none !important;
    animation: none !important;
  }

  .milo-media-frame.milo-media--interactive:hover,
  a:has(.milo-media-frame):hover .milo-media-frame,
  .milo-card--interactive:hover .milo-media-frame,
  .milo-card--interactive:hover .milo-media-frame.milo-media-frame--elevated,
  .milo-card--interactive:hover .milo-media-frame.milo-media-frame--dark {
    transform: none !important;
    filter: none !important;
    box-shadow:
      inset 0 0 0 1px var(--milo-media-frame-inner-current),
      var(--milo-media-frame-shadow-current) !important;
  }
}
/* #endregion */