/**
 * Single post template — body content + related grid tweaks.
 */

.post-single-title {
	--page-title-content-max: var(--container-outer-max);
	--page-title-pad-inline: var(--container-pad-inline);
}

.post-single-content {
	--post-content-pad-block: clamp(2rem, 4vw, 3.75rem);
	/* Tracks container: 67.5 @ 85rem, same ratio @ 105rem */
	--post-content-max: var(--container-narrow-max);
	--post-content-outer: calc(var(--post-content-max) + (2 * var(--container-gutter)));
	--post-content-size: 1rem;
	--post-content-line: 1.5;

	padding-block: 0 var(--post-content-pad-block);
	color: var(--color-navy);
	background-color: var(--color-white);
}

.post-single-content__inner.entry-content,
.post-single-content__inner {
	width: 100%;
	max-width: var(--post-content-outer);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
	box-sizing: border-box;
	font-family: var(--font-family-sans);
	font-size: var(--post-content-size);
	font-weight: 400;
	line-height: var(--post-content-line);
	color: var(--color-navy);
}

.post-single-content__inner > *:first-child {
	margin-block-start: 0;
}

.post-single-content__inner > *:last-child {
	margin-block-end: 0;
}

.post-single-content__inner p {
	margin-block: 0 1.25em;
}

.post-single-content__inner p:last-child {
	margin-block-end: 0;
}

.post-single-content__inner h2,
.post-single-content__inner h3,
.post-single-content__inner h4 {
	margin-block: 1.5em 0.75em;
	font-family: var(--font-family-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--color-navy);
}

.post-single-content__inner h2 {
	font-size: var(--type-h2-size);
}

.post-single-content__inner h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.post-single-content__inner a {
	color: var(--content-link, var(--color-teal));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.post-single-content__inner a:hover,
.post-single-content__inner a:focus-visible {
	color: var(--content-link-hover, var(--color-navy));
}

.post-single-content__inner img,
.post-single-content__inner video,
.post-single-content__inner iframe {
	max-width: 100%;
	height: auto;
}

.post-single-content__inner ul,
.post-single-content__inner ol {
	margin-block: 0 1.25em;
	padding-inline-start: 1.5em;
}

.post-single-content__inner blockquote {
	margin-block: 1.5em;
	margin-inline: 0;
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--color-light-outline);
	font-style: italic;
}

.post-single-content__inner figure {
	margin-block: 1.5em;
	margin-inline: 0;
}

.post-single-content__inner figcaption {
	margin-block-start: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-muted);
}

.post-gallery {
	--pg-pad-block: clamp(2rem, 4vw, 3.75rem);
	--pg-slide-radius: 0.75rem;
	--pg-media-ratio: 16 / 10;
	--pg-gap: 1.5rem;

	padding-block: var(--pg-pad-block);
	background-color: var(--color-white);
	color: var(--color-navy);
	overflow: hidden;
}

.post-gallery__inner {
	position: relative;
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-inline);
	min-width: 0;
}

.post-gallery__swiper {
	width: 100%;
	overflow: hidden;
}

.post-gallery__slide {
	min-width: 0;
	height: auto;
}

.post-gallery__figure {
	margin: 0;
	width: 100%;
	aspect-ratio: var(--pg-media-ratio);
	border-radius: var(--pg-slide-radius);
	overflow: hidden;
	background-color: var(--color-navy);
}

.post-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.post-gallery__prev,
.post-gallery__next {
	position: absolute;
	z-index: 2;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--color-navy);
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--color-navy);
	cursor: pointer;
}

.post-gallery__prev {
	inset-inline-start: var(--container-pad-inline);
}

.post-gallery__next {
	inset-inline-end: var(--container-pad-inline);
}

.post-gallery__prev::after,
.post-gallery__next::after {
	content: none;
}

.post-gallery__prev img,
.post-gallery__next img {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.post-gallery__prev.swiper-button-disabled,
.post-gallery__next.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
	.post-gallery__inner {
		opacity: 0;
		transform: translateY(2.25rem);
		transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.post-gallery.is-inview .post-gallery__inner {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Related articles — Figma header uses ~44px display headline */
.post-grid--related {
	--post-grid-headline-size: var(--type-h2-size);
	--post-grid-pad-block: 3.75rem;
	--post-grid-pad-block-end: 3.75rem;
	--post-grid-gap: 2.75rem;
}

.post-grid--related .post-grid__header {
	align-items: center;
}

.post-grid--related .post-grid__cta {
	align-self: center;
}

@media (max-width: 47.9375rem) {
	.post-single-content {
		--post-content-pad-block: 2rem;
	}

	.post-grid--related {
		--post-grid-pad-block: 2.5rem;
		--post-grid-pad-block-end: 2.5rem;
		--post-grid-gap: 1.75rem;
	}

	.post-grid--related .post-grid__header {
		align-items: flex-start;
	}

	.post-grid--related .post-grid__cta {
		align-self: flex-start;
	}
}