/* Product card component */

.saqi-product-card {
	display: flex;
	flex-direction: column;
	/* Cover to title. A touch more air than the 1rem step, without going to
	   the next one up. */
	gap: 1.25rem;
}

/*
 * Covers keep their own proportions and stand on a common baseline.
 *
 * Book covers are not one shape — a paperback, a large-format art book and a
 * pamphlet are all different — so a cover is never cropped to a square. It is
 * `width: 100%; height: auto`, and the box above it reserves room for the
 * tallest one so a short cover hangs from the same line as a tall one rather
 * than floating in the middle of its cell.
 *
 * The builder reserved a flat `min-height: 400px` for that, at every
 * breakpoint. Against its own 223px desktop column that is 1.79 times the
 * column width — more than any cover on the shop needs — and it does not
 * shrink, so at the two-up breakpoint a 150px column still reserved 400px and
 * left about 170px of nothing above every cover.
 *
 * A ratio instead of a height, taken from the covers themselves: measured
 * across all 339, the tallest is **1.652×** its width and the median is 1.534.
 * `1 / 1.66` is therefore exactly enough for every cover in the catalogue, and
 * it scales with the column instead of ignoring it.
 *
 * Only where there is more than one card in a row. At one column there is
 * nothing to align to, and a reserve is just a gap.
 */
.saqi-product-card__cover {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-decoration: none;
}

@media (min-width: 30rem) {
	.saqi-product-card__cover {
		aspect-ratio: 1 / 1.66;
	}
}

.saqi-product-card__image {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: var(--wp--custom--shadow--card);
}

/* A book with no cover still occupies its place on the baseline. */
.saqi-product-card__image--empty {
	aspect-ratio: 2 / 3;
	background: var(--wp--preset--color--rule);
}

/*
 * No `min-height` here.
 *
 * The builder reserved 120px so titles started on one line whatever the covers
 * above them did. Subgrid does that properly now — row 2 is shared, so every
 * title aligns without reserving anything. Left in, the 120px box overflowed
 * its row and lapped 68px over the footer, squeezing the gap above the keyline
 * to 4px against 17px below it.
 */

.saqi-product-card__body {
	display: flex;
	flex-direction: column;
	/* Tight under the title: the byline belongs to it, and half a rem read as
	   two separate things. */
	gap: 0.25rem;
}

/* 1.3rem, not the `lg` preset: a shade up from it (Will, 2026-09-11), and the
   size the site's Caslon subheads already use, so a card title and a section
   subhead are one size rather than two near misses. */
.saqi-product-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 400;
	line-height: 1.25;
	text-wrap: pretty;
}

.saqi-product-card__subtitle,
.saqi-product-card__byline,
.saqi-product-card__preorder {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	line-height: 1.4;
}

.saqi-product-card__subtitle,
.saqi-product-card__byline {
	font-size: var(--wp--preset--font-size--sm);
}

/* The name is the second thing read after the title, so it carries weight
   rather than colour. Mid grey — the body-copy link grey — rather than the
   near-black `muted`, which made it compete with the title (Will,
   2026-09-11); it is a link, and it wears the link colour. */
.saqi-product-card__byline {
	font-weight: 500;
	color: var(--saqi-link);
}

/* Availability and the way in are supporting detail, not headline. */
.saqi-product-card__action {
	font-size: var(--wp--preset--font-size--xs);
}

/* Smaller again, and grey rather than the brand fuchsia: a release date is
   information, not a call to action. Mid grey and not the light grey — #999 on
   white is about 2.9:1, which fails AA on text this size. 0.75rem sits below the scale's floor (xs
   bottoms at 0.8rem), so it stays literal. */
.saqi-product-card__preorder {
	font-size: var(--wp--preset--font-size--2-xs);
	color: var(--wp--preset--color--muted);
}

/*
 * A keyline under the descriptive half of the card, with availability and the
 * way in below it. `margin-block-start: auto` pushes the pair to the bottom of
 * the card, which is what puts every keyline in a row on one line.
 */
.saqi-product-card__footer {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

/* `flex`, not `inline-flex`: a block-level flex item stretches to the card, so
   the whole strip is the target rather than just the few words. */
.saqi-product-card__action {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--wp--preset--font-family--sans);
	color: inherit;
}

.saqi-product-card__icon svg {
	display: block;
	width: 1.1em;
	height: 1.1em;
}

/*
 * Keylines line up across the row.
 *
 * `margin-block-start: auto` above aligns card *bottoms*, which is not the
 * same thing: a book with a release date has a taller footer than one without,
 * so its rule sat 20px higher than its neighbours'. What has to be shared is
 * the line the footer *starts* on.
 *
 * Subgrid does exactly that. The card stops being its own little flex column
 * and becomes three rows of the grid it sits in — cover, body, footer — so
 * every card's footer begins on the same row line and every rule is drawn at
 * the same height. Cards with less in them get the space added above, which is
 * the whole point.
 *
 * Guarded, because without subgrid this is worse than the flex fallback: the
 * rule above still aligns the bottoms, and the keylines are merely uneven
 * rather than the layout being broken.
 */
@supports (grid-template-rows: subgrid) {
	.saqi-product-card {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		/* Its own rhythm: the parent's row-gap is the space between rows of
		   cards, not between a cover and its title. This is also the space
		   *above* the keyline, and it is deliberately a little more than the
		   1rem below it — the rule belongs to what follows it. */
		row-gap: 1.25rem;
	}

	/* The row line does the pushing now. */
	.saqi-product-card__footer {
		margin-block-start: 0;
	}
}

/* Link colour is semantic, not one blanket rule.
 *
 * A title is near-black and dims to mid grey. A person's name is already mid
 * grey and dims to light grey — the same two-step the design uses for links
 * (`--bde-links-color` #444, `--bde-links-color-hover` #999). The accent is
 * reserved: on a card the only thing wearing the fuchsia is the way into the
 * product.
 *
 * No underlines anywhere on a card. Focus keeps its ring from base.css.
 */

.saqi-product-card a {
	text-decoration: none;
}

.saqi-product-card__title a {
	color: var(--wp--preset--color--foreground);
}

.saqi-product-card__title a:hover,
.saqi-product-card__title a:focus-visible {
	color: var(--wp--preset--color--muted);
}

.saqi-product-card__byline a {
	color: inherit;
}

.saqi-product-card__byline a:hover,
.saqi-product-card__byline a:focus-visible {
	color: var(--wp--preset--color--light);
}

/* The exception: the way into the product wears the brand colour. */
.saqi-product-card__action:hover,
.saqi-product-card__action:focus-visible {
	color: var(--wp--preset--color--accent);
}

/*
 * WooCommerce adds its own "View basket" link after an AJAX add to basket, so
 * it turns up on the 88 books that are simple products. It was styled inside
 * the book page's buy panel and nowhere else, which left it in a card at the
 * body size (found 2026-09-17). Same family and size as the action above it.
 */
.saqi-product-card .added_to_cart {
	display: block;
	margin-block-start: 0.35em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--light);
}

.saqi-product-card .added_to_cart:hover,
.saqi-product-card .added_to_cart:focus-visible {
	color: var(--wp--preset--color--accent);
}