/**
 * Blog archive refinements layered over the captured Dermix stylesheet.
 */

.blog-page .page-header {
	background-image: url("../images/blog/page-header-dermatology-editorial-v2.jpg");
	background-position: 68% center;
}

@media (max-width: 1024px) {
	.blog-page .page-header {
		background-position: 70% center;
	}
}

@media (max-width: 767px) {
	.blog-page .page-header {
		background-position: 74% center;
	}
}

.blog-page .post-featured-image a {
	cursor: pointer;
}

.blog-page .post-item-content h2 a:focus-visible,
.blog-page .post-featured-image > a:focus-visible,
.blog-page .post-item-tags a:focus-visible,
.blog-page .readmore-btn:focus-visible,
.blog-page .page-pagination a:focus-visible {
	outline: 3px solid var(--accent-color);
	outline-offset: 4px;
}

.blog-page .post-featured-image > a:focus-visible,
.blog-page .post-item-tags a:focus-visible {
	border-radius: 14px;
}

.blog-page .page-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

.blog-page .page-pagination .page-numbers.current {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 5px;
	font-weight: 600;
	line-height: 1;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 10px;
}

.blog-page section {
	scroll-margin-top: 90px;
}

.blog-page .post-item-excerpt,
.blog-page .post-item-meta {
	margin: 0 0 18px;
	color: var(--text-color);
}

.blog-page .post-item-meta {
	font-size: 14px;
}

.blog-page .post-item-tags--inline {
	position: static;
	margin: 0 0 18px;
}

.blog-page .post-item-tags--inline a {
	display: inline-flex;
}

.blog-page .blog-empty-state {
	margin: 0;
}

.blog-reveal-ready .blog-page [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 650ms ease var(--reveal-delay, 0s), transform 650ms ease var(--reveal-delay, 0s);
}

.blog-reveal-ready .blog-page [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.blog-reveal-ready .blog-page [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.blog-page .post-featured-image img {
		transition: none;
	}
}