/**
 * Component: Article layout (floated-thumbnail single-post layout)
 * Usage: .article-layout > article > .article-layout__thumbnail
 * (floated), .entry-header, .entry-content — see single-portfolio.php
 * and single.php.
 *
 * The thumbnail floats left; title/byline/lead-in text wraps beside it
 * (matches the old site), and the rest of the article body continues
 * full width once past the image's height. Shared by both single-post
 * detail templates (Article and News) — not portfolio-specific despite
 * the file's previous name.
 *
 * Books (single-book.php) are the one exception: purchase-link buttons
 * need to pin to the bottom of the cover image's height, which a float
 * can't do (a float never stretches an adjacent in-flow sibling to
 * match its own height). Books opt into a CSS Grid version of this
 * same layout instead, scoped under the .single-book body class below
 * — see that section's own comment for how it differs structurally
 * (the image and .entry-header__top live inside .entry-header there,
 * not as a preceding sibling of it).
 */

.article-layout {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
	/* Establishes a new block formatting context so this element's own
	   height properly contains the floated thumbnail below — without
	   this, the float "leaks" out and the footer rides up under it. */
	display: flow-root;
}

/*
 * .entry-header/.entry-content normally center themselves independently
 * (see layout.css) — here they're already inside .article-layout's
 * single centered column, so their own width/centering/padding would
 * just double up. Neutralized only within this wrapper.
 *
 * div.article-layout (not .article-layout) is deliberate: layout.css's
 * .single-post/.single-portfolio max-width override targets these same
 * properties at equal specificity (two classes), so without the extra
 * `div` type selector here, which rule wins would depend on stylesheet
 * load order (this file loads after layout.css today, but that's an
 * invisible dependency, not something the selectors themselves
 * guarantee) rather than being deterministic.
 */
div.article-layout .entry-header,
div.article-layout .entry-content {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.article-layout__thumbnail {
	float: left;
	width: 45%;
	max-width: 22rem;
	height: auto;
	margin: 0 var(--space-5) var(--space-2) 0;
}

/*
 * Always drops below the floated thumbnail onto its own full-width
 * line, rather than wrapping beside it like the title/lead/buy-links
 * above it do — a byline row squeezed into the narrow remaining
 * column next to a tall cover looked cramped.
 */
.article-layout .magazine-byline {
	clear: both;
}

/* Matches the header nav's own mobile breakpoint (nav.css) — below
   that, the rest of the page should read as "mobile" too, not just
   the header. */
@media (max-width: 40rem) {
	.article-layout__thumbnail {
		float: none;
		width: 100%;
		max-width: none;
		margin-right: 0;
	}
}

/*
 * Books only: Grid instead of float. .entry-header itself becomes the
 * grid — the cover image and .entry-header__top (title/lead/buy-links)
 * are its row-1 cells, so .entry-header__top stretches to exactly match
 * the image's height, which is what lets .book-buy-links use
 * margin-top: auto inside it to pin to the row's true bottom edge (see
 * book.css). .magazine-byline/.book-awards are direct children of
 * .entry-header too (siblings of .entry-header__top, not nested in it)
 * so they can span the full grid width below row 1 — the Grid
 * equivalent of the float version's clear: both.
 */
.single-book .entry-header {
	display: grid;
	grid-template-columns: minmax(0, min(45%, 22rem)) 1fr;
	column-gap: var(--space-5);
	row-gap: var(--space-3);
}

.single-book .article-layout__thumbnail {
	float: none;
	margin: 0;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
}

.single-book .entry-header__top {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
}

.single-book .magazine-byline,
.single-book .book-awards {
	grid-column: 1 / -1;
	clear: none;
}

@media (max-width: 40rem) {
	.single-book .entry-header {
		grid-template-columns: 1fr;
	}

	.single-book .article-layout__thumbnail {
		grid-column: 1;
		grid-row: auto;
		max-width: none;
	}

	.single-book .entry-header__top {
		grid-column: 1;
		grid-row: auto;
	}
}