/*
 * Frequency card (product page, LF and UHF side by side).
 *
 * Panel padding (48). The top slot is the big figure: "LF" at 72 / 125% in
 * the brand colour, the frequency right at 15, over the hairline. Then an
 * h3 at 26 (D6), body, and ruled format rows 52 tall (a plain list, not
 * links; link-list.css handles the row).
 *
 *   <div class="vdt-card__slot vdt-card__slot--figure">
 *     <span class="vdt-card__figure">LF</span><span class="vdt-card__figure-note">134.2 kHz</span>
 *   </div>
 */

@layer vdt.components {
	.vdt-card--frequency .vdt-card__slot--figure {
		align-items: baseline;
		min-height: 0;
		padding-bottom: var(--vdt-space-24);
	}

	.vdt-card__figure {
		color: var(--vdt-text-brand);
		font-size: var(--vdt-size-figure);
		font-stretch: var(--vdt-width-display);
		font-weight: var(--vdt-weight-semibold);
		line-height: 1;
		letter-spacing: var(--vdt-tracking-display);
	}

	.vdt-card__figure-note {
		color: var(--vdt-text-muted);
		font-size: var(--vdt-size-15);
		font-weight: var(--vdt-weight-medium);
	}

	.vdt-card--frequency .vdt-card__heading {
		font-size: var(--vdt-size-h3);
		font-stretch: var(--vdt-width-sub);
		line-height: var(--vdt-leading-h3);
	}

	.vdt-card--frequency .vdt-link-list {
		margin-top: var(--vdt-space-28);
	}

	/* The note under the format rows: 15 in grey. */
	.vdt-card--frequency .vdt-card__note {
		margin-top: var(--vdt-space-24);
		color: var(--vdt-text-muted);
		font-size: var(--vdt-size-15);
	}
}