/**
 * Series-page "Buy individual chapters" surface.
 *
 * 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: 4rem;
	/* Offset the sticky header when linked via #buy-chapters (matches site convention). */
	scroll-margin-top: 6rem;
}

.series-buy-chapters__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-line);
}

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

.series-buy-chapters__count {
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 0.875rem;
	text-transform: uppercase;
	color: var(--color-text-2);
}

.series-buy-chapters__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.5rem;
}

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

.chapter-buy-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-background-2);
	border: 1px solid var(--color-line);
	border-radius: 8px;
	overflow: hidden;
}

.chapter-buy-card__cover {
	aspect-ratio: 1 / 1;
	background-color: var(--color-gray-light);
	overflow: hidden;
}

.chapter-buy-card__cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Differentiator: chapters render the series image in B&W */
	filter: grayscale(1);
}

.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;
}

.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 {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	/* Push price + button to the bottom; title + subtitle stay at the top. */
	margin-top: auto;
}

.chapter-buy-card__price {
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 1rem;
	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%;
}

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