/**
 * css/components/template-future.css — Website 2.0 FutureIQ restyle
 * (#127)
 *
 * template-future.php-scoped styles: the Featured Articles/Upcoming
 * Events group headings + events list (blocks/future_content/
 * articles.php) and the image+copy+CTA download band (`.cg-future-
 * download` — blocks/future_content/download.php).
 *
 * No dedicated design HTML exists for this page (per docs/
 * 2.0-system-guide.md §8 "don't guess the design") — extrapolates the
 * already-shipped system (`.cg-band`/`.cg-h3`/`.cg-statement`/`.cg-body`/
 * `.cg-btn`, `.cg-work-articles__grid`'s 3-col rhythm, #62).
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

/* ------------------------------------------------------------------ *
 * Featured Articles / Upcoming Events (blocks/future_content/articles.php)
 * ------------------------------------------------------------------ */

.cg-future-articles__heading {
	margin-top: 0;
}

.cg-future-articles__heading--events {
	margin-top: 64px;
}

.cg-future-articles__events {
	display: flex;
	flex-direction: column;
	margin-top: 44px;
}

/* ------------------------------------------------------------------ *
 * Download band (blocks/future_content/download.php) — legacy shape is
 * one stacked column (image, then copy), so this keeps that same shape:
 * `align`/`text_align` only ever nudge the image/copy's own self-
 * alignment within the column (never a real two-up split).
 * ------------------------------------------------------------------ */

.cg-future-download {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.cg-future-download__media {
	width: min( 600px, 100% );
}

.cg-future-download__media--right {
	align-self: flex-end;
}

.cg-future-download__media img {
	display: block;
	width: 100%;
	height: auto;
}

.cg-future-download__body {
	max-width: 640px;
}

.cg-future-download__body--right {
	align-self: flex-end;
	text-align: right;
}

.cg-future-download__title {
	margin: 0 0 16px;
}

.cg-future-download__title a {
	color: inherit;
	text-decoration: none;
}

.cg-future-download .cg-btn {
	margin-top: 24px;
}

@media ( max-width: 680px ) {
	.cg-future-download__body--right {
		align-self: stretch;
		text-align: left;
	}
}