/**
 * @file Grid Subgrid
 * @description Smart Grid logic (.sg, .sgc) allowing nested grids to align with parent tracks.
 *
 * @usage
 * <!-- Emmet: ul.g.g-3>(li.clk>article.crd.sg.gr-3>(header+div+footer))*3 -->
 */

:where(.sg, [data-display~="subgrid"], .sgr, [data-display~="subrow"], .sgc, [data-display="subcol"]) {
    --sg-d: grid;
    --_d: var(--sg-d);
    display: var(--_d);

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

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

/* Subgrid Row */
:where(.sg, [data-display~="subgrid"], .sgr, [data-display~="subrow"]) {
    --sgtr: auto;
    --_gtr: var(--sgtr);
    grid-template-rows: var(--_gtr);

    --_rg: var(--sg-rg);
}

/* Subgrid Column */
:where(.sg, [data-display~="subgrid"], .sgc, [data-display="subcol"]) {
    --sgtc: auto;
    --_gtc: var(--sgtc);
    grid-template-columns: var(--_gtc);

    --_cg: var(--sg-cg);
}

@container (width < 30rem) {

    :where(.sg--sm, [data-display~="subgrid--sm"], .sgr--sm, [data-display~="subrow--sm"], .sgc--sm, [data-display="subcol--sm"]),
    :where(.sg--smd, [data-display~="subgrid--smd"], .sgr--smd, [data-display~="subrow--smd"], .sgc--smd, [data-display="subcol--smd"]) {
        --sg-d: grid;
        --_d: var(--sg-d--sm, var(--sg-d));
        display: var(--_d);

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

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

    /* Subgrid Row */
    :where(.sg--sm, [data-display~="subgrid--sm"], .sgr--sm, [data-display~="subrow--sm"]),
    :where(.sg--smd, [data-display~="subgrid--smd"], .sgr--smd, [data-display~="subrow--smd"]) {
        --sgtr: auto;
        --_gtr: var(--sgtr--sm, var(--sgtr));
        grid-template-rows: var(--_gtr);

        --_rg: var(--sg-rg--sm, var(--sg-rg));
    }

    /* Subgrid Column */
    :where(.sg--sm, [data-display~="subgrid--sm"], .sgc--sm, [data-display="subcol--sm"]),
    :where(.sg--smd, [data-display~="subgrid--smd"], .sgc--smd, [data-display="subcol--smd"]) {
        --sgtc: auto;
        --_gtc: var(--sgtc--sm, var(--sgtc));
        grid-template-columns: var(--_gtc);

        --_cg: var(--sg-cg--sm, var(--sg-cg));
    }
}

@container (30rem <= width <= 60rem) {

    :where(.sg--md, [data-display~="subgrid--md"], .sgr--md, [data-display~="subrow--md"], .sgc--md, [data-display="subcol--md"]),
    :where(.sg--smd, [data-display~="subgrid--smd"], .sgr--smd, [data-display~="subrow--smd"], .sgc--smd, [data-display="subcol--smd"]),
    :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgr--mdl, [data-display~="subrow--mdl"], .sgc--mdl, [data-display="subcol--mdl"]) {
        --sg-d: grid;
        --_d: var(--sg-d--md, var(--sg-d));
        display: var(--_d);

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

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

    /* Subgrid Row */
    :where(.sg--md, [data-display~="subgrid--md"], .sgr--md, [data-display~="subrow--md"]),
    :where(.sg--smd, [data-display~="subgrid--smd"], .sgr--smd, [data-display~="subrow--smd"]),
    :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgr--mdl, [data-display~="subrow--mdl"]) {
        --sgtr: auto;
        --_gtr: var(--sgtr--md, var(--sgtr));
        grid-template-rows: var(--_gtr);

        --_rg: var(--sg-rg--md, var(--sg-rg));
    }

    /* Subgrid Column */
    :where(.sg--md, [data-display~="subgrid--md"], .sgc--md, [data-display="subcol--md"]),
    :where(.sg--smd, [data-display~="subgrid--smd"], .sgc--smd, [data-display="subcol--smd"]),
    :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgc--mdl, [data-display="subcol--mdl"]) {
        --sgtc: auto;
        --_gtc: var(--sgtc--md, var(--sgtc));
        grid-template-columns: var(--_gtc);

        --_cg: var(--sg-cg--md, var(--sg-cg));
    }
}

