/* "More from Jubix Studios" — cross-series discovery band.
   Loaded on single products and series archives only (see inc/enqueue.php).

   Deliberately styled as a *different* kind of block from the book grid above
   it: horizontal cards on a tinted band, not another row of covers. A shopper
   who has just scrolled past "Complete the Collection" should be able to tell
   at a glance that this is a change of subject, not more of the same series. */

.cross-series {
	background: var(--light-purple, #f3f0ff);
	border-top: 1px solid var(--hairline);
	padding: clamp(44px, 6vw, 76px) 5%;
	margin-top: clamp(40px, 6vw, 70px);
}

.cross-series__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.cross-series__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.5rem, 3.2vw, 2.3rem);
	text-align: center;
	margin: 0 0 10px;
	color: var(--deep-purple);
}

.cross-series__lede {
	text-align: center;
	color: var(--text-muted);
	font-size: 1.02rem;
	margin: 0 0 clamp(26px, 4vw, 42px);
}

.cross-series__grid {
	display: grid;
	/* Cards are capped rather than free-stretching, so a single other series
	   does not become a full-width billboard. */
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 460px));
	gap: 20px;
	justify-content: center;
}

.cross-series__card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px;
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}
.cross-series__card:hover,
.cross-series__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow-float, 0 18px 40px rgba(0, 0, 0, .12));
}

.cross-series__cover {
	flex: 0 0 108px;
	width: 108px;
	aspect-ratio: 3 / 4;
	border-radius: 6px;
	overflow: hidden;
	background: #f0f0f0;
	box-shadow: -6px 8px 18px rgba(0, 0, 0, .18);
}
.cross-series__img,
.cross-series__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.cross-series__placeholder { background: var(--light-purple); }

.cross-series__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

/* Age range leads, because for a children's-book buyer it is the fact that
   decides whether the rest of the card is worth reading. */
.cross-series__age {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--accent-dark);
}

.cross-series__name {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.18rem;
	line-height: 1.2;
	color: var(--deep-purple);
}

.cross-series__tagline {
	font-size: .92rem;
	color: var(--text-muted);
	line-height: 1.5;
}

.cross-series__count {
	font-size: .82rem;
	color: #999;
}

.cross-series__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .88rem;
	color: var(--accent-dark);
}
.cross-series__arrow { transition: transform .2s ease; }
.cross-series__card:hover .cross-series__arrow { transform: translateX(4px); }

@media (max-width: 900px) {
	.cross-series__grid { grid-template-columns: minmax(0, 460px); }
}

@media (max-width: 520px) {
	.cross-series__card { gap: 14px; padding: 14px; }
	.cross-series__cover { flex-basis: 82px; width: 82px; }
	.cross-series__name { font-size: 1.05rem; }
	.cross-series__tagline { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cross-series__card,
	.cross-series__arrow { transition: none; }
	.cross-series__card:hover { transform: none; }
}