/**
 * Component: Articles sidebar
 * Usage: .articles-layout > .articles-layout__sidebar (wrapping
 * .articles-layout__topics + .articles-layout__publications, the
 * .sidebar-block pair) and .articles-layout__main — see
 * page-templates/template-articles.php. Topics and Publications share
 * one wrapper so they always occupy a single grid cell together; see
 * the note above .articles-layout below for why that matters.
 *
 * Mobile (below 64rem): Topics, then the article grid, then
 * Publications. The wrapper is unwrapped via display: contents so
 * Topics/Publications act as direct flex children of .articles-layout
 * again, and `order` puts them either side of .articles-layout__main
 * regardless of DOM position. Topics render as wrapping pill/chip
 * filters instead of a vertical list, since a block-per-row list of
 * ~7 topics would otherwise eat a full screen of scroll before the
 * article grid even starts.
 *
 * Desktop (64rem+): the sidebar wrapper becomes a real flex column
 * (Topics above Publications) placed in a single grid-template-areas
 * cell beside the article grid — matching the old site's layout — and
 * Topics reverts to the vertical list, which reads better in a narrow
 * sidebar column than wrapped pills would.
 */

.articles-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/*
 * Mobile: pop the wrapper's children out so they're addressable as
 * direct flex items (order needs siblings, not nested elements).
 */
.articles-layout__sidebar {
	display: contents;
}

.articles-layout__topics {
	order: 1;
}

.articles-layout__main {
	order: 2;
}

.articles-layout__publications {
	order: 3;
}

.sidebar-block__title {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	padding-bottom: var(--space-2);
	margin: 0 0 var(--space-3);
	border-bottom: 1px solid var(--color-ink);
}

/* Mobile default: wrapping pills, not a full-width block list. */
.topic-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.topic-list a {
	display: inline-flex;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
	text-decoration: none;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.topic-list a:hover,
.topic-list a:focus-visible {
	background: var(--color-paper-dim);
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.topic-list a.topic-list__current {
	background: var(--color-primary);
	color: var(--color-paper);
	border-color: var(--color-primary);
}

/*
 * 2 columns on mobile — 35 publications as a single full-width column
 * pushed the list (and the footer below it) a long way down the page.
 * Not a wrapping pill/chip treatment like Topics: this list isn't an
 * interactive filter, and pill-shaping it too would visually suggest
 * otherwise.
 *
 * Grid, not CSS multi-column (`columns:`) — multi-column fills each
 * column top-to-bottom before moving to the next ("newspaper" flow),
 * which with 35 names of very different lengths ("5280" vs "National
 * Geographic Adventure") balances unevenly and doesn't align row to
 * row. Grid's default auto-flow fills left-to-right, row by row, so
 * every row lines up cleanly across columns.
 */
.publication-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--space-4);
}

.publication-list li {
	font-family: var(--font-serif);
	padding-block: var(--space-1);
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 30rem) {
	.publication-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 64rem) {
	/* Back to the original narrow single-column sidebar list. */
	.publication-list {
		grid-template-columns: 1fr;
	}

	.articles-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.articles-layout__main {
		flex: 1 1 auto;
		/*
		 * DOM order is sidebar, then main (needed for the mobile `order`
		 * trick above), but desktop wants main on the left — order: -1
		 * pulls it ahead of the sidebar's default order: 0 regardless.
		 */
		order: -1;
	}

	/*
	 * Desktop: a real box again (not display: contents), and the ONE
	 * flex item that holds Topics + Publications — critical vs. the
	 * previous grid-template-areas approach, where .articles-layout__main
	 * spanned both the "topics" and "publications" rows. Grid's
	 * row-sizing algorithm distributes the extra height a spanning item
	 * needs across ALL the rows it spans (roughly evenly), which
	 * inflated the short Topics row to match Main's full height, leaving
	 * a large gap above Publications — align-content/align-items can't
	 * fix that, since the tracks themselves (not leftover container
	 * space) were being stretched. Making Topics + Publications a single
	 * flex column sidesteps the row-spanning math entirely: Main's
	 * height can no longer influence the sidebar's internal layout.
	 */
	.articles-layout__sidebar {
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
		/* Shrink-wraps to its own content (longest publication/topic
		   name) instead of stretching to match .articles-layout__main. */
		flex: 0 0 auto;
		width: max-content;
		max-width: 100%;
		order: 0;
	}

	/* Back to a vertical list — wrapped pills read fine in a mobile
	   full-width row, but not squeezed into a narrow sidebar column. */
	.topic-list ul {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--space-1);
	}

	.topic-list a {
		display: block;
		border: none;
		border-radius: var(--radius);
	}
}