.hcc-single { margin-block: 1.5rem; }

.hcc-single__figure { margin: 0 auto; max-width: 340px; text-align: center; }
.hcc-single__figure img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 28px rgb(0 0 0 / .25); }

/* Hover/focus to flip from the image to its back. */
.hcc-single__flip {
	position: relative;
	max-width: 340px;
	aspect-ratio: 2 / 3;
	margin: 0 auto;
	perspective: 1600px;
	border-radius: 6px;
}
.hcc-single__flip:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.hcc-single__face {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 10px 28px rgb(0 0 0 / .25);
	transform-style: preserve-3d;
	transition: transform .6s;
}
.hcc-single__face img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.hcc-single__face--b { transform: rotateY(180deg); }

/* Default back cover: background image with title/details overlaid, filling the face. */
.hcc-single__backfill { position: relative; }
.hcc-single__backfill-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .4em;
	padding: 1.2em;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 3px rgb(0 0 0 / .65);
	background: linear-gradient(rgb(0 0 0 / .15), rgb(0 0 0 / .55));
}
.hcc-single__backfill-title { font-size: 1.15em; font-weight: 600; }
.hcc-single__backfill-sub { font-size: .9em; opacity: .9; }

@media (hover: hover) and (pointer: fine) {
	.hcc-single__flip:hover .hcc-single__face--a,
	.hcc-single__flip:focus-visible .hcc-single__face--a { transform: rotateY(-180deg); }
	.hcc-single__flip:hover .hcc-single__face--b,
	.hcc-single__flip:focus-visible .hcc-single__face--b { transform: rotateY(0deg); }
}
@media (hover: none), (pointer: coarse) {
	.hcc-single__flip:focus .hcc-single__face--a { transform: rotateY(-180deg); }
	.hcc-single__flip:focus .hcc-single__face--b { transform: rotateY(0deg); }
}

.hcc-single__details { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: center; margin: 1.5rem 0 0; }
.hcc-single__details dt { font-size: .8em; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.hcc-single__details dd { margin: 0; font-weight: 600; }
.hcc-single__section h2 { font-size: 1.25em; }