/*
 * Investor - Meetings.
 *
 * Read from cp-all-designer investor/shareholder-information/
 * annual-general-meeting-of-shareholder/ and css/investor.css:1373-1568
 * (.agmsec, .agmleaf, .agmlead, .agmarch).
 *
 * The band and the head are the investor parent's. Every measure a Style
 * control states is stated on the control for each tier, and not here.
 */

/* What a Style control names: each state's own colour. The rules below say which is showing. */
.custom-investor-meetings {
	--custom-meetings-a: #16418C;
	--custom-meetings-b: #0E1E54;
	--custom-meetings-ink: #FFFFFF;
	--custom-meetings-arrow-lit: #50A3D5;
	--custom-meetings-archive-title: #64748B;
	--custom-meetings-span: #94A3B8;
	--custom-meetings-year: #16418C;
	--custom-meetings-year-lit: #3D8CB8;
	--custom-meetings-year-rule: #50A3D5;
	--custom-meetings-rule: #EEF2F7;
	--custom-meetings-leaf: #00428F;
	isolation: isolate;
}

.custom-investor-meetings .custom-investor-meetings__inner {
	position: relative;
	z-index: 1;
}

/* investor.css:1378-1390 — a leaf in outline at two corners of the band */
.custom-investor-meetings .custom-investor-meetings__leaf {
	position: absolute;
	z-index: 0;
	height: auto;
	color: var(--custom-meetings-leaf);
	pointer-events: none;
}

.custom-investor-meetings .custom-investor-meetings__leaf-first {
	top: -40px;
	left: -56px;
	width: 158px;                          /* investor.css:1384 (158.4) */
	opacity: 0.16;
}

