/*
 * Single article: hero, two-column layout, article end, related posts.
 * Content blocks inside the article live in article-content.css.
 */

/* ---------- Hero ---------- */

.wp-block-group.biomasha-hero {
	--hero-pad: 20px 0 32px;
	--hero-crumbs-gap: 23px;
	--hero-grid-gap: 38px;
	--hero-copy-gap: 20px;
	--hero-copy-pad: 24px;
	--hero-art-radius: 75px 16px 16px;

	position: relative;
	padding-block: 20px 32px;
	overflow: hidden;
}

.biomasha-hero .biomasha-breadcrumbs {
	margin-bottom: var(--hero-crumbs-gap);
}

.biomasha-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--hero-grid-gap);
	align-items: stretch;
}

.biomasha-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: var(--hero-copy-gap);
	min-width: 0;
	padding-top: var(--hero-copy-pad);
}

.biomasha-hero__copy .biomasha-post-title {
	width: 100%;
}

.biomasha-hero__lead {
	width: 100%;
	max-width: 544px;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--lead);
	text-wrap: pretty;
}

.biomasha-hero__lead p {
	margin: 0;
}

.biomasha-hero__byline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	margin-top: auto;
}

.biomasha-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--ui);
	color: var(--wp--preset--color--muted);
}

.biomasha-hero__meta .biomasha-reading-time::before {
	content: "·";
	margin-right: 14px;
}

.wp-block-post-featured-image.biomasha-hero__art {
	display: flex;
	flex-direction: column;
	align-self: end;
	justify-content: center;
	min-width: 0;
	margin: 0;
}

.biomasha-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.5;
	border-radius: var(--hero-art-radius);
	object-fit: cover;
}

/* ---------- Layout: contents rail + article ---------- */

.wp-block-group.biomasha-article__layout {
	--layout-columns: 240px minmax(0, 740px);
	--layout-gap: 85px;
	--layout-pad: 64px;

	display: grid;
	grid-template-columns: var(--layout-columns);
	gap: var(--layout-gap);
	justify-content: center;
	padding-top: var(--layout-pad);
}

.biomasha-article__rail {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 121px);
}

.biomasha-article__rail .biomasha-share {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.biomasha-article__body {
	min-width: 0;
}

.wp-block-group.biomasha-article__end {
	--end-margin: 45px;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: var(--end-margin);
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.biomasha-article__end .biomasha-share {
	display: flex;
	align-items: center;
	gap: 16px;
}

.biomasha-article__end .biomasha-share__label {
	margin: 0;
}

/* ---------- Related posts ---------- */

.wp-block-group.biomasha-related {
	--related-pad: 83px;

	padding-block: var(--related-pad);
}

.wp-block-group.biomasha-related__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.biomasha-related__head h2 {
	margin: 12px 0 0;
}

.biomasha-related__head p {
	margin: 0;
}

.biomasha-related__all a {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--ui);
	line-height: var(--wp--custom--line-height--ui);
	white-space: nowrap;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.biomasha-related__all a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.biomasha-related__all span {
	color: var(--wp--custom--color--related-slash);
}

/* ---------- Card grid and card (shared with the journal) ---------- */

.wp-block-post-template.biomasha-cards {
	--cards-columns: repeat(4, minmax(0, 1fr));
	--cards-gap: 24px;

	display: grid;
	grid-template-columns: var(--cards-columns);
	gap: var(--cards-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.biomasha-cards > li {
	min-width: 0;
	margin: 0;
}

.wp-block-group.biomasha-card {
	--card-cover-ratio: 1.5;
	--card-meta-margin: 19px 0 10px;
	--card-text-margin: 12px;

	position: relative;
	height: 100%;
}

.biomasha-card__cover {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--m);
	background: var(--wp--preset--color--mint);
}

.biomasha-card__cover .wp-block-post-featured-image {
	margin: 0;
}

.biomasha-card__cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--card-cover-ratio);
	object-fit: cover;
	transition: transform 0.4s;
}

.biomasha-card:hover .biomasha-card__cover img {
	transform: scale(1.035);
}

/* Round arrow badge over the cover. */
.biomasha-card__cover::after {
	content: "";
	position: absolute;
	right: 15px;
	bottom: 15px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background:
		url(../img/icons/arrow-right.svg) center / 17px no-repeat
		var(--wp--custom--color--card-badge);
	transition: background-color var(--wp--custom--transition--fast);
}

.biomasha-card:hover .biomasha-card__cover::after {
	background-color: var(--wp--preset--color--green);
}

.wp-block-group.biomasha-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: var(--card-meta-margin);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--ui);
}

