/**
 * WACI Resource Library
 * Editorial document listing: sticky facet rail, preview-led grid.
 * Tokens follow the site's Elementor kit (Jost / #282828 / #D05418).
 */

.waci-lib {
	--lib-ink: #282828;
	--lib-muted: #5c5c5c;
	--lib-faint: #8b8b8b;
	--lib-line: #e7e4e2;
	--lib-soft: #faf9f8;
	--lib-accent: #d05418;
	--lib-radius: 10px;
	--lib-rail: 268px;
	--lib-sticky-top: 104px;

	box-sizing: border-box;
	color: var(--lib-ink);
	font-family: Jost, system-ui, -apple-system, "Segoe UI", sans-serif;
	margin: 0 auto;
	max-width: 1360px;
	padding: 0 24px 96px;
}

.waci-lib *,
.waci-lib *::before,
.waci-lib *::after {
	box-sizing: inherit;
}

.waci-lib [hidden] {
	display: none !important;
}

/**
 * The Elementor kit styles headings with `.elementor-kit-NNNN h2` — the same
 * specificity as a plain class rule here, and it loads later. Every heading in
 * this component therefore needs an extra class in the selector to win.
 */
.waci-lib .waci-lib__masthead h1,
.waci-lib .waci-lib__filters-head h2,
.waci-lib .waci-doc__title {
	color: var(--lib-ink);
	font-family: inherit;
	margin-block: 0;
}

.waci-lib .waci-lib__filters-head h2 {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.waci-lib .waci-doc__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.36;
	overflow: hidden;
}

/* Keep every card the same height so the grid rows line up. */
.waci-lib__grid:not(.is-list) .waci-doc__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.waci-lib__grid:not(.is-list) .waci-doc__actions {
	margin-top: auto;
	padding-top: 12px;
}

.waci-lib .waci-lib__masthead h1 {
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.08;
}

/* The kit also paints every <button>; neutralise that inside the component. */
.waci-lib .waci-lib__views button,
.waci-lib .waci-lib__clear,
.waci-lib .waci-lib__chip button,
.waci-lib .waci-lib__empty button,
.waci-lib .waci-lib__group summary {
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	transition: none;
}

.waci-lib .waci-lib__views button {
	background-color: transparent;
	border: 1px solid var(--lib-line);
	border-radius: 0;
	color: var(--lib-faint);
	padding: 0;
}

.waci-lib .waci-lib__views button:first-child { border-radius: 8px 0 0 8px; }
.waci-lib .waci-lib__views button:last-child  { border-radius: 0 8px 8px 0; }

.waci-lib .waci-lib__views button.is-active {
	background-color: var(--lib-ink);
	border-color: var(--lib-ink);
	color: #fff;
}

.waci-lib .waci-lib__clear,
.waci-lib .waci-lib__chip button,
.waci-lib .waci-lib__empty button {
	background-color: transparent;
	border: 0;
	padding: 0;
}

.waci-lib .waci-lib__clear,
.waci-lib .waci-lib__empty button {
	color: var(--lib-accent);
}

.waci-lib .waci-doc__btn {
	background-color: var(--lib-ink);
	border: 1px solid var(--lib-ink);
	border-radius: 7px;
	color: #fff;
	padding: 7px 14px;
}

.waci-lib .waci-doc__btn.is-ghost {
	background-color: transparent;
	color: var(--lib-ink);
}

/* ---------------------------------------------------------------- masthead */

.waci-lib__masthead {
	align-items: end;
	border-bottom: 1px solid var(--lib-line);
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
	padding: 8px 0 32px;
}

