/*
 * Topic card (RFID Knowledge landing).
 *
 * Two by two, padding 40. The top slot holds the range label right
 * ("LF · HF · UHF") and an optional icon left. h3 at 32 / 112%, body 17, the
 * text link pinned to the bottom. The whole card is the link: the anchor is
 * the heading's, covering the card (link.css).
 *
 *   <article class="vdt-card vdt-card--topic vdt-link-cover">
 *     …
 *     <h3 class="vdt-card__heading vdt-link-cover__heading"><a class="vdt-link-cover__target" href="…">…</a></h3>
 *     …
 *     <div class="vdt-card__foot"><span class="vdt-link">Read about tags <?= svg(…) ?></span></div>
 *   </article>
 */

@layer vdt.components {
	.vdt-card--topic .vdt-card__heading {
		font-size: var(--vdt-size-h3-lg);
		font-stretch: var(--vdt-width-sub);
		line-height: var(--vdt-leading-h3-lg);
		letter-spacing: var(--vdt-tracking-h3);
	}

	.vdt-card--topic .vdt-card__body {
		margin-top: var(--vdt-space-20);
		font-size: var(--vdt-size-body);
		line-height: var(--vdt-leading-body);
	}

	.vdt-card--topic:hover .vdt-link {
		text-decoration-color: currentColor;
	}
}