/**
 * Shared library shell — the chrome every IFA "search a collection" page
 * is built from.
 *
 * Used by BOTH the Publications library and the Toolkits library. They are
 * the same page: a hero, one featured item, a search box, three filter
 * selects, a grid of cover cards and a Load more button. Only the content
 * differs.
 *
 * This file started as css/publications.css and was renamed when Toolkits
 * arrived, because the honest alternative was a second 551-line copy of it
 * with `pubs` swapped for `toolkits` throughout. Nothing in here was ever
 * publication-specific except the prefix. Rule of three applies to the
 * NEXT one too: a fourth library should use these classes, not fork them.
 *
 * What belongs here    layout, spacing, colour tokens, controls, the card
 *                      and cover primitives, the Divi overrides below.
 * What does NOT        anything only one library needs. Neither library has
 *                      needed a rule of its own yet, so there is no
 *                      per-library stylesheet to point at — add one and
 *                      enqueue it after this handle, rather than putting a
 *                      one-library rule in here.
 *
 * Colour discipline, same as css/member-comms.css: dark teal at rest, navy
 * on hover, both from the shared --ifa-* tokens and both comfortably
 * accessible on white (7.1:1 and 12.9:1). Brand green fails AA outright at
 * 2.4:1 and the Divi purple only scrapes it at 4.9:1; neither is used here.
 *
 * .ifa-band / .ifa-band__inner come from the ifa-members plugin stylesheet,
 * which is enqueued site-wide. Tokens carry literal fallbacks so this
 * degrades to the right colours rather than to unstyled if that ever
 * becomes conditional.
 *
 * The covers carry this design. Either grid without cover art is a list of
 * links wearing a grid, so .ifa-lib-cover-slot is not an afterthought — it
 * is what stops a missing cover reading as a broken image and punching a
 * ragged hole through the row.
 *
 * Both container classes have to be on the page for the Divi overrides to
 * bite: .ifa-lib-archive or .ifa-lib-single on the <main>, every time.
 */

