/*
 * CARD.CSS
 * .jm-card: one mix cover on a wall of covers (Cat): soft shadow, a dark vignette along the bottom edge,
 * a shelf "+" top-right, a status label bottom-left and a play button bottom-right (label words are placeholders until Stage 6).
 * Also the walls they sit on: .jm-grid--covers (Discover, a profile) and .jm-grid--carousel (one row that scrolls
 * sideways: the Members page). The owner's Edit button on their own profile: .jm-card__edit.
 */


/* ============================================================
 * 1. THE CARD AND ITS COVER
 * ============================================================ */

.jm-card {
	position: relative;
	aspect-ratio: 1 / 1;
	box-shadow: var(--jm-shadow-2);
	background: var(--jm-colour-header);
	transition: transform var(--jm-motion-time) var(--jm-ease-out), box-shadow var(--jm-motion-time) var(--jm-ease-out);
}

.jm-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--jm-shadow-3);
}

.jm-card__cover {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.jm-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bottom-edge vignette, so the label and play button always read. */
.jm-card__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--jm-fade-card);
	pointer-events: none;
}

.jm-card__no-cover {
	display: grid;
	place-items: center;
	height: 100%;
	padding: var(--jm-space-3);
	text-align: center;
	color: var(--jm-colour-heading);
	text-transform: uppercase;
}


/* ============================================================
 * 2. THE SMALL CONTROLS ON A COVER
 * ============================================================ */

/* Shelf "+" (top-right): the same blurred glass as the box tag below, round, with a neat white plus (Nick, 24 Oct;
   was Cat's little white box). The plus is drawn with two lines, so it sits dead centre at any size. */
.jm-card__add {
	position: absolute;
	top: var(--jm-space-2);
	right: var(--jm-space-2);
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jm-colour-glass);
	-webkit-backdrop-filter: blur(var(--jm-glass-blur));
	backdrop-filter: blur(var(--jm-glass-blur));
	color: transparent;   /* the "+" character stays for screen readers and old browsers; the lines below draw it */
	font-size: 0;
	cursor: pointer;
}

.jm-card__add::before,
.jm-card__add::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
	transform: translate(-50%, -50%);
}

.jm-card__add::after { transform: translate(-50%, -50%) rotate(90deg); }

.jm-card__add:disabled {
	cursor: default;
	opacity: 0.75;
}

/* On your shelf (Stage 7, Cat's "box pill"): the box's name in a small tag, top-right; tap to move or take off. */
.jm-card__box {
	position: absolute;
	top: var(--jm-space-2);
	right: var(--jm-space-2);
	max-width: calc(100% - var(--jm-space-4));
	height: 26px;
	padding: 0 var(--jm-space-3);
	border: 0;
	border-radius: var(--jm-radius-button);
	background: var(--jm-colour-glass);
	-webkit-backdrop-filter: blur(var(--jm-glass-blur));
	backdrop-filter: blur(var(--jm-glass-blur));
	color: var(--jm-colour-text);
	font: inherit;
	font-size: var(--jm-text-xxs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;   /* long box names are cut, not wrapped */
	cursor: pointer;
}

/* Play (bottom-right): a round teal button. */
.jm-card__play {
	position: absolute;
	right: var(--jm-space-2);
	bottom: var(--jm-space-2);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--jm-colour-button);
	color: var(--jm-colour-button-text);
	box-shadow: var(--jm-shadow-1);
	transition: transform var(--jm-motion-time) var(--jm-ease-out);
}

.jm-card__play:hover {
	transform: scale(1.08);
}

.jm-card__play svg {
	width: 20px;
	height: 20px;
	margin-left: 2px;
}


/* Status label: a small solid tab tucked into the bottom-left corner, like a corner cut out
   of the cover (the cover is the hero). Placeholder words until Stage 6; rating colours then. */
.jm-card__status {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 3px var(--jm-space-2);
	background: var(--jm-colour-label);
	color: var(--jm-colour-text);
	font-size: var(--jm-text-xxs);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
}

/* This member's label (Stage 6.1): Undiscovered is quiet; Listening stands out; a rating takes its colour. */
.jm-card__status--undiscovered { opacity: 0.75; }
.jm-card__status--listening    { background: var(--jm-colour-heading); color: var(--jm-colour-dark-1); }

.jm-card__status--rated { color: var(--jm-colour-dark-1); }
.jm-card__status--rated[data-rating="1"] { background: var(--jm-colour-rating-1); }
.jm-card__status--rated[data-rating="2"] { background: var(--jm-colour-rating-2); }
.jm-card__status--rated[data-rating="3"] { background: var(--jm-colour-rating-3); }
.jm-card__status--rated[data-rating="4"] { background: var(--jm-colour-rating-4); }
.jm-card__status--rated[data-rating="5"] { background: var(--jm-colour-rating-5); }
.jm-card__status--rated[data-rating="6"] { background: var(--jm-colour-rating-6); }
.jm-card__status--rated[data-rating="7"] { background: var(--jm-colour-rating-7); }


/* ============================================================
 * 3. PHONES: play button at 70% (it is a big share of a small cover)
 * ============================================================ */

@media (max-width: 699px) {
	.jm-card__play {
		width: 28px;
		height: 28px;
	}

	.jm-card__play svg {
		width: 14px;
		height: 14px;
		margin-left: 1px;
	}
}


/* ============================================================
 * 9. THE WALLS OF COVERS (moved from home.css, 23 Oct: Discover and profiles share it)
 * ============================================================ */

.jm-grid--covers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jm-space-2);
}

@media (min-width: 900px) {
	.jm-grid--covers {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--jm-space-5);
	}
}

/* One row of covers that scrolls sideways (a member's mixes on the Members page). Snaps cover by cover. */
.jm-grid--carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 132px;
	gap: var(--jm-space-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: var(--jm-space-2);
	scrollbar-width: thin;
}

.jm-grid--carousel > .jm-card {
	scroll-snap-align: start;
}

@media (min-width: 900px) {
	.jm-grid--carousel { grid-auto-columns: 172px; gap: var(--jm-space-3); }
}

/* The owner's Edit button on their own profile: a neat pill in the top-left corner (opens the mix in the wizard). */
.jm-card__edit {
	position: absolute;
	top: var(--jm-space-2);
	left: var(--jm-space-2);
	z-index: 3;
	padding: 2px var(--jm-space-2);
	border-radius: var(--jm-radius-button);
	background: var(--jm-colour-label);
	color: var(--jm-colour-text);
	font-size: var(--jm-text-xxs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: var(--jm-shadow-1);
}

/* On your own profile the Edit pill takes the top-left corner, so award badges step down below it. */
.jm-card:has(.jm-card__edit) .jm-badges {
	top: calc(var(--jm-space-2) + 26px);
}