/**
 * The book single: what design.css's page-lead component does not already say.
 *
 * Plan 3 Task 4. The lead's grid, the host's padding reset and the posterless
 * guard all live in design.css as `.lehane-page-lead*`, shared with the Film &
 * TV title. This file carries only what is this page's own: the cover's shadow,
 * the "Buy the book" columns and the praise measure.
 *
 * SAME TWO RULES AS design.css, and the §9 gate checks both:
 *   1. Colour comes from var(--ast-global-color-N) or var(--lehane-*), or a
 *      color-mix() over those. No literal hex, rgb() or named colour except
 *      black and transparent inside color-mix(). A Customizer palette change
 *      therefore still reaches every rule here.
 *   2. Hooks are className values, never a Kadence uniqueID class.
 *
 * Sizes are px, matching design.css, because this site's root is 18px and the
 * mockup's rem assumed 16px. The two exceptions are the lead's own insets,
 * which stay in em/rem in design.css because they have to equal Astra's own
 * computed card padding at each band -- nothing in this file touches those.
 */

/* ---------------------------------------------------------------------------
   The cover.

   Same treatment as the Film & TV poster, which keeps its rule in the child
   theme's css/filmtv.css because the shadow is poster-specific there. The two
   are separate declarations of the same token on purpose: §0.9 ruled the
   shadow does NOT move into the shared component, because a page lead with a
   photograph rather than a cover should not inherit a book's drop shadow.

   The media column's width is the component's (design.css sets the track at
   minmax(200px, 280px)); this rule only fills it.
   ------------------------------------------------------------------------- */
.writing-single__cover img {
	display: block;
	width: 100%;
	height: auto;
	filter: var(--lehane-shadow-cover);
}

/* ---------------------------------------------------------------------------
   Sections below the lead.

   The mockup separates them with <hr class="rule">. A rule between two
   sections is presentation, so it is a border here rather than an element in
   the template.

   THE BORDER IS ON THE TOP, not the bottom. The last section on the page
   varies -- a book with no praise ends at the buy links, and 199, 228 and 444
   end there today -- and a bottom border would leave a hairline under the last
   section with nothing beneath it.
   ------------------------------------------------------------------------- */
.writing-single__buy,
.writing-single__praise,
.writing-single__related {
	border-top: 1px solid color-mix(in srgb, var(--lehane-ink) 12%, transparent);
	padding-top: 48px;
	margin-top: 48px;
}

/* #buy is the homepage lead's jump target. Without this the section lands hard
   against the top of the viewport, with its own border-top as the first thing
   the reader sees and the heading tight under it. 24px is half the section's
   padding-top, enough to read as deliberate without pushing the heading down
   the screen. Nothing on this site is sticky, so it covers breathing room
   rather than a fixed header. */
.writing-single__buy {
	scroll-margin-top: 24px;
}

/* The first section below the lead does not need a rule: the stone panel's
   own edge already separates it. The lead always renders, so this is never a
   first-child of the article. */
.writing-single__lede + .writing-single__buy,
.writing-single__lede + .writing-single__praise,
.writing-single__lede + .writing-single__related {
	border-top: 0;
	padding-top: 0;
}

/* The eyebrow-styled section headings. `.lehane-eyebrow` in design.css carries
   the type; only the rhythm is this page's. */
.writing-single__section-title {
	margin: 0 0 24px;
}

/* ---------------------------------------------------------------------------
   Buy the book.

   Three columns, from mockups/book-single.html:12. The live data is NOT always
   three: 199 carries one group, and 228, 29 and 30 carry four. A fourth group
   wraps to a second row, which is correct; a single group sits in the first
   column at a third of the width, which is also correct and is why this is
   repeat(3, ...) rather than auto-fit. auto-fit would stretch one group across
   the whole measure and make a one-format book look like a different design.

   minmax(0, 1fr) rather than 1fr: a grid track's default minimum is auto, and
   one of these lists holds "Books-A-Million" and "Barnes & Noble" as
   unbreakable-ish strings, which pushes an auto track wider than its share.
   ------------------------------------------------------------------------- */
.writing-single__buy-groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.writing-single__buy-format {
	font-size: 22px;
	margin: 0 0 12px;
}

.writing-single__buy-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.writing-single__buy-list li {
	margin: 0 0 6px;
}

.writing-single__buy-list li:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Praise.

   A measure, not a card. The mockup gives the quotation the weight and adds no
   border, no background and no quote graphic (mockups/book-single.html:17-24).

   NO ::before QUOTE GLYPH, deliberately. All 17 live quotations already carry
   their own curly quotation marks; a CSS glyph would double them.
   ------------------------------------------------------------------------- */
.writing-single__quote {
	max-width: 46rem;
	margin: 0;
}

.writing-single__quote + .writing-single__quote {
	margin-top: 32px;
}

/* EVERY DECLARATION HERE UNDOES SOMETHING ASTRA'S ELEMENT RULE DOES, and the
   rule is a bare `blockquote`, so it applies everywhere and not only inside
   .entry-content. Read from the rendered page with CSS.getMatchedStylesForNode
   rather than assumed, at astra/assets/css/minified/style.min.css:

       blockquote { border-left: 5px solid var(--ast-border-color);
                    padding: 20px; font-size: 1.2em; font-style: italic;
                    margin: 0 0 1.5em; position: relative }

   The mockup's praise quotation is roman with no rule and no indent
   (mockups/book-single.html:17-24): "the quotation carries the weight. No card,
   no border, no quote graphic." `font-style: normal` is the one of these that
   is visible in a screenshot and was missed on the first pass. */
.writing-single__quote blockquote {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-size: 22px;
	font-style: normal;
	line-height: 1.45;
}

.writing-single__quote figcaption {
	font-family: var(--lehane-font-display);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ast-global-color-6);
}

.writing-single__quote cite {
	font-style: normal;
}

/* ---------------------------------------------------------------------------
   Narrow widths.

   900px is the mockup's breakpoint for the buy columns
   (mockups/book-single.html:25-29). The lead's own collapse is the shared
   component's and happens at 768px, which is Astra's band boundary -- the two
   are different numbers on purpose and neither is a typo.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.writing-single__buy-groups {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 544px) {
	.writing-single__buy,
	.writing-single__praise,
	.writing-single__related {
		padding-top: 32px;
		margin-top: 32px;
	}

	.writing-single__quote blockquote {
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Also by Dennis Lehane.

   The grid itself is design.css's `.writing_covers:has(> .book-card)`, the same
   one the archive and the homepage strip use, driven by the column_count-4
   class on the wrapper. Nothing here restates it.

   ONE RULE ONLY, and it is a gap design.css leaves rather than a new idea.
   design.css already removes Astra's link underline from a book card, but its
   selector is `.ast-single-post .entry-content :is(a.book-card__link, …)` --
   scoped to .entry-content, because until now every consumer of this card sat
   inside a Kadence row in the content. These cards are a sibling of
   .entry-content, not a descendant, so that rule does not reach them and Astra
   underlines the title on a book single and nowhere else.

   Fixed here rather than by widening the design.css selector, because widening
   it would change the homepage and the archive, which Task 3 measured and
   Task 4's negative controls assert are untouched.
   ------------------------------------------------------------------------- */
.writing-single__related a.book-card__link {
	text-decoration: none;
}