/*
 * ILM Components -- Column.
 *
 * Spans tracks of its Row, and stacks its own children.
 *
 * `min-inline-size: 0` for the same reason the Row's tracks use `minmax(0, …)`:
 * a grid item's automatic minimum size is its content, so a column holding
 * something unbreakable refuses to shrink to its span and the row overflows.
 * Both are needed -- the track can be the right width while the item in it
 * still will not fit.
 */

.ilm-component--layout-column {
	display: flex;
	flex-direction: column;
	gap: var(--ilm-c-gap);
	grid-column: span var(--ilm-c-span) / span var(--ilm-c-span);
	min-inline-size: 0;
}

/*
 * `auto` is the absence of an override, so it declares nothing and the row's
 * `align-items` applies. A rule setting `align-self: auto` would be the same
 * thing written out, and would win over the row -- which is what `auto` is
 * supposed to mean anyway, but only by coincidence.
 */
.ilm-component--layout-column.ilm-self-start { align-self: start; }
.ilm-component--layout-column.ilm-self-center { align-self: center; }
.ilm-component--layout-column.ilm-self-end { align-self: end; }
.ilm-component--layout-column.ilm-self-stretch { align-self: stretch; }

/*
 * Offset: how many of the row's twelve tracks a column is pushed along
 * before it starts.
 *
 * `grid-column-start` rather than a margin, because a margin would push the
 * column out of its tracks and leave the ones it vacated collapsed -- the
 * row would still be twelve tracks and the column would be sitting between
 * two of them. Setting the start line moves it *to* a track.
 *
 * It overrides the `grid-column` shorthand above rather than fighting it: the
 * shorthand sets start and end, and this sets start again at a higher
 * specificity, so the end stays `span N` and the column keeps its width.
 *
 * `offset-0` is `auto`, and it is here because a responsive offset needs a
 * way to be cancelled at a wider breakpoint. Without it, a column pushed on a
 * phone would stay pushed on a desktop.
 */
.ilm-component--layout-column.ilm-offset-0 { grid-column-start: auto; }
.ilm-component--layout-column.ilm-offset-1 { grid-column-start: 2; }
.ilm-component--layout-column.ilm-offset-2 { grid-column-start: 3; }
.ilm-component--layout-column.ilm-offset-3 { grid-column-start: 4; }
.ilm-component--layout-column.ilm-offset-4 { grid-column-start: 5; }
.ilm-component--layout-column.ilm-offset-5 { grid-column-start: 6; }
.ilm-component--layout-column.ilm-offset-6 { grid-column-start: 7; }
.ilm-component--layout-column.ilm-offset-7 { grid-column-start: 8; }
.ilm-component--layout-column.ilm-offset-8 { grid-column-start: 9; }
.ilm-component--layout-column.ilm-offset-9 { grid-column-start: 10; }
.ilm-component--layout-column.ilm-offset-10 { grid-column-start: 11; }
.ilm-component--layout-column.ilm-offset-11 { grid-column-start: 12; }

@media (min-width: 576px) {
	.ilm-component--layout-column.ilm-sm-offset-0 { grid-column-start: auto; }
	.ilm-component--layout-column.ilm-sm-offset-1 { grid-column-start: 2; }
	.ilm-component--layout-column.ilm-sm-offset-2 { grid-column-start: 3; }
	.ilm-component--layout-column.ilm-sm-offset-3 { grid-column-start: 4; }
	.ilm-component--layout-column.ilm-sm-offset-4 { grid-column-start: 5; }
	.ilm-component--layout-column.ilm-sm-offset-5 { grid-column-start: 6; }
	.ilm-component--layout-column.ilm-sm-offset-6 { grid-column-start: 7; }
	.ilm-component--layout-column.ilm-sm-offset-7 { grid-column-start: 8; }
	.ilm-component--layout-column.ilm-sm-offset-8 { grid-column-start: 9; }
	.ilm-component--layout-column.ilm-sm-offset-9 { grid-column-start: 10; }
	.ilm-component--layout-column.ilm-sm-offset-10 { grid-column-start: 11; }
	.ilm-component--layout-column.ilm-sm-offset-11 { grid-column-start: 12; }
}

@media (min-width: 768px) {
	.ilm-component--layout-column.ilm-md-offset-0 { grid-column-start: auto; }
	.ilm-component--layout-column.ilm-md-offset-1 { grid-column-start: 2; }
	.ilm-component--layout-column.ilm-md-offset-2 { grid-column-start: 3; }
	.ilm-component--layout-column.ilm-md-offset-3 { grid-column-start: 4; }
	.ilm-component--layout-column.ilm-md-offset-4 { grid-column-start: 5; }
	.ilm-component--layout-column.ilm-md-offset-5 { grid-column-start: 6; }
	.ilm-component--layout-column.ilm-md-offset-6 { grid-column-start: 7; }
	.ilm-component--layout-column.ilm-md-offset-7 { grid-column-start: 8; }
	.ilm-component--layout-column.ilm-md-offset-8 { grid-column-start: 9; }
	.ilm-component--layout-column.ilm-md-offset-9 { grid-column-start: 10; }
	.ilm-component--layout-column.ilm-md-offset-10 { grid-column-start: 11; }
	.ilm-component--layout-column.ilm-md-offset-11 { grid-column-start: 12; }
}

