/* CAR AUDIO GLOSSARY: concise definitions with contextual article links. */

.mst-car-audio-glossary {
	min-height: 100vh;
	background: #080c0d;
}

.mst-car-audio-glossary .mst-archive-hero {
	position: relative;
}

.mst-car-audio-glossary .mst-archive-hero::before {
	position: absolute;
	top: 18%;
	left: -8vw;
	width: 34vw;
	height: 34vw;
	border-radius: 50%;
	background: rgba(100, 202, 250, .052);
	content: "";
	filter: blur(82px);
	pointer-events: none;
}

.mst-glossary-intro {
	display: grid;
	grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
	gap: clamp(44px, 8vw, 130px);
	padding-top: clamp(62px, 7vw, 105px);
	padding-bottom: clamp(62px, 7vw, 105px);
	border-top: 1px solid var(--mst-line);
}

.mst-glossary-intro h2,
.mst-glossary-group__heading h2,
.mst-glossary-consultation h2 {
	margin: 18px 0 0;
	font: 300 clamp(31px, 3.8vw, 54px) / 1.28 var(--mst-jp-serif);
	letter-spacing: -.05em;
}

.mst-glossary-intro > div:last-child {
	max-width: 720px;
}

.mst-glossary-intro > div:last-child p,
.mst-glossary-group__heading > p:last-child,
.mst-glossary-consultation > .mst-shell > div:last-child > p {
	margin: 0;
	color: #c0c8c9;
	font-size: 13px;
	line-height: 2.05;
}

.mst-glossary-intro > div:last-child p + p {
	margin-top: 18px;
}

.mst-glossary-index {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding-bottom: clamp(70px, 8vw, 112px);
}

.mst-glossary-index a {
	display: flex;
	min-height: 128px;
	padding: 24px 20px;
	flex-direction: column;
	justify-content: space-between;
	border-top: 1px solid var(--mst-line);
	border-bottom: 1px solid var(--mst-line);
	border-left: 1px solid var(--mst-line);
	transition: background 220ms ease, color 220ms ease;
}

.mst-glossary-index a:last-child {
	border-right: 1px solid var(--mst-line);
}

.mst-glossary-index a:hover {
	background: rgba(100, 202, 250, .07);
}

.mst-glossary-index span {
	color: var(--mst-cyan);
	font: 500 8px / 1.2 "DM Sans", sans-serif;
	letter-spacing: .12em;
}

.mst-glossary-index strong {
	font: 400 14px / 1.55 var(--mst-jp-sans);
}

.mst-glossary-group {
	padding-top: clamp(20px, 3vw, 44px);
	padding-bottom: clamp(82px, 9vw, 136px);
	scroll-margin-top: 90px;
}

.mst-glossary-group__heading {
	display: grid;
	grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
	gap: clamp(36px, 7vw, 110px);
	align-items: end;
	margin-bottom: clamp(38px, 5vw, 68px);
}

.mst-glossary-group__heading .mst-eyebrow {
	grid-column: 1 / -1;
	margin-bottom: -18px;
}

.mst-glossary-group__heading h2 {
	margin: 0;
}

.mst-glossary-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid var(--mst-line);
}

.mst-glossary-term {
	display: grid;
	grid-template-columns: minmax(150px, .55fr) minmax(0, 1.45fr);
	gap: clamp(24px, 3vw, 50px);
	min-height: 250px;
	padding: clamp(30px, 4vw, 48px);
	border-right: 1px solid var(--mst-line);
	border-bottom: 1px solid var(--mst-line);
}

.mst-glossary-term:nth-child(2n) {
	border-right: 0;
}

.mst-glossary-term dt,
.mst-glossary-term dd {
	margin: 0;
}

.mst-glossary-term dt span {
	display: block;
	margin-bottom: 17px;
	color: var(--mst-cyan);
	font: 500 8px / 1.45 "DM Sans", sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.mst-glossary-term dt strong {
	display: block;
	font: 300 clamp(24px, 2.4vw, 36px) / 1.22 var(--mst-jp-serif);
	letter-spacing: -.045em;
	line-break: strict;
	overflow-wrap: anywhere;
}

.mst-glossary-term dd {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: space-between;
}

.mst-glossary-term dd p {
	margin: 0;
	color: #bdc5c6;
	font-size: 12px;
	line-height: 2;
}

.mst-glossary-term .mst-arrow-link {
	align-self: flex-start;
	margin-top: 28px;
	font-size: 10px;
}

.mst-glossary-consultation {
	padding: clamp(78px, 9vw, 132px) 0;
	border-top: 1px solid var(--mst-line);
	background: #101719;
}

.mst-glossary-consultation > .mst-shell {
	display: grid;
	grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr);
	gap: clamp(42px, 8vw, 130px);
	align-items: end;
}

.mst-glossary-consultation .mst-arrow-link {
	margin-top: 30px;
}

@media (max-width: 1050px) {
	.mst-glossary-index {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mst-glossary-index a:nth-child(3) {
		border-right: 1px solid var(--mst-line);
	}

	.mst-glossary-index a:nth-child(n+4) {
		border-top: 0;
	}

	.mst-glossary-term {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.mst-glossary-intro,
	.mst-glossary-group__heading,
	.mst-glossary-consultation > .mst-shell {
		grid-template-columns: 1fr;
	}

	.mst-glossary-group__heading .mst-eyebrow {
		grid-column: auto;
		margin-bottom: -9px;
	}

	.mst-glossary-grid {
		grid-template-columns: 1fr;
	}

	.mst-glossary-term,
	.mst-glossary-term:nth-child(2n) {
		min-height: 0;
		border-right: 0;
	}

}

@media (max-width: 520px) {
	.mst-car-audio-glossary .mst-archive-hero__copy h1 {
		font-size: clamp(39px, 12vw, 48px);
	}

	.mst-glossary-index {
		display: flex;
		overflow-x: auto;
		padding-right: 20px;
	}

	.mst-glossary-index a,
	.mst-glossary-index a:nth-child(3),
	.mst-glossary-index a:nth-child(n+4),
	.mst-glossary-index a:last-child {
		flex: 0 0 180px;
		border-top: 1px solid var(--mst-line);
		border-right: 0;
	}

	.mst-glossary-index a:last-child {
		border-right: 1px solid var(--mst-line);
	}

	.mst-glossary-term {
		padding: 30px 22px 34px;
	}

	.mst-glossary-term dt strong {
		font-size: 29px;
	}

}