.biomasha-card__meta .biomasha-card-label {
	font-weight: var(--wp--custom--font-weight--semibold);
}

.biomasha-card__meta .biomasha-reading-time {
	color: var(--wp--preset--color--muted);
}

/* An h3 under a section heading, an h2 on listing pages: same look. */
.biomasha-card .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--subsection);
	font-weight: var(--wp--custom--font-weight--subsection);
	line-height: var(--wp--custom--line-height--subsection);
	letter-spacing: var(--wp--custom--letter-spacing--subsection);
}

.biomasha-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* The title link covers the whole card. */
.biomasha-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.biomasha-card:hover .wp-block-post-title a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.biomasha-card .wp-block-post-excerpt {
	margin: var(--card-text-margin) 0 0;
	font-size: var(--wp--preset--font-size--ui);
	line-height: var(--wp--custom--line-height--ui);
	color: var(--wp--preset--color--muted);
}

.biomasha-card .wp-block-post-excerpt p {
	margin: 0;
}

/* ---------- Breakpoints ---------- */

@media (max-width: 1150px) {

	.wp-block-group.biomasha-article__layout {
		--layout-columns: 215px minmax(0, 740px);
		--layout-gap: 45px;
	}
}

@media (max-width: 999px) {

	.wp-block-post-template.biomasha-cards {
		--cards-columns: repeat(2, minmax(0, 1fr));
		--cards-gap: 30px 22px;
	}
}

@media (max-width: 899px) {

	.wp-block-group.biomasha-hero {
		--hero-grid-gap: 25px;
	}

	.wp-block-group.biomasha-article__layout {
		--layout-columns: minmax(0, 1fr);
		--layout-gap: 30px;
		--layout-pad: 35px;

		max-width: 740px;
	}

	.biomasha-article__rail {
		position: static;
	}

	.biomasha-article__rail .biomasha-share {
		display: none;
	}
}

@media (max-width: 599px) {

	.wp-block-group.biomasha-hero {
		--hero-crumbs-gap: 20px;
		--hero-grid-gap: 21px;
		--hero-copy-gap: 16px;
		--hero-copy-pad: 0;
		--hero-art-radius: 50px 9px 9px;

		padding-block: 18px 25px;
	}

	.biomasha-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.biomasha-hero__byline {
		margin-top: 0;
	}

	.wp-block-group.biomasha-article__layout {
		--layout-gap: 27px;
		--layout-pad: 27px;
	}

	.wp-block-group.biomasha-article__end {
		--end-margin: 30px;

		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.biomasha-article__end .biomasha-share {
		flex-wrap: wrap;
	}

	.wp-block-group.biomasha-related {
		--related-pad: 53px;
	}

	.wp-block-group.biomasha-related__head {
		align-items: start;
		gap: 12px;
		margin-bottom: 24px;
	}

	.biomasha-related__head .is-style-eyebrow {
		font-size: 9px;
	}

	.biomasha-related__head .biomasha-related__all {
		margin-top: 12px;
	}

	.biomasha-related__all a {
		gap: 8px;
	}

	.wp-block-post-template.biomasha-cards {
		--cards-columns: minmax(0, 1fr);
		--cards-gap: 30px;
	}

	.wp-block-group.biomasha-card {
		--card-meta-margin: 16px 0 10px;
		--card-text-margin: 10px;
	}
}