/* Version: 2026-03-19-v842 */
/*
 * Masonry Grid — Reusable Component
 *
 * CSS Grid masonry for variable-height, variable-width cards.
 * Base column unit: 300px (matches smallest Printables embed).
 *
 * Size modifier classes (match Printables embed variants):
 *   .masonry-card--sm    300×340  aspect-ratio: 300/340
 *   .masonry-card--card  400×445  aspect-ratio: 400/445
 *   .masonry-card--lg    640×640  aspect-ratio: 1/1
 *   .masonry-card--wide  640×190  aspect-ratio: 640/190
 */

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  align-items: start;
  margin: 1rem 0;
}

/* height intentionally omitted from HTML — CSS owns sizing entirely */
.masonry-card iframe {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Aspect ratios scale height proportionally as column width changes */
.masonry-card--sm iframe   { aspect-ratio: 300 / 340; }
.masonry-card--card iframe { aspect-ratio: 400 / 445; }
.masonry-card--lg iframe   { aspect-ratio: 640 / 640; }
.masonry-card--wide iframe { aspect-ratio: 640 / 190; }

/* Large and Wide cards span 2 columns at ≥640px,
   matching Printables' own large embed breakpoint */
@media screen and (min-width: 640px) {
  .masonry-card--lg,
  .masonry-card--wide {
    grid-column: span 2;
  }
}