/**
 * Series-page "All Chapters" surface (sellable individual chapters).
 *
 * Option-A surface for sell-individual-chapters (CR §2.2.2). Chapter covers
 * reuse the SERIES image rendered 1:1 + black & white to differentiate from
 * volume covers (2:3, color) — content-team decision (CR §9).
 */

.series-buy-chapters {
	margin-block: var(--section-gap);
	/* Offset the sticky header when linked via #buy-chapters (matches site convention). */
	scroll-margin-top: 6rem;
}

/* Two columns: title + count left, description right, both top-aligned, so the
   header takes one band instead of stacking the copy under the count. Bottom
   gap matches .volumes-section__header (40px). */
.series-buy-chapters__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem 4rem;
	margin-bottom: 2.5rem;
}

.series-buy-chapters__heading {
	flex: 0 1 auto;
}

/* Matches .volumes-section__title (css/pages/volume-grid.css). */
.series-buy-chapters__title {
	margin: 0;
	font-family: "Maax Bold";
	font-weight: 400;
	font-size: 3.125rem;
	font-style: normal;
	line-height: 90%;
	letter-spacing: -1.5px;
	color: var(--color-text);
}

/* Matches .volumes-section__count ("5 Volumes Available"). */
.series-buy-chapters__count {
	margin: 1.5rem 0 0;
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 1.25rem;
	font-style: normal;
	line-height: 110%;
	letter-spacing: -0.6px;
	color: var(--color-text);
}

.series-buy-chapters__subhead {
	/* Right column: starts ~40% in and runs to the container edge. */
	flex: 0 1 58%;
	margin: 0.25rem 0 0; /* nudge the first line level with the title's cap height */
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--color-text);
}

.series-buy-chapters__grid {
	display: grid;
	/* Text-only cards (cover is not rendered) — 5-up on desktop, 4 on tablets,
	   2 on phones (see the breakpoints below). */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.5rem;
}

/* ── Chapter buy card ─────────────────────────────────────────────── */

.chapter-buy-card {
	display: flex;
	flex-direction: row;
	background-color: var(--color-background-2);
}

.chapter-buy-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	/* Fill the card height (grid stretches cards to the tallest in the row) so the
	   action can pin to the bottom regardless of missing subtitle/price content. */
	flex: 1 1 auto;
	/* Let long titles/subtitles wrap instead of forcing the row wider. */
	min-width: 0;
}

.chapter-buy-card__label {
	margin: 0; /* drop the global h3 margin so the subtitle sits tight beneath it */
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--color-text);
}

.chapter-buy-card__subtitle {
	margin: 0; /* drop the global <p> margin; spacing comes from the body gap */
	font-size: 1rem;
	color: var(--color-text-2);
	/* Wrap to multiple lines (no truncation); left- and top-aligned in the body. */
	text-align: left;
}

.chapter-buy-card__price-row {
	/* Plain inline flow — the CTA and price separate by a normal word space
	   and wrap like a sentence (flex boxed the wrapped CTA and pushed the
	   price past its widest line). */
	/* Push price + button to the bottom; title + subtitle stay at the top. */
	margin-top: auto;
}

/* "Read now for" lead-in reads as one phrase with the price. */
.chapter-buy-card__price-cta,
.chapter-buy-card__price {
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--color-text);
}

.chapter-buy-card__price--original {
	font-family: "Maax";
	text-decoration: line-through;
	color: var(--color-text-2);
}

.chapter-buy-card__price--sale {
	color: var(--color-red);
}

.chapter-buy-card__action {
	/* Sits directly under the price (the price row carries the bottom push). */
	margin-top: 0.5rem;
	width: 100%;
	/* .button computes content-box, so width:100% + padding overflows the
	   card without this. */
	box-sizing: border-box;
	/* Match the volume-card buy button (.volume-card .button--buy) */
	font-size: 0.75rem;
	letter-spacing: 2px;
	padding-inline: 0.5rem;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.series-buy-chapters__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* Match .volumes-section__title's responsive step-down. */
@media (max-width: 768px) {
	.series-buy-chapters__title {
		font-size: 1.5rem;
	}

	.series-buy-chapters__count {
		font-size: 1rem;
	}

	/* Stack the header again: title, count, then the description. */
	.series-buy-chapters__header {
		flex-direction: column;
		gap: 1rem;
		margin-bottom: 1.5rem;
	}

	.series-buy-chapters__subhead {
		flex-basis: auto;
		margin-top: 0;
		font-size: 1rem;
	}

	/* Two cards per row on phones (was one). */
	.series-buy-chapters__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.chapter-buy-card__body {
		padding: 0.75rem;
	}

	/* Half-width cards: tighten the button tracking so "Add to cart" fits. */
	.chapter-buy-card__action {
		letter-spacing: 1px;
	}
}