/* Blog: archive grid, pagination, single post. Figma: Blog 1:293, Blog post 1:362. */

/* Archive -------------------------------------------------------------------- */
.posts-archive__header .page-header__eyebrow + .page-header__title { margin-top: clamp(24px, 2.6vw, 50px); }
.posts-archive__header .page-header__title { padding-bottom: 0; }

.posts-archive { --pt: clamp(56px, 6.77vw, 130px); }

.posts-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(40px, 4.27vw, 82px) clamp(12px, 1.04vw, 20px);
}

.post-card__media {
	display: block;
	aspect-ratio: 457 / 555;
}

.post-card__meta {
	margin-top: clamp(12px, 0.89vw, 17px);
	line-height: 1.6875;
}

.post-card__meta a:hover { color: var(--c-ink); }

.post-card__title {
	letter-spacing: -0.05em;
	text-wrap: pretty;
}

.post-card__title a {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size 0.4s var(--ease);
}

.post-card:hover .post-card__title a { background-size: 100% 1px; }
.post-card:hover .media img { transform: scale(1.04); }
.post-card .media img { transition: transform 0.9s var(--ease); }

/* Pagination */
.posts-pagination { margin-top: clamp(40px, 4.06vw, 78px); }

.posts-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.posts-pagination .page-numbers {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--c-ink);
	border-radius: 50%;
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.posts-pagination .page-numbers.dots { border-color: transparent; }
.posts-pagination .page-numbers .icon { width: 16px; height: 16px; }

.posts-pagination .page-numbers.current,
.posts-pagination a.page-numbers:hover {
	background: var(--c-ink);
	color: var(--c-bg);
}

/* Single post ----------------------------------------------------------------- */
.post__header { padding-top: clamp(64px, 13.07vw, 251px); }

.post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.post__title {
	max-width: 9.3em; /* 730 at 80px: the design breaks after "Citizenship" */
	margin-top: clamp(14px, 0.89vw, 17px);
	font-size: clamp(2.5rem, 4.17vw, 5rem); /* 80 */
	line-height: 0.9375;
	letter-spacing: -0.0625em;
}

.post__hero {
	margin-top: clamp(40px, 5.36vw, 103px);
	aspect-ratio: 1920 / 1000;
}

.post__content { margin-top: clamp(32px, 3.125vw, 60px); }

.post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0 5px;
	margin: clamp(28px, 3.18vw, 61px) 0 0;
	font-size: var(--fs-small);
	line-height: 1.75;
	letter-spacing: -0.03em;
}

.post__tags a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: clamp(64px, 9.9vw, 190px);
	padding-block: clamp(28px, 2.6vw, 50px);
	border-block: 1px solid #dadada;
}

.post-nav__item {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.56vw, 30px);
}

.post-nav__item--next {
	flex-direction: row-reverse;
	justify-self: end;
	text-align: right;
}

.post-nav__media {
	flex: none;
	display: block;
	width: clamp(96px, 10.4vw, 200px);
	aspect-ratio: 200 / 180;
}

.post-nav__body { display: block; }
.post-nav__body > span { display: block; }
.post-nav__date { line-height: 1.6875; }

.post-nav__title {
	max-width: 11em;
	letter-spacing: -0.05em;
}

.post-nav__item--next .post-nav__title { margin-left: auto; }

.post-nav__label {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	margin-top: clamp(14px, 1.25vw, 24px);
	padding-bottom: 1px;
	border-bottom: 1px solid currentColor;
}

.post-nav__label .icon { width: 11px; height: 11px; transition: transform 0.35s var(--ease); }
.post-nav__item:hover .post-nav__label .icon { transform: translate(2px, -2px); }

@media (max-width: 1024px) {
	.posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.posts-grid { grid-template-columns: 1fr; }
	.post-card__media { aspect-ratio: 4 / 5; }

	.post-nav { grid-template-columns: 1fr; }

	.post-nav__item--next {
		flex-direction: row;
		justify-self: start;
		text-align: left;
	}

	.post-nav__item--next .post-nav__title { margin-left: 0; }
}