.ifa-lib-archive,
.ifa-lib-single {
	--lib-navy: var(--ifa-dark-blue, #203248);
	--lib-action: var(--ifa-dark-teal, #255F71);
	--lib-action-dark: var(--ifa-dark-blue, #203248);
	--lib-band: #ECF2F5;
	--lib-border: #D8E1E8;
	/* Interactive controls need their own, darker border. WCAG 1.4.11 asks
	   3:1 for a UI component's boundary when nothing else marks it, and a
	   white input on a white page has nothing else. --lib-border is 1.32:1
	   and stays decorative-only (card edges, rules); this is 3.40:1. */
	--lib-control-border: #7A8E9C;
	--lib-body: #3F4F5E;
	/* 5.75:1 on white, 5.09:1 on --lib-band. The previous #6B7C8C was
	   4.30:1 and failed 4.5:1 body text -- including the search status line,
	   which is the one sentence every visitor reads on every search. */
	--lib-muted: #586875;
}

/* ============================================================
   Hero
   ============================================================ */

.ifa-lib-hero {
	background: var(--lib-band);
	padding: 64px 20px 48px;
}

.ifa-lib-hero__inner,
.ifa-lib-inner {
	max-width: 1080px;
	margin: 0 auto;
}

.ifa-lib-hero__title {
	margin: 0 0 12px;
	color: var(--lib-navy);
	font-size: 40px;
	line-height: 1.2;
}

.ifa-lib-hero__lead {
	max-width: 62ch;
	margin: 0;
	color: var(--lib-body);
	font-size: 17px;
	line-height: 1.65;
}

/* ============================================================
   Buttons, pills, lock chip — shared by archive and single
   ============================================================ */

.ifa-lib-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ifa-lib-btn--solid {
	background: var(--lib-action);
	color: #fff;
}

.ifa-lib-btn--solid:hover {
	background: var(--lib-action-dark);
	color: #fff;
}

.ifa-lib-btn--ghost {
	background: transparent;
	border-color: var(--lib-control-border);
	color: var(--lib-body);
}

.ifa-lib-btn--ghost:hover {
	background: #fff;
	color: var(--lib-navy);
}

.ifa-lib-btn[hidden],
.ifa-lib-load-more[hidden] {
	display: none;
}

.ifa-lib-lock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--lib-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

/* ============================================================
   Link hover — overriding Divi's global green
   ============================================================

   Divi's customizer emits `a:hover { color: #49B460 !important }` for every
   link on the site. On white that green is 2.7:1 and fails WCAG AA for body
   text (4.5:1) — the same fault that kept green out of this palette to begin
   with.

   It wins even against !important rules here, because at equal importance
   the cascade falls through to specificity and `a:hover` (0,1,1) outranks a
   bare class (0,1,0). So beating it needs BOTH !important and a selector
   above (0,1,1) — hence the container prefix rather than bare classes.
   Dropping either half silently restores the green.

   This is the same fix css/global-cafe.css carries, and this file shipped
   without it: every link in the Publications library went green on hover.
   It lives here now rather than in a per-library file precisely so the
   next library cannot ship without it either.

   Buttons are excluded. They set white text on a filled background and
   define their own hover, so recolouring the text would put navy on navy. */
.ifa-lib-archive a:not(.ifa-lib-btn):hover,
.ifa-lib-archive a:not(.ifa-lib-btn):focus-visible,
.ifa-lib-single a:not(.ifa-lib-btn):hover,
.ifa-lib-single a:not(.ifa-lib-btn):focus-visible {
	color: var(--lib-action-dark) !important;
	text-decoration: underline;
}

/* Divi also colours links at REST. A button here is an <a>, so its own colour
   loses unless this outranks Divi too.
   
   BOTH variants have to be named. The blanket rule above excludes anything
   matching .ifa-lib-btn, so that it does not repaint white button text navy
   -- but that exclusion also removed the GHOST button from the only rule
   beating Divi, while its own :hover (line ~103) carries no !important. An
   !important declaration beats a non-!important one whatever the specificity,
   so "Read more" -- the most clicked link on the Publications archive --
   rendered in Divi's green. css/global-cafe.css marks every button variant's
   hover !important for exactly this reason; the first version of this block
   copied the blanket rule and not that.

   Any new button variant must be added to one of these two rules. A variant
   that is neither solid nor ghost matches the :not() exclusion above and
   therefore nothing beats Divi for it. */
.ifa-lib-archive a.ifa-lib-btn--solid,
.ifa-lib-single a.ifa-lib-btn--solid,
.ifa-lib-archive a.ifa-lib-btn--solid:hover,
.ifa-lib-archive a.ifa-lib-btn--solid:focus-visible,
.ifa-lib-single a.ifa-lib-btn--solid:hover,
.ifa-lib-single a.ifa-lib-btn--solid:focus-visible {
	color: #fff !important;
}

.ifa-lib-archive a.ifa-lib-btn--ghost:hover,
.ifa-lib-archive a.ifa-lib-btn--ghost:focus-visible,
.ifa-lib-single a.ifa-lib-btn--ghost:hover,
.ifa-lib-single a.ifa-lib-btn--ghost:focus-visible {
	color: var(--lib-navy) !important;
}

/* Both containers get all three element types. The single templates carry
   no button or select today, so listing them changes nothing now -- which is
   exactly why the asymmetry was worth closing: the first button added to a
   single template would otherwise have had no focus indicator, and nothing
   would have pointed at this rule as the reason. */
.ifa-lib-archive a:focus-visible,
.ifa-lib-single a:focus-visible,
.ifa-lib-archive select:focus-visible,
.ifa-lib-archive button:focus-visible,
.ifa-lib-single select:focus-visible,
.ifa-lib-single button:focus-visible {
	outline: 2px solid var(--lib-action);
	outline-offset: 2px;
}

/* ============================================================
   Cover art and its placeholder
   ============================================================ */

.ifa-lib-cover-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Matches the card cover's aspect so a missing image keeps the row
	   aligned instead of collapsing it. */
	aspect-ratio: 3 / 4;
	background: var(--lib-band);
	border: 1px dashed var(--lib-border);
	border-radius: 8px;
	color: var(--lib-muted);
	font-size: 34px;
}

.ifa-lib-cover-slot--large {
	font-size: 56px;
}

.ifa-lib-card__cover,
.ifa-lib-featured__cover,
.ifa-lib-single__cover {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--lib-border);
}

/* ============================================================
   Featured publication
   ============================================================ */

.ifa-lib-featured__eyebrow {
	margin: 0 0 18px;
	color: var(--lib-muted);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ifa-lib-featured__grid {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 36px;
	align-items: start;
}

.ifa-lib-featured__title {
	margin: 0 0 12px;
	font-size: 30px;
	line-height: 1.25;
}

.ifa-lib-featured__title a {
	color: var(--lib-navy);
	text-decoration: none;
}

/* Hover colour is set by the Divi override block above, which has to carry
   !important and therefore always wins here. Left as the underline-only
   rule so nobody reads a colour here that never applies. */
.ifa-lib-featured__title a:hover {
	text-decoration: underline;
}

.ifa-lib-featured__summary {
	margin: 0 0 22px;
	max-width: 62ch;
	color: var(--lib-body);
	font-size: 17px;
	line-height: 1.7;
}

.ifa-lib-featured__actions,
.ifa-lib-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* ============================================================
   Search, filters, grid
   ============================================================ */

.ifa-lib-section {
	padding: 8px 20px 80px;
}

.ifa-lib-section__heading {
	margin: 0 0 8px;
	color: var(--lib-navy);
	font-size: 26px;
}

/* Optional standfirst under the section heading. Publications does not use
   it; Toolkits does, because "search and filter to find toolkits relevant to
   your field" is the instruction that makes an unfamiliar control row
   legible. */
.ifa-lib-section__lead {
	margin: 0 0 20px;
	max-width: 62ch;
	color: var(--lib-body);
	font-size: 16px;
	line-height: 1.6;
}

.ifa-lib-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.ifa-lib-form__row--filters {
	margin-top: 12px;
}

.ifa-lib-form__input {
	flex: 1 1 320px;
	min-width: 0;
	padding: 13px 16px;
	border: 1px solid var(--lib-control-border);
	border-radius: 8px;
	font-size: 16px;
	color: var(--lib-navy);
	background: #fff;
}

.ifa-lib-form__select {
	flex: 0 1 200px;
	padding: 12px 14px;
	border: 1px solid var(--lib-control-border);
	border-radius: 8px;
	background: #fff;
	color: var(--lib-navy);
	font-size: 15px;
}

.ifa-lib-form__input:focus,
.ifa-lib-form__select:focus {
	outline: 2px solid var(--lib-action);
	outline-offset: 1px;
	border-color: var(--lib-action);
}

.ifa-lib-status {
	margin: 24px 0 16px;
	color: var(--lib-muted);
	font-size: 15px;
}

.ifa-lib-results {
	display: grid;
	/* auto-FIT, not auto-fill. auto-fill keeps the empty tracks it could fit,
	   so a single search result sits at a third of the width against two
	   invisible columns -- a constant state once filters are in use. auto-fit
	   collapses them; the max-width on the card stops one result then
	   stretching to the full 1080px band. */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.ifa-lib-card {
	max-width: 420px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lib-border);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	animation: ifa-lib-fade-in 0.3s ease both;
}

@keyframes ifa-lib-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ifa-lib-card { animation: none; }
}

.ifa-lib-card__media {
	padding: 18px 18px 0;
}

.ifa-lib-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 20px;
}

