/**
 * @file Grid Base
 * @description Core grid engine container (`.g`): track sizing, auto-flow, alignment, gaps, and responsive container queries.
 *
 * @usage
 * <!-- Emmet: ul.g>li.clk*3>article.crd -->
 * <ul class="g"><li class="clk"><article class="crd">…</article></li>×3</ul>
 */

/**
 * @group Base Grid
 * Sets display: grid and default behaviors.
 * Defines auto-column/row sizing and gap variables.
 */

:where(.g, [data-display~="grid"]) {

    --pos: relative;
    --_pos: var(--pos);
    position: var(--_pos);

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

    /* Grid Areas
     * gta: var(--gta, var(--areas, none))
     */

    --areas: none;
    --_gta: var(--gta, var(--areas));
    grid-template-areas: var(--_gta);


    /* Grid Template Columns
     * gtc: repeat(--g-cols, minmax(--g-min, --g-max))
     */

    /* GT Item Min-Size || */
    --g-min: var(--g-min--, var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem)));
    /* GT Item Max Size || */
    --g-max: 1fr;
    /* GT Columns Behavior || */
    --g-cols: auto-fit;

    /* GT Columns Pattern */
    --_gtc: var(--gtc,
            repeat(var(--g-cols), var(--g-col,
                    minmax(var(--g-min), var(--g-max)))));
    grid-template-columns: var(--_gtc);


    /* Grid Template Rows
     * gtr: --g-gtr
     */

    --gtr: none;
    --_gtr: var(--gtr);
    grid-template-rows: var(--_gtr);


    /* Grid Auto Columns
     * gac: minmax(--ga-col, auto)
     */

    /* GA Column Item Min-Size || */
    --gac-min: auto;
    /* GA Column Item Max Size || */
    --gac-max: auto;

    /* GA Columns Pattern */
    --_gac: var(--gac,
            minmax(var(--gac-min), var(--gac-max)));
    grid-auto-columns: var(--_gac);


    /* Grid Auto Rows
     * gar: minmax(--ga-row, auto)
     */

    /* GA Row Item Min-Size || */
    --gar-min: auto;
    /* GA Row Item Max-Size || */
    --gar-max: auto;

    /* GA Rows Pattern */
    --_gar: var(--gar,
            minmax(var(--gar-min), var(--gar-max)));
    grid-auto-rows: var(--_gar);


    /* Grid Auto Flow
     * gaf: var(--gaf, row)
     */

    --gaf: row;
    --_gaf: var(--gaf);
    grid-auto-flow: var(--_gaf);



    /* Align Items */
    --g-ai: var(--ai);
    --_ai: var(--g-ai);
    align-items: var(--_ai);

    /* Align Content */
    --g-ac: var(--ac);
    --_ac: var(--g-ac);
    align-content: var(--_ac);

    /* Justify Items */
    --g-ji: var(--ji);
    --_ji: var(--g-ji);
    justify-items: var(--_ji);

    /* Justify Content */
    --g-jc: var(--jc);
    --_jc: var(--g-jc);
    justify-content: var(--_jc);


    /* Grid Gap */
    --_g-g--: var(--g-g--, var(---e, clamp(2.5rem, calc(2.5rem + 0.5 * (100cqi - 33rem) / 55), 3rem)));
    --g-rg: var(--g-rg--, var(--_g-g--));
    --g-cg: var(--g-cg--, var(--_g-g--));

    /* Grid Gap Private Declaration */
    --_g: var(--g-g,
            var(--_rg, var(--g-rg)) var(--_cg, var(--g-cg)));
    gap: var(--_g);
}

