/**
 * masonry.css
 *
 * A declarative component and mixin for the experimental CSS Masonry Layout.
 * ------------------------------------------------------------------------------
 * ⚠️ IMPORTANT: EXPERIMENTAL FEATURE - Requires browser flag in Edge/Chrome 140+.
 *
 * @feature {CSS Masonry} - For creating packed, brick-like layouts.
 */

/* 1. MIXIN (for use in CSS) */
@mixin --masonry(
  --direction type(*): 'column',
  --tracks type(*): 'repeat(auto-fill, auto)',
  --gap type(*): 1.5rem
) {
  display: masonry;
  masonry-direction: var(--direction);
  gap: var(--gap);
  @when (var(--direction) = 'column') { grid-template-columns: var(--tracks); }
  @when (var(--direction) = 'row') { grid-template-rows: var(--tracks); }
}

/* 2. COMPONENT (for use in HTML)
 * Standard grid is the baseline. Browsers with masonry support enhance it. */
:is(masonry-layout, [data-masonry], .masonry-layout) {
  display: grid;
  masonry-direction: attr(direction type(*), column);
  gap: attr(gap type(*), 1.5rem);
  item-tolerance: attr(tolerance type(*), 0);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  grid-template-columns: attr(cols type(*), repeat(auto-fit, minmax(min(100%, 16rem), 1fr)));
  grid-template-rows: attr(rows type(*), none);
  grid-auto-flow: dense;
}

@supports (display: masonry) {
  :is(masonry-layout, [data-masonry], .masonry-layout) {
    display: masonry;
    grid-auto-flow: initial;
  }
}

/* Item spanning for the component */
:is(masonry-layout, [data-masonry], .masonry-layout) > * {
  grid-column: attr(col type(*), auto);
  grid-row: attr(row type(*), auto);
}