.ifa-lib-card__title {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.35;
	color: var(--lib-navy);
}

.ifa-lib-card__title a {
	color: var(--lib-navy);
	text-decoration: none;
}

.ifa-lib-card__title a:hover {
	text-decoration: underline;
}

/* The year, as a line rather than a chip. It was a chip on the Publications
   cards and was removed: a pill sitting in a row of Type and Topic pills
   reads as another filter you can click, and it is not one. */
.ifa-lib-card__meta {
	margin: 0 0 10px;
	color: var(--lib-muted);
	font-size: 14px;
}

.ifa-lib-card__summary {
	margin: 0 0 16px;
	color: var(--lib-body);
	font-size: 15px;
	line-height: 1.6;
}

.ifa-lib-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: auto;
}

/* min-height, not padding: WCAG 2.2 SC 2.5.8 wants a 24x24 CSS px target,
   and a 15px link's line box is only ~20px tall. These are standalone
   calls to action in a card footer and above a page heading, not links
   inside a sentence, so the "inline" exception does not apply to them.
   Height is the only failing axis -- the text is always wider than 24px. */
.ifa-lib-card__link,
.ifa-lib-card__join,
.ifa-lib-backlink {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	gap: 7px;
	color: var(--lib-action);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.ifa-lib-card__link:hover,
.ifa-lib-card__join:hover,
.ifa-lib-backlink:hover {
	color: var(--lib-action-dark);
	text-decoration: underline;
}

/* A locked card keeps its cover and its title at full strength. Blurring the
   title was rejected outright for the Global Café rows and the reasoning is
   the same here: people cannot decide whether membership is worth it without
   knowing what is behind it, and a masked title reads as a site fault. The
   only signal is the chip. */
.ifa-lib-card.is-locked {
	background: #FBFCFD;
}

.ifa-lib-load-more {
	margin-top: 32px;
	text-align: center;
}

.ifa-lib-load-more__count {
	margin-bottom: 12px;
	color: var(--lib-muted);
	font-size: 14px;
}

.ifa-lib-noscript {
	margin-top: 24px;
	padding: 20px 24px;
	border: 1px solid var(--lib-border);
	border-radius: 12px;
}

.ifa-lib-noscript__lock {
	color: var(--lib-muted);
	font-size: 14px;
}

/* ============================================================
   Single publication
   ============================================================ */

.ifa-lib-backlink {
	margin-bottom: 24px;
}

.ifa-lib-single__grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	align-items: start;
}

