/**
 * @file Masonry Layout
 * @description Progressive masonry layout.
 *
 * @usage
 * <!-- Emmet: ul.g.g-ms>li*6 -->
 * <ul class="g g-ms"><li><figure>…</figure></li>×6</ul>
 *
 * Uses:
 * - CSS Multi-column fallback where Grid Lanes is unavailable.
 * - Native Grid Lanes where supported.
 *
 * Masonry sizing is inherited from the Grid column system:
 * - --g-cols
 * - --g-min
 * - --g-max
 * - --g-rg
 * - --g-cg
 *
 * Canonical API:
 *
 * .g.g-ms
 * .g.g-gl
 *
 * [data-display="grid"][data-recipe~="masonry"]
 * [data-display="grid"][data-recipe~="gallery"]
 * [data-display="grid"][data-recipe~="grid-lanes"]
 * [data-display="grid"][data-recipe~="lanes"]
 */

/**
 * @group Masonry Base
 */

:where(.g, [data-display="grid"]):where(.g-ms, .g-gl, .grid-lanes, [data-recipe~="masonry"], [data-recipe~="gallery"], [data-recipe~="grid-lanes"], [data-recipe~="lanes"]) {

    /* Fallback: CSS Multi-column */

    --g-d: block;
    --_d: var(--g-d);
    display: var(--_d);

    /*
     * Use the Grid sizing pipeline as the source of truth.
     *
     * --g-min is the minimum desired masonry column width.
     * --g-cols may be a numeric count or auto-fit.
     *
     * Multicol cannot consume Grid's minmax() track syntax, so translate
     * the Grid model into column-width / column-count.
     */
    --g-min: var(--g-min--, var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem)));
    column-width: var(--g-min);

    --g-cols: initial;
    column-count: var(--g-cols, auto);

    /* Horizontal gap */
    --_masonry-gap: var(--g-g--, var(---e, clamp(2.5rem, calc(2.5rem + 0.5 * (100cqi - 33rem) / 55), 3rem)));

    --g-cg: var(--g-cg--, var(--_masonry-gap));
    column-gap: var(--_cg, var(--g-cg));

    /*
     * Multicol defaults to balanced filling.
     * Masonry fallback needs sequential column filling.
     */
    column-fill: auto;

    /* Fallback item behavior */

    > * {
        /*
         * Keep the child's own display type intact.
         * Multicol does not require us to force every child to block,
         * and doing so could destroy .f / .g / component-level layout.
         */
        break-inside: avoid;

        /*
         * Multi-column has column-gap but no row-gap equivalent for
         * independent masonry items, so emulate vertical gap with
         * margin-block-end.
         */
        --g-rg: var(--g-g--, var(---e, clamp(2.5rem, calc(2.5rem + 0.5 * (100cqi - 33rem) / 55), 3rem)));
        margin-block-end: var(--_rg, var(--g-rg));

        /*
         * Ensure children do not exceed their column.
         */
        inline-size: 100%;
    }
}


/**
 * @group Native Grid Lanes Enhancement
 */

@supports (display: grid-lanes) {

    :where(.g, [data-display="grid"]):where(.g-ms, .g-gl, .grid-lanes, [data-recipe~="masonry"], [data-recipe~="gallery"], [data-recipe~="grid-lanes"], [data-recipe~="lanes"]) {

        /*
         * Switch the same Grid display pipeline to the native Grid Lanes
         * layout mode.
         */
        --g-d: grid-lanes;
        --_d: var(--g-d);
        display: var(--_d);

        /*
         * Remove the Multi-column fallback machinery.
         */
        column-width: auto;
        column-count: auto;
        column-gap: normal;
        column-fill: initial;

        > * {
            break-inside: auto;
            margin-block-end: 0;
            inline-size: auto;
        }
    }
}