/**
 * Publications archive — filter bar and cards.
 *
 * Namespaced under .eha-pub so nothing collides with the theme's Tailwind
 * utilities or its existing .stories__* card styles.
 *
 * These cards are deliberately text-forward. Journal articles carry no featured
 * image, so the theme's image-led card renders an empty grey box for every
 * entry; here the journal name, title and authors do the work instead.
 */

/* SIZES ARE IN PX ON PURPOSE.
 *
 * This theme sets the root font-size to 20px, not the usual 16, so every rem
 * here rendered 25% larger than written. Most visibly, the card grid's
 * minmax(21rem) became 420px instead of 336px, which forced two columns at
 * desktop width and left the wide gaps that looked wrong. These are the
 * intended sizes stated in px.
 */

/* ------------------------------------------------------------- filter bar */

.eha-pub__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 24px;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e6e8ef;
}

.eha-pub__control {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.eha-pub__control label {
	font-size: 13px;
	font-weight: 600;
	color: #4d4d4d;
}

.eha-pub__control select {
	min-height: 44px;
	min-width: 192px;
	max-width: 100%;
	padding: 0 32px 0 12px;
	font: inherit;
	font-size: 15px;
	color: #101330;
	background-color: #fff;
	border: 1px solid #dcdee2;
	border-radius: 6px;
	cursor: pointer;
	/* Inline chevron so the control does not depend on a theme sprite. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234d4d4d' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	appearance: none;
}

.eha-pub__control select:focus-visible {
	outline: 2px solid #0090fc;
	outline-offset: 1px;
}

.eha-pub__count {
	margin: 0 0 0 auto;
	font-size: 14px;
	color: #4d4d4d;
}

/* ----------------------------------------------------------------- cards */

.eha-pub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(336px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eha-pub__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: #fff;
	border: 1px solid #e6e8ef;
	border-radius: 8px;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.eha-pub__card:hover {
	border-color: #0090fc;
	box-shadow: 0 6px 24px rgba(16, 19, 48, 0.08);
}

/* The image leads the card wherever there is one.
 *
 * This archive was built for journal papers, which are citations and carry no
 * artwork, so the card never rendered a thumbnail. Impact Reports now share
 * the template and every one of them HAS artwork, which made this the only
 * plain grid on an otherwise image-led site.
 *
 * The block is omitted entirely for a post with no thumbnail rather than
 * reserving an empty slot, so the journal archive is unchanged.
 */
/* CONTAIN, NOT COVER — the artwork will not survive a crop.
 *
 * These are report covers and campaign banners with titles printed on them,
 * and their shapes are all over the place: measured across the 55 entries the
 * aspect ratios run from 0.71 to 3.00, with 13 portrait, 16 near-square, 11
 * around 4:3, 10 around 16:9 and 5 wider still. Any fixed crop destroys most
 * of them — at 16:9 a portrait cover loses about 60% of its height, which cut
 * the headline clean off "Our 2025 Annual Impact Report is out".
 *
 * So the box is a fixed 4:3 shelf and the cover sits inside it whole. Wide
 * banners get a little space above and below, portrait covers get it at the
 * sides, and nothing is cut. The tint is what makes that read as a deliberate
 * shelf rather than a gap.
 */
.eha-pub__media {
	display: block;
	/* Cancels the card's 24px padding so the shelf meets its edges. */
	margin: -24px -24px 4px;
	/* 1px inside the card's 8px radius, so its border reads as a clean edge. */
	border-radius: 7px 7px 0 0;
	overflow: hidden;
	/* Also holds the card's shape while a lazy-loaded image is arriving. */
	background: #eef1f6;
	aspect-ratio: 4 / 3;
	padding: 10px;
	box-sizing: border-box;
}

.eha-pub__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

/* Gentler than the theme's image cards: a contained cover has visible edges,
 * so a large scale would push it under the shelf's rounded corners. */
.eha-pub__card:hover .eha-pub__img {
	transform: scale(1.02);
}

.eha-pub__card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.eha-pub__journal {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #0090fc;
}

.eha-pub__year {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: #4d4d4d;
}

.eha-pub__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.eha-pub__title a {
	color: #101330;
	text-decoration: none;
}

.eha-pub__title a:hover,
.eha-pub__title a:focus-visible {
	text-decoration: underline;
}

/* Author lists run to 25+ names; clamp so cards stay a comparable height. */
.eha-pub__authors {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #4d4d4d;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.eha-pub__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: auto 0 0;
	padding-top: 4px;
}

.eha-pub__link {
	font-size: 13px;
	font-weight: 600;
	color: #0090fc;
	text-decoration: none;
}

.eha-pub__link:hover,
.eha-pub__link:focus-visible {
	text-decoration: underline;
}

.eha-pub__empty {
	margin: 32px 0;
	color: #4d4d4d;
}

/* Filtered-out cards. A class selector setting `display` would override the
 * browser's [hidden] rule, so hide on the attribute explicitly. */
.eha-pub__card[hidden] {
	display: none !important;
}

@media (max-width: 640px) {
	.eha-pub__controls {
		flex-direction: column;
		align-items: stretch;
	}

	.eha-pub__control select {
		min-width: 0;
		width: 100%;
	}

	.eha-pub__count {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eha-pub__card {
		transition: none;
	}
}

/* --------------------------------------------------------- progressive reveal */

.eha-pub__more {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* Do NOT rely on .btn--outline for colour. In this theme it is
 * white-border/white-text on transparent — built for dark backgrounds, and
 * therefore invisible on a white page. The button was present and clickable
 * the whole time, just unreadable. Colours are set explicitly here; the
 * selector is deliberately more specific than .btn.btn--outline so it wins
 * regardless of stylesheet order. */
.eha-pub__more .btn,
.eha-pub__more .btn.btn--outline {
	min-height: 44px;
	padding-inline: 24px;
	border: 1px solid #0090fc;
	background-color: #fff;
	color: #0090fc;
}

.eha-pub__more .btn.btn--outline:hover,
.eha-pub__more .btn.btn--outline:focus-visible {
	background-color: #0090fc;
	color: #fff;
}

/* Same reason as the card rule above: hide on the attribute, not a class. */
.eha-pub__more[hidden] {
	display: none !important;
}