/*
 * ILM Components -- Container.
 *
 * A measure, and a stack. `width` caps how wide the content gets, `pad` keeps
 * it off the edge of a narrow screen, and `gap` spaces the children.
 *
 * Flex column rather than a plain block, so that `gap` works at all: block
 * children have no gap, and the alternative is margins on the children, which
 * collapse and make a container's spacing depend on what is inside it.
 *
 * `margin-inline: auto` centres it within whatever holds it, which is what
 * makes `narrow` and `normal` look like a measure rather than a left column.
 */

.ilm-component--layout-container {
	display: flex;
	flex-direction: column;
	gap: var(--ilm-c-gap);
	inline-size: 100%;
	margin-inline: auto;
	padding-inline: var(--ilm-c-pad);
}

/*
 * Widths are `max-inline-size`, never a fixed size: the container is as wide
 * as it is allowed to be or as wide as the space permits, whichever is less,
 * so nothing overflows a phone.
 *
 * `normal` is 72ch rather than a pixel value. A measure is a count of
 * characters -- the readability limit is about 60 to 80 of them -- and `ch`
 * says that, so the line length stays readable if the site's font size
 * changes.
 */
.ilm-component--layout-container.ilm-width-narrow { max-inline-size: 48ch; }
.ilm-component--layout-container.ilm-width-normal { max-inline-size: 72ch; }
/* `--ilm-layout-wide` is a site's own wide measure, from Global Styles (1.15.0). */
.ilm-component--layout-container.ilm-width-wide { max-inline-size: var(--ilm-layout-wide, 1320px); }
.ilm-component--layout-container.ilm-width-full { max-inline-size: none; }