/* =========================================================================
 * Book page (/book/) — page 1298.
 *
 * Enqueued alongside home.css (depends on it) so the page reuses the shared
 * brand bits: .ath-eyebrow, .ath-on-dark, .ath-hero, .ath-book. This file only
 * adds what's book-specific: the hero cover frame, the "what you'll learn"
 * list, the author-invitation pull-quote, and the endorsement + format grids.
 * Built to pair with the ath/book-* patterns.
 * ========================================================================= */

/* --- Hero -------------------------------------------------------------- */

.ath-bookpage-hero__cover {
	margin: 0;
	max-width: 320px;
	margin-inline: auto;
}
.ath-bookpage-hero__cover img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 18px 40px rgba(19, 50, 63, 0.22));
}
.ath-bookpage-hero__subtitle {
	font-family: var(--wp--preset--font-family--display-serif);
	font-style: italic;
	color: var(--wp--preset--color--teal-mid);
	margin: 0 0 var(--wp--preset--spacing--2);
}

/* --- "What you'll learn" list ------------------------------------------ */

.ath-book-learn__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem 2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ath-book-learn__list li {
	position: relative;
	padding-left: 1.9rem;
	color: var(--wp--preset--color--deep-teal);
	line-height: 1.5;
}
/* Lotus-teal check/leaf marker */
.ath-book-learn__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--wp--preset--color--sage);
	-webkit-mask: var(--ath-check-mask) center / contain no-repeat;
	mask: var(--ath-check-mask) center / contain no-repeat;
}
:root {
	--ath-check-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}
@media (max-width: 600px) {
	.ath-book-learn__list { grid-template-columns: 1fr; }
}

/* Author invitation — a calm centred pull-quote. */
.ath-book-invite {
	border: 0;
	margin: 0;
	text-align: center;
	max-width: 40ch;
	margin-inline: auto;
}
.ath-book-invite p {
	font-family: var(--wp--preset--font-family--display-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem);
	line-height: 1.4;
	color: var(--wp--preset--color--deep-teal);
}
.ath-book-invite cite {
	display: block;
	margin-top: 0.75rem;
	font-style: normal;
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-muted);
}

/* --- Endorsements grid ------------------------------------------------- */

.ath-endorsements__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--4);
}
.ath-endorsement {
	margin: 0;
	border: 0;
	padding: 1.5rem 1.5rem 1.4rem;
	background: var(--wp--preset--color--white, #fff);
	border-radius: var(--ath-radius-md, 8px);
	box-shadow: 0 1px 2px rgba(19, 50, 63, 0.06), 0 8px 24px rgba(19, 50, 63, 0.05);
	display: flex;
	flex-direction: column;
}
.ath-endorsement p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--wp--preset--color--deep-teal);
}
.ath-endorsement cite {
	margin-top: 1rem;
	font-style: normal;
	font-family: var(--wp--preset--font-family--body-sans);
	line-height: 1.4;
}
.ath-endorsement cite b {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--teal-mid);
}
.ath-endorsement cite span {
	display: block;
	font-size: 0.75rem;
	color: var(--wp--preset--color--teal-muted);
}

/* --- Formats / "Get the book" ------------------------------------------ */

.ath-formats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--3);
}
.ath-format {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--teal-faint);
	border-radius: var(--ath-radius-md, 8px);
	text-align: center;
}
.ath-format__name {
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 1.25rem;
	color: var(--wp--preset--color--deep-teal);
	margin: 0;
}
.ath-format__price {
	font-family: var(--wp--preset--font-family--body-sans);
	font-weight: 600;
	color: var(--wp--preset--color--teal-mid);
	margin: 0;
}
.ath-format__meta {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--teal-muted);
	margin: 0 0 0.4rem;
	flex: 1 1 auto;
}
.ath-format .wp-block-button {
	margin-top: auto;
}
.ath-format__note {
	text-align: center;
	font-size: 0.875rem;
	color: var(--wp--preset--color--teal-muted);
	margin-top: var(--wp--preset--spacing--3);
}