/**
 * These styles apply to all archive pages on the site: home, category, and author.
 */

/* = Overall page styles == */

.archive-page {
	padding: 33px 0;
	margin: 0 auto;
	max-width: var(--wide-width);
}

@media (max-width: 768px) {
	.archive-page {
		padding: calc(var(--full-header-height) + var(--header-height)) 0 24px;
	}
}

/* = Four column post grid == */

.archive-posts {
	margin: 64px 0;
}

.archive-posts__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.archive-posts-card {
	border: 1px solid rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 411px;
	min-height: 230px;
	padding: 32px 16px;
}

.archive-posts-card a {
	color: black;
	text-decoration: none;
}

.archive-posts-card__category {
	letter-spacing: var(--eyebrow-letter-spacing);
	line-height: var(--eyebrow-line-height);
	font-size: var(--eyebrow-font-size);
	font-weight: var(--eyebrow-font-weight);
	text-transform: var(--eyebrow-text-transform);
}

.archive-posts-card__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.2px;
}

.archive-posts-card__title a:hover {
	text-decoration: underline;
}

.archive-posts-card__author {
	font: var(--font-headline-6);
	margin-bottom: 0;
}

.archive-posts-card__date-reading-time {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12px;
	line-height: 1.60;
}

@media (max-width: 768px) {
	.archive-posts__grid {
		gap: 24px;
	}
}

@media (max-width: 568px) {
	.archive-posts {
		margin-bottom: 32px;
		margin-top: 32px;
	}
}

/* = Pagination == */
.custom-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 64px 0;
}

.custom-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--content-text-icons, #000);
	text-align: center;
	/* Body */
	font-family: Figtree;
	font-size: var(--Typography-body, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
	text-decoration: none;
	list-style: none;
}

.custom-pagination .page-numbers.current {
	pointer-events: none;
	text-decoration: none;
	font-weight: 600;
}

.custom-pagination .page-numbers.prev,
.custom-pagination .page-numbers.next {
	border-radius: 108px;
	border: 1px solid var(--Content-Stroke, rgba(0, 0, 0, 0.04));
	background: var(--Background-White, #FFF);
}

.custom-pagination .page-numbers.prev:hover,
.custom-pagination .page-numbers.next:hover {
	background-color: #f5f5f5;
}

.page-numbers li::marker {
	display: none;
}

@media (max-width: 768px) {
	.custom-pagination {
		margin: 24px 0;
	}
}

/* = Author archive == */

.author-info-section {
	text-align: center;
	padding: 64px 0;
	border-bottom: 1px solid #eaeaea;
}

.author-container {
	gap: 32px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.author-avatar img {
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

.author-details {
	text-align: left;
}

.author-details h1 {
	font-size: 36px;
}

.author-details p {
	font-size: 24px;
	max-width: 664px;
}

@media (max-width: 768px) {
	.author-avatar img {
		width: 148px;
		height: 148px;
	}

	.author-details h1 {
		font-size: 32px;
	}

	.author-details p {
		font-size: 20px;
	}
}

@media (max-width: 568px) {
	.author-info-section {
		padding: 32px 0;
	}

	.author-container {
		gap: 24px;
		flex-direction: column;
		align-items: flex-start;
	}

	.author-avatar img {
		width: 88px;
		height: 88px;
	}
}

/* = Category archive == */

.category-hero {
	margin: 64px auto;
	max-width: 896px;
}

.category-title {
	text-align: center;
	font-size: 56px;
}

.category-description {
	text-align: center;
	font-size: 24px;
}

@media (max-width: 768px) {
	.category-title {
		font-size: 40px;
	}

	.category-description {
		font-size: 20px;
	}
}

/* Featured posts on category archive */
.featured-posts .related-post-title a {
	font-size: var(--Typography-h4, 24px);
	font-weight: 600;
	line-height: 140%;
	/* 33.6px */
	letter-spacing: -0.24px;
}

.featured-posts .related-posts-grid {
	grid-template-columns: repeat(3, 1fr);
}

.featured-posts .related-post-card {
	max-width: 100%;
}

.featured-posts .author-avatar img,
.featured-posts .author-avatar {
	display: block;
	width: 48px;
	height: 48px;
	min-width: auto;
}

.post-thumbnail img {
	border-radius: 8px;
}

.related-post-category.eyebrow {
	margin-bottom: 0;
}

.related-post-category.eyebrow a {
	margin-bottom: 0;
	color: black;
	text-decoration: none;
}

.related-post-title a {
	font-size: var(--Typography-h5, 20px);
	font-style: normal;
	font-weight: 600;
	line-height: 140%;
	/* 28px */
	letter-spacing: -0.2px;
}

.related-posts-grid {
	grid-template-columns: repeat(4, 1fr);
}

.related-post-card .author-info span:nth-child(2) {
	font-size: var(--Typography-body-sm, 12px);
	line-height: 160%;
	/* 19.2px */
	letter-spacing: 0.12px;
}

.related-post-card {
	padding: 16px;
}

@media (max-width: 768px) {
	.featured-posts .related-post-title a {
		font-size: 20px;
	}

	.related-post-card {
		max-width: 100%;
	}

	.author-avatar img {
		border-radius: 50%;
		width: 148px;
		height: 148px;
	}

	.related-post-card {
		padding: 24px 12px;
	}

	.related-post-title a {
		font-size: var(--Typography-h5, 16px);
		font-weight: 600;
		line-height: 140%;
		/* 22.4px */
		letter-spacing: -0.16px;
	}

	.related-post-card .author-info span:first-child {
		display: block;
	}

	.related-posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 568px) {
	.author-avatar img {
		width: 88px;
		height: 88px;
	}

	.related-posts-grid {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}