/**
 * Collection Page
 *
 * Series and collection term pages: artwork, description, ordered list.
 *
 * @package revival
 */

 .collection .content-width {
	max-width: var(--width-l);
}


 .collection__header {
	padding-block-start: var(--space-xl);
	padding-block-end: var(--space-l);
}

.collection__back {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--space-xs) * .6);
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--neutral-semi-dark);
	text-decoration: none;
	transition: color var(--transition-duration) var(--transition-timing);
}

.collection__back:hover {
	color: var(--text-dark);
}

.collection__back svg {
	fill: currentColor;
}

.collection__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
	gap: var(--space-xl);
	align-items: start;
	margin-block-start: var(--space-s);
}

.collection__title {
	margin: 0 0 calc(var(--space-xs) * .8);
	line-height: 1.1;
}

.collection__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--space-xs) * .8);
	font-size: var(--card-meta-size);
	font-weight: var(--card-meta-weight);
	color: var(--neutral-semi-dark);
}

.collection__description {
	margin-block-start: var(--space-s);
	max-width: 62ch;
}

.collection__description p {
	font-size: var(--text-m);
	line-height: 1.6;
	color: var(--neutral-semi-dark);
}

.collection__description p:last-child {
	margin-block-end: 0;
}

.collection__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-block-start: var(--space-m);
}

/* Aspect ratio comes from the taxonomy — square for series art,
   16:9 for video collections. */
.collection__artwork {
	position: relative;
	aspect-ratio: var(--collection-aspect, 1 / 1);
	border-radius: var(--card-radius);
	overflow: hidden;
	background: var(--neutral-light);
	border: 1px solid var(--card-border-color);
}

.collection__artwork img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Item list --- */

.collection__items {
	padding-block-end: var(--section-space-s);
}

.collection__items-label {
	display: block;
}

.collection__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.collection__item-link {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	padding-inline: var(--space-s);
	padding-block: calc(var(--space-xs) * 1.1);
	border-radius: var(--radius-m);
	text-decoration: none;
	color: var(--text-dark);
	transition: background var(--transition-duration) var(--transition-timing);
}

/* Zebra striping rather than rules — a long list reads faster in bands. */
.collection__item:nth-child(odd) .collection__item-link {
	background: var(--neutral-ultra-light);
}

.collection__item-link:hover {
	background: var(--primary-trans-10);
	color: var(--primary-dark);
}

.collection__item-num {
	flex: 0 0 auto;
	min-width: 22px;
	font-size: var(--card-meta-small-size);
	color: var(--neutral-semi-dark);
	text-align: center;
}

.collection__item-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.collection__item-title {
	font-size: var(--card-title-size);
	font-weight: var(--card-title-weight);
	line-height: var(--card-title-leading);
}

.collection__item-meta {
	font-size: var(--card-meta-size);
	font-weight: var(--card-meta-weight);
	color: var(--neutral-semi-dark);
}

.collection__item-duration {
	margin-inline-start: auto;
	flex: 0 0 auto;
	font-size: var(--card-meta-small-size);
	color: var(--neutral-semi-dark);
}

.collection__more {
	text-align: center;
	margin-block-start: var(--space-s);
}

.collection__more a {
	font-size: var(--card-meta-size);
	font-weight: 500;
	color: var(--primary);
	text-decoration: none;
}

.collection__more a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Sibling collections --- */

.collection__siblings {
	padding-block: var(--section-space-s);
	background: var(--neutral-ultra-light);
}

.collection__sibling-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-m);
	margin-block-start: var(--space-s);
}

.collection-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-radius);
	background: var(--card-surface);
	overflow: hidden;
	text-decoration: none;
	color: var(--text-dark);
	transition: border-color var(--transition-duration) var(--transition-timing);
}

.collection-card:hover {
	border-color: var(--neutral-semi-light);
	color: var(--text-dark);
}

.collection-card__media {
	position: relative;
	aspect-ratio: var(--collection-aspect, 1 / 1);
	overflow: hidden;
	background: var(--neutral-light);
}

.collection-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.collection-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-inline: var(--card-padding-inline);
	padding-block: var(--card-padding-block-start) var(--card-padding-block-end);
}

.collection-card__title {
	font-size: var(--card-title-size);
	font-weight: var(--card-title-weight);
	line-height: var(--card-title-leading);
}

.collection-card__count {
	font-size: var(--card-meta-small-size);
	color: var(--neutral-semi-dark);
}

@media (max-width: 900px) {
	.collection__intro {
		grid-template-columns: 1fr;
		gap: var(--space-m);
	}

	/* Artwork leads on narrow screens, where it sets the scene before
	   the text rather than sitting beside it. */
	.collection__artwork {
		order: -1;
		max-width: 240px;
	}
}

@media (max-width: 600px) {
	.collection__item-link {
		padding-inline: var(--space-xs);
		gap: var(--space-xs);
	}

	.collection__item-duration {
		display: none;
	}
}

.collection__list,
.collection__item {
	width: 100%;
	max-width: none;
}

.collection__details {
	max-width: 62ch;
}