.ifa-lib-single__title {
	margin: 0 0 14px;
	color: var(--lib-navy);
	font-size: 34px;
	line-height: 1.25;
}

.ifa-lib-single__summary {
	margin: 0 0 24px;
	max-width: 64ch;
	color: var(--lib-body);
	font-size: 17px;
	line-height: 1.7;
}

.ifa-lib-single__pending {
	color: var(--lib-muted);
	font-size: 15px;
	font-style: italic;
}

.ifa-lib-prose {
	margin-top: 40px;
	max-width: 72ch;
	color: var(--lib-body);
	font-size: 17px;
	line-height: 1.75;
}

.ifa-lib-prose h2,
.ifa-lib-prose h3 {
	color: var(--lib-navy);
	margin-top: 1.6em;
}

.ifa-lib-prose a        { color: var(--lib-action); }
.ifa-lib-prose a:hover  { color: var(--lib-action-dark); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 860px) {
	.ifa-lib-featured__grid,
	.ifa-lib-single__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* The cover stops being a column and becomes a lead image, so cap it —
	   a full-width portrait cover pushes the title off a phone screen
	   entirely. */
	.ifa-lib-featured__media,
	.ifa-lib-single__media {
		max-width: 240px;
	}
}

@media (max-width: 782px) {
	.ifa-lib-hero {
		padding: 44px 20px 36px;
	}

	.ifa-lib-hero__title { font-size: 30px; }
	.ifa-lib-single__title { font-size: 26px; }
	.ifa-lib-featured__title { font-size: 24px; }

	.ifa-lib-form__input,
	.ifa-lib-form__select,
	.ifa-lib-form__row .ifa-lib-btn {
		flex: 1 1 100%;
		width: 100%;
		justify-content: center;
	}

	.ifa-lib-results {
		grid-template-columns: 1fr;
	}
}