/* HYPERPART: aspect-ratio */
/*
 * Media frame that locks width/height ratio. Child fills the box
 * (object-fit cover for images/video).
 *
 * PLACEHOLDER — shadcn parity (HMC-036). Pure CSS; data-dz-ratio selects
 * common ratios. Custom ratios can set style="aspect-ratio: …" on the root.
 */

.dz-aspect-ratio {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--colour-surface-muted);
  aspect-ratio: 16 / 9; /* default */
}

.dz-aspect-ratio[data-dz-ratio="1/1"] {
  aspect-ratio: 1 / 1;
}

.dz-aspect-ratio[data-dz-ratio="4/3"] {
  aspect-ratio: 4 / 3;
}

.dz-aspect-ratio[data-dz-ratio="16/9"] {
  aspect-ratio: 16 / 9;
}

.dz-aspect-ratio[data-dz-ratio="21/9"] {
  aspect-ratio: 21 / 9;
}

.dz-aspect-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}