/*
 * The article page: text on the left, a pinned rail of related reading and the
 * newsletter sign-up on the right.
 */

/*
 * Padding, not margin. WordPress emits `.is-layout-flow > :first-child {
 * margin-block-start: 0 }` for every block group, and this element is that
 * first child — so the top margin asked for here was being zeroed and the
 * article started flush against the header.
 */
.sx-article {
	padding-top: var( --wp--preset--spacing--50 );
}

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

/*
 * Everything in the header now sits inside the text column, which is a real
 * column rather than a width imposed on each line: the layout below owns the
 * measure, so the title, the meta line and the cover all come out the same
 * width without any of them having to be centred individually.
 */
.sx-article__hero {
	max-width: none;
}

/* The breadcrumb's own styling now lives in tokens.css — the blog header uses
   the same trail, and a component used in two places belongs with the rest of
   the shared ones rather than in whichever file needed it first. */

.sx-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
	color: var( --sx-text-secondary );
	font-size: 0.8125rem;
}

.sx-article__cat {
	color: var( --sx-brand-text );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.sx-article__read::before {
	content: "·";
	margin-right: 14px;
	color: var( --sx-border-strong );
}

.sx-article__title {
	margin: 0 0 28px;
	font-size: var( --sx-title-page );
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* 16:9 as the brief asks. The imported covers are all sorts of shapes, so the
   ratio is enforced here and the picture is cropped to fill it rather than
   letterboxed against a grey band. */
/*
 * No bottom margin: the grid's row gap is what separates the header from the
 * first paragraph, and a margin here would be added on top of it.
 *
 * The 16:9 the brief asks for is held by the figure, not by the picture.
 * WordPress writes width and height attributes on the <img>, and the height
 * attribute is a presentational hint that outranks an aspect-ratio set on the
 * image itself — so a portrait cover came out 1024px tall and pushed the whole
 * article a screen and a half down the page.
 */
.sx-article__cover {
	display: flex;
	justify-content: center;
	margin: 0;
	overflow: hidden;
	border-radius: var( --sx-radius-lg );
	background: var( --sx-surface );
}

/*
 * The whole picture, never a crop of it. A fixed 16:9 box with object-fit
 * cover cut the sides off every cover wider than that — on this article the
 * headline baked into the image lost its first two letters.
 *
 * Both dimensions are auto so the two caps can be honoured together: the
 * column limits the width, 520px limits the height, and the browser keeps the
 * ratio between them. `height: auto` is also what overrides the height
 * attribute WordPress writes on the tag, which is what made a portrait cover
 * 1024px tall.
 */
.sx-article__cover img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 520px;
}

/* ---- Layout ---- */

/*
 * One column on a phone, text then rail; two from 1100px up.
 *
 * The two columns fill the container the header and footer use, so the article
 * lines up with the rest of the site rather than sitting in a narrower box of
 * its own. The rail is a fixed 340px and the text takes what is left.
 */
.sx-article__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 36px;
}

.sx-article__body {
	width: 100%;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.sx-article__body > p {
	margin: 0 0 1.25em;
}

.sx-article__body h2 {
	margin: 2em 0 0.6em;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	scroll-margin-top: 96px;
}

.sx-article__body h3 {
	margin: 1.6em 0 0.5em;
	font-size: 1.1875rem;
	line-height: 1.3;
	scroll-margin-top: 96px;
}

.sx-article__body ul,
.sx-article__body ol {
	margin: 0 0 1.25em;
	padding-left: 1.35em;
}

.sx-article__body li {
	margin-bottom: 0.5em;
}

.sx-article__body a {
	color: var( --sx-brand-text );
	text-underline-offset: 3px;
}

.sx-article__body img {
	max-width: 100%;
	height: auto;
	margin: 1.5em 0;
	border-radius: var( --sx-radius-md );
	border: 1px solid var( --sx-border );
}

.sx-article__body figure {
	margin: 1.5em 0;
}

.sx-article__body figcaption {
	margin-top: 8px;
	color: var( --sx-text-secondary );
	font-size: 0.875rem;
}

/* The imported bodies carry tables with fixed pixel widths; letting them
   scroll keeps a wide one from stretching the whole page. */
.sx-article__body table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 0.9375rem;
}

.sx-article__body th,
.sx-article__body td {
	padding: 10px 14px;
	border: 1px solid var( --sx-border );
	text-align: left;
}

.sx-article__body th {
	background: var( --sx-surface );
	font-weight: 600;
}

.sx-article__body blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var( --sx-brand );
	color: var( --sx-text-secondary );
}

/* ---- The rail and its widgets ---- */

.sx-article__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sx-widget {
	padding: 20px;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	background: var( --sx-white );
}

.sx-widget__title {
	margin: 0 0 16px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Reads as an action, not as one more link in a list of them. */
.sx-widget__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 18px;
	border: 1px solid var( --sx-border-strong );
	border-radius: var( --sx-radius-btn );
	color: var( --sx-text );
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var( --sx-transition-fast ) var( --sx-ease ),
		color var( --sx-transition-fast ) var( --sx-ease );
}

