/*
    Unified Grid Template - base stylesheet

    Contract for UnifiedGridTemplate.cshtml.

    The template emits this root and these grid areas, in this order. A section with no
    content is omitted rather than emitted empty, so an area may be absent - an empty
    grid item would still claim a row and a gap on either side of it:

        #store-grid
          [data-area="banner"]
          [data-area="description"]
          [data-area="feature"]
          [data-area="catalog"]
          [data-area="cart"]
          [data-area="form"]

    ------------------------------------------------------------------------------
    Division of responsibility - this file vs ModelTemplate.GridCss
    ------------------------------------------------------------------------------

    This file holds structural invariants ONLY. It makes no layout decisions: no
    arrangement, no widths, no margins, no ordering. Its entire job is to guarantee
    that a page renders sanely no matter what GridCss says, so it must stay small
    enough to be obviously correct.

    ModelTemplate.GridCss holds this page's layout, and nothing else. It is injected
    inline by _LayoutV2.cshtml after this file, so any rule here can be overridden by
    restating it.

    The split exists for three reasons:

      1. GridCss is author-supplied and may be rejected. CssSanitizer rejection is
         silent and falls back to this file alone, so this file has to be a working
         layout on its own.
      2. A page freshly switched to grid mode has empty GridCss and must still render
         as a sensible single-column stack.
      3. The anti-overflow invariants below are the only thing preventing wide content
         from forcing horizontal scroll. They must not be something an author can
         forget to write.

    Authored CSS must be scoped under #store-grid; CssSanitizer rejects anything that
    is not.

    This file is only loaded when ModelTemplate.UseGridLayout is set. Rows that have
    not opted in continue to render through their legacy MvcTemplateView template and
    are entirely unaffected by anything here.

    ------------------------------------------------------------------------------
    Authoring model
    ------------------------------------------------------------------------------

    Mobile-first. The default is a single-column stack in source order. At the desktop
    breakpoint the root becomes a 12 column track and authors place sections with
    spans:

        @media (min-width: 768px) {
            #store-grid > [data-area="catalog"] { grid-column: span 8; }
            #store-grid > [data-area="cart"]    { grid-column: span 4; }
        }

    Twelve columns is the same mental model as Bootstrap, so halves, thirds, quarters
    and sixths are all expressible.

    Every area defaults to grid-column: 1 / -1 (full width, its own row). That default
    is what makes span authoring safe: an area the author never mentions still takes a
    full row instead of silently packing into whatever slot happens to be left over.
    It is also the idiom for forcing a row break - give an area 1 / -1 and the next
    area starts a new row.

    Reordering is done with the order property, not by editing the markup. Every area
    is order: 0 by default and falls back to source order, so a negative value pulls a
    section earlier and a positive value pushes it later:

        #store-grid > [data-area="cart"] { order: -1; }

    Because order only applies to grid items, and every area is a direct child of
    #store-grid, this works at any breakpoint and can be scoped to one:

        @media (min-width: 768px) {
            #store-grid > [data-area="form"] { order: 1; }
        }

    Note that order changes visual order only. Screen readers and tab order follow the
    markup, so large reorderings are worth a second thought.
*/

#store-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

#store-grid > [data-area] {
    /* minmax(0, ...) on the track plus min-width: 0 here is what keeps wide content
       (long product titles, tables, iframes) from blowing out the grid track and
       introducing horizontal scroll. */
    min-width: 0;
    max-width: 100%;

    /* Full width by default, in both the single-column and the 12 column track. */
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    #store-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}