/**
 * The strip of other cars at the foot of a single car's content column.
 *
 * The grid itself is .hauto-car-grid from layout.css; the narrower track
 * minimum is because this sits in the content column beside a 400px aside,
 * where the archive's 280px minimum only ever fits two cards.
 */

@layer components {
	.hauto-car-similar {
		margin-block-start: var(--wp--preset--spacing--70);
		padding-block-start: var(--wp--preset--spacing--60);
		border-top: 1px solid var(--wp--preset--color--border);
	}

	/* Heading and the way out to the archive share a baseline; they stack on
	   a narrow column rather than letting a long Lithuanian heading crush the
	   link. */
	.hauto-car-similar__header {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
		margin-block-end: var(--wp--preset--spacing--40);
	}

	.hauto-car-similar__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.hauto-car-similar__all {
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--small);
		text-decoration: none;
	}

	.hauto-car-similar__all:hover,
	.hauto-car-similar__all:focus-visible {
		color: var(--wp--preset--color--primary-strong);
		text-decoration: underline;
	}

	.hauto-car-similar__arrow {
		display: inline-block;
		transition: transform 150ms ease;
	}

	.hauto-car-similar__all:hover .hauto-car-similar__arrow {
		transform: translateX(0.25em);
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-car-similar__arrow {
			transition: none;
		}

		.hauto-car-similar__all:hover .hauto-car-similar__arrow {
			transform: none;
		}
	}

	.hauto-car-similar .hauto-car-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	}

	/*
	 * A card here is 220px wide, not 300, so the archive's auto-fit spec grid
	 * drops to a single column and the card grows to eight rows of one chip.
	 * Two fixed columns instead, and only the first four chips: this is a way
	 * on to the next car, not a second spec table. The rest are one click
	 * away, and each chip's tooltip still carries what the ellipsis cuts.
	 */
	.hauto-car-similar .hauto-car-card__specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hauto-car-similar .hauto-car-card__spec:nth-child(n + 5) {
		display: none;
	}
}