/* =============================================================
   Catalog Grid Styles
   ============================================================= */

/* Grid layout */
.catalog-grid {
	--pc-gap: 38px 24px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--pc-gap);
}

@media (max-width: 1100px) {
	.catalog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.catalog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Card + meta */
.catalog-card {
	display: grid;
	grid-template-rows: auto 1fr;
	text-decoration: none;
	gap: 10px;
}

.catalog-meta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.catalog-title {
	margin: 0;
	line-height: 1.2;
	font-size: 1rem;
}

.catalog-artist {
	line-height: 1.2;
}

.catalog-year {
	font-size: 0.9em;
	padding-left: 3px;
}
.catalog-year:before {
}

/* Cover base */
.catalog-cover {
	position: relative;
	aspect-ratio: 1 / 1; /* force square */
	overflow: visible; /* allow format icon to extend out on hover */
	border-radius: 2px;
	box-shadow:
		0 1px 0 rgba(0, 0, 0, 0.05),
		0 3px 8px rgba(0, 0, 0, 0.25);
	outline: 1px solid rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	transform-origin: bottom left; /* pivot from lower-left corner */
	will-change: transform, box-shadow;
}

/* Image defaults */
.catalog-cover img,
.catalog-cover .catalog-cover--placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease, filter 0.25s ease;
}

/* Keep the cover image above the icon layer */
.catalog-cover img {
	position: relative;
	z-index: 1;
}

/* -------- Format Icon (vinyl/cd/tape) anchored to RIGHT edge -------- */
.catalog-cover::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;                 /* anchor at cover’s right edge */
	width: 100%;
	height: 100%;
	background: url("vinyl.svg") no-repeat right center / contain; /* default */
	transform: translate(-100%, -50%); /* start hidden behind the right edge */
	transition: transform 0.25s ease;
	pointer-events: none;
	z-index: 0;
}

/* Map taxonomy slugs → icon via card format class set in PHP */
.catalog-card.is-format-cd   .catalog-cover::after { background-image: url("cd.svg"); }
.catalog-card.is-format-tape .catalog-cover::after { background-image: url("tape.svg"); }
/* .catalog-card.is-format-vinyl keeps the default vinyl.svg */

/* Hover state: lift, scale, and rotate slightly backward */
.catalog-card:hover .catalog-cover {
	z-index: 5;
	transform: scale(1.05) rotate(-3deg);
	box-shadow:
		0 4px 3px rgba(0, 0, 0, 0.3),
		0 10px 12px rgba(0, 0, 0, 0.20);
}

/* Slide the format icon out from the RIGHT (~20% reveal) */
.catalog-card:hover .catalog-cover::after {
	transform: translate(-80%, -50%);
}