/* Play archive scaffold: sections, grids and ungrouped cards; other lanes paint Staff Picks and grouped game objects. */
.cr-play .pkiw-group__heading {
	margin: var(--cr-space-xl) 0 var(--cr-space-md);
	color: var(--cr-ink);
	font-family: var(--cr-font-accent);
	font-style: normal;
	text-wrap: balance;
}

.cr-play .pkiw-group {
	--cr-play-columns: 4;
}

.cr-play .pkiw-group[data-pkiw-group="video"] {
	--cr-play-columns: 3;
}

/* tokens.css caps every list at --cr-measure; the shelves take the Play
   group's wide size, as the Listen shelf does (cr-media-shelf.css). */
.cr-play .pkiw-group > .pkiw-group__items {
	display: grid;
	grid-template-columns: repeat(var(--cr-play-columns), minmax(0, 1fr));
	row-gap: 0;
	max-width: none;
	margin-block-end: var(--cr-space-2xl);
}

.cr-play .pkiw-group > .pkiw-group__items > li.wp-block-post {
	min-width: 0;
}

.cr-play .pk-title {
	overflow-wrap: anywhere;
}

.cr-play .pk-card.cr-play-item--ungrouped {
	position: relative;
	display: block;
	grid-template-columns: none;
	gap: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: var(--cr-space-md);
	border: 2px solid var(--cr-ink);
	background: var(--cr-periwinkle);
	box-shadow: var(--cr-shadow-hard);
	color: var(--cr-russian-violet);
}

.cr-play .pk-card.cr-play-item--ungrouped .pk-body {
	width: 100%;
	min-width: 0;
}

.cr-play .pk-card.cr-play-item--ungrouped .pk-title a {
	color: var(--cr-russian-violet);
}

.cr-play .pk-card.cr-play-item--ungrouped .pk-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cr-play .pk-card.cr-play-item--ungrouped .pk-media {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.cr-play .pk-card.cr-play-item--ungrouped .pk-media img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.cr-play .pk-card.cr-play-item--ungrouped:not(.has-cover) .pk-title::before,
.cr-play .pk-card.cr-play-item--ungrouped .pk-media.cr-cover--failed::before {
	content: "";
	display: block;
	width: 100%;
	max-width: 100%;
	background-color: var(--cr-russian-violet);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-2.2 0-4 1.8-4 4 0 1.2.6 2.3 1.4 3-2.6 1-5.4 3.4-5.4 5.5 0 1 .8 1.5 1.7 1.5h2.6l-2.2 4.6c-.4.9.2 1.9 1.2 1.9h9.4c1 0 1.6-1 1.2-1.9L15.7 16h2.6c.9 0 1.7-.5 1.7-1.5 0-2.1-2.8-4.5-5.4-5.5.8-.7 1.4-1.8 1.4-3 0-2.2-1.8-4-4-4z'/%3E%3C/svg%3E") center / 40% auto no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-2.2 0-4 1.8-4 4 0 1.2.6 2.3 1.4 3-2.6 1-5.4 3.4-5.4 5.5 0 1 .8 1.5 1.7 1.5h2.6l-2.2 4.6c-.4.9.2 1.9 1.2 1.9h9.4c1 0 1.6-1 1.2-1.9L15.7 16h2.6c.9 0 1.7-.5 1.7-1.5 0-2.1-2.8-4.5-5.4-5.5.8-.7 1.4-1.8 1.4-3 0-2.2-1.8-4-4-4z'/%3E%3C/svg%3E") center / 40% auto no-repeat;
}

.cr-play .pk-card.cr-play-item--ungrouped:not(.has-cover) .pk-title::before {
	aspect-ratio: 3 / 4;
}

.cr-play .pk-card.cr-play-item--ungrouped .pk-media.cr-cover--failed::before {
	height: 100%;
}

.cr-play .pk-card.cr-play-item--ungrouped:focus-within {
	outline: 3px solid var(--cr-selective-yellow);
	outline-offset: 4px;
	box-shadow: var(--cr-shadow-hard), 0 0 0 7px var(--cr-ink);
}

.cr-play .pk-card.cr-play-item--ungrouped:focus-within .pk-title a:focus {
	outline: none;
}

@media (max-width: 63.98rem) {

	.cr-play .pkiw-group,
	.cr-play .pkiw-group[data-pkiw-group="video"] {
		--cr-play-columns: 2;
	}
}

@media (max-width: 39.98rem) {

	.cr-play .pkiw-group,
	.cr-play .pkiw-group[data-pkiw-group="video"] {
		--cr-play-columns: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cr-play * {
		transition: none;
		animation: none;
		transform: none;
	}
}

@media (forced-colors: active) {

	.cr-play .pk-card.cr-play-item--ungrouped {
		border: 2px solid CanvasText;
		box-shadow: none;
	}

	.cr-play .pk-card.cr-play-item--ungrouped:not(.has-cover) .pk-title::before,
	.cr-play .pk-card.cr-play-item--ungrouped .pk-media.cr-cover--failed::before {
		background-color: CanvasText;
	}

	.cr-play .pk-card.cr-play-item--ungrouped:focus-within {
		outline-color: CanvasText;
	}
}