/**
 * Component: layout
 *
 * Containers, section rhythm and the shop shell. Whitespace here separates;
 * it is never decorative. A catalogue is dense by nature.
 */

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

.tcs-container--text {
	max-width: var(--tcs-container-text);
}

.tcs-section {
	padding-block: var(--tcs-section-gap);
}

.tcs-section + .tcs-section {
	padding-block-start: 0;
}

/* ---------------------------------------------------------------------- */
/* Section headers                                                         */
/* ---------------------------------------------------------------------- */

.tcs-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--tcs-space-sm) var(--tcs-space-lg);
	margin-block-end: var(--tcs-space-lg);
	padding-block-end: var(--tcs-space-sm);
	border-block-end: var(--tcs-border);
}

.tcs-section__title {
	font-size: var(--tcs-text-xl);
	margin: 0;
}

/*
 * Standfirst under a section title. Sits inside the left-hand block of the
 * header so it wraps under the title rather than pushing the "see all" link
 * out of alignment.
 */
.tcs-section__intro {
	margin: var(--tcs-space-2xs) 0 0;
	max-width: 56ch;
	font-size: var(--tcs-text-sm);
	line-height: var(--tcs-leading-normal);
	color: var(--tcs-ink-muted);
}

.tcs-section__link {
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-medium);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Shop shell                                                              */
/* ---------------------------------------------------------------------- */

.tcs-shop {
	padding-block: var(--tcs-space-xl) var(--tcs-space-3xl);
}

/* ---------------------------------------------------------------------- */
/* Prose                                                                   */
/* ---------------------------------------------------------------------- */

.tcs-prose {
	max-width: var(--tcs-measure);
}

.tcs-prose > * + * {
	margin-block-start: var(--tcs-space-md);
}

.tcs-prose h2,
.tcs-prose h3 {
	margin-block-start: var(--tcs-space-xl);
}

.tcs-prose img {
	border-radius: var(--tcs-radius);
}

/* ---------------------------------------------------------------------- */
/* Page header                                                             */
/* ---------------------------------------------------------------------- */

.tcs-page-header {
	padding-block: var(--tcs-space-xl) var(--tcs-space-lg);
	border-block-end: var(--tcs-border);
	margin-block-end: var(--tcs-space-xl);
}

.tcs-page-header__title {
	margin: 0;
}

.tcs-page-header__intro {
	margin-block-start: var(--tcs-space-sm);
	max-width: var(--tcs-measure);
	color: var(--tcs-ink-muted);
}

/* ---------------------------------------------------------------------- */
/* Scaffolding notice - development only                                   */
/* ---------------------------------------------------------------------- */

/*
 * Marks parts of the theme that are structural placeholders awaiting their
 * own approved build phase. Removed once each phase lands.
 */
.tcs-scaffold-note {
	background: var(--tcs-state-low-bg);
	color: var(--tcs-state-low);
	border: 1px solid currentColor;
	border-radius: var(--tcs-radius);
	padding: var(--tcs-space-sm) var(--tcs-space-md);
	font-size: var(--tcs-text-xs);
	margin-block: var(--tcs-space-md);
	max-width: var(--tcs-measure);
}