/*
 * The layout sets --sv-cols from one track per column (--sv-c1…--sv-c6, filling: --sv-f1…--sv-f6; rows
 * with a layout other than these presets get generated rules on their page, ADR 0033);
 * defaults for smaller screens use :where() (zero specificity) so the "Columns" setting per device
 * (sv-t-cols-*, sv-m-cols-* in utilities.css) always wins. The width is the site's layout
 * (Standard, Wide or Full width — ADR 0016), the same for the header and footer.
 * A row is a size container: an Image in a column that fits its content measures against it (ADR 0029).
 */
.sv-container {
	--sv-f1: minmax(var(--sv-fill-min, 0), 1fr);
	--sv-f2: minmax(var(--sv-fill-min, 0), 1fr);
	--sv-f3: minmax(var(--sv-fill-min, 0), 1fr);
	--sv-f4: minmax(var(--sv-fill-min, 0), 1fr);
	--sv-f5: minmax(var(--sv-fill-min, 0), 1fr);
	--sv-f6: minmax(var(--sv-fill-min, 0), 1fr);
	--sv-c1: var(--sv-f1);
	--sv-c2: var(--sv-f2);
	--sv-c3: var(--sv-f3);
	--sv-c4: var(--sv-f4);
	--sv-c5: var(--sv-f5);
	--sv-c6: var(--sv-f6);
	--sv-cols: var(--sv-c1);
	--sv-colgap: var(--sv-space-md);
	max-inline-size: var(--sv-container-content, var(--sv-container-standard));
	margin-inline: auto;
	container-type: inline-size;
}

/*
 * Default gap; "Space between columns" (sv-colgap-*, which also sets --sv-colgap) wins.
 * --sv-fit-on: whether the layout is used here (not when the columns go one under another or
 * two by two), set wherever the columns are set.
 */
:where(.sv-container) {
	--sv-fit-on: 1;
	display: grid;
	grid-template-columns: var(--sv-cols);
	justify-content: var(--sv-justify, start);
	gap: var(--sv-space-md);
}

/*
 * A row fills its section up to the content width, also in a half- or full-screen section (a grid that
 * centers it): with auto margins a grid item would shrink to its content, and a size container's
 * content counts as nothing, leaving the row zero wide (ADR 0056).
 */
.sv-section > .sv-container {
	inline-size: 100%;
}

/*
 * Rows one under another in a section (e.g. an unlocked section, ADR 0026): Normal space between them,
 * or the section's own Space between rows (--sv-rowgap, ADR 0090).
 */
:where(.sv-section > .sv-container + .sv-container) {
	margin-block-start: var(--sv-rowgap, var(--sv-space-md));
}

/*
 * Inner columns (ADR 0027): as wide as its column; the column's own gap spaces it. Like any element
 * in a column they have a Width and a Height (ADR 0031): Fit is as wide as their columns' content,
 * in the proportions of their Columns layout. Like a column that fits (ADR 0029) it and its columns
 * then stop being size containers (a size container ignores its content's width); their images
 * measure against the column around it.
 */
.sv-column > .sv-container {
	inline-size: 100%;
	max-inline-size: none;
	margin-inline: 0;
}

.sv-column > .sv-container.sv-w-fit,
.sv-column > .sv-container.sv-w-fit > .sv-column {
	container-type: normal;
}

.sv-column > .sv-container.sv-w-fit {
	inline-size: fit-content;
	max-inline-size: 100%;
}

.sv-container--layout-1-1 {
	--sv-cols: var(--sv-c1) var(--sv-c2);
}

.sv-container--layout-2-1 {
	--sv-f1: minmax(var(--sv-fill-min, 0), 2fr);
	--sv-cols: var(--sv-c1) var(--sv-c2);
}

.sv-container--layout-1-2 {
	--sv-f2: minmax(var(--sv-fill-min, 0), 2fr);
	--sv-cols: var(--sv-c1) var(--sv-c2);
}

.sv-container--layout-1-1-1 {
	--sv-cols: var(--sv-c1) var(--sv-c2) var(--sv-c3);
}

.sv-container--layout-1-1-1-1 {
	--sv-cols: var(--sv-c1) var(--sv-c2) var(--sv-c3) var(--sv-c4);
}

/*
 * A column whose Width is "Fit content" (ADR 0029): its track fits it; the others share the
 * rest but keep room for a few words. Only fitting columns leave space in the row: alignment
 * (--sv-justify) places them.
 */
.sv-container:has(> .sv-colw-fit) {
	--sv-fill-min: min(10rem, 100%);
}

.sv-container:has(> .sv-colw-fit:nth-child(1)) {
	--sv-c1: auto;
}

.sv-container:has(> .sv-colw-fit:nth-child(2)) {
	--sv-c2: auto;
}

.sv-container:has(> .sv-colw-fit:nth-child(3)) {
	--sv-c3: auto;
}

.sv-container:has(> .sv-colw-fit:nth-child(4)) {
	--sv-c4: auto;
}

.sv-container:has(> .sv-colw-fit:nth-child(5)) {
	--sv-c5: auto;
}

.sv-container:has(> .sv-colw-fit:nth-child(6)) {
	--sv-c6: auto;
}

/*
 * Its images keep the size they had filling: they measure against the column's share of the row
 * (less the gaps) instead of the column (--sv-fit-base, image/style.css), so choosing Fit keeps
 * the picture and the column hugs it. Where the layout isn't used (columns one under another),
 * the column is as wide as the row: they measure against the row.
 */
