/*
 * The article card (redesign 2026-10-30, article-card.php): one card for
 * "Read next" under an article and for every listing - the blog, its
 * categories, the test sections, the catalogue. Phone: a row, the picture
 * 120px on the left. Desktop: the picture on top, three to a row.
 * DESIGN.md, "Article card".
 */

.art-card {display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 14px; align-content: start; color: var(--graphite) !important; font-family: var(--sans); text-decoration: none !important;}
.art-card img, .art-card-blank {display: block; grid-row: 1 / 4; width: 120px; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--field);}
.art-card .cat {font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--form-deep);}
.art-card .t {display: block; margin: 0; padding: 0; font-size: 16px; line-height: 1.35; font-weight: 650; letter-spacing: 0; color: var(--graphite); text-align: left;}
.art-card .d {display: none; font-size: 14.5px; line-height: 1.45; color: var(--graphite-2);}
.art-card:hover .t {color: var(--form-deep); text-decoration: underline; text-underline-offset: .18em;}

@media (min-width: 1280px) {
	.art-card {grid-template-columns: 1fr; gap: 6px;}
	.art-card img, .art-card-blank {grid-row: auto; width: 100%; margin-bottom: 8px; border-radius: 10px;}
	.art-card .t {font-size: 18px; line-height: 1.35;}
	.art-card .d {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
}