/*
 * Montessori Bees blog: the list of posts, a post, and the comments under one.
 *
 * Loaded on the blog, on a post and on archives, after brand.css. The page measures the same as the
 * shop (--mb-gutter, --mb-page in brand.css) and the cards are the same shape, so the two lists read
 * as one site. Inside a post the measure narrows to 720px, which is where long text is comfortable.
 *
 * Rules start with `:is(.entry-content, #mb)` where they have to beat Twenty Twenty's own content
 * rules — the same ID-weight trick home.css uses, with `#mb` matching nothing.
 */

.mb-blog-intro__title,
.mb-blog,
.mb-post {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--mb-page);
	padding-left: var(--mb-gutter);
	padding-right: var(--mb-gutter);
	width: 100%;
}

.mb-blog-intro {
	padding: 40px 0 0;
}

.mb-blog-intro__title {
	color: var(--mb-deep);
	font-size: clamp(26px, 20.3px + 1.5vw, 36px);
}

.mb-blog {
	padding-bottom: 64px;
	padding-top: 26px;
}


/* The list ---------------------------------- */

.mb-posts {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* "More from the blog" holds three, so they are narrower. */
.mb-posts--small {
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.mb-post-card {
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 10px 10px 22px;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mb-post-card:hover,
.mb-post-card:focus-within {
	border-color: var(--mb-deep);
	box-shadow: 0 4px 10px rgb(62 65 66 / 10%);
	transform: translateY(-2px);
}

.mb-post-card__media {
	aspect-ratio: 3 / 2;
	border-radius: calc(var(--mb-radius) / 2);
	display: block;
	overflow: hidden;
}

.mb-post-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.mb-post-card__title {
	color: var(--mb-deep);
	font-size: clamp(21px, 18.4px + 0.667vw, 27px);
	margin: 16px 12px 0;
}

.mb-posts--small .mb-post-card__title {
	font-size: 20px;
}

.mb-post-card__title a {
	color: inherit;
	text-decoration: none;
}

.mb-post-card__title a:hover {
	text-decoration: underline;
}

.mb-post-card__excerpt {
	font-size: 16px;
	line-height: 1.5;
	margin: 10px 12px 0;
}

.mb-posts--small .mb-post-card__excerpt {
	font-size: 15px;
}

.mb-post__meta {
	color: #5d6263;
	font-size: 14px;
	margin: 14px 12px 0;
}

.mb-post__dot {
	padding: 0 6px;
}


/* A post ------------------------------------ */

.mb-post {
	padding-bottom: 64px;
}

.mb-post__back {
	font-size: 14px;
	margin: 28px 0 0;
}

.mb-post__back a {
	color: var(--mb-deep);
	text-decoration: none;
}

.mb-post__back a:hover {
	text-decoration: underline;
}

.mb-post__header {
	margin: 24px auto 0;
	max-width: 720px;
}

:is(.entry-content, #mb) .mb-post__title,
.mb-post__title {
	color: var(--mb-deep);
	font-size: clamp(28px, 21.4px + 1.7vw, 44px);
	line-height: 1.1;
	margin: 0;
}

.mb-post__header .mb-post__meta {
	display: inline;
	margin: 16px 0 0;
}

.mb-post__author {
	color: #5d6263;
	display: inline;
	font-size: 14px;
	margin: 0;
}

.mb-post__author::before {
	content: "·";
	padding: 0 6px;
}

.mb-post__figure {
	margin: 28px auto 0;
	max-width: 880px;
}

.mb-post__figure img {
	border-radius: var(--mb-radius);
	display: block;
	width: 100%;
}

.mb-post__figure figcaption {
	color: #5d6263;
	font-size: 14px;
	margin-top: 10px;
}


/* The writing -------------------------------- */
/* Twenty Twenty caps content at 580px and adds its own spacing; a post reads better a little wider. */

:is(.entry-content, #mb) .mb-post__body,
.mb-post__body {
	margin: 36px auto 0;
	max-width: 720px;
}

:is(.entry-content, #mb).mb-post__body > *,
.mb-post__body > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: auto;
}

:is(.entry-content, #mb).mb-post__body p,
:is(.entry-content, #mb).mb-post__body li {
	font-size: 18px;
	line-height: 1.7;
}

:is(.entry-content, #mb).mb-post__body p {
	margin: 0 0 22px;
}

:is(.entry-content, #mb).mb-post__body :is(h2, h3, h4) {
	color: var(--mb-deep);
}

:is(.entry-content, #mb).mb-post__body h2 {
	font-size: clamp(24px, 21.4px + 0.667vw, 30px);
	margin: 40px 0 14px;
}

:is(.entry-content, #mb).mb-post__body h3 {
	font-size: 22px;
	margin: 32px 0 12px;
}

:is(.entry-content, #mb).mb-post__body h4 {
	font-size: 19px;
	margin: 26px 0 10px;
}

:is(.entry-content, #mb).mb-post__body ul {
	margin: 0 0 22px;
	padding-left: 22px;
}

:is(.entry-content, #mb).mb-post__body li {
	margin: 0 0 10px;
}

:is(.entry-content, #mb).mb-post__body li::marker {
	color: var(--mb-primary);
}


/* Sharing ----------------------------------- */

.mb-share {
	align-items: center;
	border-bottom: 1px solid var(--mb-beige);
	border-top: 1px solid var(--mb-beige);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 44px auto 0;
	max-width: 720px;
	padding: 18px 0;
}

.mb-share__label {
	color: #5d6263;
	font-size: 14px;
	margin-right: 4px;
}

.mb-share__link {
	align-items: center;
	background: none;
	border: 0;
	color: var(--mb-deep);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--mb-font-body);
	font-size: 15px;
	gap: 8px;
	min-height: 44px;
	padding: 0;
	text-decoration: none;
}

.mb-share__link:hover,
.mb-share__link:focus {
	text-decoration: underline;
}

.mb-share__copy.is-copied {
	color: var(--mb-charcoal);
}


/* More from the blog ------------------------ */

.mb-post__more {
	margin-top: 56px;
}

.mb-post__more-title {
	color: var(--mb-deep);
	font-size: clamp(22px, 19.4px + 0.667vw, 28px);
	margin: 0 0 22px;
}


/* Comments ---------------------------------- */

.mb-post__comments {
	margin: 56px auto 0;
	max-width: 720px;
}

.mb-post__comments .comments-header,
.mb-post__comments .comment-reply-title {
	margin: 0 0 20px;
	max-width: none;
	padding: 0;
	text-align: left;
}

.mb-post__comments :is(.comments-title, .comment-reply-title) {
	color: var(--mb-deep);
	font-family: var(--mb-font-heading);
	font-size: 24px;
	letter-spacing: -0.03em;
}

.mb-post__comments .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-post__comments .comment-body {
	border-bottom: 1px solid var(--mb-beige);
	padding: 20px 0;
}

.mb-post__comments .comment-meta {
	font-size: 14px;
}

.mb-post__comments .comment-author .fn {
	color: var(--mb-deep);
	font-family: var(--mb-font-heading);
	font-size: 18px;
	font-style: normal;
	letter-spacing: -0.02em;
}

.mb-post__comments .comment-content p {
	font-size: 16px;
	line-height: 1.6;
}

.mb-post__comments .comment-respond {
	background: var(--mb-white);
	border: 1px solid var(--mb-primary);
	border-radius: var(--mb-radius);
	margin-top: 32px;
	padding: 26px 28px;
}

.mb-post__comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	background: var(--mb-white);
	border: 1px solid #d9d1c6;
	border-radius: var(--mb-radius);
	box-sizing: border-box;
	color: var(--mb-charcoal);
	font-family: var(--mb-font-body);
	font-size: 16px;
	padding: 12px 14px;
	width: 100%;
}

.mb-post__comments :is(input, textarea):focus {
	border-color: var(--mb-deep);
	outline: 2px solid var(--mb-deep);
	outline-offset: 1px;
}

.mb-post__comments label {
	display: block;
	font-size: 14px;
	margin-bottom: 6px;
}

.mb-post__comments .comment-form-cookies-consent label {
	display: inline;
	font-size: 15px;
}

.mb-post__comments .form-submit input[type="submit"] {
	background: var(--mb-deep);
	border: 0;
	border-radius: 0;
	color: var(--mb-white);
	cursor: pointer;
	font-family: var(--mb-font-body);
	font-size: 16px;
	min-height: 48px;
	padding: 12px 32px;
}

.mb-post__comments .form-submit input[type="submit"]:hover {
	background: var(--mb-deep-shade);
}


/* Pagination -------------------------------- */

.mb-blog .navigation.pagination {
	margin-top: 40px;
}

.mb-blog .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.mb-blog .page-numbers {
	color: var(--mb-deep);
	font-size: 16px;
	text-decoration: none;
}

.mb-blog .page-numbers.current {
	text-decoration: underline;
	text-underline-offset: 5px;
}


/* Phone ------------------------------------- */

@media (max-width: 781px) {

	.mb-blog-intro {
		padding-top: 28px;
	}

	.mb-blog {
		padding-bottom: 36px;
		padding-top: 18px;
	}

	.mb-posts {
		gap: 16px;
		grid-template-columns: 1fr;
	}

	:is(.entry-content, #mb).mb-post__body p,
	:is(.entry-content, #mb).mb-post__body li {
		font-size: 17px;
	}

	.mb-post__figure {
		margin-top: 20px;
	}

	.mb-post__comments .comment-respond {
		padding: 20px;
	}
}


/* Less motion ------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.mb-post-card {
		transition: none;
	}

	.mb-post-card:hover,
	.mb-post-card:focus-within {
		transform: none;
	}
}


/* Two things Twenty Twenty does to the parts it owns ------------------------------------------------
 *
 * It paints every <button> like a submit button, and it pulls the comment form's note up by 40px to
 * sit beside a title that this layout puts above it.
 */

:is(.mb-share, #mb) .mb-share__copy {
	background: transparent;
	border: 0;
	color: var(--mb-deep);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	min-height: 44px;
	padding: 0;
	text-transform: none;
}

:is(.mb-share, #mb) .mb-share__copy:hover {
	background: transparent;
	color: var(--mb-deep-shade);
}

:is(.mb-post__comments, #mb) .comment-notes {
	font-size: 14px;
	margin-bottom: 24px;
	margin-top: 0;
}