/**
 * Journal archive stylesheet (`/journal/`, T4 → T15B).
 *
 * Site Content Master presentation for the WordPress-native journal archive.
 * It reuses the shared cream, burgundy, typography, container and gutter
 * tokens while keeping Journal an editorial reading surface rather than a
 * procedure Hub. Photography leads each editorial item; surfaces stay flat,
 * lightly ruled and free of promotional-card effects.
 */

.brb-journal-archive {
	--brb-journal-bg: var(--brb-color-bg);
	--brb-journal-surface: var(--brb-color-surface);
	--brb-journal-card: var(--brb-color-surface-strong);
	--brb-journal-ink: var(--brb-color-text);
	--brb-journal-muted: var(--brb-color-muted);
	--brb-journal-rule: var(--brb-color-border);
	--brb-journal-accent: var(--brb-color-brand);
	--brb-journal-accent-hover: var(--brb-color-brand-hover);
	--brb-journal-measure: var(--brb-layout-prose);
	--brb-journal-shell: var(--brb-layout-content);
	--brb-journal-section-pad: var(--brb-space-section);
	--brb-journal-edge: var(--brb-layout-padding-mobile);
	--brb-journal-gap: var(--brb-space-grid);

	color: var(--brb-journal-ink);
	background: var(--brb-journal-bg);
}

.brb-journal-inner {
	width: min(100%, var(--brb-journal-shell));
	margin-inline: auto;
	padding-block: var(--brb-journal-section-pad);
	padding-inline: var(--brb-journal-edge);
}

.brb-journal-section {
	text-align: left;
}

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

.brb-journal-hero {
	background: linear-gradient(145deg, var(--brb-journal-surface), var(--brb-color-feature));
}

.brb-journal-title {
	margin-block: 0;
	max-width: 22em;
	font-size: var(--brb-type-h1);
	line-height: var(--brb-leading-display);
	font-weight: 700;
	color: var(--brb-journal-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.brb-journal-lead {
	margin-block: 0.75rem 0;
	max-width: var(--brb-journal-measure);
	color: var(--brb-journal-muted);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Topic filter
 *
 * The same hairline-on-beige button language the empty-state links and the
 * pagination already use — bordered, not filled; the active chip is the one
 * exception and it is filled with the existing accent rather than a new
 * colour. Nothing here is sticky and nothing animates.
 *
 * On narrow screens the row scrolls sideways inside itself rather than
 * wrapping into three stacked lines or pushing the page wider: the scroller
 * is the only thing that can overflow, and its inline padding matches the
 * section edge so the first and last chip are never clipped against it.
 * ---------------------------------------------------------------------- */

.brb-journal-filters {
	position: static;
	background: var(--brb-journal-surface);
	border-block: 1px solid var(--brb-journal-rule);
}

.brb-journal-filters .brb-journal-inner {
	padding-block: 0.75rem;
	/* The scroller owns the horizontal edge padding, so a chip scrolled to
	   the end still clears the section edge instead of touching it. */
	padding-inline: 0;
}

.brb-journal-filter-list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	margin: 0;
	padding-block: 0;
	padding-inline: var(--brb-journal-edge);
	list-style: none;
	overflow-x: auto;
	/* A visible focus ring on a chip must not be clipped by the scroller. */
	padding-block-start: 3px;
	padding-block-end: 3px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
}

.brb-journal-filter-list::-webkit-scrollbar {
	display: none;
}

.brb-journal-filter-item {
	margin: 0;
	flex: 0 0 auto;
}

.brb-journal-archive .brb-journal-filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 3px 9px;
	border: 1px solid var(--brb-journal-rule);
	border-radius: 9px;
	background: var(--brb-journal-card);
	color: var(--brb-journal-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 19px;
	letter-spacing: -0.012em;
	text-decoration: none;
	white-space: nowrap;
}

.brb-journal-filter:hover {
	border-color: var(--brb-journal-accent);
	color: var(--brb-journal-accent);
}

.brb-journal-filter.is-active {
	border-color: var(--brb-journal-accent);
	background: var(--brb-journal-accent);
	color: #fdf6ef;
	font-weight: 650;
}

.brb-journal-filter:focus-visible {
	outline: 2px solid var(--brb-journal-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * List
 * ---------------------------------------------------------------------- */

.brb-journal-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--brb-journal-rule);
	list-style: none;
}

.brb-journal-list-section .brb-journal-inner {
	padding-block: clamp(1.75rem, 5vw, 3.5rem);
}

.brb-journal-card {
	margin: 0;
}

.brb-journal-card-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "body";
	column-gap: 1rem;
	row-gap: 0.75rem;
	min-height: 44px;
	padding-block: 1.25rem;
	border-block-end: 1px solid var(--brb-journal-rule);
	background: transparent;
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease, background-color 160ms ease;
}

.brb-journal-card-link.has-thumbnail {
	grid-template-columns: minmax(0, 1fr) clamp(96px, 28vw, 110px);
	grid-template-areas: "body figure";
}

.brb-journal-card-figure {
	grid-area: figure;
	display: block;
	align-self: start;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
	background: var(--brb-journal-surface);
	line-height: 0;
}

.brb-journal-card-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brb-journal-card-body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1 1 auto;
	min-width: 0;
}

