/**
 * aspect-ratio.css — AspectRatio SSOT
 * Token-driven only. No hex. No fallbacks. No !important.
 * Moved from helix-app.css.
 */
.hx-ratio-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  width: 100%;
}

.hx-ratio {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.hx-ratio__box {
  height: var(--hx-ratio-h);
  width: auto;
  aspect-ratio: var(--hx-ratio);
  border-radius: var(--hx-ratio-radius);
  overflow: hidden;
  background: var(--hx-ratio-bg);
  position: relative;
}

.hx-ratio[data-shape="ellipse"] .hx-ratio__box {
  border-radius: var(--radius-full);
}

.hx-ratio__media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--hx-ratio-bg), transparent 55%),
    linear-gradient(160deg, var(--color-accent-muted), var(--hx-ratio-bg));
}

.hx-ratio[data-fit="contain"] .hx-ratio__media {
  inset: 18%;
  border-radius: inherit;
}

.hx-ratio[data-fit="center"] .hx-ratio__media {
  inset: 30%;
  border-radius: inherit;
}

.hx-ratio__cap {
  font-size: var(--text-label-size);
  color: var(--hx-ratio-fg);
}

.hx-example .hx-ratio__box {
  box-shadow: none;
}

.hx-ratio--flush .hx-ratio__box {
  border-radius: 0;
}

.hx-ratio--skeleton .hx-ratio__media {
  background: linear-gradient(100deg, var(--hx-ratio-bg) 20%, var(--hx-surface-subtle) 40%, var(--hx-ratio-bg) 60%);
  background-size: 200% 100%;
  animation: hx-ratio-shimmer 1.2s linear infinite;
}

@keyframes hx-ratio-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}