/*
 * Player detail reuses the existing Storefront wide shell only on taxonomy pages.
 * The global Catalog, Blocksy, and WOOF contracts remain unchanged.
 */
.kfs-player-catalog {
	box-sizing: border-box;
	width: min(calc(100% - (var(--kfs-shell-gutter, 24px) * 2)), var(--kfs-shell-max, 1840px));
	max-width: none;
	padding-inline: 0;
}

.kfs-player-catalog .kfs-catalog__hero {
	box-sizing: border-box;
	display: grid;
	min-height: 0;
	aspect-ratio: 23 / 5;
	align-items: center;
}

.kfs-player-catalog .kfs-catalog__hero.has-media::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(16, 24, 40, .82), rgba(16, 24, 40, .42) 52%, rgba(16, 24, 40, .14));
	content: "";
}

.kfs-player-catalog .kfs-catalog__hero-content {
	max-width: min(680px, 62%);
}

@media (max-width: 767px) {
	.kfs-player-catalog {
		width: calc(100% - (var(--kfs-shell-gutter, 16px) * 2));
		padding-inline: 0;
	}

	.kfs-player-catalog .kfs-catalog__hero {
		aspect-ratio: 900 / 560;
	}

	/* A Desktop-only Hero remains visible on mobile as the specified fallback. */
	.kfs-player-catalog .kfs-catalog__hero.has-desktop-media:not(.has-mobile-media) .kfs-catalog__hero-media,
	.kfs-player-catalog .kfs-catalog__hero.has-desktop-media:not(.has-mobile-media)::after {
		display: block;
	}

	.kfs-player-catalog .kfs-catalog__hero.has-media::after {
		background: linear-gradient(90deg, rgba(16, 24, 40, .80), rgba(16, 24, 40, .34));
	}

	.kfs-player-catalog .kfs-catalog__hero-content {
		max-width: 100%;
	}
}