@layer reset {
    :where(.g, [data-display~="grid"]) {
        --gta: initial;
        --gta--sm: initial;
        --gta--md: initial;
        --gta--lg: initial;

        --areas--sm: initial;
        --areas--md: initial;
        --areas--lg: initial;

        --gtc: initial;
        --gtc--sm: initial;
        --gtc--md: initial;
        --gtc--lg: initial;

        --g-cols--sm: initial;
        --g-cols--md: initial;
        --g-cols--lg: initial;

        --g-col: initial;
        --g-col--sm: initial;
        --g-col--md: initial;
        --g-col--lg: initial;

        --g-min--sm: initial;
        --g-min--md: initial;
        --g-min--lg: initial;
        --g-min--xsm: initial;

        --g-max--sm: initial;
        --g-max--md: initial;
        --g-max--lg: initial;

        --gtr--sm: initial;
        --gtr--md: initial;
        --gtr--lg: initial;

        --gac: initial;
        --gac--sm: initial;
        --gac--md: initial;
        --gac--lg: initial;

        --gac-min--sm: initial;
        --gac-min--md: initial;
        --gac-min--lg: initial;

        --gac-max--sm: initial;
        --gac-max--md: initial;
        --gac-max--lg: initial;

        --gar: initial;
        --gar--sm: initial;
        --gar--md: initial;
        --gar--lg: initial;

        --gar-min--sm: initial;
        --gar-min--md: initial;
        --gar-min--lg: initial;

        --gar-max--sm: initial;
        --gar-max--md: initial;
        --gar-max--lg: initial;

        --gaf--sm: initial;
        --gaf--md: initial;
        --gaf--lg: initial;

        --ai: initial;
        --ac: initial;
        --ji: initial;
        --jc: initial;

        --_rg: initial;
        --_cg: initial;
        --g-g: initial;

        --g-g--sm: initial;
        --g-rg--sm: initial;
        --g-cg--sm: initial;

        --g-g--md: initial;
        --g-rg--md: initial;
        --g-cg--md: initial;

        --g-g--lg: initial;
        --g-rg--lg: initial;
        --g-cg--lg: initial;
    }
}

/* Container Query */

:where(:not(.g, [data-display~="grid"], .sg, [data-display="subgrid"], .sgr, [data-display~="subrow"], .sgc, [data-display~="subcol"], :is(.s, [data-display~="section"]) > *):has(> :where(.g, [data-display~="grid"]))) {
    --_cq-name: var(--cq-name, gp);
    --_cq-type: var(--cq-type, inline-size);
    container: var(--_cq-name, gp) / var(--_cq-type, inline-size);

    --_bxsz: border-box;
    box-sizing: var(--_bxsz);
}

:where(:not(.g, [data-display~="grid"], .sg, [data-display="subgrid"], .sgr, [data-display~="subrow"], .sgc, [data-display~="subcol"], :is(.s, [data-display~="section"]) > *):has(> :where(.g, [data-display~="grid"]))) {
    --_miis: var(--cq-miis, var(--cq-miw, 0));
    min-inline-size: var(--_miis);

    --_is: var(--cq-is, var(--cq-w, 100%));
    inline-size: var(--_is);

    --_mais: var(--cq-mais, var(--cq-maw, 100%));
    max-inline-size: var(--_mais);
}

/* Small-size (Mobile) Container Query */

@container (width < 30rem) {
    :where(.g, [data-display~="grid"]) {
        /* Grid Areas Responsive */
        --_gta: var(--gta--sm, var(--gta, var(--areas--sm, var(--areas))));

        /* Grid Template Columns Responsive */
        --_gtc: var(--gtc--sm, var(--gtc,
                    repeat(var(--g-cols--sm, var(--g-cols)), var(--g-col--sm, var(--g-col,
                                minmax(var(--g-min--sm, var(--g-min)), var(--g-max--sm, var(--g-max))))))));

        /* Grid Template Rows Responsive */
        --_gtr: var(--gtr--sm, var(--gtr));

        /* Grid Auto Columns Responsive */
        --_gac: var(--gac--sm, var(--gac,
                    minmax(var(--gac-min--sm, var(--gac-min)), var(--gac-max--sm, var(--gac-max)))));

        /* Grid Auto Rows Responsive */
        --_gar: var(--gar--sm, var(--gar,
                    minmax(var(--gar-min--sm, var(--gar-min)), var(--gar-max--sm, var(--gar-max)))));

        /* Grid Auto Flow Responsive */
        --_gaf: var(--gaf--sm, var(--gaf));


        /* Align Items */
        --_ai: var(--g-ai--sm, var(--g-ai));
        /* Align Content */
        --_ac: var(--g-ac--sm, var(--g-ac));
        /* Justify Items */
        --_ji: var(--g-ji--sm, var(--g-ji));
        /* Justify Content */
        --_jc: var(--g-jc--sm, var(--g-jc));


        /* Grid Gap */
        --_g: var(--g-g--sm, var(--g-g, var(--_rg, var(--g-rg--sm, var(--g-rg)))) var(--_cg, var(--g-cg--sm, var(--g-cg))));
    }
}

