/**
* Subset of semantic-ui grid styles based on the SUI grid
* features we actually use. We will use this to replace semantic-ui classes.
*/

:root {
    --legacyGrid-gutter: 2rem;
    --legacyGrid-gutter--stacked: 1rem;
    /* semantic-ui stepped through 721/930/1127px; we go fluid to the largest. */
    --legacyGrid-maxWidth: 1127px;
}

/*
* ----------------------------------------------------------------------
* Grid
*/

/*
* Gutters are padding on the children, not `column-gap`: across 16 tracks a
* 2rem column-gap would contribute 15 gaps = 480px of fixed width and overflow
* any viewport narrower than that. The negative inline margin keeps the outer
* edges flush, exactly as semantic-ui did.
*/
.legacyGrid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    align-items: stretch;
    row-gap: var(--legacyGrid-gutter);
    margin-inline: calc(var(--legacyGrid-gutter) / -2);
}

/*
* semantic-ui let an unclassed child fill the row, where CSS Grid would give
* it a single 1/16 track. One `var()` here covers the default and every width.
*/
.legacyGrid > * {
    grid-column: span var(--legacyGrid-span, 16);
    padding-inline: calc(var(--legacyGrid-gutter) / 2);
}

/*
* `one|two|three column grid`. One and two divide evenly into 16 tracks, so
* they only set a span and leave the tracks alone — that lets a child still
* carry an explicit width, as emulation_banner.html does with a 12 + 4 split.
* Must precede the width classes below so those win for such children.
*/
.legacyGrid--cols1 > * { --legacyGrid-span: 16; }
.legacyGrid--cols2 > * { --legacyGrid-span: 8; }

/*
* 16 does not divide by three, so this one needs its own tracks. Verified that
* no `three column grid` in the codebase gives a child an explicit width.
*/
.legacyGrid--cols3 { grid-template-columns: repeat(3, 1fr); }
.legacyGrid--cols3 > * { grid-column: auto; }

/*
* ----------------------------------------------------------------------
* Column spans — only the six widths actually in use.
*/

.legacyGrid-col--4  { --legacyGrid-span: 4; }
.legacyGrid-col--6  { --legacyGrid-span: 6; }
.legacyGrid-col--8  { --legacyGrid-span: 8; }
.legacyGrid-col--10 { --legacyGrid-span: 10; }
.legacyGrid-col--12 { --legacyGrid-span: 12; }
.legacyGrid-col--16 { --legacyGrid-span: 16; }

/*
* `n wide computer`. semantic-ui's computer breakpoint began at 992px; below
* it the base width class applies, which is how
* `sixteen wide tablet eight wide computer` is expressed.
*/
@media (min-width: 992px) {
    .legacyGrid-col--computer8  { --legacyGrid-span: 8; }
    .legacyGrid-col--computer12 { --legacyGrid-span: 12; }
}

/*
* `right floated`. `justify-self: end` cannot be used — it shrinks the box to
* its content rather than moving the grid area.
*/
.legacyGrid-col--right {
    grid-column: span var(--legacyGrid-span, 16) / -1;
}

/*
* ----------------------------------------------------------------------
* Alignment
*
* semantic-ui aligned content with `text-align` on the columns rather than by
* resizing them, so these deliberately avoid `justify-items`.
*/

/*
* `center aligned` and `centered` grids also set `justify-content: center`,
* which centred a partial width column. Under 1fr tracks that is a no-op, so
* centred columns are placed explicitly: start = (16 - span) / 2 + 1.
*
* Only the spans that actually appear centred are listed. `sixteen wide` is
* omitted on purpose — centring a full width column is the identity.
*
* These must not apply to unsized children: doing so would stack the two
* halves of a `center aligned two column grid` onto the same track.
*/
.legacyGrid--centered > .legacyGrid-col--10,
.legacyGrid--centerAligned > .legacyGrid-col--10 { grid-column: 4 / span 10; }

.legacyGrid--centered > .legacyGrid-col--12,
.legacyGrid--centerAligned > .legacyGrid-col--12 { grid-column: 3 / span 12; }

@media (min-width: 992px) {
    .legacyGrid--centered > .legacyGrid-col--computer8,
    .legacyGrid--centerAligned > .legacyGrid-col--computer8 { grid-column: 5 / span 8; }

    .legacyGrid--centered > .legacyGrid-col--computer12,
    .legacyGrid--centerAligned > .legacyGrid-col--computer12 { grid-column: 3 / span 12; }
}

.legacyGrid--centerAligned > * { text-align: center; }
.legacyGrid--rightAligned > *  { text-align: right; }

/* Column level overrides, for a column opting out of its grid's alignment. */
.legacyGrid-col--leftAligned   { text-align: left; }
.legacyGrid-col--centerAligned { text-align: center; }
.legacyGrid-col--rightAligned  { text-align: right; }

.legacyGrid--middleAligned     { align-items: center; }
.legacyGrid-col--middleAligned { align-self: center; }
.legacyGrid-col--bottomAligned { align-self: end; }

/*
* semantic-ui's `centered grid` centred a non-column child by shrinking it to
* its content. The two places relying on that hold a single message, so they
* centre their text instead of the box.
*/
.legacyGrid--centeredText { text-align: center; }

/*
* ----------------------------------------------------------------------
* Container
*/

/*
* No `display` declaration. This is routinely combined with .legacyGrid on the
* same element (`ui grid container`) and, coming later in the file, a
* `display: block` here would silently override `display: grid` above.
*/
.legacyGrid-container {
    max-width: var(--legacyGrid-maxWidth);
    margin-inline: auto;
}

/*
* A non-grid container has no child padding to inset its content, so it
* supplies its own. On a grid container that would inset twice.
*/
.legacyGrid-container:not(.legacyGrid) { padding-inline: 1rem; }

/*
* A grid container cannot use the negative margin above, because
* `margin-inline: auto` is needed to centre it. semantic-ui hit the same
* conflict and widened the container by one gutter instead.
*/
.legacyGrid-container.legacyGrid {
    max-width: calc(var(--legacyGrid-maxWidth) + var(--legacyGrid-gutter));
    margin-inline: auto;
}

/*
* ----------------------------------------------------------------------
* Mobile — semantic-ui's breakpoint was 767px.
*/

@media (max-width: 767px) {
    .legacyGrid-container,
    .legacyGrid-container.legacyGrid { margin-inline: 1em; }

    /*
    * semantic-ui's mobile container margin was !important, so it beat the grid
    * margin and column padding stacked on top of it — except under
    * `stackable`, which zeroed that padding.
    */
    .legacyGrid-container.legacyGrid.legacyGrid--stackable {
        margin-inline: calc(1em - var(--legacyGrid-gutter) / 2);
    }

    .legacyGrid--stackable {
        grid-template-columns: 1fr;
        row-gap: var(--legacyGrid-gutter--stacked);
    }

    /*
    * The second selector must outrank the centred placement rules above,
    * which are two classes deep. Keep both.
    */
    .legacyGrid--stackable > *,
    .legacyGrid--stackable > [class*="legacyGrid-col--"] { grid-column: 1 / -1; }
}