/*
 * ILM Components -- Section.
 *
 * A page region: full width, its own vertical rhythm, and a background role.
 * It does not constrain the width of its contents -- that is Container's job,
 * and keeping them apart is what lets a background run edge to edge while the
 * text inside it stays readable.
 *
 * Backgrounds are roles, not colours, and each resolves to an ILM Theme token
 * with a fallback. `inverse` sets a foreground colour as well, because a dark
 * background with the page's default dark text is unreadable -- and it sets it
 * on the section, so every component inside inherits it without knowing it is
 * on a dark background.
 */

.ilm-component--layout-section {
	display: flex;
	flex-direction: column;
	gap: var(--ilm-c-gap);
	padding-block: var(--ilm-c-padb);
}

.ilm-component--layout-section.ilm-bg-none {
	background-color: transparent;
}

.ilm-component--layout-section.ilm-bg-subtle {
	background-color: var(--ilm-color-bg-subtle, #f6f7f8);
}

.ilm-component--layout-section.ilm-bg-strong {
	background-color: var(--ilm-color-bg-strong, #e8eaed);
}

.ilm-component--layout-section.ilm-bg-inverse {
	background-color: var(--ilm-color-fg, #1d2125);
	color: var(--ilm-color-bg, #ffffff);
}

/*
 * Links on an inverse background follow the text rather than the site's link
 * colour, which is chosen to contrast with a light page and usually fails
 * against a dark one. Underlined, so the link is still identifiable without
 * relying on a colour difference that is no longer there.
 */
.ilm-component--layout-section.ilm-bg-inverse a {
	color: inherit;
	text-decoration: underline;
}

/*
 * Hide when nothing inside shows (1.31.0, `hideWhenEmpty`): the band is
 * left out when no component inside it drew anything -- only layout is
 * left. Spacer and Divider are not layout here: they are something to show.
 * Not in the editor canvas, whose body is `ilm-canvas`, where the band has to
 * stay visible to be edited. `!important` because a Section's own design
 * classes set `display`, and hiding is the whole of this rule.
 */
:where(body:not(.ilm-canvas)) .ilm-component--layout-section.ilm-section--hide-empty:not(:has(.ilm-component:not(.ilm-component--layout-section, .ilm-component--layout-container, .ilm-component--layout-row, .ilm-component--layout-column, .ilm-component--layout-grid))) {
	display: none !important;
}

/*
 * A band hidden on items that carry a term (1.42.0): the server marks the
 * band on such an item; the page and Preview leave it out, the editor canvas
 * keeps it, so it can be seen and edited. As above, hiding is the whole rule.
 */
:where(body:not(.ilm-canvas)) .ilm-component--layout-section.ilm-section--hide-item {
	display: none !important;
}