.custom-investor-meetings .custom-investor-meetings__leaf-second {
	right: -70px;
	bottom: -90px;
	width: 300px;                          /* investor.css:1388 (302.4 capped at 300) */
	opacity: 0.22;
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------ */
/* The latest meeting — investor.css:1391-1446                         */
/* ------------------------------------------------------------------ */

.custom-investor-meetings .custom-investor-meetings__latest {
	--custom-press-ink: var(--custom-meetings-ink);
	--custom-press-ground: linear-gradient(135deg, var(--custom-meetings-a) 0%, var(--custom-meetings-b) 100%);
	--custom-press-edge: transparent;
	--custom-press-shadow: 0 18px 40px -22px rgba(22, 65, 140, 0.6);
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: center;
	box-sizing: border-box;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	border: 0;
	/* the reveal's own 700ms is answered by this, as the design's is */
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-investor-meetings .custom-investor-meetings__latest:focus-visible {
	outline: 4px solid #50A3D5;            /* investor.css:1404 measures 3px */
	outline-offset: 4px;
}

.custom-investor-meetings .custom-investor-meetings__latest-side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.custom-investor-meetings .custom-investor-meetings__latest-tag {
	padding: 6px 12px;                     /* investor.css:1411 measures 5px 12px */
	border: 2px solid rgba(255, 255, 255, 0.24);   /* investor.css:1412 measures 1px */
	border-radius: 1000px;
	background-color: rgba(255, 255, 255, 0.14);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0px;                   /* investor.css:1413 measures 0.8px */
}

.custom-investor-meetings .custom-investor-meetings__latest-year {
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.custom-investor-meetings .custom-investor-meetings__latest-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;                             /* investor.css:1423 (20.16 capped at 18) */
	min-width: 0;
}

.custom-investor-meetings .custom-investor-meetings__latest-title {
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
}

.custom-investor-meetings .custom-investor-meetings__latest-holds {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.custom-investor-meetings .custom-investor-meetings__latest-hold {
	padding: 6px 14px;
	border: 2px solid rgba(255, 255, 255, 0.2);   /* investor.css:1433 measures 1px */
	border-radius: 1000px;
	background-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.92);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

.custom-investor-meetings .custom-investor-meetings__latest-press {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 2px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
}

.custom-investor-meetings .custom-investor-meetings__latest-go {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 2px solid rgba(255, 255, 255, 0.28);   /* investor.css:1444 measures 1px */
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.14);
	transition: background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-investor-meetings .custom-investor-meetings__latest-go svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (hover: hover) {
	.custom-investor-meetings a.custom-investor-meetings__latest:hover {
		--custom-press-shadow: 0 26px 54px -24px rgba(22, 65, 140, 0.7);
		transform: translateY(-4px);
	}
	.custom-investor-meetings a.custom-investor-meetings__latest:hover .custom-investor-meetings__latest-go {
		border-color: var(--custom-meetings-arrow-lit);
		background-color: var(--custom-meetings-arrow-lit);
		transform: translateX(4px);        /* investor.css:1407 measures 3px */
	}
}

/* ------------------------------------------------------------------ */
/* The years before — investor.css:1448-1497                           */
/* ------------------------------------------------------------------ */

.custom-investor-meetings .custom-investor-meetings__archive {
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

.custom-investor-meetings .custom-investor-meetings__archive-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;                         /* investor.css:1453 (17.28 capped at 16) */
	margin: 0 0 18px;                      /* investor.css:1454 (20.16 capped at 18) */
}

.custom-investor-meetings .custom-investor-meetings__archive-title {
	margin: 0;
	padding: 0;
	color: var(--custom-meetings-archive-title);
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

/* a stretch of years to a row: its name in the first column, its years in the second */
.custom-investor-meetings .custom-investor-meetings__span {
	display: grid;
	/* investor.css:1503 — the name's column is the design's own width at least, and as wide as the
	   name where the tracking rounded up to 2px makes it longer, so the gap stays the gap */
	grid-template-columns: minmax(var(--custom-meetings-span-w, 132px), max-content) minmax(0, 1fr);
	align-items: baseline;
	gap: 24px;                             /* investor.css:1464 (23.04) */
	padding: 20px 0;                       /* investor.css:1466 (20.16 capped at 20) */
	border-top: 2px solid var(--custom-meetings-rule);   /* investor.css:1467 measures 1px */
}

.custom-investor-meetings .custom-investor-meetings__span:last-child {
	border-bottom: 2px solid var(--custom-meetings-rule);
}

.custom-investor-meetings .custom-investor-meetings__span-name {
	margin: 0;
	padding: 0;
	color: var(--custom-meetings-span);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0px;                   /* investor.css:1472 measures 0.6px */
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.custom-investor-meetings .custom-investor-meetings__years {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;                        /* investor.css:1478 (14.4 / 25.92) */
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-investor-meetings .custom-investor-meetings__years li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-investor-meetings .custom-investor-meetings__year {
	--custom-press-ink: var(--custom-meetings-year);
	--custom-press-edge: transparent;
	position: relative;
	display: inline-block;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	transition: color 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* a rule drawn out from the left under a year that is a link */
.custom-investor-meetings a.custom-investor-meetings__year::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -4px;                          /* investor.css:1487 measures -3px */
	left: 0;
	height: 2px;
	background-color: var(--custom-meetings-year-rule);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
	.custom-investor-meetings a.custom-investor-meetings__year:hover {
		--custom-press-ink: var(--custom-meetings-year-lit);
	}
	.custom-investor-meetings a.custom-investor-meetings__year:hover::after {
		transform: scaleX(1);
	}
}

.custom-investor-meetings a.custom-investor-meetings__year:focus-visible {
	outline: 2px solid #50A3D5;
	outline-offset: 4px;                   /* investor.css:1496 measures 3px */
	border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (investor.css:1537-1540)                   */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.custom-investor-meetings .custom-investor-meetings__leaf-first {
		top: -24px;
		left: -34px;
		width: 110px;                      /* 101.2 floored at 110 */
	}
	.custom-investor-meetings .custom-investor-meetings__leaf-second {
		right: -44px;
		bottom: -56px;
		width: 194px;                      /* 193.2 */
	}
	.custom-investor-meetings .custom-investor-meetings__latest-main {
		gap: 12px;                         /* 12.88 */
	}
	.custom-investor-meetings .custom-investor-meetings__archive-head {
		gap: 6px 12px;                     /* 11.04 */
		margin-bottom: 12px;               /* 12.88 */
	}
	.custom-investor-meetings .custom-investor-meetings__span {
		grid-template-columns: minmax(var(--custom-meetings-span-w, 96px), max-content) minmax(0, 1fr);   /* 92 floored at 96 */
		gap: 14px;                         /* 14.72 */
		padding: 12px 0;                   /* 12.88 */
	}
	.custom-investor-meetings .custom-investor-meetings__years {
		gap: 10px 16px;                    /* 9.2 / 16.56 */
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (investor.css:1541-1567)                       */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-investor-meetings .custom-investor-meetings__leaf-second {
		width: 190px;
	}
	/* the year stands over what the meeting holds, rather than beside it */
	.custom-investor-meetings .custom-investor-meetings__latest {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
	.custom-investor-meetings .custom-investor-meetings__latest-main {
		gap: 12px;
	}
	.custom-investor-meetings .custom-investor-meetings__latest-press {
		gap: 10px;
	}
	.custom-investor-meetings .custom-investor-meetings__latest-go {
		width: 36px;
		height: 36px;
	}
	.custom-investor-meetings .custom-investor-meetings__archive-head {
		gap: 6px 10px;
		margin-bottom: 12px;
	}
	.custom-investor-meetings .custom-investor-meetings__span {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 12px 0;
	}
	/* a year is something a finger has to land on */
	.custom-investor-meetings .custom-investor-meetings__years {
		gap: 4px 6px;
		margin-right: -8px;
		margin-left: -8px;
	}
	.custom-investor-meetings .custom-investor-meetings__year {
		padding: 10px 8px;                 /* investor.css:1553 measures 9px 8px */
	}
	.custom-investor-meetings a.custom-investor-meetings__year::after {
		right: 8px;
		bottom: 6px;
		left: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-investor-meetings .custom-investor-meetings__latest,
	.custom-investor-meetings .custom-investor-meetings__latest-go,
	.custom-investor-meetings .custom-investor-meetings__year,
	.custom-investor-meetings a.custom-investor-meetings__year::after {
		transition: none;
	}
}