.sx-widget__more:hover {
	border-color: var( --sx-brand-text );
	color: var( --sx-brand-text );
}

@media ( min-width: 1100px ) {
	.sx-article__layout {
		grid-template-columns: minmax( 0, 1fr ) 340px;
		/*
		 * The rail spans both rows, and on a short article it is the taller of
		 * the two columns — so its height has to go somewhere. Left to `auto`
		 * both rows it was shared out between them, which opened a few hundred
		 * pixels of nothing between the headline and the first paragraph. The
		 * flexible second row takes all of it instead, below the text.
		 */
		grid-template-rows: auto 1fr;
		align-items: start;
		column-gap: 72px;
		row-gap: 36px;
	}

	/* Header over body in the first column; the rail beside both. Placed
	   explicitly, because auto-placement would drop the body into the second
	   column next to the header and leave the rail on a row of its own. */
	.sx-article__hero {
		grid-column: 1;
		grid-row: 1;
	}

	.sx-article__body {
		grid-column: 1;
		grid-row: 2;
	}

	/*
	 * The rail is pinned, with no cap and no scrollbar of its own — which is
	 * why it holds three related articles and nothing else. That is what keeps
	 * it inside one screen, and a rail taller than the screen pins its lower
	 * half permanently out of reach.
	 *
	 * It spans both rows, so what it is pinned within is the full height of the
	 * article beside it.
	 */
	.sx-article__aside {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: calc( var( --sx-sticky-top ) + 12px );
	}
}

/* ---- Share ---- */

.sx-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: var( --wp--preset--spacing--50 ) 0;
	padding-top: 20px;
	border-top: 1px solid var( --sx-border );
	font-size: 0.875rem;
}

.sx-share__label {
	margin-right: 4px;
	color: var( --sx-text-secondary );
}

/*
 * Round, one size, the mark alone. Still monochrome at rest — four vendor
 * palettes in a row would pull more attention than the article they sit under
 * — and each button takes the brand red only when the pointer is on it.
 *
 * Selector doubled up: `.sx-article__body a` colours every link in the body
 * red and outranks a single class, which is what turned these into red text
 * links the first time round.
 */
.sx-article__body .sx-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var( --sx-border-strong );
	border-radius: 50%;
	background: var( --sx-white );
	color: var( --sx-text-secondary );
	text-decoration: none;
	transition: border-color var( --sx-transition-fast ) var( --sx-ease ),
		background-color var( --sx-transition-fast ) var( --sx-ease ),
		color var( --sx-transition-fast ) var( --sx-ease ),
		transform var( --sx-transition-fast ) var( --sx-ease );
}

.sx-share__link svg {
	width: 18px;
	height: 18px;
}

.sx-article__body .sx-share__link:hover,
.sx-article__body .sx-share__link:focus-visible {
	border-color: var( --sx-brand-text );
	background: var( --sx-brand );
	color: var( --sx-white );
	transform: translateY( -2px );
	box-shadow: var( --sx-shadow-brand );
}

/* ---- Author ---- */

.sx-author {
	display: flex;
	gap: 20px;
	margin: var( --wp--preset--spacing--50 ) 0 0;
	padding: 24px;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
}

.sx-author__photo img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.sx-author__label {
	margin: 0 0 4px;
	color: var( --sx-text-secondary );
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.sx-author__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.sx-author__role {
	margin: 2px 0 0;
	color: var( --sx-text-secondary );
	font-size: 0.875rem;
}

.sx-author__bio {
	margin: 10px 0 0;
	color: var( --sx-text-secondary );
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* ---- Related, in the rail ---- */

.sx-related__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Thumbnail beside the words rather than above them: four full-width cards
   would make the rail longer than the article it sits next to. */
.sx-related__card {
	display: grid;
	grid-template-columns: 84px minmax( 0, 1fr );
	gap: 12px;
	align-items: start;
	color: inherit;
	text-decoration: none;
}

.sx-related__card--plain {
	grid-template-columns: minmax( 0, 1fr );
}

/* The ratio is held by the wrapper. WordPress writes width and height
   attributes on the <img>, and those beat an aspect-ratio set on the image
   itself — which is what made these tall enough to break the row. */
.sx-related__thumb {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var( --sx-radius-sm );
	background: var( --sx-surface );
}

/*
 * Fitted inside the frame, not cropped to fill it. The covers here are all
 * sorts of shapes — posters, screenshots, a portrait group photo — and filling
 * a 4:3 box with them cut the sides off whatever was in the middle. Whatever
 * the picture does not cover shows the frame's own light background, which is
 * why the frame has one.
 */
.sx-related__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sx-related__text {
	display: block;
	min-width: 0;
}

.sx-related__cat {
	display: block;
	margin-bottom: 4px;
	color: var( --sx-text-muted );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Two lines at most. A five-line headline in a 340px rail pushes everything
   below it off the screen. */
.sx-related__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.sx-related__card:hover .sx-related__name {
	color: var( --sx-brand-text );
}

.sx-related__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
	color: var( --sx-text-secondary );
	font-size: 0.75rem;
}