/*
 * SME - Strategy.
 *
 * Read from cp-all-designer sme.html:130-170, css/sme.css:210-284, 636-664.
 *
 * Colour, type, padding, the corner and the spaces between the parts arrive
 * from the Style tab and are not repeated here.
 */

.custom-sme-strategy {
	--custom-sme-strategy-edge: #EEF2F7;
	--custom-sme-strategy-rule: #EEF2F7;
	--custom-sme-strategy-1: #50A3D5;
	--custom-sme-strategy-2: #5CA13F;
	--custom-sme-strategy-3: #CE2929;
}

/* sme.css:215-218 — three to a row */
.custom-sme-strategy .custom-sme-strategy__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* sme.css:219-234 */
.custom-sme-strategy .custom-sme-strategy__card {
	--custom-sme-strategy-colour: var(--custom-sme-strategy-1);
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;
	border: 2px solid var(--custom-sme-strategy-edge);   /* sme.css:223 measures 1px */
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm, app.css:159 */
	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);
}

/* the colour is the card's place in the row, round again after the third */
.custom-sme-strategy .custom-sme-strategy__card:nth-child(3n + 2) {
	--custom-sme-strategy-colour: var(--custom-sme-strategy-2);
}

.custom-sme-strategy .custom-sme-strategy__card:nth-child(3n + 3) {
	--custom-sme-strategy-colour: var(--custom-sme-strategy-3);
}

/* sme.css:231 — reached by any pointer, a finger included, as the design has it */
.custom-sme-strategy .custom-sme-strategy__card:hover {
	border-color: color-mix(in srgb, var(--custom-sme-strategy-colour) 40%, #FFFFFF);
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh, app.css:160 */
	transform: translateY(-6px);
}
.custom-sme-strategy .custom-sme-strategy__card:hover .custom-sme-strategy__number {
	border-bottom-color: color-mix(in srgb, var(--custom-sme-strategy-colour) 46%, #FFFFFF);
}

/* sme.css:235-244 — the number leads, a rule under it across the card */
.custom-sme-strategy .custom-sme-strategy__number {
	display: block;
	border-bottom: 2px solid var(--custom-sme-strategy-rule);   /* sme.css:242 measures 1px */
	color: var(--custom-sme-strategy-colour);
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;                  /* -0.03em of the figure */
	text-transform: none;
	transition: border-color 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* sme.css:248-252 */
.custom-sme-strategy .custom-sme-strategy__card-title {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

/* sme.css:253-256 */
.custom-sme-strategy .custom-sme-strategy__card-text {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0;
	text-transform: none;
}

/* ------------------------------------------------------------------ */
/* The panel — sme.css:262-284                                         */
/* ------------------------------------------------------------------ */

.custom-sme-strategy .custom-sme-strategy__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	box-sizing: border-box;
	border-width: 2px;                     /* sme.css:269 measures 1px */
	border-style: solid;
}

.custom-sme-strategy .custom-sme-strategy__panel-body {
	min-width: 0;
}

.custom-sme-strategy .custom-sme-strategy__panel-title {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

.custom-sme-strategy .custom-sme-strategy__panel-text {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0;
	text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (sme.css:655-664, drawn at 640)                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/* sme.css:656-657 — the button goes under the words, and may wrap */
	.custom-sme-strategy .custom-sme-strategy__panel {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-sme-strategy .custom-sme-strategy__panel-act [data-custom-partner-button] {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-sme-strategy .custom-sme-strategy__card,
	.custom-sme-strategy .custom-sme-strategy__number {
		transition: none;
	}
	.custom-sme-strategy .custom-sme-strategy__card:hover {
		transform: none;
	}
}