@media (min-width: 992px) {
	.ilm-component--layout-column.ilm-lg-offset-0 { grid-column-start: auto; }
	.ilm-component--layout-column.ilm-lg-offset-1 { grid-column-start: 2; }
	.ilm-component--layout-column.ilm-lg-offset-2 { grid-column-start: 3; }
	.ilm-component--layout-column.ilm-lg-offset-3 { grid-column-start: 4; }
	.ilm-component--layout-column.ilm-lg-offset-4 { grid-column-start: 5; }
	.ilm-component--layout-column.ilm-lg-offset-5 { grid-column-start: 6; }
	.ilm-component--layout-column.ilm-lg-offset-6 { grid-column-start: 7; }
	.ilm-component--layout-column.ilm-lg-offset-7 { grid-column-start: 8; }
	.ilm-component--layout-column.ilm-lg-offset-8 { grid-column-start: 9; }
	.ilm-component--layout-column.ilm-lg-offset-9 { grid-column-start: 10; }
	.ilm-component--layout-column.ilm-lg-offset-10 { grid-column-start: 11; }
	.ilm-component--layout-column.ilm-lg-offset-11 { grid-column-start: 12; }
}

@media (min-width: 1200px) {
	.ilm-component--layout-column.ilm-xl-offset-0 { grid-column-start: auto; }
	.ilm-component--layout-column.ilm-xl-offset-1 { grid-column-start: 2; }
	.ilm-component--layout-column.ilm-xl-offset-2 { grid-column-start: 3; }
	.ilm-component--layout-column.ilm-xl-offset-3 { grid-column-start: 4; }
	.ilm-component--layout-column.ilm-xl-offset-4 { grid-column-start: 5; }
	.ilm-component--layout-column.ilm-xl-offset-5 { grid-column-start: 6; }
	.ilm-component--layout-column.ilm-xl-offset-6 { grid-column-start: 7; }
	.ilm-component--layout-column.ilm-xl-offset-7 { grid-column-start: 8; }
	.ilm-component--layout-column.ilm-xl-offset-8 { grid-column-start: 9; }
	.ilm-component--layout-column.ilm-xl-offset-9 { grid-column-start: 10; }
	.ilm-component--layout-column.ilm-xl-offset-10 { grid-column-start: 11; }
	.ilm-component--layout-column.ilm-xl-offset-11 { grid-column-start: 12; }
}

@media (min-width: 1400px) {
	.ilm-component--layout-column.ilm-xxl-offset-0 { grid-column-start: auto; }
	.ilm-component--layout-column.ilm-xxl-offset-1 { grid-column-start: 2; }
	.ilm-component--layout-column.ilm-xxl-offset-2 { grid-column-start: 3; }
	.ilm-component--layout-column.ilm-xxl-offset-3 { grid-column-start: 4; }
	.ilm-component--layout-column.ilm-xxl-offset-4 { grid-column-start: 5; }
	.ilm-component--layout-column.ilm-xxl-offset-5 { grid-column-start: 6; }
	.ilm-component--layout-column.ilm-xxl-offset-6 { grid-column-start: 7; }
	.ilm-component--layout-column.ilm-xxl-offset-7 { grid-column-start: 8; }
	.ilm-component--layout-column.ilm-xxl-offset-8 { grid-column-start: 9; }
	.ilm-component--layout-column.ilm-xxl-offset-9 { grid-column-start: 10; }
	.ilm-component--layout-column.ilm-xxl-offset-10 { grid-column-start: 11; }
	.ilm-component--layout-column.ilm-xxl-offset-11 { grid-column-start: 12; }
}

/*
 * Arrange children (1.39.0): one under another (what a Column always was),
 * or side by side -- a line at the children's own widths, `gap` apart,
 * wrapping when it is full, so nothing ever overflows the screen. Side by
 * side lines its children up on their middles; an author's "Align
 * children" / "Distribute children" (design, more specific) still win.
 */
.ilm-component--layout-column.ilm-arrange-stacked { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.ilm-component--layout-column.ilm-arrange-inline { flex-direction: row; flex-wrap: wrap; align-items: center; }

@media (min-width: 576px) {
	.ilm-component--layout-column.ilm-sm-arrange-stacked { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.ilm-component--layout-column.ilm-sm-arrange-inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (min-width: 768px) {
	.ilm-component--layout-column.ilm-md-arrange-stacked { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.ilm-component--layout-column.ilm-md-arrange-inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (min-width: 992px) {
	.ilm-component--layout-column.ilm-lg-arrange-stacked { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.ilm-component--layout-column.ilm-lg-arrange-inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (min-width: 1200px) {
	.ilm-component--layout-column.ilm-xl-arrange-stacked { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.ilm-component--layout-column.ilm-xl-arrange-inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (min-width: 1400px) {
	.ilm-component--layout-column.ilm-xxl-arrange-stacked { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.ilm-component--layout-column.ilm-xxl-arrange-inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
}