/*
 * Sustainability - Documents.
 *
 * Read from cp-all-designer css/sustain-structure.css (.susdl).
 *
 * Colour, type, padding and the measures arrive from the Style tab and are not
 * repeated here.
 */

.custom-sustainability-documents .custom-sustainability-documents__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--custom-sustainability-documents-least, 240px)), 1fr));
}

/* a white card cut to the leaf; its colour wipes up from the foot under a pointer */
.custom-sustainability-documents .custom-sustainability-documents__list .custom-sustainability-documents__card {
	--custom-sustainability-documents-c: #16418C;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
	border: 2px solid var(--custom-sustainability-documents-edge, #EEF2F7);   /* measures 1px */
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm */
	color: inherit;
	text-decoration: none;
	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-documents .custom-sustainability-documents__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--custom-sustainability-documents-c);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sustainability-documents.custom-sustainability-documents[data-custom-partner-band] a.custom-sustainability-documents__card:hover,
.custom-sustainability-documents.custom-sustainability-documents[data-custom-partner-band] a.custom-sustainability-documents__card:focus-visible {
	transform: translateY(-6px);
	border-color: var(--custom-sustainability-documents-c);
	box-shadow: 0 34px 80px -20px rgba(22, 65, 140, 0.3);   /* --sh-lg */
}

.custom-sustainability-documents a.custom-sustainability-documents__card:hover::after,
.custom-sustainability-documents a.custom-sustainability-documents__card:focus-visible::after {
	transform: scaleY(1);
}

/* the file mark at the left, the download ring at the right */
.custom-sustainability-documents .custom-sustainability-documents__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.custom-sustainability-documents .custom-sustainability-documents__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	color: var(--custom-sustainability-documents-c);
	transition: color 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sustainability-documents .custom-sustainability-documents__icon svg {
	display: block;
	width: var(--custom-sustainability-documents-icon, 44px);
	height: var(--custom-sustainability-documents-icon, 44px);
}

.custom-sustainability-documents .custom-sustainability-documents__ring {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	border: 2px solid color-mix(in srgb, var(--custom-sustainability-documents-c) 34%, #FFFFFF);   /* measures 1.5px */
	border-radius: 50%;
	color: var(--custom-sustainability-documents-c);
	transition: color 400ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 400ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sustainability-documents .custom-sustainability-documents__ring svg {
	display: block;
	width: 22px;
	height: 22px;
}

.custom-sustainability-documents .custom-sustainability-documents__meta,
.custom-sustainability-documents .custom-sustainability-documents__name,
.custom-sustainability-documents .custom-sustainability-documents__word {
	display: block;
}

.custom-sustainability-documents .custom-sustainability-documents__name {
	font-weight: 600;
	line-height: 1.5;
	transition: color 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-sustainability-documents .custom-sustainability-documents__word {
	margin-top: 8px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--custom-sustainability-documents-c);
	transition: color 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* the words wait for the fill before they turn white; leaving, they come straight back */
.custom-sustainability-documents.custom-sustainability-documents[data-custom-partner-band] a.custom-sustainability-documents__card:hover .custom-sustainability-documents__icon,
.custom-sustainability-documents.custom-sustainability-documents[data-custom-partner-band] a.custom-sustainability-documents__card:hover .custom-sustainability-documents__name,
.custom-sustainability-documents.custom-sustainability-documents[data-custom-partner-band] a.custom-sustainability-documents__card:hover .custom-sustainability-documents__word {
	color: var(--custom-sustainability-documents-hover, #FFFFFF);
	transition-delay: 200ms;
}

.custom-sustainability-documents.custom-sustainability-documents[data-custom-partner-band] a.custom-sustainability-documents__card:hover .custom-sustainability-documents__ring {
	border-color: var(--custom-sustainability-documents-hover, #FFFFFF);
	background-color: var(--custom-sustainability-documents-hover, #FFFFFF);
	color: var(--custom-sustainability-documents-c);
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.custom-sustainability-documents .custom-sustainability-documents__card,
	.custom-sustainability-documents .custom-sustainability-documents__card::after,
	.custom-sustainability-documents .custom-sustainability-documents__icon,
	.custom-sustainability-documents .custom-sustainability-documents__ring,
	.custom-sustainability-documents .custom-sustainability-documents__name,
	.custom-sustainability-documents .custom-sustainability-documents__word {
		transition: none;
	}
}