/**
 * "Chapters" weekly-releases section on the series page.
 *
 * Most recent chapter cards in a kd-carousel (4-up, .kd-carousel--cols-4 is
 * the sole slide-width authority) + a "View All Chapters" slide, between
 * thick rules. Cards reuse .chapter-buy-card (css/pages/series-buy-chapters.css).
 */

.series-latest-chapters {
	margin-block: var(--section-gap);
}

/* Title block on the left, "View All Chapters" bottom-right */
.series-latest-chapters__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
}

/* Kicker typography comes from the global .kodansha--smallcaps class */
.series-latest-chapters__kicker {
	margin: 0 0 0.5rem;
}

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

.series-latest-chapters__swiper {
	padding-bottom: 2rem;
}

/* Equal-height cards. The swiper-wrapper is a flex row, so slides already
   stretch to the tallest card in the set — but the card sizes to its own
   body content, so a chapter whose subtitle fits one line rendered a
   visibly shorter card (production data; staging chapters carry no
   subtitles, which is why this never showed locally). Flex the slide and
   fill it: the body's margin-top:auto already pins the price + CTA to the
   bottom, and the cover crops via object-fit. */
.series-latest-chapters .swiper-slide {
	display: flex;
}

/* Carousel cards: vertical text-only layout, plain 1rem price row without
   the "Read now for" lead-in (the All Chapters grid keeps the lead-in). */
.series-latest-chapters .chapter-buy-card {
	width: 100%;
	flex-direction: column;
}

.series-latest-chapters .chapter-buy-card__price-cta {
	display: none;
}

.series-latest-chapters .chapter-buy-card__price-row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.series-latest-chapters .chapter-buy-card__price {
	font-size: 1rem;
}

.series-latest-chapters__view-all-link {
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 1rem;
	color: var(--color-text);
	white-space: nowrap;
	text-decoration-line: underline;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 2px;
	text-underline-offset: .1rem;
}

.series-latest-chapters__view-all-link:hover {
	color: var(--color-gray-dark);
}

@media (max-width: 768px) {
	.series-latest-chapters__title {
		font-size: 1.5rem;
	}
}