/*
 * <x-feed>: M3's feed canonical layout — cards or items in a grid that adds columns as it widens.
 *
 * Its rules across breakpoints, row by row (docs/reference/m3/foundations-supplement.md § Canonical
 * layouts → Feed):
 *
 *   Compact (below 600px)          "stack vertically, one card per row, full pane width"
 *   Medium (600–839)               "multiple equal-width columns"
 *   Expanded, large, extra-large   "more columns than medium", each usually wider as it grows
 *
 * So below 600px the feed is one column. From 600px it is equal columns of at least
 * `--md-min-item` (written inline on every feed, 240px unless the caller says otherwise, so a feed
 * never inherits another's): as many as fit in the room the feed has, which is more on a wider
 * window, and each column widens until the next one fits. M3 gives no minimum width or column
 * count for the web ("no explicit numeric column-count or gutter table", docs/reference/m3/
 * foundations.md § Layout → Grids & spacing); the minimum is the package's, and a feed inside a
 * narrow pane stays one column where a window-keyed count would crush it. The space between items
 * is M3's spacer, 16px on a compact window and 24px from medium (§ Breakpoints), unless
 * `data-md-gap` names a spacing token. Items keep their source order — M3: "item order is
 * determined by position" — and no dense packing reorders them. Columns run in the inline
 * direction, so a right-to-left document fills them from the right.
 *
 * In `material.layout`; `hide-below`/`hide-from` come from visibility.css.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './spacing.css';
@import './visibility.css';

@layer material.layout {
    :where([data-md-feed]) {
        --md-gap: var(--md-sys-measurement-space200);

        @media (width >= 600px) {
            --md-gap: var(--md-sys-measurement-space300);
        }
    }

    [data-md-feed] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--md-gap);

        @media (width >= 600px) {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item, 240px)), 1fr));
        }
    }
}