/**
 * Layout — container, section rhythm, and the grids used by the answer templates.
 */

.sfx-container {
	width: 100%;
	max-width: var(--sfx-container);
	margin-inline: auto;
	padding-inline: var(--sfx-gutter);
}

.sfx-container--wide { max-width: var(--sfx-container-wide); }
.sfx-container--narrow { max-width: 820px; }

/* Prose columns are capped at a readable measure. Answer copy that runs the full
   1140px is measurably harder to scan, and these pages are long. */
.sfx-measure { max-width: var(--sfx-measure); }

/* ---- Sections ---------------------------------------------------------- */

.sfx-section { padding-block: var(--sfx-section-y); }
.sfx-section--lg { padding-block: var(--sfx-section-y-lg); }
.sfx-section--sm { padding-block: var(--sfx-section-y-sm); }
.sfx-section--flush-top { padding-top: 0; }
.sfx-section--flush-bottom { padding-bottom: 0; }

.sfx-section--alt  { background: var(--sfx-bg-alt); }
.sfx-section--dark { background: var(--sfx-bg-dark); color: var(--sfx-text-invert); }
.sfx-section--deep { background: var(--sfx-bg-deep); color: var(--sfx-text-invert); }

/* ---- Hairline rules ---------------------------------------------------- */

.sfx-rule { height: 1px; border: 0; margin: 0; background: var(--sfx-hairline-dark); }
.sfx-invert .sfx-rule, .sfx-section--dark .sfx-rule, .sfx-section--deep .sfx-rule {
	background: var(--sfx-hairline);
}

/* ---- Grids ------------------------------------------------------------- */

.sfx-grid {
	display: grid;
	gap: var(--sfx-gutter);
}

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

/* Auto-fit grid for card lists of unknown length. */
.sfx-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Answer page: sticky contents rail beside the body. */
.sfx-layout-answer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: var(--sfx-gutter);
	align-items: start;
}

.sfx-layout-answer__rail {
	position: sticky;
	top: 120px;
	font-size: var(--sfx-fs-small);
}

.sfx-stack > * + * { margin-top: var(--sfx-stack); }
.sfx-stack--lg > * + * { margin-top: calc(var(--sfx-stack) * 2); }

@media (max-width: 1024px) {
	.sfx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfx-layout-answer { grid-template-columns: minmax(0, 1fr); }
	.sfx-layout-answer__rail { position: static; }
}

@media (max-width: 767px) {
	.sfx-grid--2, .sfx-grid--3, .sfx-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.sfx-grid { gap: var(--sfx-gutter-sm); }
}

/* Full-bleed child inside a container, without the overflow-x hack the production
   site relies on. */
.sfx-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}