/**
 * Article shell
 *
 * The shared single-view layout: an 8-column body column with a sticky rail beside it.
 * Per-type differences belong in assets/css/single-{type}.css, not here.
 */

/*** Hero ***/

/* No row gap: the rail spans a hundred rows to outlast any article, and a gap between rows it
   never fills is a gap all the same — ninety-eight of them, below the article. The one gap that
   is real is put back on the column beside it. */
.single .container.grid {
	margin-top: var(--text-spacing-large);
	row-gap: 0;
}

.single .container.grid > :not(.sidebar) + :not(.sidebar) {
	margin-top: var(--gap);
}

.single .hero {
	grid-column: 1 / span 8;
	margin-top: var(--text-spacing-xlarge);
}

.single .hero .intro {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
}

.single .hero .intro .pill {
	align-self: flex-start;
	margin-bottom: calc(var(--text-spacing-small) - var(--text-spacing-medium));
}

.single .hero .intro h1 {
	margin: 0;
}

.single .hero .meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall);
	list-style: none;
	margin: 0;
	padding: 0;
}

.single .hero .meta li {
	align-items: center;
	display: flex;
	gap: 12px;
}

/* The rule sits the same distance from each neighbour: the row's gap carries the side before it,
   and the item's own 12px gap already carries most of the side after. */
.single .hero .meta li + li::before {
	background: var(--charcoal);
	content: '';
	height: 18px;
	margin-right: calc(var(--text-spacing-xsmall) - 12px);
	opacity: .25;
	width: 2px;
}

.single .hero .meta .icon {
	align-items: center;
	background: var(--charcoal-10);
	border-radius: 30px;
	color: var(--charcoal);
	display: flex;
	font-size: calc(13rem / 16);
	justify-content: center;
	line-height: calc(16 / 13);
	padding: 8px 0;
	width: 32px;
}

.single .hero .media {
	aspect-ratio: 784 / 440;
	border-radius: 10px;
	margin-top: var(--module-spacing-small);
}

/*** Body ***/

.single .content-styles {
	grid-column: 1 / span 8;
}

/*** Source links, boilerplate and contact ***/

.single .source-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-small);
	grid-column: 1 / span 8;
	margin-top: var(--text-spacing-medium);
}

.single .media-contact {
	border-top: 1px solid var(--charcoal);
	grid-column: 1 / span 8;
	margin-top: var(--text-spacing-large);
	padding-top: var(--text-spacing-medium);
}

/* A panel rather than a run ruled off the article: the boilerplate is reference matter about the
   organizations, not the last section of the story. */
.single .boilerplate {
	background: var(--tea-green);
	border-radius: 10px;
	grid-column: 1 / span 8;
	margin-top: var(--text-spacing-large);
	padding: var(--text-spacing-medium);
}

.single .boilerplate .about + .about {
	margin-top: var(--text-spacing-medium);
}

.single .boilerplate .about h3,
.single .media-contact h2 {
	margin-bottom: var(--text-spacing-xsmall);
}

/*** Sidebar ***/

.single .sidebar {
	--rail-breakout: min(98px, var(--container-outer-margin) + var(--container-outer-padding));
	align-self: start;
	background: var(--white);
	border-radius: 10px;
	grid-column: 9 / -1;
	/* A large span, not `1 / -1`: negative line numbers only reach the *explicit* grid, and
	   there is no grid-template-rows here, so `-1` resolved to line 1 and the rail claimed a
	   single row. Every article shorter than the rail then began below it. */
	grid-row: 1 / span 100;
	isolation: isolate;
	margin-left: var(--gap);
	margin-right: calc(var(--rail-breakout) * -1);
	overflow: hidden;
	padding: calc(24px + var(--text-spacing-xlarge)) var(--text-spacing-large) var(--text-spacing-large);
	position: sticky;
	top: var(--text-spacing-small);
}

.single .sidebar > * {
	margin: 0;
}

.single .sidebar .pattern {
	background: currentColor;
	color: var(--storm);
	display: block;
	height: 24px;
	left: 0;
	-webkit-mask: url('../svgs/pattern-bar.svg') repeat-x left top / auto 24px;
	mask: url('../svgs/pattern-bar.svg') repeat-x left top / auto 24px;
	position: absolute;
	right: 0;
	top: 0;
}

