/* Blog archive and single Post templates */

.blog-archive {
	padding-block: var(--space-2xl) var(--space-3xl);
	background-color: var(--color-bg-light);
}

.blog-archive__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.blog-archive__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
}

.blog-archive__label {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-full);
	background-color: var(--color-bg-gray);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	line-height: 1;
}

.blog-archive__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	letter-spacing: -0.04em;
	line-height: 1.1;
}

.blog-archive__list {
	display: flex;
	flex-direction: column;
}

.blog-archive__item {
	border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.blog-archive__item:first-child {
	border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.blog-archive__item-link {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-md);
	padding-block: var(--space-lg);
	color: var(--color-text-dark);
}

.blog-archive__thumb {
	width: 6rem;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sm);
	object-fit: cover;
	background-color: var(--color-bg-gray);
	transition: transform var(--transition-medium);
}

.blog-archive__item-link:hover .blog-archive__thumb,
.blog-archive__item-link:focus-visible .blog-archive__thumb {
	transform: scale(1.03);
}

.blog-archive__item-copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.blog-archive__date {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.3;
}

.blog-archive__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	letter-spacing: -0.025em;
	line-height: 1.25;
}

.blog-archive__excerpt {
	display: none;
	max-width: 48rem;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.blog-archive__arrow {
	font-size: 1.25rem;
}

.blog-archive__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.blog-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: var(--space-sm);
	border-radius: var(--radius-full);
	background-color: var(--color-bg-gray);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
}

.blog-archive__pagination .page-numbers.current {
	background-color: var(--color-bg-dark);
	color: var(--color-text-light);
}

.blog-archive__empty {
	color: var(--color-text-muted);
}

.blog-archive__single {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	width: 100%;
	max-width: 52rem;
	margin-inline: auto;
}

.blog-archive__single-header {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.blog-archive__single-title {
	font-size: clamp(2rem, 5vw, 4.5rem);
	font-weight: var(--fw-bold);
	letter-spacing: -0.045em;
	line-height: 1.05;
}

.blog-archive__single-excerpt {
	color: var(--color-text-muted);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	line-height: 1.55;
}

.blog-archive__featured {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-bg-gray);
}

.blog-archive__featured img {
	width: 100%;
	max-height: 36rem;
	object-fit: cover;
}

.blog-archive__content {
	color: var(--color-text-dark);
	font-size: var(--fs-body);
	line-height: 1.75;
}

.blog-archive__content > * + * {
	margin-top: var(--space-lg);
}

.blog-archive__content h2,
.blog-archive__content h3 {
	margin-top: var(--space-2xl);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}

.blog-archive__content a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.blog-archive__gallery {
	margin-top: var(--space-sm);
}

.blog-archive__gallery-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-archive__gallery-item {
	margin: 0;
}

.blog-archive__gallery-link {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-bg-gray);
	aspect-ratio: 4 / 3;
}

.blog-archive__gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-medium);
}

.blog-archive__gallery-link:hover .blog-archive__gallery-image,
.blog-archive__gallery-link:focus-visible .blog-archive__gallery-image {
	transform: scale(1.03);
}

@media (min-width: 768px) {
	.blog-archive {
		padding-block: var(--space-3xl) 5rem;
	}

	.blog-archive__item-link {
		grid-template-columns: 10rem minmax(0, 1fr) auto;
		gap: var(--space-xl);
		padding-block: var(--space-xl);
	}

	.blog-archive__thumb {
		width: 10rem;
	}

	.blog-archive__excerpt {
		display: block;
		margin-top: var(--space-xs);
	}

	.blog-archive__gallery-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-md);
	}
}