/**
 * Connected reading paths.
 *
 * Keeps the continuation experience visually distinct without competing with
 * the book, Journal article or learning resource that brought the reader here.
 */

.lcp-connected-path [hidden],
.lcp-connected-path-overview[hidden],
.lcp-connected-path-badge [hidden],
.lcp-discovery-card [hidden] {
	display: none !important;
}

.lcp-connected-path {
	--lcp-path-ink: #183033;
	--lcp-path-teal: #1f5962;
	--lcp-path-purple: #4d2d70;
	--lcp-path-gold: #c0813f;
	--lcp-path-cream: #fbf6ed;
	--lcp-path-mist: #edf4f3;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(15.5rem, .65fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin: clamp(3rem, 7vw, 5.25rem) 0 1rem;
	padding: clamp(1.75rem, 5vw, 3.25rem);
	overflow: hidden;
	color: var(--lcp-path-ink);
	background:
		radial-gradient(circle at 100% 0, rgba(77, 45, 112, .13), transparent 38%),
		linear-gradient(135deg, var(--lcp-path-cream), var(--lcp-path-mist));
	border: 1px solid rgba(31, 89, 98, .18);
	border-radius: 1.5rem;
	box-shadow: 0 1.25rem 3.25rem rgba(24, 48, 51, .09);
}

.lcp-connected-path::before {
	position: absolute;
	top: 0;
	left: clamp(1.75rem, 5vw, 3.25rem);
	width: 4.5rem;
	height: .3rem;
	content: "";
	background: var(--lcp-path-gold);
	border-radius: 0 0 .3rem .3rem;
}

.lcp-connected-path__copy,
.lcp-connected-path__metrics,
.lcp-connected-path__progress,
.lcp-connected-path__neighbours,
.lcp-connected-path__actions {
	position: relative;
	z-index: 1;
}

.lcp-connected-path__eyebrow {
	display: flex;
	gap: .45rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
}

.lcp-connected-path__kicker {
	margin: 0 0 .7rem;
	color: var(--lcp-path-teal);
	font-size: .76rem;
	font-weight: 750;
	letter-spacing: .12em;
	line-height: 1.35;
	text-transform: uppercase;
}

.lcp-connected-path__position {
	margin: 0 0 .7rem;
	color: var(--lcp-path-purple);
	font-size: .78rem;
	font-weight: 750;
	line-height: 1.35;
}

.lcp-connected-path__position span {
	padding: 0 .18rem;
	color: var(--lcp-path-gold);
}

.lcp-connected-path__section {
	display: inline-flex;
	width: fit-content;
	margin: 0 0 .8rem;
	padding: .38rem .62rem;
	gap: .42rem;
	align-items: baseline;
	color: var(--lcp-path-purple);
	font-size: .8rem;
	font-weight: 750;
	line-height: 1.35;
	background: rgba(255, 255, 255, .68);
	border: 1px solid rgba(77, 45, 112, .16);
	border-radius: 999px;
}

