/* Card styling matches the site header: same background and border. */
.sample-pack {
	display: flex;
	gap: 2em;
	margin-bottom: 2em;
	padding: 1.5em;
	background: #293434;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
}

.sample-pack-media,
.sample-pack-info {
	flex: 1 1 0;
	min-width: 0;
}

.sample-pack-info > :last-child,
.sample-pack-description > :last-child {
	margin-bottom: 0;
}

/* Pack page: title on top, cover + details row, then the full description. */
.sample-pack-detail {
	flex-direction: column;
}

.sample-pack-header h2 {
	margin: 0;
}

.sample-pack-header .sample-pack-byline {
	margin: 0.25em 0 0;
}

.sample-pack-top {
	display: flex;
	gap: 2em;
}

.sample-pack-cover {
	position: relative;
	margin: 0;
}

/* Play button overlaid on the cover, same style as the in-app store. */
.sample-pack-play {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 68px;
	height: 68px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.25) url('/img/sample-packs/play.svg') no-repeat 58% 50% / 45%;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
	transition: transform 100ms ease, background-color 100ms ease;
}

.sample-pack-play:hover {
	transform: scale(1.1);
}

.sample-pack-play:active {
	transform: scale(1.3);
}

.sample-pack-play.playing {
	background-color: #fe2e5a;
	background-image: url('/img/sample-packs/pause.svg');
	background-position: 50% 50%;
	background-size: 40%;
}

.sample-pack-cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

@media (max-width: 781px) {
	.sample-pack {
		flex-direction: column;
		padding: 1em;
		gap: 1em;
	}

	.sample-pack-top {
		flex-direction: column;
		gap: 1em;
	}
}

.sample-pack h3 {
	margin-top: 0;
}

.sample-pack h3 a {
	text-decoration: none;
	color: inherit;
}

.sample-pack-byline {
	opacity: 0.7;
	margin-top: -0.5em;
}

.sample-pack-toy {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 1em 0;
}

.sample-pack-toy .toy-image {
	width: 160px;
	height: auto;
	flex-shrink: 0;
	border-radius: 8px;
}

.sample-pack-toy .toy-label {
	margin: 0;
}

.sample-pack-more-row {
	text-align: right;
}

.sample-pack-more {
	font-weight: bold;
}

.sample-pack-back {
	margin-bottom: 1em;
}

.sample-pack-description img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.5em auto;
	border-radius: 8px;
}

.sample-pack-description blockquote {
	font-style: italic;
	margin: 1em 0;
	padding-left: 1em;
	border-left: 3px solid currentColor;
}

@media (max-width: 781px) {
	.sample-pack-toy .toy-image {
		width: 120px;
	}
}

.entry-content .sample-pack-meta {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.entry-content .sample-pack-meta li {
	margin: 0 0 0.25em;
}

/* Listing cards: the More info link covers the whole card so clicking
   anywhere opens the pack page. Other links and the play button sit above it. */
.sample-pack:has(.sample-pack-more) {
	position: relative;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.sample-pack:has(.sample-pack-more):hover {
	border-color: rgba(255, 255, 255, 0.4);
	background-color: #2d3a3a;
}

.sample-pack-more::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* The byline's opacity gives it its own stacking context, so raise it as a whole. */
.sample-pack:has(.sample-pack-more) .sample-pack-byline,
.sample-pack:has(.sample-pack-more) a:not(.sample-pack-more) {
	position: relative;
	z-index: 1;
}

.sample-pack:has(.sample-pack-more) .sample-pack-play {
	z-index: 2;
}