/**
 * Share links and the related-articles section under an article. Hand-written; tokens only.
 */

/* Share links: plain anchors styled as small pills. */
.Share__box {
	width: 100%;
	max-width: var(--size-prose-max);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-1);
}

.Share__label {
	margin: 0 0 var(--space-3);
	font: var(--text-label);
	color: var(--text-1);
}

.Share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.Share__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-target);
	padding: 0 var(--space-4);
	border: 1px solid var(--border-1);
	border-radius: var(--radius-full);
	background: var(--surface-raised);
	color: var(--text-1);
	font: var(--text-chip-label);
	text-decoration: none;
	cursor: pointer;
}

.Share__link:hover,
.Share__link:focus-visible {
	background: var(--surface-hover-strong);
}

/* "Related" section below the article. */
.Related__section {
	padding: var(--space-12) 0 var(--section-padding-desktop);
	background: var(--section-b);
}

.Related__title {
	margin: 0 0 var(--space-8);
	font: var(--text-heading-lg);
	color: var(--text-1);
}

/* Tablet and phone: less bottom padding under the related section. */
@media (max-width: 1024px) {
	.Related__section {
		padding-bottom: var(--section-padding-tablet);
	}
}

@media (max-width: 640px) {
	.Related__section {
		padding-bottom: var(--section-padding-mobile);
	}
}