/**
 * Ecosystem diagram
 *
 * Mirrors the diagram on page 4 of the HXT Lab vision document: three parties
 * feed down into the lab, the lab holds its three environments, and four
 * outcomes come out the bottom.
 *
 * An earlier version ran left to right as industry → lab → college, which put
 * the college on the output side. It is an input, so the flow is vertical.
 *
 * Written mobile-first on Bootstrap's own breakpoints. Everything stacks to one
 * column on a phone and the arrows still point down, so the reading order is
 * the same at every width and nothing has to be overridden back.
 *
 * The two icon sets from the vision document differ, and so does their
 * treatment: the three input glyphs are black and sit in white discs, while
 * the three zone glyphs are gold and sit straight on the black lab bar. Do not
 * give the gold ones discs, and do not put the black ones on black.
 */

.rc-eco {
	display: grid;
}

/* ---------------------------------------------------------------------------
 * Inputs — the three parties that feed the lab
 * ------------------------------------------------------------------------ */

.rc-eco-in {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

.rc-eco-node {
	text-align: center;
}

.rc-eco-icon {
	align-items: center;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
	display: flex;
	height: 92px;
	justify-content: center;
	margin: 0 auto .875rem;
	width: 92px;
}

.rc-eco-icon img {
	height: 48px;
	object-fit: contain;
	width: 48px;
}

.rc-eco-node h3 {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: .375rem;
	text-transform: uppercase;
}

.rc-eco-node p {
	font-size: .875rem;
	margin: 0;
	opacity: .78;
}

/* ---------------------------------------------------------------------------
 * Flow arrow
 *
 * One centred arrow between bands rather than one per column. Aligning an
 * arrow under each column only holds while the columns exist, and they
 * collapse on a phone.
 * ------------------------------------------------------------------------ */

.rc-eco-arrow {
	font-size: 1.5rem;
	line-height: 1;
	padding: 1rem 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * The lab
 * ------------------------------------------------------------------------ */

.rc-eco-lab {
	background-color: #000;
	padding: 1.5rem 1.25rem;
}

.rc-eco-lab-title {
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 800;
	margin-bottom: 1.375rem;
	text-align: center;
	text-transform: uppercase;
}

.rc-eco-lab-title span {
	color: #fc0;
}

.rc-eco-zones {
	display: grid;
	gap: 1.125rem;
	grid-template-columns: 1fr;
}

.rc-eco-zone {
	align-items: center;
	display: flex;
	gap: .75rem;
	justify-content: center;
}

/* Gold artwork, so it goes straight onto the black with no disc behind it. */
.rc-eco-zone img {
	flex: 0 0 auto;
	height: 40px;
	object-fit: contain;
	width: 40px;
}

.rc-eco-zone span {
	color: #fff;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Outcomes
 * ------------------------------------------------------------------------ */

.rc-eco-out {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

.rc-eco-outcome {
	background-color: #000;
	color: #fff;
	font-size: .9375rem;
	font-weight: 800;
	line-height: 1.25;
	padding: 1.125rem 1rem;
	text-align: center;
	text-transform: uppercase;
}

.rc-eco-cap {
	font-size: .875rem;
	font-style: italic;
	font-weight: 700;
	margin: 1.375rem 0 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Wider screens
 * ------------------------------------------------------------------------ */

/* Outcomes pair up before anything else does — four across is too narrow here. */
@media (min-width: 576px) {
	.rc-eco-out {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.rc-eco-in,
	.rc-eco-zones {
		grid-template-columns: repeat(3, 1fr);
	}

	/*
	 * Dotted rules between the zones, as in the document.
	 *
	 * The gap is dropped and the clearance moved inside each zone instead. A
	 * grid gap puts empty space between the columns but the rule draws on the
	 * column edge itself, so centred content — a wrapped label, or the icon on
	 * the zone to its left — ends up touching it. Symmetric padding keeps the
	 * same clearance on both sides of every rule.
	 */
	.rc-eco-zones {
		gap: 0;
	}

	.rc-eco-zone {
		padding: 0 1.375rem;
	}

	.rc-eco-zone + .rc-eco-zone {
		border-left: 2px dotted rgba(255, 255, 255, .35);
	}

	.rc-eco-lab {
		padding: 1.75rem 1.5rem;
	}
}

@media (min-width: 992px) {
	.rc-eco-out {
		grid-template-columns: repeat(4, 1fr);
	}
}