/*
 * Sustainability - Scope (and its cards widget).
 *
 * Read from cp-all-designer css/sustain-materiality-issues.css (.miscope,
 * .misc__head, .misc__card). Placed as the design places them, with no group's
 * card ever out of its group: on a phone the design's grid let a card of one
 * group fall among another's; here each group stands with its own cards.
 *
 * Colour, type, padding and the measures arrive from the Style tab and are not
 * repeated here.
 */

.custom-sustainability-scope.custom-sustainability-scope[data-custom-partner-band] {
	background: linear-gradient(160deg,
		var(--custom-sustainability-scope-top, #1E4EA5) 0%,
		var(--custom-sustainability-scope-foot, #16418C) 100%);
}

.custom-sustainability-scope .custom-sustainability-scope__groups {
	display: grid;
	grid-template-columns: repeat(var(--custom-sustainability-scope-columns, 3), minmax(0, 1fr));
	align-items: start;
}

/* a group stands across its columns: its bar, then its cards as many to a row */
.custom-sustainability-scope .custom-sustainability-scope__group {
	display: grid;
	grid-column: span min(var(--custom-sustainability-scope-span, 1), var(--custom-sustainability-scope-columns, 3));
	gap: var(--custom-sustainability-scope-gap, 20px);
	min-width: 0;
}

.custom-sustainability-scope .custom-sustainability-scope__groups .custom-sustainability-scope__bar {
	margin: 0;
	background: var(--custom-sustainability-scope-c, #5CA13F);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.custom-sustainability-scope .custom-sustainability-scope__cards {
	display: grid;
	grid-template-columns: repeat(min(var(--custom-sustainability-scope-span, 1), var(--custom-sustainability-scope-columns, 3)), minmax(0, 1fr));
	gap: var(--custom-sustainability-scope-gap, 20px);
}

.custom-sustainability-scope .custom-sustainability-scope__card {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 12px;
	border: 2px solid var(--custom-sustainability-scope-c, #5CA13F);   /* measures 1.5px */
	text-align: center;
}

.custom-sustainability-scope .custom-sustainability-scope__card-icon {
	display: grid;
	place-items: center;
	color: var(--custom-sustainability-scope-c, #5CA13F);
}

.custom-sustainability-scope .custom-sustainability-scope__card-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.custom-sustainability-scope .custom-sustainability-scope__groups .custom-sustainability-scope__card-words {
	margin: 0;
	line-height: 1.55;
}

/* a phone: one column, each group its bar and then its cards */
@media (max-width: 767px) {
	.custom-sustainability-scope .custom-sustainability-scope__groups,
	.custom-sustainability-scope .custom-sustainability-scope__cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-sustainability-scope .custom-sustainability-scope__group {
		grid-column: auto;
	}
}