/*
 * One guide (single-post.php, parts/guide/body.php), in the Home B shell. The About and
 * Contact look on white: the breadcrumb and the condensed h1, the featured image as a
 * product shot in a light frame (under the title on phones; from 64rem in a column beside
 * the title and the first paragraphs; never full bleed), the post's content in one
 * reading column, Talk to us after it. Content typography covers what the guides use: h2, h3, paragraphs, lists,
 * tables (in a box that scrolls sideways only when a table is wider than the column) and
 * links. Yellow stays the Call color, so links are ink with an underline. Breakpoints
 * 40rem, 64rem. Every rule under body.hdc-guide.
 */

@layer tokens {
	body.hdc-guide {
		--gd-tint: #f5f7fa;
		--gd-line: #dfe3e8;
		--gd-col: 44rem;
		--gd-media: 15rem;
	}

	@media (min-width: 40rem) {
		body.hdc-guide {
			--gd-media: 18rem;
		}
	}

	@media (min-width: 64rem) {
		body.hdc-guide {
			--gd-media: 20rem;
		}
	}

	@media (min-width: 80rem) {
		body.hdc-guide {
			--gd-media: 24rem;
		}
	}
}

@layer components {
	.hdc-guide .hdc-gd-main {
		overflow-x: clip;
	}

	/* ---------------------------------------------------------------- Grid and title */
	.hdc-guide .hdc-gd-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
		padding-bottom: var(--space-section);
	}

	.hdc-guide .hdc-gd-head {
		min-width: 0;
	}

	/* Inline, so a long guide title wraps as text after Home, not as a block. */
	.hdc-guide .hdc-gd-crumbs__list {
		margin: 0;
		padding: 1rem 0 0;
		list-style: none;
		color: var(--steel);
		font-size: 0.875rem;
		--link: var(--steel);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-guide .hdc-gd-crumbs__item {
		display: inline;
	}

	.hdc-guide .hdc-gd-crumbs__item + .hdc-gd-crumbs__item::before {
		content: "/";
		margin-inline: 0.5rem;
		color: var(--control);
	}

	.hdc-guide .hdc-gd-crumbs__item [aria-current] {
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-guide .hdc-gd-h1 {
		max-width: 24ch;
		margin: 1.25rem 0 0;
		color: var(--ink);
		font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.02;
		text-wrap: balance;
	}

	/* The cut-out on white: multiply drops the white onto the frame. */
	.hdc-guide .hdc-gd-media {
		display: grid;
		place-items: center;
		height: var(--gd-media);
		padding: 1rem;
		border-radius: 2px;
		background: var(--gd-tint);
	}

	.hdc-guide .hdc-gd-media__img {
		width: auto;
		max-width: 100%;
		height: 100%;
		object-fit: contain;
		mix-blend-mode: multiply;
	}

	/* ---------------------------------------------------------------- Content */
	.hdc-guide .hdc-gd-prose {
		min-width: 0;
		max-width: var(--gd-col);
		padding-top: 0.5rem;
		color: var(--body);
		font-size: 1.0625rem;
		line-height: 1.7;
		overflow-wrap: break-word;
	}

	.hdc-guide .hdc-gd-prose > * + * {
		margin-top: 1.25rem;
	}

	.hdc-guide .hdc-gd-prose h2 {
		margin-top: 3rem;
		color: var(--ink);
		font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
		font-weight: 800;
		line-height: 1.08;
		text-wrap: balance;
	}

	.hdc-guide .hdc-gd-prose h3 {
		margin-top: 2rem;
		color: var(--ink);
		font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
		font-weight: 800;
		line-height: 1.15;
		text-wrap: balance;
	}

	.hdc-guide .hdc-gd-prose :is(h2, h3) + * {
		margin-top: 0.75rem;
	}

	.hdc-guide .hdc-gd-prose :is(h4, h5, h6) {
		margin-top: 1.75rem;
		color: var(--ink);
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-prose :is(ul, ol) {
		padding-inline-start: 1.375rem;
	}

	.hdc-guide .hdc-gd-prose li + li {
		margin-top: 0.5rem;
	}

	.hdc-guide .hdc-gd-prose li::marker {
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-prose :is(strong, b) {
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-prose a {
		color: var(--ink);
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}

	.hdc-guide .hdc-gd-prose a:hover {
		text-decoration-thickness: 2px;
	}

	.hdc-guide .hdc-gd-prose hr {
		margin-block: 2.5rem;
		border: 0;
		border-top: 1px solid var(--gd-line);
	}

	.hdc-guide .hdc-gd-prose blockquote {
		padding-inline-start: 1.25rem;
		border-inline-start: 3px solid var(--gd-line);
		color: var(--ink);
	}

	.hdc-guide .hdc-gd-prose img {
		height: auto;
	}

	/* Tables: compact cells; the box scrolls sideways only when a table is wider than it. */
	.hdc-guide .hdc-gd-prose .hdc-gd-table {
		margin-top: 1.75rem;
		overflow-x: auto;
		border: 1px solid var(--gd-line);
		border-radius: 2px;
	}

	.hdc-guide .hdc-gd-prose .hdc-gd-table + * {
		margin-top: 1.75rem;
	}

	.hdc-guide .hdc-gd-table table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.875rem;
		line-height: 1.4;
		font-variant-numeric: tabular-nums;
	}

	.hdc-guide .hdc-gd-table :is(th, td) {
		padding: 0.625rem 0.5rem;
		border-top: 1px solid var(--gd-line);
		text-align: left;
		vertical-align: top;
		overflow-wrap: normal;
	}

	.hdc-guide .hdc-gd-table thead th {
		border-top: 0;
		background: var(--gd-tint);
		color: var(--ink);
		font-weight: 700;
	}

	.hdc-guide .hdc-gd-table tbody tr > :first-child {
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-guide .hdc-gd-table a {
		text-underline-offset: 0.15em;
	}

	@media (min-width: 40rem) {
		.hdc-guide .hdc-gd-table :is(th, td) {
			padding: 0.75rem 1rem;
		}

		.hdc-guide .hdc-gd-table table {
			font-size: 0.9375rem;
		}
	}

	@media (min-width: 64rem) {
		.hdc-guide .hdc-gd-grid--media {
			grid-template-columns: minmax(0, var(--gd-col)) var(--gd-media);
			grid-template-areas:
				"head media"
				"prose media";
			grid-template-rows: auto 1fr;
			column-gap: clamp(3rem, 6vw, 6rem);
			row-gap: 1.5rem;
		}

		.hdc-guide .hdc-gd-grid--media .hdc-gd-head {
			grid-area: head;
		}

		.hdc-guide .hdc-gd-grid--media .hdc-gd-prose {
			grid-area: prose;
		}

		.hdc-guide .hdc-gd-grid--media .hdc-gd-media {
			grid-area: media;
			align-self: start;
			width: var(--gd-media);
			height: var(--gd-media);
			margin-top: 3.25rem;
			padding: 1.5rem;
		}
	}
}