/**
 * Component: Book (single-book.php)
 * Usage: .book-buy-links (purchase link buttons, in .entry-header),
 * .book-awards (accolade badges, in .entry-header), .book-quotes >
 * .book-quote (press quotes, after .entry-content).
 */

/*
 * margin-top: auto (not margin-bottom) — .entry-header__top is a
 * stretched flex column (see article-layout.css) matching the cover
 * image's height, and this is the last item in it, so auto absorbs
 * the leftover space above it, pinning the row to the column's true
 * bottom edge. The gap below it, before .magazine-byline/.book-awards,
 * comes from .entry-header's own row-gap instead.
 */
.book-buy-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: auto;
}

/*
 * Small fact badges ("Amazon Best Book of the Month"), not review
 * excerpts — deliberately plainer than .book-quote's pull-quote
 * treatment (no big decorative quote mark, no italic serif) so the two
 * don't read as the same kind of content.
 */
.book-awards {
	list-style: none;
	margin: 0 0 var(--space-3);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.book-awards__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-paper-dim);
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-ink-soft);
}

.book-awards__item::before {
	content: '\2605';
	color: var(--color-accent);
}

.book-quotes {
	margin-top: var(--space-6);
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.book-quotes {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * A big decorative opening quote mark sits behind the text (generated
 * content, not a real character in the DOM — screen readers shouldn't
 * announce a stray quotation mark). The card itself leans on the same
 * elevation tokens as .card/.news-item--card for a consistent "lifted
 * paper" feel, but stays flat (no hover state) — these aren't links.
 */
.book-quote {
	position: relative;
	margin: 0;
	padding: var(--space-5) var(--space-4) var(--space-4);
	background: var(--color-paper-dim);
	border-radius: var(--radius);
	box-shadow: var(--shadow-resting);
	overflow: hidden;
}

.book-quote::before {
	content: '\201C';
	position: absolute;
	top: -0.4em;
	left: var(--space-3);
	font-family: var(--font-serif);
	font-size: 6rem;
	line-height: 1;
	color: var(--color-primary);
	opacity: 0.18;
	pointer-events: none;
}

.book-quote__text {
	position: relative;
	margin: 0 0 var(--space-2);
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	font-style: italic;
	line-height: var(--line-height-heading);
	color: var(--color-ink);
}

.book-quote__attribution {
	position: relative;
	display: block;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 700;
	font-style: normal;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-primary);
}

.book-quote__attribution::before {
	content: '\2014\a0';
}