/* Catalogue grid component
 *
 * Five across, on the book grid's own tracks and gap, so the covers line up
 * with the columns everything else on the site sits on — the footer, the shop,
 * the home page — and step down with them (Will, 2026-09-11).
 */

.saqi-catalogue-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 3rem 1.5rem;
	margin-block: var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
}

@media (max-width: 63.9375rem) {
	.saqi-catalogue-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 47.9375rem) {
	.saqi-catalogue-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1rem;
	}
}

.saqi-catalogue-grid__item {
	margin: 0;
}

/*
 * One height for every cover.
 *
 * The catalogues are A-format, 1:1.414, bar the 2026 one at 1:1.5 — so a box
 * at the A ratio and `object-fit: contain` gives every cover the same height,
 * with the odd one out a shade narrower and centred rather than a shade
 * taller. Nothing is cropped: the old `medium` size was, this shop's medium
 * being a 300x300 crop that took the top and bottom off five of the nine.
 *
 * The shadow is the book cover's, but as a `drop-shadow` filter rather than a
 * box-shadow, because a box-shadow would outline the box and not the cover
 * inside it. No border: a keyline round a cover reads as a frame.
 */
.saqi-catalogue-grid__link,
.saqi-catalogue-grid__item > .saqi-catalogue-grid__cover {
	display: block;
	aspect-ratio: 1 / 1.414;
	text-decoration: none;
}

.saqi-catalogue-grid__cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(1px 1px 8px rgb(0 0 0 / 0.15));
}