/*
 * Investor - Hub.
 *
 * Read from cp-all-designer investor/index.html and css/investor.css:69-338
 * (.invgrid, .invcard, .invhl) and 552-607 (the steps down), over the tokens
 * of css/app.css it uses: --curl-sm 158, --sh-sm 159, --sh 160, --sh-lg 161,
 * --ease 162.
 *
 * The band and the head are the investor parent's. Every measure a Style
 * control states — paddings, gaps, sizes, corners, colours — is stated on the
 * control for each tier, and not here.
 */

/* ------------------------------------------------------------------ */
/* The highlight — investor.css:261-333                                */
/* ------------------------------------------------------------------ */

.custom-investor-hub .custom-investor-hub__highlight {
	--custom-press-ink: #FFFFFF;
	/* investor.css:268-273 — navy holds the first third, where the words stand */
	--custom-press-ground: linear-gradient(100deg,
		var(--custom-hub-hl-a, #16418C) 0%,
		var(--custom-hub-hl-a, #16418C) 30%,
		var(--custom-hub-hl-b, #50A3D5) 58%,
		var(--custom-hub-hl-c, #5CA13F) 80%,
		var(--custom-hub-hl-d, #CE2929) 100%);
	--custom-press-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm */
	--custom-press-edge: transparent;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	border: 0;
	/* investor.css:276; the reveal's own 700ms is answered by this, as the design's is */
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-investor-hub .custom-investor-hub__highlight:focus-visible {
	outline: 4px solid #16418C;            /* investor.css:278 measures 3px */
	outline-offset: 4px;
}

/* investor.css:287-294 */
.custom-investor-hub .custom-investor-hub__highlight-label {
	flex: none;
	padding: 6px 12px;                     /* investor.css:288 measures 5px 12px */
	border-radius: 1000px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 2px;                   /* investor.css:292 measures 1.15px */
	text-transform: uppercase;
}

/* investor.css:299-310 */
.custom-investor-hub .custom-investor-hub__highlight-title {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: 0;
	color: inherit;
	text-shadow: 0 2px 2px rgba(8, 18, 50, 0.55), 0 2px 8px rgba(8, 18, 50, 0.35);
}

/* investor.css:311-318 */
.custom-investor-hub .custom-investor-hub__highlight-go,
.custom-investor-hub .custom-investor-hub__card-go {
	width: 34px;
	height: 34px;
	border-color: rgba(255, 255, 255, 0.7);
	color: #FFFFFF;
	background-color: transparent;
}

.custom-investor-hub .custom-investor-hub__highlight-go svg,
.custom-investor-hub .custom-investor-hub__card-go svg {
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------ */
/* The field — investor.css:101-110, 334                               */
/* ------------------------------------------------------------------ */

/* Six tracks, every tile spanning two: three to a row, and a pair centres. */
.custom-investor-hub .custom-investor-hub__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
}

.custom-investor-hub .custom-investor-hub__grid > * {
	grid-column: span 2;
}

.custom-investor-hub .custom-investor-hub__grid > :first-child:nth-last-child(2),
.custom-investor-hub .custom-investor-hub__grid > :nth-child(4):nth-last-child(2) {
	grid-column: 2 / span 2;
}

/* ------------------------------------------------------------------ */
/* A tile — investor.css:119-239                                       */
/* ------------------------------------------------------------------ */

.custom-investor-hub .custom-investor-hub__card {
	--custom-press-ink: #FFFFFF;
	--custom-press-ground: #0E1E54;
	--custom-press-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* --sh-sm */
	--custom-press-edge: transparent;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	/* investor.css:128; the reveal's own 700ms is answered by this, as the design's is */
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-investor-hub .custom-investor-hub__card:focus-visible {
	outline: 4px solid #16418C;            /* investor.css:130 measures 3px */
	outline-offset: 4px;
}

/* investor.css:139-143 — the picture, held at 1.02 so the push-in never shows an edge.
   The navy under it is the tile's own ground, so the empty box paints none. */
.custom-investor-hub .custom-investor-hub__card-picture {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.custom-investor-hub .custom-investor-hub__card-picture:empty {
	background-color: transparent;
}

.custom-investor-hub .custom-investor-hub__card-picture > img {
	transform: scale(1.02);
	transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* investor.css:158-167 — one wash for every tile, navy climbing out of its earth tone */
.custom-investor-hub .custom-investor-hub__card::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(0deg,
		rgba(14, 30, 84, 0.94) 0%,
		rgba(16, 44, 96, 0.78) 30%,
		rgba(22, 65, 140, 0.44) 50%,
		rgba(22, 65, 140, 0.14) 74%,
		rgba(22, 65, 140, 0) 93%);
}

/* investor.css:175-181 */
.custom-investor-hub .custom-investor-hub__card-panel {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* investor.css:185-189 */
.custom-investor-hub .custom-investor-hub__card-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* investor.css:197-203 */
.custom-investor-hub .custom-investor-hub__card-icon {
	display: block;
	line-height: 0;
	transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-investor-hub .custom-investor-hub__card-icon svg {
	display: block;
	height: auto;
	filter: drop-shadow(0 2px 2px rgba(8, 18, 50, 0.6)) drop-shadow(0 2px 6px rgba(8, 18, 50, 0.28));
}

/* investor.css:205-212 */
.custom-investor-hub .custom-investor-hub__card-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

/* investor.css:213-217 */
.custom-investor-hub .custom-investor-hub__card-text {
	margin: 0;
	padding: 0;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
}

.custom-investor-hub .custom-investor-hub__card-go {
	margin-bottom: -2px;                   /* investor.css:227 */
}

/* ------------------------------------------------------------------ */
/* Under a pointer                                                     */
/* ------------------------------------------------------------------ */

@media (hover: hover) {
	/* investor.css:279-282 */
	.custom-investor-hub .custom-investor-hub__highlight:hover {
		--custom-press-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh */
		transform: translateY(-4px);       /* investor.css:280 measures -3px */
	}
	.custom-investor-hub .custom-investor-hub__highlight:hover .custom-investor-hub__highlight-go,
	.custom-investor-hub .custom-investor-hub__card:hover .custom-investor-hub__card-go {
		transform: translateX(4px);        /* investor.css:281, 242 measure 3px */
		color: #16418C;
		background-color: #FFFFFF;
		border-color: #FFFFFF;
	}
	/* investor.css:132-134 */
	.custom-investor-hub .custom-investor-hub__card:hover {
		--custom-press-shadow: 0 34px 80px -20px rgba(22, 65, 140, 0.3);   /* --sh-lg */
		transform: translateY(-6px);
	}
	.custom-investor-hub .custom-investor-hub__card:hover .custom-investor-hub__card-picture > img {
		transform: scale(1.09);            /* investor.css:144 */
	}
	.custom-investor-hub .custom-investor-hub__card:hover .custom-investor-hub__card-panel {
		transform: translateY(-4px);       /* investor.css:182 measures -3px */
	}
	.custom-investor-hub .custom-investor-hub__card:hover .custom-investor-hub__card-icon {
		transform: translateY(-2px);       /* investor.css:204 */
	}
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (investor.css:566-577)                     */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* Four tracks, two to a row; the odd one at the end centres. */
	.custom-investor-hub .custom-investor-hub__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.custom-investor-hub .custom-investor-hub__grid > :first-child:nth-last-child(2),
	.custom-investor-hub .custom-investor-hub__grid > :nth-child(4):nth-last-child(2) {
		grid-column: auto / span 2;
	}
	.custom-investor-hub .custom-investor-hub__grid > :last-child:nth-child(odd) {
		grid-column: 2 / span 2;
	}
	/* app.css:903 — the author's own line break closes up below the wide tier
	   (investor.css:337) */
	.custom-investor-hub .custom-investor-hub__intro br {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (investor.css:581-600)                         */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-investor-hub .custom-investor-hub__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.custom-investor-hub .custom-investor-hub__grid > *,
	.custom-investor-hub .custom-investor-hub__grid > :last-child:nth-child(odd),
	.custom-investor-hub .custom-investor-hub__grid > :nth-child(4):nth-last-child(2),
	.custom-investor-hub .custom-investor-hub__grid > :first-child:nth-last-child(2) {
		grid-column: auto;
	}
	/* The strip stacks: label and arrow share the first line, the title takes the next. */
	.custom-investor-hub .custom-investor-hub__highlight {
		flex-wrap: wrap;
		row-gap: 12px;
	}
	.custom-investor-hub .custom-investor-hub__highlight-go {
		order: 2;
		margin-left: auto;
	}
	.custom-investor-hub .custom-investor-hub__highlight-title {
		order: 3;
		flex: 1 0 100%;
	}
	.custom-investor-hub .custom-investor-hub__highlight-go,
	.custom-investor-hub .custom-investor-hub__card-go {
		width: 30px;
		height: 30px;
	}
	.custom-investor-hub .custom-investor-hub__highlight-go svg,
	.custom-investor-hub .custom-investor-hub__card-go svg {
		width: 14px;
		height: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-investor-hub .custom-investor-hub__highlight,
	.custom-investor-hub .custom-investor-hub__card,
	.custom-investor-hub .custom-investor-hub__card-panel,
	.custom-investor-hub .custom-investor-hub__card-icon,
	.custom-investor-hub .custom-investor-hub__card-picture > img {
		transition: none;
	}
}