.single .sidebar .pattern.override {
	background: var(--pattern) repeat-x left top / auto 24px;
	-webkit-mask: none;
	mask: none;
}

.single .sidebar .watermark {
	bottom: 0;
	color: var(--charcoal);
	display: block;
	opacity: .05;
	pointer-events: none;
	position: absolute;
	right: -194px;
	width: 479px;
	z-index: -1;
}

.single .sidebar .watermark svg {
	display: block;
	height: auto;
	max-width: none;
	width: 100%;
}

.single .sidebar h2 {
	font-weight: 700;
	margin-bottom: var(--text-spacing-medium);
}

.single .sidebar .stories {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--text-spacing-xlarge);
}

/* The rail sets its titles at Body Small, not the archive row's Article Title Small: the column
   is 234 wide, and a headline at 22 runs to five lines where the comp draws two. */
.single .sidebar .card.row .article-title {
	font-size: calc(15rem / 16);
	letter-spacing: -0.1px;
	line-height: calc(26 / 15);
}

.single .sidebar .card.row {
	border-bottom: 1px solid var(--charcoal-15);
	padding-bottom: var(--text-spacing-medium);
}

.single .sidebar .card.row + .card.row {
	margin-top: var(--text-spacing-medium);
}

.single .sidebar .card.row {
	align-items: flex-start;
	gap: var(--text-spacing-xsmall);
}

.single .sidebar .card.row .media {
	aspect-ratio: 1;
	border-radius: 10px;
	flex-shrink: 0;
	width: 100px;
}

.single .sidebar .card.row .content {
	padding: 0;
}

.single .sidebar .card.row .text {
	gap: var(--text-spacing-xxsmall);
}

/* Everything under the first line closes toward it: a gap is layout, and shrinking that pulled
   every card below this one up the rail, where a translate takes no space.

   Never the element holding the .card-link, though — a transform makes it a containing block, and
   the link's stretched ::after would collapse from the whole card onto that one element. `:has()`
   names the exclusion rather than a card class, so it holds however a rail card is composed. */
.single .sidebar .card.row .text > * + *:not(:has(.card-link)) {
	transition: translate var(--motion) var(--ease-out);
}

.single .sidebar .card.row:is(:hover, :focus-within) .text > * + *:not(:has(.card-link)) {
	translate: 0 -4px;
}

/* A translate puts that line in the positioned layer, and it is later in the tree than the heading
   holding the link — so it painted over the cover and took the clicks with it. The cover takes a
   rung of its own and stays the top surface. */
.single .sidebar .card.row .card-link::after {
	z-index: 1;
}

/*** Bottom callouts ***/

.single .callouts {
	margin-top: var(--module-spacing-large);
}

.single .callouts > li {
	display: flex;
}

.single .callouts .card.feature {
	width: 100%;
}

/*** Footer ***/

body.single #footer {
	margin-top: var(--module-spacing-large);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

/* Four columns is not a rail any more, it is a column of clipped headlines. The rail goes under
   the article instead — on the boilerplate's heels, which is where the reading ends. */
@media only screen and (max-width: calc(1200rem/16)) {

	.single .container.grid > :not(.sidebar) {
		grid-column: 1 / -1;
	}

	.single .sidebar {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-left: 0;
		margin-right: 0;
		margin-top: var(--gap);
		order: 1;
		/* Relative rather than static: the mark inside is absolutely positioned, and a static rail
		   is no longer its containing block — so the rail's own clipping stopped reaching it and
		   the mark pushed the page 194px wide. */
		position: relative;
		top: auto;
	}

	/* The contact belongs to the article rather than to the rail, so it keeps its place under it. */
	.single .media-contact {
		order: 2;
	}

	.single .sidebar .stories {
		margin-bottom: var(--text-spacing-medium);
	}

	/* Beside the article the rows start level with the thumbnail's top edge, because a rail of
	   them reads as a list. Under the article each row is wide enough to be its own line, and the
	   copy sits against the picture instead. */
	.single .sidebar .card.row {
		align-items: center;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	/* The trail above it is hidden here, so the step that kept the two apart goes with it. */
	.single .container.grid {
		margin-top: 0;
	}

	/* Stacked under the article the rail runs the screen's width, where the inset it takes beside
	   one reads as a wide margin on a narrow card. */
	.single .sidebar {
		padding-inline: var(--text-spacing-medium);
	}

}