.brb-journal-card-meta {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.75rem;
	min-width: 0;
}

.brb-journal-card-topic {
	align-self: flex-start;
	color: var(--brb-journal-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.brb-journal-archive .brb-journal-card-title {
	margin: 0;
	max-width: 38em;
	font-family: var(--brb-font-display);
	font-size: clamp(0.875rem, 3.6vw, 0.9375rem);
	line-height: 1.42;
	font-weight: 650;
	letter-spacing: -0.025em;
	color: var(--brb-journal-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.brb-journal-card-date {
	font-size: 0.8125rem;
	color: var(--brb-journal-muted);
}

.brb-journal-card-excerpt {
	margin: 0;
	max-width: var(--brb-journal-measure);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--brb-journal-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.brb-journal-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 0;
	margin-block-start: auto;
}

.brb-journal-card-action {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.375rem;
	align-self: flex-start;
	padding-block-end: 0.125rem;
	color: var(--brb-journal-accent);
	font-size: 0.8125rem;
	font-weight: 650;
	line-height: 1.4;
	white-space: nowrap;
	transition: transform 160ms ease;
}

.brb-journal-card-link:hover .brb-journal-card-title,
.brb-journal-card-link:focus-visible .brb-journal-card-title {
	color: var(--brb-journal-accent);
}

.brb-journal-card-link:hover,
.brb-journal-card-link:focus-visible {
	color: var(--brb-journal-ink);
}

.brb-journal-card-link:hover .brb-journal-card-action,
.brb-journal-card-link:focus-visible .brb-journal-card-action {
	transform: translateX(3px);
}

.brb-journal-card-link:focus-visible {
	outline: 2px solid var(--brb-journal-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Empty state
 * ---------------------------------------------------------------------- */

.brb-journal-empty {
	max-width: var(--brb-journal-measure);
}

.brb-journal-empty-message {
	margin: 0 0 1rem;
	color: var(--brb-journal-muted);
	line-height: 1.6;
}

.brb-journal-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.brb-journal-empty-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--brb-journal-rule);
	border-radius: 999px;
	color: var(--brb-journal-ink);
	background: var(--brb-journal-surface);
	text-decoration: none;
	font-weight: 700;
}

.brb-journal-empty-link:focus-visible {
	outline: 2px solid var(--brb-journal-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */

.brb-journal-pagination {
	margin-block-start: 2rem;
}

.brb-journal-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brb-journal-pagination a,
.brb-journal-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--brb-journal-rule);
	border-radius: 999px;
	color: var(--brb-journal-ink);
	text-decoration: none;
}

.brb-journal-pagination a:hover,
.brb-journal-pagination a:focus-visible {
	border-color: var(--brb-journal-accent);
	color: var(--brb-journal-accent);
}

.brb-journal-pagination .current {
	background: var(--brb-journal-accent);
	border-color: var(--brb-journal-accent);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Closing CTA
 * ---------------------------------------------------------------------- */

.brb-journal-closing {
	background: linear-gradient(145deg, var(--brb-journal-surface), var(--brb-color-feature));
}

.brb-journal-closing-title {
	margin-block: 0;
	font-size: var(--brb-type-h2);
	font-weight: 700;
	color: var(--brb-journal-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.brb-journal-closing-desc {
	margin-block: 0.625rem 1.25rem;
	max-width: var(--brb-journal-measure);
	color: var(--brb-journal-muted);
	line-height: 1.6;
}

.brb-journal-closing-actions {
	margin: 0;
}

.brb-journal-closing-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	min-height: 44px;
	background: var(--brb-journal-accent);
	color: #fff;
}

.brb-journal-closing-cta:hover,
.brb-journal-closing-cta:focus-visible {
	background: var(--brb-journal-accent-hover);
}

.brb-journal-closing-cta:focus-visible {
	outline: 2px solid var(--brb-journal-accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Wider screens
 * ---------------------------------------------------------------------- */

@media (min-width: 37.5rem) {
	.brb-journal-title {
		font-size: var(--brb-type-h1);
	}

	.brb-journal-card-link {
		padding-block: 1.5rem;
	}

	.brb-journal-card-link.has-thumbnail {
		grid-template-columns: minmax(0, 1fr) clamp(120px, 21vw, 160px);
		column-gap: 1.5rem;
	}

	.brb-journal-archive .brb-journal-card-title {
		font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
		line-height: 1.42;
	}
}

@media (min-width: 60rem) {
	.brb-journal-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 3.5vw, 3.5rem);
		row-gap: 1.75rem;
	}

	.brb-journal-card-link.has-thumbnail {
		grid-template-columns: minmax(0, 1fr) clamp(132px, 11vw, 168px);
		column-gap: clamp(1.25rem, 2vw, 2rem);
	}

	.brb-journal-title {
		font-size: var(--brb-type-h1);
	}

	.brb-journal-closing-title {
		font-size: var(--brb-type-h2);
	}

	.brb-journal-archive .brb-journal-card-title {
		font-size: clamp(1rem, 1.1vw, 1.0625rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.brb-journal-card-link,
	.brb-journal-card-action {
		transition: none;
	}
}