/* 
    <https://css-tricks.com/snippets/css/complete-guide-grid/>
*/

/*
    Note: g-item and g-container have problems with mobile layouts.
    Use <hbox>, <vbox>, and <cbox> instead.
*/


/* DEBUG OUTLINE: */
g-item,
.g-item {
    /* outline: 1px solid; */
}

g-container,
.g-container {
    display: grid;

    grid-template-columns: var(--cols, default); /* 50px minmax(100px, 1fr) 3fr */
    grid-template-rows: var(--rows, default);
    /*
        You an also define things like: --cols: [sidebar] 240px [content] 1fr;
        This will automatically name the grid lines accordingly. For example,
        the left border of [sidebar] would be called [sidebar-start]. The right
        border would be [sidebar-end].

        Then, in <g-item>, you can do: --cpos: [sidebar-start] / [sidebar-end];
        This is equivalent to: --cpos: 1 / 2;
        Which is equivalent to: grid-column-start: 1; grid-column-end: 2;
        (Note! Grid lines start at 1, not 0.)
        The <g-item> will...
    */

    column-gap: var(--cgap, 0);
    row-gap: var(--rgap, 0);

    justify-items: stretch; /* Override per-item with justify-self. */
    align-items: stretch; /* Override per-item with align-self. */

    justify-content: stretch;
    align-content: stretch;
}

g-item,
.g-item {

    grid-column: var(--cpos, default); /* <start-line> / <end-line> */
    grid-row: var(--rpos, default); /* <start-line> / <end-line> */
    /*
        Negative numbers represent the grid lines starting from the end. -1 refers
        to the last grid line, -2 the second-to-last, etc.
    */
}




@media (max-width: 50em) { /* If screen is too small, expand some things to full-width. */
    /* .element .expand-if-mobile {
        width: 100% !important;
    } */

    g-container,
    .g-container {
        grid-auto-flow: row;
    }

    g-item,
    .g-item {
        grid-column: 1 / -1 !important; /* Force item to span all columns. */
        grid-row: auto; /* <g-item> elements will be ordered in the order they were declared. */
    }
}








/* 
    <hbox> and <vbox>
    These two classes display their children horizontally and vertically, respectively.
    When the screen size gets too small, <hbox> will rearrange its kids into a vertical
    layout.
    
    Use the '.expand-if-mobile' class to force things with specific widths to expand to
    100% in the mobile layout.

    In the mobile layout, <hbox>'s kids are arranged vertically in the order they are
    written. By default, this means that the left-to-right order should match the
    top-down order. There are different ways to override this. The easiest is to set the
    'grid-column' property on the kids. REMEMBER! Column line names start at 1! NOT 0!
    I always 'grid-column' to 0 and wonder why it doesn't work. Don't do it!!!

    Unfortunately, you can't really override the order on the mobile layout, as setting
    'grid-row' will cause the item to be put on a new row in the desktop layout. If you
    absolutely have to do it, you'll have to put it in a media query or something so it
    only gets set when the mobile layout is active.

    Example:
        <hbox>
            <p>1<p>
            <p style="grid-column: 1;">2<p>
        <hbox>
        In the desktop layout, 2 is before 1.
        In the mobile layout, 1 is above 2.

    Why the hell do I say 'kids' and not 'children'? Because funne and short :/
*/

/* DEBUG OUTLINE: */
hbox > *,
.hbox > *,
vbox > *,
.vbox > * {
    /* outline: 1px solid; */
}

hbox,
.hbox {
    display: grid;

    grid-template-columns: auto;
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    grid-template-rows: 1fr;

    grid-auto-flow: column;

    /* justify-items: stretch;
    align-items: stretch;
    justify-content: stretch;
    align-content: stretch; */

    column-gap: var(--hgap, 0);
    row-gap: var(--vgap, 0);
}

hbox > *,
.hbox > * {
    grid-column: auto;
    grid-row: auto;
}

vbox,
.vbox {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto;

    grid-auto-flow: row;

    column-gap: var(--hgap, 0);
    row-gap: var(--vgap, 0);
}

vbox > *,
.vbox > * {
    grid-column: auto;
    grid-row: auto;
}

@media (max-width: 50em) {
    hbox,
    .hbox {
        grid-auto-flow: row;
    }

    hbox > *.expand-if-mobile,
    .hbox > *.expand-if-mobile {
        width: 100% !important; /* If there's a better way to do this, please tell me! */
        max-width: 100% !important;
    }
}

/* 
    <cbox> centers its child vertically and horizontally. It should only have 1 child.
*/
cbox,
.cbox {
    display: flex;
    justify-content: center;
    align-items: center;
}