/* Compliance Links :: Front-end */

.cl-compliance-links {
	--cl-canvas: 1440px;
	--cl-content: 1200px;
	--cl-gutter: calc( ( var( --cl-canvas ) - var( --cl-content ) ) / 2 );

	width: 100%;
	padding: var( --cl-pad-y, 80px ) 0;
	background: var( --cl-bg, #fff );
	box-sizing: border-box;
}
.cl-compliance-links * { box-sizing: border-box; }

.cl-container {
	max-width: var( --cl-canvas );
	margin: 0 auto;
	padding: 0 var( --cl-gutter );
}

/* Headline */
.cl-heading { text-align: center; margin-bottom: 35px; }
.cl-heading h2 {
	margin: 0;
	font-family: var( --cl-heading-font );
	font-size: max( 24px, calc( var( --cl-heading-size, 40px ) * 1 ) );
	font-weight: var( --cl-heading-weight );
	line-height: var( --cl-heading-line );
	text-transform: uppercase;
	color: var( --cl-heading );
}
.cl-subtitle {
	margin: 0;
	font-family: var( --cl-subtitle-font );
	font-size: var( --cl-subtitle-size );
	font-weight: var( --cl-subtitle-weight );
	line-height: var( --cl-subtitle-line );
	font-style: italic;
	color: var( --cl-subtitle );
}
.cl-description {
	max-width: 1200px;
	margin: 20px auto 0;
	font-family: var( --cl-description-font );
	font-size: var( --cl-description-size );
	font-weight: var( --cl-description-weight );
	line-height: var( --cl-description-line );
	text-align: center;
	color: var( --cl-description );
}

/* The link grid */
.cl-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	column-gap: 20px;
	row-gap: 30px;
	justify-items: stretch;
}

.cl-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 86px;
	padding: 0 22px 0 40px;
	background: var( --cl-card-bg );
	border: 1px solid #F4F4F4;
	border-bottom: 2px solid var( --cl-accent );
	border-radius: 20px;
	text-decoration: none;
	color: var( --cl-card-text );
	transition: transform .2s, box-shadow .2s;
}
.cl-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba( 20, 27, 52, .08 );
}
.cl-card-title {
	padding-right: 20px;
	font-family: var( --cl-card-font );
	font-size: var( --cl-card-size );
	font-weight: var( --cl-card-weight );
	line-height: var( --cl-card-line );
	color: var( --cl-card-text );
}
.cl-arrow { display: flex; flex: 0 0 30px; color: var( --cl-arrow ); }
.cl-arrow svg { width: 30px; height: 30px; fill: none; }
.cl-arrow path {
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* REVEAL - "the ripple" */

.cl-js .cl-rv { opacity: 0; }

/* Headline: rises ahead of the ripple */
.cl-js .cl-rv--rise.cl-rv-in {
	animation: cl-rise .7s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --cl-rv-i, 0 ) * 85ms );
}
@keyframes cl-rise {
	0% { opacity: 0; transform: translate3d( 0, 20px, 0 ); filter: blur( 4px ); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: translate3d( 0, 0, 0 ); filter: none; }
}

/* The cards */
.cl-js .cl-grid.cl-rv-in { opacity: 1; }

.cl-js .cl-grid .cl-card { opacity: 0; }
.cl-js .cl-grid.cl-rv-in .cl-card {
	animation: cl-ripple .62s cubic-bezier( .2, .8, .3, 1.2 ) both;
	animation-delay: var( --cl-rv-d, 0ms );
}
@keyframes cl-ripple {
	0% {
		opacity: 0;
		transform: translate3d( 0, 26px, 0 ) scale( .94 );
	}
	55% { opacity: 1; }
	100% {
		opacity: 1;
		transform: translate3d( 0, 0, 0 ) scale( 1 );
	}
}

.cl-js .cl-grid.cl-rv-in .cl-arrow {
	animation: cl-arrow-in .45s cubic-bezier( .2, .8, .3, 1 ) both;
	animation-delay: calc( var( --cl-rv-d, 0ms ) + 180ms );
}
@keyframes cl-arrow-in {
	0% { opacity: 0; transform: translate3d( -8px, 0, 0 ); }
	100% { opacity: 1; transform: translate3d( 0, 0, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.cl-js .cl-rv,
	.cl-js .cl-rv.cl-rv-in,
	.cl-js .cl-grid .cl-card,
	.cl-js .cl-grid.cl-rv-in .cl-arrow {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none !important;
	}
	.cl-card { transition: none; }
}

/* Breakpoints - the gutter steps are the hero section's exactly. */

@media ( max-width: 1439px ) {
	.cl-compliance-links { --cl-gutter: clamp( 40px, 6vw, 120px ); }
}

@media ( max-width: 1200px ) {
	.cl-heading h2 { font-size: max( 24px, calc( var( --cl-heading-size, 40px ) * 0.9 ) ); }
}

@media ( max-width: 900px ) {
	.cl-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.cl-heading h2 { font-size: max( 24px, calc( var( --cl-heading-size, 40px ) * 0.82 ) ); }
}

@media ( max-width: 600px ) {
	.cl-compliance-links { --cl-gutter: 20px; }
	.cl-grid { grid-template-columns: minmax( 0, 1fr ); gap: 18px; }
	.cl-card { min-height: 78px; padding-left: 25px; border-radius: 18px; }
}

@media ( max-width: 400px ) {
	.cl-compliance-links { --cl-gutter: 16px; }
}