/**
 * Component: product card
 *
 * A catalogue plate. Product image on a warm neutral ground, provenance
 * above the name, specifications below it, price and availability paired at
 * the foot.
 *
 * Structure comes from a hairline rule and a 2px metal edge, not from
 * shadows. The card lifts on hover only slightly - this is a reference
 * catalogue, not a carousel.
 */

/* ---------------------------------------------------------------------- */
/* Grid                                                                    */
/* ---------------------------------------------------------------------- */

.tcs-product-grid,
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--tcs-grid-columns), minmax(0, 1fr));
	gap: var(--tcs-grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------- */
/* Card                                                                    */
/* ---------------------------------------------------------------------- */

.tcs-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--tcs-surface);
	border: var(--tcs-border);
	border-radius: var(--tcs-radius);
	overflow: hidden;
	transition:
		border-color var(--tcs-duration) var(--tcs-ease),
		box-shadow var(--tcs-duration) var(--tcs-ease);
}

/*
 * Metal edge. A 2px rule along the top of the card, the one place metal is
 * expressed as colour in the UI. Never a gradient, never a large fill.
 */
.tcs-product-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: var(--tcs-metal-none);
	z-index: var(--tcs-z-base);
}

.tcs-product-card--metal-gold::before     { background: var(--tcs-metal-gold); }
.tcs-product-card--metal-silver::before   { background: var(--tcs-metal-silver); }
.tcs-product-card--metal-platinum::before { background: var(--tcs-metal-platinum); }
.tcs-product-card--metal-copper::before   { background: var(--tcs-metal-copper); }

/* Products with no meaningful metal - accessories, publications. */
.tcs-product-card--metal-none::before {
	background: var(--tcs-rule);
}

.tcs-product-card:hover {
	border-color: var(--tcs-rule-strong);
	box-shadow: var(--tcs-shadow-raised);
}

/* Focus ring belongs to the card, not just the text link. */
.tcs-product-card:focus-within {
	outline: var(--tcs-focus-width) solid var(--tcs-focus-color);
	outline-offset: var(--tcs-focus-offset);
}

/*
 * Sold-out cards recede without disappearing. They stay legible and
 * browsable - this catalogue is largely a reference archive, and a collector
 * looking up an issue they missed still needs to read it.
 */
.tcs-product-card--soldout .tcs-product-card__media {
	opacity: 0.72;
}

/* ---------------------------------------------------------------------- */
/* Media                                                                   */
/* ---------------------------------------------------------------------- */

.tcs-product-card__media {
	position: relative;
	background: var(--tcs-plate);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.tcs-product-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Coins are photographed with margin; a little inset keeps them off the edge. */
	padding: var(--tcs-space-sm);
	transition: transform var(--tcs-duration-slow) var(--tcs-ease);
}

.tcs-product-card:hover .tcs-product-card__image {
	transform: scale(1.02);
}

/*
 * Honest empty state. This theme ships no invented coin photography, so a
 * missing image says so rather than substituting a generic placeholder.
 */
.tcs-product-card__image--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: var(--tcs-space-md);
	background:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 6px,
			var(--tcs-rule-faint) 6px,
			var(--tcs-rule-faint) 7px
		);
}

.tcs-product-card__image-note {
	background: var(--tcs-surface);
	padding: var(--tcs-space-2xs) var(--tcs-space-xs);
	border-radius: var(--tcs-radius-sm);
	color: var(--tcs-ink-faint);
	text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Body                                                                    */
/* ---------------------------------------------------------------------- */

.tcs-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--tcs-space-2xs);
	padding: var(--tcs-space-md);
}

.tcs-product-card__mint {
	color: var(--tcs-ink-faint);
}

.tcs-product-card__title {
	font-family: var(--tcs-font-serif);
	font-size: var(--tcs-text-md);
	font-weight: var(--tcs-weight-regular);
	line-height: var(--tcs-leading-snug);
	letter-spacing: var(--tcs-tracking-normal);
	margin: 0;
}

.tcs-product-card__link {
	color: var(--tcs-ink);
	text-decoration: none;
}

.tcs-product-card__link:hover {
	color: var(--tcs-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Stretch the title link across the card. No nested interactive elements. */
.tcs-product-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--tcs-z-base);
}

/* The link's own focus ring is redundant - the card carries it. */
.tcs-product-card__link:focus-visible {
	outline: none;
}

.tcs-product-card__spec {
	font-size: var(--tcs-text-xs);
	color: var(--tcs-ink-muted);
	font-variant-numeric: tabular-nums;
	margin: 0;
	max-width: none;
}

/* ---------------------------------------------------------------------- */
/* Footer - price and availability                                         */
/* ---------------------------------------------------------------------- */

.tcs-product-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--tcs-space-2xs) var(--tcs-space-xs);
	margin-top: auto;
	padding-top: var(--tcs-space-sm);
}

.tcs-product-card__price {
	font-size: var(--tcs-text-base);
	font-weight: var(--tcs-weight-semibold);
	color: var(--tcs-ink);
	margin: 0;
	max-width: none;
}

/* Reserved for the future spot-price feed. Renders nothing until enabled. */
.tcs-product-card__unit-price {
	display: block;
	font-size: var(--tcs-text-3xs);
	font-weight: var(--tcs-weight-regular);
	color: var(--tcs-ink-faint);
	letter-spacing: var(--tcs-tracking-normal);
}

/* ---------------------------------------------------------------------- */
/* Action                                                                  */
/* ---------------------------------------------------------------------- */

.tcs-product-card__action {
	position: relative;
	z-index: calc(var(--tcs-z-base) + 1); /* above the stretched title link */
	margin-top: var(--tcs-space-sm);
}

/* ---------------------------------------------------------------------- */
/* Bullion density - the Ledger borrowing                                  */
/*                                                                         */
/* Same component, same tokens, tighter rhythm and a suppressed serif.     */
/* Bullion buyers scan numbers; the catalogue voice steps back.            */
/* ---------------------------------------------------------------------- */

.tcs-context-bullion .tcs-product-card__body {
	padding: var(--tcs-space-sm);
	gap: var(--tcs-space-3xs);
}

.tcs-context-bullion .tcs-product-card__title {
	font-family: var(--tcs-font-sans);
	font-size: var(--tcs-text-sm);
	font-weight: var(--tcs-weight-medium);
	letter-spacing: var(--tcs-tracking-tight);
}

.tcs-context-bullion .tcs-product-card__price {
	font-size: var(--tcs-text-md);
}

.tcs-context-bullion .tcs-product-card__footer {
	padding-top: var(--tcs-space-xs);
}

/* ---------------------------------------------------------------------- */
/* Mobile                                                                  */
/* ---------------------------------------------------------------------- */

@media (max-width: 640px) {
	.tcs-product-card__body {
		padding: var(--tcs-space-sm);
	}

	.tcs-product-card__title {
		font-size: var(--tcs-text-base);
	}

	/*
	 * At two-up the footer has no room for a price and a badge side by side.
	 * Stacking keeps both fully readable rather than truncating either.
	 */
	.tcs-product-card__footer {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------- */
/* Print                                                                   */
/* ---------------------------------------------------------------------- */

@media print {
	.tcs-product-card {
		break-inside: avoid;
		box-shadow: none;
	}

	.tcs-product-card__action {
		display: none;
	}
}