/**
 * Closing band, after the prototype's SbdClosingBand: `border-t
 * bg-swiss-red-light py-16 lg:py-20`, centered in a max-w-4xl container;
 * heading `text-3xl md:text-4xl font-bold text-balance`, text `mt-4 text-lg`
 * in max-w-2xl, actions `mt-8 gap-3`, stacked below 640px.
 */

.sba-c-band.sba-c-band {
	padding: 64px 0;
	border-top: 1px solid var(--sba-border);
	background-color: var(--sba-red-light);
	font-family: var(--sba-font-sans);
	text-align: center;
}

/* On swissbiotech.org the light red is the closing band of a platform page
   and nothing else at section size; a page's closing band is warm (style
   guide, Layout, Surfaces). */
.site-sba .sba-c-band.sba-c-band {
	background-color: var(--sba-surface-warm);
}

.sba-c-band .sba-c-band-body {
	max-width: 56rem;
}

.sba-c-band .sba-c-band-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 30px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 36px;
	text-wrap: balance;
}

.sba-c-band .sba-c-band-text {
	max-width: 42rem;
	margin: 16px auto 0;
	color: var(--sba-slate);
	font-size: 18px;
	line-height: 28px;
	text-wrap: pretty;
}

.sba-c-band .sba-c-band-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

@media (min-width: 640px) {
	.sba-c-band .sba-c-band-actions {
		flex-direction: row;
	}
}

/* A platform page's band keeps the light red there, and may open with the
   platform's lockup, 40px tall (56px from 768px), `mb-6`. */
.site-sba .sba-c-band.sba-c-band-platform {
	background-color: var(--sba-red-light);
}

.sba-c-band .sba-c-band-logo {
	display: block;
	width: auto;
	max-width: 260px;
	height: auto;
	max-height: 40px;
	margin: 0 auto 24px;
	object-fit: contain;
}

/* With cards: the title over them, the cards `mt-8` in the narrow
   container, left aligned, the text link centered `mt-8`. */
.sba-c-band .sba-c-band-cards-body {
	max-width: 1152px;
	margin-top: 32px;
	text-align: left;
}

.sba-c-band .sba-c-band-link {
	display: flex;
	justify-content: center;
	margin: 32px 0 0;
}

@media (min-width: 768px) {
	.sba-c-band .sba-c-band-logo {
		max-width: 360px;
		max-height: 56px;
	}

	.sba-c-band .sba-c-band-title {
		font-size: 36px;
		line-height: 40px;
	}
}

@media (min-width: 1024px) {
	.sba-c-band.sba-c-band {
		padding: 80px 0;
	}
}