/**
 * Soumm layout layer: containers, sections, grids, sticky columns.
 *
 * This is where the prototypes' JS layout attributes become real CSS.
 * data-twocol  -> .s-grid--2 inside the 1000px media query
 * data-sticky  -> .s-sticky
 */

/* --- Container ------------------------------------------------------- */
.s-wrap {
	width: 100%;
	max-width: var(--soumm-container);
	margin-inline: auto;
	padding-inline: var(--soumm-gutter);
}

.s-wrap--narrow {
	max-width: 1080px;
}

.s-wrap--text {
	max-width: 780px;
}

/* --- Section --------------------------------------------------------- */
.s-section {
	padding-block: var(--soumm-section-y);
}

.s-section--sm {
	padding-block: var(--soumm-section-y-sm);
}

.s-section--alt {
	background: var(--soumm-surface-alt);
}

.s-section--ink {
	background: var(--soumm-ink);
	color: var(--soumm-on-ink);
}

.s-section--ink h1,
.s-section--ink h2,
.s-section--ink h3,
.s-section--ink h4 {
	color: var(--soumm-on-ink);
}

/* First section on a page sits below the fixed header. */
.s-main > .s-section:first-child {
	padding-top: calc(var(--soumm-section-y) + var(--soumm-header-h));
}

/* --- Stacks ---------------------------------------------------------- */
.s-stack {
	display: flex;
	flex-direction: column;
	gap: var(--soumm-stack);
}

.s-stack--sm {
	gap: 14px;
}

.s-stack--lg {
	gap: var(--soumm-col-gap);
}

/* --- Grids ----------------------------------------------------------- */
.s-grid {
	display: grid;
	gap: var(--soumm-col-gap);
	grid-template-columns: minmax(0, 1fr);
}

.s-grid--tight {
	gap: clamp(18px, 2vw, 30px);
}

/* Below 1000px every grid is a single column. The design has one breakpoint. */
@media (min-width: 1000px) {
	.s-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.s-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.s-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Asymmetric splits used by the editorial sections. */
	.s-grid--sidebar {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.s-grid--sidebar-left {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.s-grid--media {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	}

	.s-sticky {
		position: sticky;
		top: clamp(120px, 9vw, 150px);
		align-self: start;
	}
}

/* Two- and three-up card rows collapse to two columns on tablet widths, which
   the prototypes handled with a JS resize listener. */
@media (min-width: 640px) and (max-width: 999px) {
	.s-grid--3,
	.s-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Measure --------------------------------------------------------- */
.s-measure {
	max-width: var(--soumm-measure);
}

.s-measure--tight {
	max-width: var(--soumm-measure-tight);
}

/* --- Utility --------------------------------------------------------- */
.s-center {
	text-align: center;
}

.s-center .s-measure {
	margin-inline: auto;
}

.s-flow > * + * {
	margin-top: 14px;
}