/*
 * A guide (single.html). Wide screen: breadcrumb, the topic as a pill, a bold title, lede and byline, a big
 * rounded photo, then three columns: contents, the guide (up to 680px) and a blue "Looking at a plot?" card
 * with related guides under it. Phone: a back-and-share bar instead of the site header, one column, and the
 * blue card closing the guide. No contents, related list or bottom contact bar there.
 */

/* ---------- Page frame ---------- */

/* Spacing here is the containers' gap, so the blocks inside bring no margins of their own. */
.maxkan-article > *,
.maxkan-article .maxkan-article__head > *,
.maxkan-article .maxkan-article__layout > *,
.maxkan-article .maxkan-article__main > *,
.maxkan-article .maxkan-article__aside > *,
.maxkan-article .maxkan-article__card > *,
.maxkan-article .maxkan-article__body > * {
	margin-block: 0;
}

@media (max-width: 781px) {
	/* The guide bar stands in for the site header here. */
	.wp-site-blocks > header.wp-block-template-part {
		display: none;
	}

	/* No bottom contact bar on a guide, so the footer ends 32px under the legal line, as drawn. */
	.wp-site-blocks .maxkan-footer {
		padding-bottom: 32px;
	}
}

/* ---------- Heading block and photo ---------- */

.maxkan-article__head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-sizing: border-box;
	max-width: calc(900px + 2 * var(--maxkan-gutter));
	padding: 48px var(--maxkan-gutter) 0;
}

/* The topic and reading time, as a soft blue pill over the title. */
.maxkan-article__head .maxkan-byline--kicker {
	align-self: flex-start;
	padding: 7px 14px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
	font-size: 13px;
}

.maxkan-article .maxkan-article__title {
	color: var(--wp--preset--color--brand);
	font-size: var(--maxkan-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.maxkan-article__lede p {
	margin: 0;
	color: var(--wp--preset--color--slate);
	font-size: 20px;
	line-height: 1.55;
}

.maxkan-article .maxkan-article__photo {
	padding: 32px var(--maxkan-gutter) 0;
}

.maxkan-article .maxkan-article__photo img {
	display: block;
	width: 100%;
	height: 460px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card-large);
}

@media (max-width: 781px) {
	.maxkan-article__head {
		gap: 12px;
		padding: 20px var(--maxkan-gutter) 0;
	}

	.maxkan-article__head .maxkan-crumbs {
		display: none;
	}

	.maxkan-article .maxkan-article__title {
		font-size: 32px;
		line-height: 1.12;
	}

	.maxkan-article__lede p {
		font-size: 17px;
	}

	.maxkan-article .maxkan-article__photo {
		padding: 18px var(--maxkan-gutter) 0;
	}

	.maxkan-article .maxkan-article__photo img {
		height: 220px;
		border-radius: var(--wp--custom--radius--card);
	}
}

/* ---------- Three columns ---------- */

.maxkan-article__layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 680px) 300px;
	gap: 56px;
	align-items: start;
	padding: 48px var(--maxkan-gutter) 88px;
}

.maxkan-article__aside {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The card that turns a reader into a visitor: a blue moment beside the guide. */
.maxkan-article__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
	border-radius: var(--wp--custom--radius--card-large);
	box-shadow: 0 10px 30px -18px rgb(11 42 91 / 60%);
}

.maxkan-article .maxkan-article__card-title {
	color: var(--wp--preset--color--white);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.maxkan-article .maxkan-article__card-text {
	margin-bottom: 4px;
	color: var(--wp--preset--color--sky);
	font-size: 15px;
	line-height: 1.55;
}

/* Between the phone and the full width, the contents give way so the guide keeps a readable measure. */
@media (min-width: 782px) and (max-width: 1180px) {
	.maxkan-article__layout {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 40px;
	}

	.maxkan-article__layout > .maxkan-toc {
		display: none;
	}
}

@media (max-width: 781px) {
	.maxkan-article__layout {
		display: block;
		padding: 20px var(--maxkan-gutter) 28px;
	}

	.maxkan-article__layout > .maxkan-toc {
		display: none;
	}

	.maxkan-article .maxkan-article__aside {
		position: static;
		margin-top: 22px;
	}

	.maxkan-article__card {
		padding: 22px 18px;
	}

	.maxkan-article .maxkan-article__card-title {
		font-size: 20px;
	}
}

/* ---------- The guide itself ---------- */

/* The guide and, under it, the ways to pass it on. */
.maxkan-article__main {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.maxkan-article__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: var(--wp--preset--color--ink);
}

.maxkan-article__body p {
	font-size: 18px;
	line-height: 1.75;
}

.maxkan-article .maxkan-article__body > h2 {
	margin-top: 24px;
	color: var(--wp--preset--color--brand);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.maxkan-article .maxkan-article__body > h2:first-child {
	margin-top: 0;
}

.maxkan-article__body ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 22px;
	font-size: 18px;
	line-height: 1.6;
}

.maxkan-article__body li {
	margin: 0;
}

/*
 * Numbered steps: each on a hairline, the number in a 32px blue circle 16px from the text, the last one green.
 * The circle stays placed rather than laid out (see site.css), so the sentence stays one run of text.
 */
.maxkan-article__body .is-style-maxkan-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	list-style: none;
}

