/**
 * Single guide layout and the table of contents.
 */

.kpp-article__header,
.kpp-article__footer {
	padding-block: var(--kpp-space-xl) 0;
}

.kpp-article__intro {
	max-width: 46rem;
}

.kpp-article__hero {
	margin-block: var(--kpp-space-lg) 0;
}

.kpp-article__hero .kpp-media {
	margin: 0;
	border-radius: var(--kpp-radius-lg);
}

.kpp-article__main {
	padding-block: var(--kpp-space-xl) var(--kpp-space-2xl);
}

.kpp-article__layout {
	display: flex;
	flex-direction: column;
	gap: var(--kpp-space-lg);
	align-items: stretch;
	max-width: 42rem;
}

.kpp-article__body {
	min-width: 0;
}

.kpp-toc__details {
	border: var(--kpp-border);
	border-radius: var(--kpp-radius-md);
	background: var(--kpp-bg-surface);
}

.kpp-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kpp-space-md);
	min-height: 3rem;
	padding: var(--kpp-space-md);
	color: var(--kpp-text-cta-strong);
	font-family: var(--kpp-font-sans);
	font-size: var(--kpp-text-xs);
	font-weight: var(--kpp-weight-bold);
	letter-spacing: var(--kpp-tracking-kicker);
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.kpp-toc__summary::-webkit-details-marker {
	display: none;
}

.kpp-toc__summary::marker {
	content: "";
}

.kpp-toc__chevron {
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	margin-inline-end: 0.15rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.1rem) rotate(45deg);
}

.kpp-toc__details[open] .kpp-toc__chevron {
	transform: translateY(0.1rem) rotate(225deg);
}

.kpp-toc__details:not([open]) > .kpp-toc__list {
	display: none;
}

.kpp-toc__list {
	margin: 0;
	padding: var(--kpp-space-xs) var(--kpp-space-md) var(--kpp-space-sm);
	border-top: var(--kpp-border);
	list-style: none;
}

.kpp-toc__item a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	color: var(--kpp-text-primary);
	font-size: var(--kpp-text-sm);
	text-decoration: none;
}

.kpp-toc__item a:hover {
	color: var(--kpp-text-brand);
	text-decoration: underline;
}

.kpp-toc__item--sub {
	padding-inline-start: var(--kpp-space-md);
}

.kpp-related {
	margin-top: var(--kpp-space-2xl);
}

.kpp-related h2 {
	margin: var(--kpp-space-xs) 0 var(--kpp-space-lg);
}

.kpp-related .kpp-grid--cards {
	align-items: stretch;
}

.kpp-related .kpp-card {
	height: 100%;
	min-width: 0;
}

.kpp-related .kpp-card__media {
	width: 100%;
	aspect-ratio: 1200 / 628;
}

.kpp-related .kpp-card__media img {
	object-fit: cover;
	object-position: center;
}

.kpp-related .kpp-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.kpp-related .kpp-card__title,
.kpp-related .kpp-card__excerpt {
	overflow-wrap: break-word;
}

.kpp-related .kpp-card__title {
	text-wrap: balance;
}

.kpp-related .kpp-card__meta {
	margin-top: auto;
}