.lcp-connected-path__section span {
	color: var(--lcp-path-teal);
	font-size: .64rem;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lcp-connected-path h2 {
	max-width: 18ch;
	margin: 0 0 .85rem;
	color: var(--lcp-path-purple);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.08;
}

.lcp-connected-path__copy > p:last-child {
	max-width: 65ch;
	margin: 0;
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	line-height: 1.7;
}

.lcp-connected-path__metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-self: center;
	gap: .65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lcp-connected-path__metrics li {
	display: flex;
	min-width: 0;
	min-height: 7rem;
	padding: .9rem .65rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(31, 89, 98, .13);
	border-radius: 1rem;
}

.lcp-connected-path__metrics strong {
	color: var(--lcp-path-purple);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 600;
	line-height: 1;
}

.lcp-connected-path__metrics span {
	margin-top: .5rem;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.25;
}

.lcp-connected-path__progress,
.lcp-connected-path-overview {
	padding: 1.15rem 1.25rem;
	background: rgba(255, 255, 255, .74);
	border: 1px solid rgba(31, 89, 98, .14);
	border-radius: 1rem;
}

.lcp-connected-path__progress {
	display: grid;
	grid-column: 1 / -1;
	gap: .8rem;
}

.lcp-connected-path__progress-heading,
.lcp-connected-path-overview__heading,
.lcp-connected-path-overview__footer,
.lcp-connected-path__progress-actions {
	display: flex;
	gap: .6rem 1rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.lcp-connected-path__progress-heading strong,
.lcp-connected-path-overview__heading strong {
	color: var(--lcp-path-purple);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.05rem;
	font-weight: 600;
}

.lcp-connected-path__progress-heading span,
.lcp-connected-path-overview__heading span {
	color: var(--lcp-path-teal);
	font-size: .78rem;
	font-weight: 800;
}

.lcp-connected-path progress,
.lcp-connected-path-overview progress {
	display: block;
	width: 100%;
	height: .7rem;
	overflow: hidden;
	accent-color: var(--lcp-path-purple, #4d2d70);
	background: rgba(31, 89, 98, .12);
	border: 0;
	border-radius: 999px;
}

.lcp-connected-path progress::-webkit-progress-bar,
.lcp-connected-path-overview progress::-webkit-progress-bar {
	background: rgba(31, 89, 98, .12);
	border-radius: 999px;
}

.lcp-connected-path progress::-webkit-progress-value,
.lcp-connected-path-overview progress::-webkit-progress-value {
	background: linear-gradient(90deg, var(--lcp-path-purple, #4d2d70), var(--lcp-path-teal, #1f5962));
	border-radius: 999px;
}

.lcp-connected-path progress::-moz-progress-bar,
.lcp-connected-path-overview progress::-moz-progress-bar {
	background: linear-gradient(90deg, var(--lcp-path-purple, #4d2d70), var(--lcp-path-teal, #1f5962));
	border-radius: 999px;
}

.lcp-connected-path__progress-actions button,
.lcp-connected-path-overview__footer button {
	min-height: 2.45rem;
	padding: .58rem .9rem;
	color: var(--lcp-path-purple, #4d2d70);
	font: inherit;
	font-size: .82rem;
	font-weight: 800;
	background: #fff;
	border: 1px solid rgba(77, 45, 112, .28);
	border-radius: 999px;
	cursor: pointer;
}

.lcp-connected-path__progress-actions button[aria-pressed="true"] {
	color: #fff;
	background: var(--lcp-path-teal);
	border-color: var(--lcp-path-teal);
}

.lcp-connected-path__progress-actions button[data-lcp-confirming="true"],
.lcp-connected-path-overview__footer button[data-lcp-confirming="true"] {
	border-color: #8a304b;
	background: #8a304b;
	color: #fff;
	box-shadow: 0 0 0 3px rgba(138, 48, 75, 0.16);
}

.lcp-connected-path__progress-actions button[data-lcp-connected-path-cancel],
.lcp-connected-path-overview__footer button[data-lcp-connected-path-cancel] {
	border-color: var(--lcp-path-purple, #4d2d70);
	background: #fff;
	color: var(--lcp-path-purple, #4d2d70);
}

.lcp-connected-path__progress-actions button[aria-pressed="true"]::before {
	margin-right: .35rem;
	content: "✓";
}

.lcp-connected-path__progress-actions button:hover,
.lcp-connected-path-overview__footer button:hover {
	border-color: currentColor;
}

.lcp-connected-path__progress-actions button:disabled {
	cursor: not-allowed;
	opacity: .62;
}

.lcp-connected-path__progress-actions > span,
.lcp-connected-path-overview__footer > span {
	max-width: 62ch;
	color: #526467;
	font-size: .74rem;
	line-height: 1.5;
}

.lcp-connected-path__status {
	min-height: 1.15em;
	margin: 0;
	color: var(--lcp-path-teal, #1f5962);
	font-size: .78rem;
	font-weight: 700;
}

.lcp-connected-path__neighbours {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: .8rem;
}

.lcp-connected-path__neighbour {
	display: flex;
	min-width: 0;
	padding: 1rem 1.1rem;
	gap: .4rem;
	flex-direction: column;
	color: var(--lcp-path-ink);
	text-decoration: none;
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(31, 89, 98, .14);
	border-radius: 1rem;
}

.lcp-connected-path__neighbour:hover {
	color: var(--lcp-path-purple);
	background: rgba(255, 255, 255, .9);
	border-color: rgba(77, 45, 112, .34);
}

.lcp-connected-path__neighbour > span {
	color: var(--lcp-path-teal);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.lcp-connected-path__neighbour em {
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
}

.lcp-connected-path__neighbour strong {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.lcp-connected-path__actions {
	display: flex;
	grid-column: 1 / -1;
	gap: .85rem 1.25rem;
	align-items: center;
	flex-wrap: wrap;
}

.lcp-connected-path__primary,
.lcp-connected-path__secondary {
	display: inline-flex;
	min-height: 2.9rem;
	align-items: center;
	justify-content: center;
	font-size: .94rem;
	font-weight: 750;
	line-height: 1.25;
	text-decoration: none;
}

.lcp-connected-path__primary {
	padding: .82rem 1.2rem;
	color: #fff;
	background: var(--lcp-path-purple);
	border: 2px solid var(--lcp-path-purple);
	border-radius: 999px;
	box-shadow: 0 .55rem 1.25rem rgba(77, 45, 112, .16);
}

.lcp-connected-path__primary:hover {
	color: #fff;
	background: var(--lcp-path-teal);
	border-color: var(--lcp-path-teal);
}

.lcp-connected-path__secondary {
	padding: .7rem .15rem;
	color: var(--lcp-path-purple);
	text-decoration: underline;
	text-decoration-color: rgba(77, 45, 112, .35);
	text-underline-offset: .24em;
}

.lcp-connected-path__secondary:hover {
	color: var(--lcp-path-teal);
	text-decoration-color: currentColor;
}

.lcp-connected-path a:focus-visible,
.lcp-connected-path button:focus-visible,
.lcp-connected-path-badge a:focus-visible,
.lcp-connected-path-overview button:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast, #183033);
	outline-offset: 3px;
}

.lcp-connected-path-badge {
	margin: .7rem 0 0;
}

.lcp-connected-path-badge a {
	display: inline-flex;
	max-width: 100%;
	padding: .48rem .72rem;
	gap: .38rem;
	align-items: baseline;
	flex-wrap: wrap;
	color: #183033;
	font-size: .82rem;
	font-weight: 650;
	line-height: 1.35;
	text-decoration: none;
	background: #fbf6ed;
	border: 1px solid rgba(31, 89, 98, .18);
	border-radius: 999px;
}

.lcp-connected-path-badge a:hover {
	color: #4d2d70;
	border-color: rgba(77, 45, 112, .42);
}

.lcp-connected-path-badge a > span:first-child {
	color: #1f5962;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lcp-connected-path-badge__position {
	color: #526467;
	font-size: .72rem;
	font-weight: 750;
}

.lcp-connected-path-badge__state,
.lcp-discovery-card__eyebrow > .lcp-discovery-card__path-state {
	padding: .18rem .42rem;
	color: #fff;
	background: #1f5962;
	border-radius: 999px;
	font-size: .62rem;
	font-weight: 850;
	letter-spacing: .06em;
	line-height: 1.25;
	text-transform: uppercase;
}

.lcp-connected-path-overview {
	--lcp-path-purple: #4d2d70;
	--lcp-path-teal: #1f5962;
	display: grid;
	gap: .72rem;
	margin-top: 1.15rem;
}

.lcp-discovery-collection-card .lcp-discovery-collection-card__sections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: .55rem;
	margin: 1.15rem 0 0;
	padding: 0;
	list-style: none;
}

.lcp-discovery-collection-card .lcp-discovery-collection-card__sections li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	padding: .7rem .75rem;
	gap: .12rem .55rem;
	align-items: center;
	background: rgba(255, 255, 255, .68);
	border: 1px solid rgba(31, 89, 98, .13);
	border-radius: .85rem;
}

.lcp-discovery-collection-card__sections li > span {
	grid-row: 1 / span 2;
	color: #c0813f;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.1rem;
	font-weight: 600;
}

.lcp-discovery-collection-card__sections strong {
	color: #4d2d70;
	font-size: .78rem;
	line-height: 1.25;
}

.lcp-discovery-collection-card__sections em {
	color: #526467;
	font-size: .68rem;
	font-style: normal;
}

.lcp-connected-path-overview__footer button {
	min-height: 0;
	padding: .35rem .1rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.lcp-discovery-card__eyebrow > .lcp-discovery-card__path-state {
	margin-left: auto;
}

.lcp-discovery-card.is-path-complete {
	box-shadow: inset 0 0 0 2px rgba(31, 89, 98, .22), 0 12px 34px rgba(24, 48, 51, .08);
}

@media (max-width: 52rem) {
	.lcp-connected-path {
		grid-template-columns: minmax(0, 1fr);
	}

	.lcp-connected-path__metrics {
		align-self: auto;
	}
}

@media (max-width: 32rem) {
	.lcp-connected-path {
		gap: 1.35rem;
		padding: 1.6rem 1.15rem;
		border-radius: 1.15rem;
	}

	.lcp-connected-path::before {
		left: 1.15rem;
	}

	.lcp-connected-path__metrics {
		gap: .45rem;
	}

	.lcp-connected-path__metrics li {
		min-height: 6.25rem;
		padding: .75rem .35rem;
	}

	.lcp-connected-path__metrics span {
		font-size: .64rem;
	}

	.lcp-connected-path__actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.lcp-connected-path__progress-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.lcp-connected-path__primary,
	.lcp-connected-path__secondary,
	.lcp-connected-path__progress-actions button {
		width: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.lcp-connected-path a,
	.lcp-connected-path button,
	.lcp-connected-path-badge a,
	.lcp-connected-path-overview button {
		transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
	}

	.lcp-connected-path__primary:hover {
		transform: translateY(-1px);
	}
}

@media print {
	.lcp-connected-path {
		background: none;
		box-shadow: none;
		break-inside: avoid;
	}

	.lcp-connected-path__progress,
	.lcp-connected-path-overview {
		display: none !important;
	}
}