/*
 * Card: the shell every card family shares, and the grid they sit in.
 *
 * A card is a surface (white on a grey section, grey on a white one) with a
 * padding step (D14): compact 32, card 40, panel 48. It opens with a top
 * slot on a hairline (D17): an optional icon left, an optional label right,
 * and the hairline alone when the card has neither, so a row of cards keeps
 * its top edge. Then a heading, body at 16 (D4), and an optional link pinned
 * to the bottom. A card that is one link uses the link-cover pattern from
 * link.css so the whole surface is clickable.
 *
 *   <article class="vdt-card vdt-card--proof">
 *     <div class="vdt-card__slot"><svg class="vdt-icon">…</svg><span class="vdt-range">LF · HF · UHF</span></div>
 *     <h3 class="vdt-card__heading vdt-h3">…</h3>
 *     <div class="vdt-card__body"><p>…</p></div>
 *     <div class="vdt-card__foot"><a class="vdt-link">…</a></div>
 *   </article>
 *
 * The families add what differs: cards/proof.css, topic.css,
 * product-support.css, frequency.css, parts.css, benefit.css.
 */

@layer vdt.components {
	/* ————————————————————————— Grid ————————————————————————— */

	.vdt-card-grid {
		display: grid;
		grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
		gap: var(--vdt-gap-grid);
	}

	.vdt-card-grid--2 { --columns: 2; }
	.vdt-card-grid--3 { --columns: 3; }
	.vdt-card-grid--4 { --columns: 4; }

	.vdt-card-grid--tight {
		gap: var(--vdt-gap-tight);
	}

	@media (max-width: 60rem) {
		.vdt-card-grid--3,
		.vdt-card-grid--4 {
			--columns: 2;
		}
	}

	@media (max-width: 45rem) {
		.vdt-card-grid,
		.vdt-card-grid--2,
		.vdt-card-grid--3,
		.vdt-card-grid--4 {
			--columns: 1;
		}
	}

	/* ————————————————————————— Shell ————————————————————————— */

	.vdt-card {
		display: flex;
		flex-direction: column;
		padding: var(--vdt-pad-card);
		background: var(--vdt-surface);
		color: var(--vdt-text);
		font-size: var(--vdt-size-body-sm);
		line-height: var(--vdt-leading-body-sm);
	}

	.vdt-card--compact {
		padding: var(--vdt-pad-compact);
	}

	.vdt-card--panel {
		padding: var(--vdt-pad-panel);
	}

	/* Top slot: hairline under it, icon left, label right. */
	.vdt-card__slot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vdt-space-16);
		/* Border-box: the icon's height plus the padding and the rule, so an empty slot is as tall as a filled one. */
		min-height: calc(var(--vdt-icon) + var(--vdt-space-20) + var(--vdt-rule-width));
		padding-bottom: var(--vdt-space-20);
		margin-bottom: var(--vdt-space-28);
		border-bottom: var(--vdt-rule-width) solid var(--vdt-hairline);
	}

	/* A label on its own sits right; an icon on its own stays left. */
	.vdt-card__slot > :only-child:not(.vdt-icon) {
		margin-left: auto;
	}

	.vdt-card__slot .vdt-icon {
		width: var(--vdt-icon);
		height: var(--vdt-icon);
	}

	.vdt-card__heading {
		color: var(--vdt-text-heading);
		transition: color var(--vdt-duration) var(--vdt-easing);
	}

	.vdt-card__heading a {
		text-decoration: none;
	}

	.vdt-card__body {
		margin-top: var(--vdt-space-16);
	}

	.vdt-card__body > * + * {
		margin-top: var(--vdt-flow-para);
	}

	.vdt-card__foot {
		margin-top: auto;
		padding-top: var(--vdt-space-32);
	}

	/* An image well at the top of a card, in the deeper grey. */
	.vdt-card__well {
		display: grid;
		place-items: center;
		min-height: 22.5rem;
		margin: calc(var(--vdt-pad-card) * -1) calc(var(--vdt-pad-card) * -1) var(--vdt-space-40);
		padding: var(--vdt-space-32);
		background: var(--vdt-well);
	}

	.vdt-card--panel .vdt-card__well {
		margin: calc(var(--vdt-pad-panel) * -1) calc(var(--vdt-pad-panel) * -1) var(--vdt-space-40);
	}

	.vdt-card__well img {
		width: 100%;
		height: auto;
		object-fit: contain;
		--vdt-render-scale: 0.6;
		filter: var(--vdt-shadow-render-light);
	}

	@media (max-width: 60rem) {
		.vdt-card,
		.vdt-card--panel {
			padding: var(--vdt-pad-compact);
		}

		.vdt-card__well,
		.vdt-card--panel .vdt-card__well {
			min-height: 16rem;
			margin: calc(var(--vdt-pad-compact) * -1) calc(var(--vdt-pad-compact) * -1) var(--vdt-space-32);
		}
	}
}