/*
 * catalog.css — /library/, /templates/, and the resource card.
 *
 * ⚠️ **This closes an M4 gap.** `page-library.php` and
 * `archive-aitellar_resource.php` shipped in M4 with correct, well-reasoned
 * markup and no stylesheet at all — every `ait-library__*`, `ait-catalog__*`,
 * and `ait-resource-card__*` class was inert. The pages rendered as unstyled
 * document flow, which is readable and which is exactly why nobody noticed: the
 * M4 end-to-end test was driven by curl and WP-CLI, and curl does not care what
 * a page looks like. Recorded here rather than quietly fixed, because the
 * lesson is about the test, not the CSS.
 *
 * Loaded on the Library, the catalog, and anywhere a resource card appears —
 * which since M5 includes the homepage and every hub.
 */

/* ---------------------------------------------------------------------------
 * Shared headers
 * ------------------------------------------------------------------------ */

.ait-library__header,
.ait-catalog__header {
	max-width: var(--measure);
	margin-bottom: var(--s-6);
}

.ait-library__title,
.ait-catalog__title {
	margin: 0 0 var(--s-3);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}

.ait-library__lede,
.ait-catalog__lede {
	margin: 0;
	font-size: 1.125rem;
	line-height: var(--lh-body);
	color: var(--c-ink);
}

/* ---------------------------------------------------------------------------
 * The gate
 *
 * Band, boxed, and above the grid. The locked view deliberately still lists
 * every file — a gate that hides what it is gating gives the reader nothing to
 * want — so the gate box has to be visually louder than the twelve cards under
 * it or the ask disappears into the catalog.
 * ------------------------------------------------------------------------ */

.ait-library__gate {
	max-width: var(--measure);
	margin-bottom: var(--s-7);
	padding: var(--s-6) var(--s-5);
	border-radius: var(--r-lg);
	background: var(--c-band);
}

.ait-library__gate-title {
	margin: 0 0 var(--s-3);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.ait-library__gate-copy {
	margin: 0 0 var(--s-4);
}

.ait-library__empty,
.ait-catalog__empty {
	max-width: var(--measure);
	color: var(--c-ink-muted);
}

.ait-library__note {
	max-width: var(--measure);
	margin-top: var(--s-6);
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------------
 * Grids
 * ------------------------------------------------------------------------ */

.ait-library__grid,
.ait-catalog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ait-library__item,
.ait-catalog__item {
	margin: 0;
}

.ait-library__item::before,
.ait-catalog__item::before {
	content: none;
}

@media (min-width: 640px) {
	.ait-library__grid,
	.ait-catalog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ait-library__grid,
	.ait-catalog__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Cluster tabs
 * ------------------------------------------------------------------------ */

.ait-catalog__filters {
	margin-bottom: var(--s-6);
}

.ait-catalog__filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ait-catalog__filter-list > li {
	margin: 0;
}

.ait-catalog__filter-list > li::before {
	content: none;
}

/* ---------------------------------------------------------------------------
 * Resource card
 *
 * The image is 2:3 rather than the article card's 3:2. A printable IS a portrait
 * artifact, and showing it letterboxed into a landscape frame is the single
 * fastest way to make a free download look unappealing — which matters, because
 * gate-page conversion is the highest-leverage number on the site.
 * ------------------------------------------------------------------------ */

.ait-resource-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--border-hair);
	border-radius: var(--r-md);
	background: var(--c-surface);
	box-shadow: var(--shadow-1);
	overflow: hidden;
}

.ait-resource-card__media {
	display: block;
	background: var(--c-bg);
}

.ait-resource-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.ait-resource-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-4);
}

.ait-resource-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.ait-resource-card__title a {
	color: var(--c-primary);
	text-decoration: none;
}

.ait-resource-card__title a:hover {
	text-decoration: underline;
}

.ait-resource-card__benefit {
	margin: 0;
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-ui);
}

.ait-resource-card__meta {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: auto 0 0;
}

/*
 * The locked state is a stated sentence, never a greyed-out button. A disabled
 * control with no explanation is the version of this that generates support
 * email (page-library.php says the same thing at the markup).
 */
.ait-resource-card__locked,
.ait-resource-card__pending,
.ait-resource-card__owned {
	margin: auto 0 0;
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
	font-weight: 600;
}

.ait-resource-card__download {
	width: 100%;
	margin-top: auto;
}

/* The 4-up homepage strip uses the shared card shell with a taller image. */
.ait-card__image--tall {
	aspect-ratio: 2 / 3;
}

.ait-card__eyebrow {
	margin: 0 0 var(--s-2);
}