.maxkan-article__body .is-style-maxkan-steps li {
	padding: 16px 0 16px 48px;
	border-top-color: var(--wp--preset--color--line);
	font-size: 17px;
	line-height: 1.6;
}

.maxkan-article__body .is-style-maxkan-steps li:last-child {
	border-bottom-color: var(--wp--preset--color--line);
}

.maxkan-article__body .is-style-maxkan-steps li::before {
	inset-block-start: 16px;
	width: 32px;
	height: 32px;
}

/* A note from us inside a guide: pale green, with its opening words on a line of their own. */
.maxkan-article__body .is-style-maxkan-note {
	padding: 20px 22px;
	border: 1px solid
		color-mix(
			in srgb,
			var(--wp--preset--color--green) 27%,
			var(--wp--preset--color--white)
		);
	border-radius: var(--wp--custom--radius--card);
	background: color-mix(
		in srgb,
		var(--wp--preset--color--green-tint) 50%,
		var(--wp--preset--color--white)
	);
	font-size: 16px;
	line-height: 1.6;
}

.maxkan-article__body .is-style-maxkan-note strong {
	display: block;
	margin-bottom: 6px;
	color: var(--wp--preset--color--green-dark);
	line-height: normal;
}

/* A table of facts: the label in a pale 200px column, the fact beside it. */
.maxkan-article__body .is-style-maxkan-facts {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.maxkan-article__body .is-style-maxkan-facts table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	line-height: normal;
}

.maxkan-article__body .is-style-maxkan-facts tr + tr {
	border-top: 1px solid var(--wp--preset--color--line);
}

.maxkan-article__body .is-style-maxkan-facts th,
.maxkan-article__body .is-style-maxkan-facts td {
	padding: 14px 16px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.maxkan-article__body .is-style-maxkan-facts th {
	box-sizing: border-box;
	width: 200px;
	background: color-mix(
		in srgb,
		var(--wp--preset--color--mist) 50%,
		var(--wp--preset--color--white)
	);
	font-weight: 700;
}

@media (max-width: 781px) {
	.maxkan-article__body {
		gap: 14px;
	}

	.maxkan-article__body p {
		font-size: 17px;
		line-height: 1.7;
	}

	.maxkan-article .maxkan-article__body > h2 {
		margin-top: 12px;
		font-size: 24px;
	}

	.maxkan-article__body ul {
		font-size: 17px;
	}

	.maxkan-article__body .is-style-maxkan-steps li {
		padding: 12px 0 12px 40px;
		font-size: 16px;
		line-height: 1.55;
	}

	.maxkan-article__body .is-style-maxkan-steps li::before {
		inset-block-start: 12px;
		width: 28px;
		height: 28px;
		font-size: 13px;
	}

	.maxkan-article__body .is-style-maxkan-note {
		padding: 16px;
		font-size: 15px;
		line-height: 1.55;
	}

	.maxkan-article__body .is-style-maxkan-note strong {
		display: inline;
		margin: 0;
		line-height: inherit;
	}

	/* On a phone each fact is one line: the label in bold, then the fact. */
	.maxkan-article__body .is-style-maxkan-facts {
		border-radius: var(--wp--custom--radius--field);
	}

	.maxkan-article__body .is-style-maxkan-facts table {
		font-size: 15px;
		line-height: 1.5;
	}

	.maxkan-article__body .is-style-maxkan-facts tr {
		display: block;
		padding: 12px 14px;
	}

	.maxkan-article__body .is-style-maxkan-facts th,
	.maxkan-article__body .is-style-maxkan-facts td {
		display: inline;
		padding: 0;
		background: none;
	}

	.maxkan-article__body .is-style-maxkan-facts th::after {
		content: ": ";
	}
}