/*
 * Ruled link list (D18): rows on hairlines with an arrow at the right.
 *
 *   compact   60 tall, 16 / 500. Home's Knowledge links (two columns) and
 *             the product resources list.
 *   feature   padded 28, 26 / 600 / 112%, with an optional description.
 *             Knowledge "Learn more".
 *   plain     52 tall, 17 / 500, no arrow, not links. The format rows in a
 *             frequency card.
 *
 *   <ul class="vdt-link-list [vdt-link-list--feature|--plain] [vdt-link-list--2]">
 *     <li><a class="vdt-link-list__row" href="…">
 *       <span class="vdt-link-list__label">Tag types</span>
 *       <span class="vdt-link-list__description">…</span>
 *       <?= svg(…arrow-right.svg) ?>
 *     </a></li>
 *   </ul>
 *
 * A row's arrow is the brand colour; on hover the label follows it.
 */

@layer vdt.components {
	.vdt-link-list {
		list-style: none;
		border-top: var(--vdt-rule-width) solid var(--vdt-hairline);
	}

	.vdt-link-list--2 {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--vdt-gap-tables);
		border-top: 0;
	}

	.vdt-link-list--2 > li {
		border-top: var(--vdt-rule-width) solid var(--vdt-hairline);
	}

	.vdt-link-list__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "label glyph" "description glyph";
		align-items: center;
		column-gap: var(--vdt-space-24);
		min-height: 3.75rem;
		padding-block: var(--vdt-space-12);
		border-bottom: var(--vdt-rule-width) solid var(--vdt-hairline);
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-16);
		font-weight: var(--vdt-weight-medium);
		line-height: 1.3;
		text-decoration: none;
		transition: color var(--vdt-duration) var(--vdt-easing);
	}

	.vdt-link-list__label {
		grid-area: label;
	}

	.vdt-link-list__description {
		grid-area: description;
		margin-top: var(--vdt-space-6);
		color: var(--vdt-text);
		font-size: var(--vdt-size-body-sm);
		font-weight: var(--vdt-weight-regular);
		line-height: var(--vdt-leading-body-sm);
	}

	.vdt-link-list__row > svg {
		grid-area: glyph;
		width: var(--vdt-glyph);
		height: var(--vdt-glyph);
		color: var(--vdt-text-brand);
		transition: translate var(--vdt-duration) var(--vdt-easing);
	}

	a.vdt-link-list__row:hover {
		color: var(--vdt-link-hover);
	}

	a.vdt-link-list__row:hover > svg {
		translate: 0.25rem 0;
	}

	/* A value on the right instead of an arrow (format rows: "ISO 11784/5"). */
	.vdt-link-list__value {
		grid-area: glyph;
		color: var(--vdt-text);
		font-size: var(--vdt-size-15);
		font-weight: var(--vdt-weight-regular);
		text-align: right;
	}

	/* ————————————————————————— Feature ————————————————————————— */

	.vdt-link-list--feature .vdt-link-list__row {
		min-height: 0;
		padding-block: var(--vdt-space-28);
		font-size: var(--vdt-size-h3);
		font-stretch: var(--vdt-width-sub);
		font-weight: var(--vdt-weight-semibold);
		line-height: var(--vdt-leading-h3);
	}

	.vdt-link-list--feature .vdt-link-list__description {
		margin-top: var(--vdt-space-8);
		font-stretch: var(--vdt-width-normal);
		font-size: var(--vdt-size-body);
		line-height: var(--vdt-leading-body);
	}

	/* ————————————————————————— Plain ————————————————————————— */

	.vdt-link-list--plain .vdt-link-list__row {
		min-height: 3.25rem;
		padding-block: var(--vdt-space-10);
		font-size: var(--vdt-size-body);
	}

	@media (max-width: 45rem) {
		.vdt-link-list--2 {
			grid-template-columns: minmax(0, 1fr);
		}

		.vdt-link-list--2 > li + li {
			border-top: 0;
		}
	}
}