.sv-container > .sv-colw-fit {
	--sv-fit-base: calc((100cqi - var(--sv-fit-gaps, 0) * var(--sv-colgap)) * (var(--sv-fit-share, 1)) * var(--sv-fit-on, 1) + 100cqi * (1 - var(--sv-fit-on, 1)));
}

.sv-container--layout-1-1 > .sv-colw-fit {
	--sv-fit-share: 1 / 2;
	--sv-fit-gaps: 1;
}

.sv-container--layout-2-1 > .sv-colw-fit:nth-child(1),
.sv-container--layout-1-2 > .sv-colw-fit:nth-child(2) {
	--sv-fit-share: 2 / 3;
	--sv-fit-gaps: 1;
}

.sv-container--layout-2-1 > .sv-colw-fit:nth-child(2),
.sv-container--layout-1-2 > .sv-colw-fit:nth-child(1) {
	--sv-fit-share: 1 / 3;
	--sv-fit-gaps: 1;
}

.sv-container--layout-1-1-1 > .sv-colw-fit {
	--sv-fit-share: 1 / 3;
	--sv-fit-gaps: 2;
}

.sv-container--layout-1-1-1-1 > .sv-colw-fit {
	--sv-fit-share: 1 / 4;
	--sv-fit-gaps: 3;
}

/*
 * Inner columns or a grid have no width of their own to fit (their parts measure against their
 * place): a column holding them keeps filling its share.
 */
.sv-container:has(> .sv-colw-fit:nth-child(1):is(.sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4, .sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4, .sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4)),
.sv-container:has(> .sv-colw-fit:nth-child(1) > .sv-container) {
	--sv-c1: var(--sv-f1);
}

.sv-container:has(> .sv-colw-fit:nth-child(2):is(.sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4, .sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4, .sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4)),
.sv-container:has(> .sv-colw-fit:nth-child(2) > .sv-container) {
	--sv-c2: var(--sv-f2);
}

.sv-container:has(> .sv-colw-fit:nth-child(3):is(.sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4, .sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4, .sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4)),
.sv-container:has(> .sv-colw-fit:nth-child(3) > .sv-container) {
	--sv-c3: var(--sv-f3);
}

.sv-container:has(> .sv-colw-fit:nth-child(4):is(.sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4, .sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4, .sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4)),
.sv-container:has(> .sv-colw-fit:nth-child(4) > .sv-container) {
	--sv-c4: var(--sv-f4);
}

.sv-container:has(> .sv-colw-fit:nth-child(5):is(.sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4, .sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4, .sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4)),
.sv-container:has(> .sv-colw-fit:nth-child(5) > .sv-container) {
	--sv-c5: var(--sv-f5);
}

.sv-container:has(> .sv-colw-fit:nth-child(6):is(.sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4, .sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4, .sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4)),
.sv-container:has(> .sv-colw-fit:nth-child(6) > .sv-container) {
	--sv-c6: var(--sv-f6);
}

.sv-container > .sv-colw-fit:is(.sv-flow-grid2, .sv-flow-grid3, .sv-flow-grid4, .sv-t-flow-grid2, .sv-t-flow-grid3, .sv-t-flow-grid4, .sv-m-flow-grid2, .sv-m-flow-grid3, .sv-m-flow-grid4),
.sv-container > .sv-colw-fit:has(> .sv-container) {
	--sv-fit-base: initial;
	container-type: inline-size;
}

@media (max-width: 1024px) {
	:where(.sv-container--layout-1-1-1-1) {
		--sv-fit-on: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones stack columns unless the section says otherwise. */
@media (max-width: 767px) {
	:where(.sv-container) {
		--sv-fit-on: 0;
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * A Grid (ADR 0030): inner columns with one column whose elements sit in cells. The cells share
 * the row as "Items per row" says (Automatic: as many as fit, at least a card wide); a row's
 * cells are equally tall; "Space between columns" spaces them. Tablets: 4 per row become 2;
 * phones: one per row. The column's own Arrange doesn't apply here.
 */
.sv-container:is(.sv-container--grid-auto, .sv-container--grid-2, .sv-container--grid-3, .sv-container--grid-4) > .sv-column {
	--sv-in-row: 0;
	--sv-row-self: auto;
	display: grid;
	grid-template-columns: var(--sv-grid-cols);
	align-content: start;
	gap: var(--sv-colgap);
}

.sv-container--grid-auto { --sv-grid-cols: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.sv-container--grid-2 { --sv-grid-cols: repeat(2, minmax(0, 1fr)); }
.sv-container--grid-3 { --sv-grid-cols: repeat(3, minmax(0, 1fr)); }
.sv-container--grid-4 { --sv-grid-cols: repeat(4, minmax(0, 1fr)); }

/* Each cell holds one element; an Image's size slider measures against its cell. */
.sv-container:is(.sv-container--grid-auto, .sv-container--grid-2, .sv-container--grid-3, .sv-container--grid-4) > .sv-column > * {
	margin-block: 0;
}

.sv-container:is(.sv-container--grid-auto, .sv-container--grid-2, .sv-container--grid-3, .sv-container--grid-4) > .sv-column > .sv-image {
	container-type: inline-size;
	inline-size: auto;
}

@media (max-width: 1024px) {
	.sv-container--grid-4 { --sv-grid-cols: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.sv-container:is(.sv-container--grid-2, .sv-container--grid-3, .sv-container--grid-4) { --sv-grid-cols: minmax(0, 1fr); }
}