@container (width > 60rem) {

    :where(.sg--lg, [data-display~="subgrid--lg"], .sgr--lg, [data-display~="subrow--lg"], .sgc--lg, [data-display="subcol--lg"]),
    :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgr--mdl, [data-display~="subrow--mdl"], .sgc--mdl, [data-display="subcol--mdl"]) {
        --sg-d: grid;
        --_d: var(--sg-d--lg, var(--sg-d));
        display: var(--_d);

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

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

    /* Subgrid Row */
    :where(.sg--lg, [data-display~="subgrid--lg"], .sgr--lg, [data-display~="subrow--lg"]),
    :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgr--mdl, [data-display~="subrow--mdl"]) {
        --sgtr: auto;
        --_gtr: var(--sgtr--lg, var(--sgtr));
        grid-template-rows: var(--_gtr);

        --_rg: var(--sg-rg--lg, var(--sg-rg));
    }

    /* Subgrid Column */
    :where(.sg--lg, [data-display~="subgrid--lg"], .sgc--lg, [data-display="subcol--lg"]),
    :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgc--mdl, [data-display="subcol--mdl"]) {
        --sgtc: auto;
        --_gtc: var(--sgtc--lg, var(--sgtc));
        grid-template-columns: var(--_gtc);

        --_cg: var(--sg-cg--lg, var(--sg-cg));
    }
}

@supports (grid-template-rows: subgrid) {
    :where(.sg, [data-display~="subgrid"], .sgr, [data-display~="subrow"]) {
        --sgtr: subgrid;
    }

    @container (width < 30rem) {

        :where(.sg--sm, [data-display~="subgrid--sm"], .sgr--sm, [data-display~="subrow--sm"]),
        :where(.sg--smd, [data-display~="subgrid--smd"], .sgr--smd, [data-display~="subrow--smd"]) {
            --sgtr--sm: subgrid;
        }
    }

    @container (30rem <= width <= 60rem) {

        :where(.sg--md, [data-display~="subgrid--md"], .sgr--md, [data-display~="subrow--md"]),
        :where(.sg--smd, [data-display~="subgrid--smd"], .sgr--smd, [data-display~="subrow--smd"]),
        :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgr--mdl, [data-display~="subrow--mdl"]) {
            --sgtr--md: subgrid;
        }
    }

    @container (width > 60rem) {

        :where(.sg--lg, [data-display~="subgrid--lg"], .sgr--lg, [data-display~="subrow--lg"]),
        :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgr--mdl, [data-display~="subrow--mdl"]) {
            --sgtr--lg: subgrid;
        }
    }
}

@supports (grid-template-columns: subgrid) {
    :where(.sg, [data-display~="subgrid"], .sgc, [data-display="subcol"]) {
        --sgtc: subgrid;
    }

    @container (width < 30rem) {

        :where(.sg--sm, [data-display~="subgrid--sm"], .sgc--sm, [data-display="subcol--sm"]),
        :where(.sg--smd, [data-display~="subgrid--smd"], .sgc--smd, [data-display="subcol--smd"]) {
            --sgtc--sm: subgrid;
        }
    }

    @container (30rem <= width <= 60rem) {

        :where(.sg--md, [data-display~="subgrid--md"], .sgc--md, [data-display="subcol--md"]),
        :where(.sg--smd, [data-display~="subgrid--smd"], .sgc--smd, [data-display="subcol--smd"]),
        :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgc--mdl, [data-display="subcol--mdl"]) {
            --sgtc--md: subgrid;
        }
    }

    @container (width > 60rem) {

        :where(.sg--lg, [data-display~="subgrid--lg"], .sgc--lg, [data-display="subcol--lg"]),
        :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgc--mdl, [data-display="subcol--mdl"]) {
            --sgtc--lg: subgrid;
        }
    }
}

@layer reset {

    :where(.sg, [data-display~="subgrid"], .sgr, [data-display~="subrow"], .sgc, [data-display="subcol"]),
    :where(.sg--sm, [data-display~="subgrid--sm"], .sgr--sm, [data-display~="subrow--sm"], .sgc--sm, [data-display="subcol--sm"]),
    :where(.sg--md, [data-display~="subgrid--md"], .sgr--md, [data-display~="subrow--md"], .sgc--md, [data-display="subcol--md"]),
    :where(.sg--lg, [data-display~="subgrid--lg"], .sgr--lg, [data-display~="subrow--lg"], .sgc--lg, [data-display="subcol--lg"]),
    :where(.sg--smd, [data-display~="subgrid--smd"], .sgr--smd, [data-display~="subrow--smd"], .sgc--smd, [data-display="subcol--smd"]),
    :where(.sg--mdl, [data-display~="subgrid--mdl"], .sgr--mdl, [data-display~="subrow--mdl"], .sgc--mdl, [data-display="subcol--mdl"]) {
        --sg-g: initial;
        --sg-g--sm: initial;
        --sg-g--md: initial;
        --sg-g--lg: initial;

        --sg-rg--sm: initial;
        --sg-rg--md: initial;
        --sg-rg--lg: initial;

        --sg-cg--sm: initial;
        --sg-cg--md: initial;
        --sg-cg--lg: initial;
    }
}