/* The books on a contributor's archive */

/*
 * Five across, dropping to three then two, which is the rhythm the home page
 * grid already uses for the same card. A contributor's archive is the same
 * object in a different place, and it should not invent its own column count.
 */
.saqi-contributor-works {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 3rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

/*
 * The card is three subgrid rows; the role sits under all of it as a fourth
 * child rather than inside the card, so it lines up across the row whatever
 * height the cover and title come to.
 */
.saqi-contributor-works__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.saqi-contributor-works__item > .saqi-product-card {
	flex: 1 1 auto;
}

/*
 * Only ever printed for a role that is *not* a byline role, so it never
 * repeats what the card's byline already says. Set apart from the byline
 * deliberately: this is a statement about the person whose page you are on,
 * not about the book.
 */
.saqi-contributor-works__role {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/*
 * The contributor's own header: portrait, name, biography.
 *
 * On the same five tracks as the works grid beneath it, with the same gap, so
 * the portrait is exactly one book column wide and the biography starts on
 * the second column's left edge — the header and the grid are one layout
 * rather than a 14rem guess sitting over a grid it did not know about (Will,
 * 2026-09-11). It steps down with the grid: three tracks at the tablet break,
 * then a single stack.
 */
.saqi-contributor-header {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 3rem 1.5rem;
	align-items: start;
	margin-bottom: 3rem;
}

.saqi-contributor-header__portrait {
	grid-column: 1;
}

/*
 * Tried and reverted the same day (Will, 2026-09-14): starting the name and
 * the biography on the third track, a track of air after the portrait, the
 * way the book page's panel starts after its two-track cover. A square
 * portrait is one track, not two, and the gap read as a gap.
 */
.saqi-contributor-header__body {
	grid-column: 2 / span 2;
}

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

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

	.saqi-contributor-header__portrait,
	.saqi-contributor-header__body {
		grid-column: auto;
	}
}

/* No portrait for 178 of the 437 contributors, so the text takes the width
   rather than leaving a hole where a picture would have been. */
.saqi-contributor-header--no-portrait .saqi-contributor-header__body {
	grid-column: 1 / span 2;
}

/* Square, cropped to it: the portraits are every shape a publicity photo
   comes in, and a column of five different ones is five different sizes of
   person. The featured grid on Authors crops the same way. */
.saqi-contributor-header__portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.saqi-contributor-header__body > :first-child {
	margin-top: 0;
}

/*
 * The biography is the book page's About the Author -- the same text, and
 * the same setting: Inter at `sm` over 1.6, the 14px the dev build gives it
 * on both pages (measured 2026-09-16; `book-details` carries the same
 * setting). It had been left at the body's 16px here, so an author read
 * two sizes larger on their own page than on their book's (Will).
 *
 * Two tracks wide, as the book page's panel is: at 14px a run across the
 * four tracks after the portrait was a 110-character line. The name shares
 * the column; without a portrait the pair start at the page edge.
 */
.saqi-contributor-header__bio {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}