/*
 * Sustainability - SDG align (and its topic widget).
 *
 * Read from cp-all-designer css/sustain-cpall-and-the-sustainable-development-
 * goals.css:54-90 (.susdg-map, .susdg-chips). The rail is the shared one
 * (sustainability-widget.css, [data-custom-sus-tabs]).
 *
 * Colour, type, padding and the measures arrive from the Style tab and are not
 * repeated here.
 */

/* the smaller head (.h-sub): 500, 1.35 */
.custom-sustainability-sdg-align.custom-sustainability-sdg-align [data-custom-investor-title] {
	font-weight: 500;
	line-height: 1.35;
}

/* a tab's topics, one widget a topic, one under the other a set space apart */
/* (investor-widget.css makes an item's container a plain block, 0,4,0: this stands over it) */
.custom-sustainability-sdg-align .custom-sustainability-sdg-align__panel[data-custom-slot] > .e-con.e-con {
	display: flex;
	flex-direction: column;
	gap: var(--custom-sustainability-sdg-align-gap, 14px);
}

/* a topic: a white card cut to a small leaf, its name at the left and its goals at the right */
.custom-sustainability-sdg-align .custom-sustainability-sdg-align__topic {
	display: flex;
	align-items: center;
	gap: 24px;
	border: 2px solid #EEF2F7;   /* measures 1px */
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm */
	transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sustainability-sdg-align .custom-sustainability-sdg-align__topic:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--custom-sustainability-sdg-align-accent, #5CA13F) 40%, #FFFFFF);
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh */
}

.custom-sustainability-sdg-align .custom-sustainability-sdg-align__topic .custom-sustainability-sdg-align__name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	line-height: 1.5;
}

.custom-sustainability-sdg-align .custom-sustainability-sdg-align__topic .custom-sustainability-sdg-align__chips {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-sustainability-sdg-align .custom-sustainability-sdg-align__topic .custom-sustainability-sdg-align__chip {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.custom-sustainability-sdg-align .custom-sustainability-sdg-align__chip img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
}

/* one column: the goals under the name */
@media (max-width: 1000px) {
	.custom-sustainability-sdg-align .custom-sustainability-sdg-align__topic {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-sustainability-sdg-align .custom-sustainability-sdg-align__topic {
		transition: none;
	}
}