/* Mid-size (Tablet) Container Query */

@container (30rem <= width <= 60rem) {
    :where(.g, [data-display~="grid"]) {
        /* Grid Areas Responsive */
        --_gta: var(--gta--md, var(--gta, var(--areas--md, var(--areas))));

        /* Grid Template Columns Responsive */
        --_gtc: var(--gtc--md, var(--gtc,
                    repeat(var(--g-cols--md, var(--g-cols)), var(--g-col--md, var(--g-col,
                                minmax(var(--g-min--md, var(--g-min)), var(--g-max--md, var(--g-max))))))));

        /* Grid Template Rows Responsive */
        --_gtr: var(--gtr--md, var(--gtr));

        /* Grid Auto Columns Responsive */
        --_gac: var(--gac--md, var(--gac,
                    minmax(var(--gac-min--md, var(--gac-min)), var(--gac-max--md, var(--gac-max)))));

        /* Grid Auto Rows Responsive */
        --_gar: var(--gar--md, var(--gar,
                    minmax(var(--gar-min--md, var(--gar-min)), var(--gar-max--md, var(--gar-max)))));

        /* Grid Auto Flow Responsive */
        --_gaf: var(--gaf--md, var(--gaf));


        /* Align Items */
        --_ai: var(--g-ai--md, var(--g-ai));
        /* Align Content */
        --_ac: var(--g-ac--md, var(--g-ac));
        /* Justify Items */
        --_ji: var(--g-ji--md, var(--g-ji));
        /* Justify Content */
        --_jc: var(--g-jc--md, var(--g-jc));


        --_g: var(--g-g--md, var(--g-g, var(--_rg, var(--g-rg--md, var(--g-rg)))) var(--_cg, var(--g-cg--md, var(--g-cg))));
    }
}

/* Large-size (Desktop) Container Query */

@container (width > 60rem) {
    :where(.g, [data-display~="grid"]) {
        /* Grid Areas Responsive */
        --_gta: var(--gta--lg, var(--gta, var(--areas--lg, var(--areas))));

        /* Grid Template Columns Responsive */
        --_gtc: var(--gtc--lg, var(--gtc,
                    repeat(var(--g-cols--lg, var(--g-cols)), var(--g-col--lg, var(--g-col,
                                minmax(var(--g-min--lg, var(--g-min)), var(--g-max--lg, var(--g-max))))))));

        /* Grid Template Rows Responsive */
        --_gtr: var(--gtr--lg, var(--gtr));

        /* Grid Auto Columns Responsive */
        --_gac: var(--gac--lg, var(--gac,
                    minmax(var(--gac-min--lg, var(--gac-min)), var(--gac-max--lg, var(--gac-max)))));

        /* Grid Auto Rows Responsive */
        --_gar: var(--gar--lg, var(--gar,
                    minmax(var(--gar-min--lg, var(--gar-min)), var(--gar-max--lg, var(--gar-max)))));

        /* Grid Auto Flow Responsive */
        --_gaf: var(--gaf--lg, var(--gaf));


        /* Align Items */
        --_ai: var(--g-ai--lg, var(--g-ai));
        /* Align Content */
        --_ac: var(--g-ac--lg, var(--g-ac));
        /* Justify Items */
        --_ji: var(--g-ji--lg, var(--g-ji));
        /* Justify Content */
        --_jc: var(--g-jc--lg, var(--g-jc));


        --_g: var(--g-g--lg, var(--g-g, var(--_rg, var(--g-rg--lg, var(--g-rg)))) var(--_cg, var(--g-cg--lg, var(--g-cg))));
    }
}

@container (width <= 20rem) {
    :where(.g, [data-display~="grid"]) {
        --g-min--sm: var(---2xc, clamp(12rem, calc(12rem + 4 * (100cqi - 33rem) / 55), 16rem));
        --_gtc: var(--gtc--sm, var(--gtc,
                    repeat(var(--g-cols--sm, var(--g-cols)), var(--g-col--sm, var(--g-col,
                                minmax(var(--g-min--xsm, var(--g-min--sm)), var(--g-max--sm, var(--g-max))))))));
    }
}