/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-proof-strip.css
   Layer: Proof Strip Module (Inline Proof / Metrics / Logos)
   Version: 2.0
========================================================= */

/* #region 0) TOKENS */
.milo-proof-strip {
  --milo-proof-wash-soft: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  /* Surface */
  --milo-proof-pad: var(--milo-space-sm);
  --milo-proof-bg: var(--milo-proof-wash-soft);

  /* Item tone */
  --milo-proof-item-opacity: var(--milo-o-82);
  --milo-proof-item-color: var(--milo-text-muted);

  /* Rhythm */
  --milo-proof-item-align: center;
  --milo-proof-item-p-margin: 0;

  /* Optional responsive hooks */
  --milo-proof-pad-tablet: var(--milo-space-sm);
  --milo-proof-pad-mobile: var(--milo-space-xs);
}
/* #endregion */

/* #region 1) BASE */
.milo-proof-strip {
  padding: var(--milo-proof-pad);
  background: var(--milo-proof-bg);
}
/* #endregion */

/* #region 2) ITEMS */
.milo-proof-strip .milo-proof-item {
  align-self: var(--milo-proof-item-align);
  opacity: var(--milo-proof-item-opacity);
  color: var(--milo-proof-item-color);
}

.milo-proof-strip .milo-proof-item p {
  margin: var(--milo-proof-item-p-margin);
  color: inherit;
}
/* #endregion */

/* #region 3) RESPONSIVE */
@media (max-width: 1024px) {
  .milo-proof-strip {
    --milo-proof-pad: var(--milo-proof-pad-tablet);
  }
}

@media (max-width: 767.98px) {
  .milo-proof-strip {
    --milo-proof-pad: var(--milo-proof-pad-mobile);
  }
}
/* #endregion */

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