/**
 * The blog: index and article.
 *
 * Loaded only on the posts page and on a single post. Everything here is layout
 * and rhythm; the words and pictures are the post's own blocks, so nothing in
 * this file forces a colour or a size that a sidebar choice should win.
 */

.mc-home .mc-blog-hero .mc-blog-lead {
	max-width: 560px;
	margin-top: 14px;
	color: #d5e0e6;
	font-size: 15px;
	line-height: 1.8;
}

/* ---- the index ---------------------------------------------------------- */

.mc-home .mc-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.mc-home .mc-blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--mc-line);
	border-radius: var(--v2-radius, 16px);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mc-home .mc-blog-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--v2-shadow-lift, 0 16px 32px rgba(13, 37, 55, 0.12));
	border-color: #8fcfe9;
}

/* One picture box for every card, whatever shape the picture is.
 * The image is taken out of the flow: a percentage height on an image inside an
 * aspect-ratio box is circular, and the browser resolves it by falling back to
 * the picture's own height — which is what made every card a different size. */
.mc-home .mc-blog-shot {
	position: relative;
	display: block;
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--mc-paper);
}

.mc-home .mc-blog-shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.mc-home .mc-blog-card:hover .mc-blog-shot img {
	transform: scale(1.04);
}

.mc-home .mc-blog-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px 26px;
}

.mc-home .mc-blog-body h2 {
	font-size: 21px;
	line-height: 1.3;
	letter-spacing: -0.4px;
}

.mc-home .mc-blog-body p:not(.mc-eyebrow) {
	color: var(--mc-muted);
	font-size: 14px;
	line-height: 1.8;
	/* Three lines of summary, so a long one does not make its card taller. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Two lines of headline, for the same reason. */
.mc-home .mc-blog-body h2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.mc-home .mc-blog-body .mc-text-link {
	margin-top: auto;
	padding-top: 6px;
}

/* ---- pagination --------------------------------------------------------- */

.mc-home .mc-blog-pagination {
	margin-top: 44px;
}

.mc-home .mc-blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.mc-home .mc-blog-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--mc-line);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.mc-home .mc-blog-pagination .page-numbers.current,
.mc-home .mc-blog-pagination a.page-numbers:hover {
	background: var(--mc-gradient);
	border-color: transparent;
	color: #fff;
}

/* ---- the article -------------------------------------------------------- */

.mc-home .mc-blog-article > .mc-container {
	max-width: 900px;
}

.mc-home .mc-blog-lead-image {
	margin: 0 0 36px;
	border-radius: var(--v2-radius, 16px);
	overflow: hidden;
}

.mc-home .mc-blog-lead-image img {
	width: 100%;
	height: auto;
}

.mc-home .mc-blog-article .mc-prose > * + * {
	margin-top: 20px;
}

.mc-home .mc-blog-article .mc-prose h2,
.mc-home .mc-blog-article .mc-prose h3 {
	margin-top: 36px;
}

.mc-home .mc-blog-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 18px;
	margin-top: 46px;
	padding-top: 24px;
	border-top: 1px solid var(--mc-line);
}

/* ---- narrower screens --------------------------------------------------- */

@media (max-width: 1050px) {
	.mc-home .mc-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.mc-home .mc-blog-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.mc-home .mc-blog-body {
		padding: 20px 18px 22px;
	}

	.mc-home .mc-blog-body h2 {
		font-size: 19px;
	}
}