/**
 * Component: spot breakdown
 *
 * Metal value and premium, directly beneath the price on live-priced bullion.
 *
 * Deliberately quiet. The reference this was modelled on inverts the whole
 * buy box to solid black, which shouts the premium louder than the price and
 * fights the warm paper this catalogue is set on. Here the panel is a sunk
 * plate with a hairline rule and a single divider: the figures are legible
 * and comparable, and the price above them stays the loudest thing in the
 * buy box.
 *
 * Two cells side by side at every width. These two numbers are read against
 * each other, so stacking them on a phone would break the comparison that is
 * the entire point of showing them.
 */

.tcs-spot-breakdown {
	margin: var(--tcs-space-sm) 0 0;
	background: var(--tcs-paper-sunk);
	border: var(--tcs-border);
	border-radius: var(--tcs-radius-sm);
}

/* ---------------------------------------------------------------------- */
/* The figures                                                             */
/* ---------------------------------------------------------------------- */

/*
 * Two cells for a retail customer, three for a trade one. Flex rather than a
 * fixed grid so the divider rule belongs to the cell and the count can change
 * without the CSS knowing about it.
 */
.tcs-spot-breakdown__grid {
	display: flex;
	margin: 0;
	padding: 0;
}

.tcs-spot-breakdown__cell {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--tcs-space-sm) var(--tcs-space-md);
	text-align: center;
}

.tcs-spot-breakdown__cell + .tcs-spot-breakdown__cell {
	border-left: 1px solid var(--tcs-rule-faint);
}

.tcs-spot-breakdown__label {
	margin: 0 0 var(--tcs-space-3xs);
	font-size: var(--tcs-text-2xs);
	font-weight: var(--tcs-weight-medium);
	letter-spacing: var(--tcs-tracking-label);
	text-transform: uppercase;
	color: var(--tcs-ink-muted);
}

.tcs-spot-breakdown__value {
	margin: 0;
	font-family: var(--tcs-font-mono);
	font-size: var(--tcs-text-lg);
	font-weight: var(--tcs-weight-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--tcs-ink);
	line-height: var(--tcs-leading-tight);
}

/*
 * The retail premium is context, not the price on offer. Muting it keeps the
 * trade buyer's own figure the one the eye lands on, and stops the panel
 * reading as two competing prices.
 */
.tcs-spot-breakdown__cell.is-muted .tcs-spot-breakdown__value {
	font-weight: var(--tcs-weight-regular);
	color: var(--tcs-ink-faint);
	text-decoration: line-through;
	text-decoration-color: var(--tcs-rule-strong);
}

/* Three figures need more room than two before they wrap. */
.tcs-spot-breakdown__grid[data-cells="3"] .tcs-spot-breakdown__cell {
	padding-inline: var(--tcs-space-sm);
}

.tcs-spot-breakdown__grid[data-cells="3"] .tcs-spot-breakdown__value {
	font-size: var(--tcs-text-md);
}

/* ---------------------------------------------------------------------- */
/* Working                                                                 */
/* ---------------------------------------------------------------------- */

/*
 * The sum written out. A buyer who wants to check the premium can, and one
 * who does not can ignore a single quiet line - which is why it is a footnote
 * rather than a third column.
 */
.tcs-spot-breakdown__note {
	margin: 0;
	padding: var(--tcs-space-2xs) var(--tcs-space-md);
	border-top: 1px solid var(--tcs-rule-faint);
	font-size: var(--tcs-text-2xs);
	color: var(--tcs-ink-faint);
	text-align: center;
	line-height: var(--tcs-leading-snug);
}

.tcs-spot-breakdown__note .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

.tcs-spot-breakdown__stamp::before,
.tcs-spot-breakdown__saving::before {
	content: "\00b7";
	margin: 0 0.4em;
	color: var(--tcs-rule-strong);
}

.tcs-spot-breakdown__saving {
	color: var(--tcs-success);
	font-weight: var(--tcs-weight-medium);
}

/*
 * Phones. Three figures in a 360px viewport is genuinely tight, so the label
 * type comes down and is allowed to take two lines cleanly rather than being
 * abbreviated into something that no longer says what it means. The columns
 * stay side by side at every width: these numbers are read against each
 * other, and stacking them would break the only comparison the panel exists
 * to make.
 */
@media (max-width: 600px) {
	.tcs-spot-breakdown__cell {
		padding: var(--tcs-space-xs) var(--tcs-space-3xs);
	}

	.tcs-spot-breakdown__label {
		font-size: 9px;
		letter-spacing: 0.02em;
		line-height: 1.25;
		text-wrap: balance;
	}

	.tcs-spot-breakdown__value {
		font-size: var(--tcs-text-sm);
	}

	.tcs-spot-breakdown__grid[data-cells="3"] .tcs-spot-breakdown__value {
		font-size: var(--tcs-text-xs);
	}

	.tcs-spot-breakdown__note {
		padding: var(--tcs-space-2xs) var(--tcs-space-sm);
		line-height: 1.4;
	}
}