.waci-lib__kicker {
	color: var(--lib-accent);
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.waci-lib__masthead h1 {
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.08;
	margin: 0;
	max-width: 16ch;
}

.waci-lib__lede {
	color: var(--lib-muted);
	font-size: 16px;
	line-height: 1.6;
	margin: 14px 0 0;
	max-width: 52ch;
}

/* ------------------------------------------------------------------ layout */

.waci-lib__layout {
	display: grid;
	gap: 52px;
	grid-template-columns: var(--lib-rail) minmax(0, 1fr);
	padding-top: 36px;
}

/* ----------------------------------------------------------------- sidebar */

.waci-lib__sidebar-inner {
	max-height: calc(100vh - var(--lib-sticky-top) - 24px);
	overflow-y: auto;
	position: sticky;
	scrollbar-width: thin;
	top: var(--lib-sticky-top);
}

.waci-lib__search {
	align-items: center;
	background: var(--lib-soft);
	border: 1px solid var(--lib-line);
	border-radius: var(--lib-radius);
	display: flex;
	gap: 10px;
	padding: 11px 14px;
	transition: border-color .18s ease, background .18s ease;
}

.waci-lib__search:focus-within {
	background: #fff;
	border-color: var(--lib-ink);
}

.waci-lib__search svg {
	fill: none;
	flex: none;
	height: 17px;
	stroke: var(--lib-faint);
	stroke-width: 2;
	width: 17px;
}

.waci-lib__search input {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: 14px;
	outline: 0;
	width: 100%;
}

.waci-lib__filters-head {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin: 30px 0 6px;
}

.waci-lib__filters-head h2 {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	margin: 0;
	text-transform: uppercase;
}

.waci-lib__clear {
	background: none;
	border: 0;
	color: var(--lib-accent);
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.waci-lib__group {
	border-bottom: 1px solid var(--lib-line);
	padding: 4px 0;
}

.waci-lib__group summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	justify-content: space-between;
	list-style: none;
	padding: 14px 0;
}

.waci-lib__group summary::-webkit-details-marker {
	display: none;
}

.waci-lib__group summary svg {
	fill: none;
	height: 15px;
	stroke: var(--lib-faint);
	stroke-width: 2;
	transition: transform .2s ease;
	width: 15px;
}

.waci-lib__group[open] summary svg {
	transform: rotate(180deg);
}

.waci-lib__group ul {
	list-style: none;
	margin: 0;
	max-height: 246px;
	overflow-y: auto;
	padding: 0 0 12px;
}

.waci-lib__option {
	align-items: center;
	border-radius: 7px;
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 7px 8px;
	transition: background .15s ease;
}

.waci-lib__option:hover {
	background: var(--lib-soft);
}

.waci-lib__option input {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.waci-lib__option-box {
	border: 1.5px solid #cfcbc8;
	border-radius: 4px;
	flex: none;
	height: 15px;
	position: relative;
	transition: background .15s ease, border-color .15s ease;
	width: 15px;
}

.waci-lib__option input:checked + .waci-lib__option-box {
	background: var(--lib-ink);
	border-color: var(--lib-ink);
}

.waci-lib__option input:checked + .waci-lib__option-box::after {
	border: solid #fff;
	border-width: 0 1.8px 1.8px 0;
	content: "";
	height: 7px;
	left: 4.4px;
	position: absolute;
	top: 1.6px;
	transform: rotate(43deg);
	width: 4px;
}

.waci-lib__option input:focus-visible + .waci-lib__option-box {
	outline: 2px solid var(--lib-accent);
	outline-offset: 2px;
}

.waci-lib__option-name {
	color: var(--lib-muted);
	flex: 1;
	font-size: 13.5px;
	line-height: 1.3;
}

.waci-lib__option input:checked ~ .waci-lib__option-name {
	color: var(--lib-ink);
	font-weight: 500;
}

.waci-lib__option-count {
	color: var(--lib-faint);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- toolbar */

.waci-lib__toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 22px;
}

/* Announced to screen readers, not shown to viewers. See class-renderer.php. */
.waci-lib__count {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.waci-lib__toolbar-right {
	align-items: center;
	display: flex;
	gap: 14px;
	/* The result count that used to hold the left of the toolbar is now visually
	   hidden and out of flow, so keep the sort control on the right. */
	margin-left: auto;
}

.waci-lib__sort {
	align-items: center;
	display: flex;
	gap: 8px;
}

.waci-lib__sort span {
	color: var(--lib-faint);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.waci-lib__sort select {
	background: #fff;
	border: 1px solid var(--lib-line);
	border-radius: 8px;
	color: inherit;
	font: inherit;
	font-size: 13.5px;
	padding: 8px 10px;
}

.waci-lib__views {
	display: flex;
	gap: 2px;
}

.waci-lib__views button {
	background: none;
	border: 1px solid var(--lib-line);
	color: var(--lib-faint);
	cursor: pointer;
	display: grid;
	height: 34px;
	padding: 0;
	place-items: center;
	width: 34px;
}

.waci-lib__views button:first-child { border-radius: 8px 0 0 8px; }
.waci-lib__views button:last-child  { border-radius: 0 8px 8px 0; }

.waci-lib__views button svg {
	display: block;
	fill: currentColor;
	height: 15px;
	pointer-events: none;
	stroke: none;
	width: 15px;
}

.waci-lib__views button.is-active {
	background: var(--lib-ink);
	border-color: var(--lib-ink);
	color: #fff;
}

/* active filter chips */

.waci-lib__active {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.waci-lib__chip {
	align-items: center;
	background: var(--lib-soft);
	border: 1px solid var(--lib-line);
	border-radius: 999px;
	display: inline-flex;
	font-size: 12.5px;
	gap: 7px;
	padding: 5px 8px 5px 12px;
}

.waci-lib__chip button {
	background: none;
	border: 0;
	color: var(--lib-faint);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 0 2px;
}

.waci-lib__chip button:hover {
	color: var(--lib-ink);
}

/* -------------------------------------------------------------------- grid */

.waci-lib__grid {
	display: grid;
	gap: 34px 26px;
	grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}

.waci-doc {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.waci-doc__preview {
	aspect-ratio: 1 / 1.3;
	background: var(--doc-tint, var(--lib-soft));
	border: 1px solid var(--lib-line);
	border-radius: var(--lib-radius);
	overflow: hidden;
	position: relative;
	transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}

.waci-doc:hover .waci-doc__preview {
	box-shadow: 0 14px 34px rgba(40, 40, 40, .13);
	transform: translateY(-4px);
}

.waci-doc__preview img {
	height: 100%;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

/* page 1 rasterised in the browser when the server could not do it */

.waci-doc__canvas {
	background: #fff;
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	transition: opacity .3s ease;
	width: 100%;
	z-index: 1;
}

.waci-doc__canvas.is-ready {
	opacity: 1;
}

/* generated cover, shown when no page image exists */

.waci-doc__cover {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .3)),
		var(--doc-tint, #eee);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px 20px;
}

.waci-doc__cover-mark {
	color: var(--doc-accent, var(--lib-ink));
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1;
}

.waci-doc__cover-rule {
	background: var(--doc-accent, var(--lib-ink));
	display: block;
	height: 2px;
	margin: 14px 0 16px;
	opacity: .9;
	width: 34px;
}

.waci-doc__cover-title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	color: var(--lib-ink);
	display: -webkit-box;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.34;
	overflow: hidden;
}

.waci-doc__cover-foot {
	color: var(--doc-accent, var(--lib-muted));
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	margin-top: auto;
	text-transform: uppercase;
}

.waci-doc__badge {
	backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, .9);
	border-radius: 999px;
	color: var(--doc-accent, var(--lib-ink));
	font-size: 10px;
	font-weight: 600;
	left: 12px;
	letter-spacing: .1em;
	padding: 4px 9px;
	position: absolute;
	text-transform: uppercase;
	top: 12px;
}

.waci-doc__title {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.36;
	margin: 0;
}

.waci-doc__meta {
	color: var(--lib-faint);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 10px;
	margin: 6px 0 0;
}

.waci-doc__meta span + span::before {
	content: "·";
	margin-right: 10px;
}

.waci-doc__excerpt {
	color: var(--lib-muted);
	display: none;
	font-size: 13.5px;
	line-height: 1.55;
	margin: 8px 0 0;
}

.waci-doc__actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.waci-doc__btn {
	background: var(--lib-ink);
	border: 1px solid var(--lib-ink);
	border-radius: 7px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	padding: 7px 14px;
	text-decoration: none;
	transition: background .16s ease, color .16s ease;
}

.waci-doc__btn:hover {
	background: var(--doc-accent, var(--lib-accent));
	border-color: var(--doc-accent, var(--lib-accent));
	color: #fff;
}

.waci-doc__btn.is-ghost {
	background: none;
	color: var(--lib-ink);
}

.waci-doc__btn.is-ghost:hover {
	background: var(--lib-soft);
	border-color: var(--lib-ink);
	color: var(--lib-ink);
}

.waci-doc__unavailable {
	color: var(--lib-faint);
	font-size: 12.5px;
	font-style: italic;
}

/* --------------------------------------------------------------- list view */

.waci-lib__grid.is-list {
	gap: 0;
	grid-template-columns: 1fr;
}

.waci-lib__grid.is-list .waci-doc {
	align-items: center;
	border-bottom: 1px solid var(--lib-line);
	display: grid;
	gap: 22px;
	grid-template-columns: 74px minmax(0, 1fr) auto;
	padding: 18px 0;
}

.waci-lib__grid.is-list .waci-doc:hover .waci-doc__preview {
	box-shadow: none;
	transform: none;
}

.waci-lib__grid.is-list .waci-doc__badge,
.waci-lib__grid.is-list .waci-doc__cover-rule,
.waci-lib__grid.is-list .waci-doc__cover-title,
.waci-lib__grid.is-list .waci-doc__cover-foot {
	display: none;
}

.waci-lib__grid.is-list .waci-doc__cover {
	align-items: center;
	justify-content: center;
	padding: 8px;
}

.waci-lib__grid.is-list .waci-doc__excerpt {
	display: block;
}

.waci-lib__grid.is-list .waci-doc__actions {
	margin: 0;
}

/* --------------------------------------------------------------- pagination */

.waci-lib__pager {
	align-items: center;
	border-top: 1px solid var(--lib-line);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 40px;
	padding-top: 26px;
}

.waci-lib .waci-lib__pager button {
	background-color: transparent;
	border: 1px solid var(--lib-line);
	border-radius: 8px;
	color: var(--lib-muted);
	cursor: pointer;
	font: inherit;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	min-width: 36px;
	padding: 8px 11px;
	transition: border-color .15s ease, color .15s ease;
}

.waci-lib .waci-lib__pager button:hover:not(:disabled):not(.is-current) {
	border-color: var(--lib-ink);
	color: var(--lib-ink);
}

.waci-lib .waci-lib__pager button.is-current {
	background-color: var(--lib-ink);
	border-color: var(--lib-ink);
	color: #fff;
}

.waci-lib .waci-lib__pager button:disabled {
	cursor: default;
	opacity: .38;
}

.waci-lib__pager-gap {
	color: var(--lib-faint);
	padding: 0 2px;
}

/* ------------------------------------------------------------------- empty */

.waci-lib__empty {
	color: var(--lib-muted);
	padding: 72px 0;
	text-align: center;
}

.waci-lib__empty button {
	background: none;
	border: 0;
	color: var(--lib-accent);
	cursor: pointer;
	font: inherit;
	margin-left: 6px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.waci-lib__layout {
		gap: 34px;
		grid-template-columns: 1fr;
	}

	.waci-lib__sidebar-inner {
		max-height: none;
		overflow: visible;
		position: static;
	}

	.waci-lib__group ul {
		max-height: none;
	}
}

@media (max-width: 640px) {
	.waci-lib {
		padding: 0 16px 64px;
	}

	.waci-lib__grid {
		gap: 26px 16px;
		grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	}

	.waci-lib__grid.is-list .waci-doc {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.waci-lib__grid.is-list .waci-doc__actions {
		grid-column: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.waci-doc__preview,
	.waci-lib__group summary svg {
		transition: none;
	}

	.waci-doc:hover .waci-doc__preview {
		transform: none;
	}
}


/* Compact: the listing embedded inside another page, where that page already
   supplies its own heading and the rail would crowd the column. */

.waci-lib.is-compact {
	padding-bottom: 0;
	padding-top: 0;
}

.waci-lib.is-compact .waci-lib__layout {
	grid-template-columns: 1fr;
}

.waci-lib.is-compact .waci-lib__filters {
	display: none;
}

.waci-lib__missing {
	color: var(--lib-muted, #5c5c5c);
	font-style: italic;
}

/* --------------------------------------------------------------- strip ---
 *
 * A short run of cards embedded in another page (the network landing pages).
 * The wrapper stays `.waci-lib` because that is what library.js binds to, but
 * the page around it already supplies the container width and the section
 * padding, so both are dropped here.
 */
.waci-lib.is-strip {
	margin: 0;
	max-width: none;
	padding: 0;
}

/* Slightly wider cells than the full listing: a strip shows at most eight, so
   there is room to let each document breathe. */
.waci-lib.is-strip .waci-lib__grid {
	grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}