/* Article lists: page header, filters and article cards */
kcvg-article-list {
	display: block;
	max-width: var(--size-container);
	margin: 0 auto;
	padding: var(--space-l) 0 var(--space-xl);
}

kcvg-article-list > header {
	padding: 0 var(--space-gutter);
	margin-bottom: var(--space-m);
}

kcvg-article-list > header h1 {
	font-size: var(--font-size-title);
}

kcvg-article-list > header p {
	max-width: var(--measure);
	margin: var(--space-s) 0 0;
	color: var(--color-text-muted);
}

/* filters: one row to swipe on small screens, wrapped on large ones */
kcvg-article-filters {
	display: block;
	margin-bottom: var(--space-l);
}

kcvg-article-filters nav {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	padding: var(--space-s) var(--space-gutter);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	font-family: var(--font-display);
	font-size: var(--font-size-ui);
}

kcvg-article-filters nav::-webkit-scrollbar {
	display: none;
}

kcvg-article-filters p {
	flex-shrink: 0;
	margin: 0 0 0 var(--space-s);
	color: var(--color-text-muted);
	font-style: italic;
}

kcvg-article-filters ul {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-s);
	list-style: none;
	margin: 0;
	padding: 0;
}

kcvg-article-filters a {
	display: flex;
	align-items: center;
	min-height: var(--size-target);
	padding: 0 var(--space-m);
	border: 1px solid var(--tone);
	border-radius: var(--radius-filter);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	scroll-snap-align: start;
	transition: background-color var(--duration-quick), color var(--duration-quick);
}

kcvg-article-filters a:hover,
kcvg-article-filters a[aria-current] {
	background-color: var(--tone);
	color: var(--color-background);
}

kcvg-article-filters a:not([style]) {
	--tone: var(--color-text);
}

@media (min-width: 64rem) {
	kcvg-article-filters nav {
		flex-wrap: wrap;
		overflow: visible;
	}
}

/* an article in a list */
kcvg-article-card {
	display: block;
	padding: 0 var(--space-gutter);
	margin-bottom: var(--space-xl);
	transition: opacity var(--duration-quick);
}

kcvg-article-card a {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: var(--space-s) var(--space-l);
	text-decoration: none;
}

/* full width image on small screens */
kcvg-article-card figure {
	margin: 0 calc(-1 * var(--space-gutter)) var(--space-xs);
	overflow: hidden;
}

kcvg-article-card img {
	width: 100%;
	aspect-ratio: var(--ratio-card-image);
	object-fit: cover;
	transition: transform var(--duration-slow);
}

kcvg-article-card a:hover img {
	transform: scale(1.03);
}

kcvg-article-card h2 {
	font-size: var(--font-size-card-title);
}

kcvg-article-card a:hover h2 {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

kcvg-article-card p {
	max-width: var(--measure);
	margin: 0;
	color: var(--color-text-muted);
	line-height: 1.55;
}

@media (min-width: 40rem) {
	kcvg-article-card a {
		grid-template-columns: var(--columns-card);
		/* text rows keep their height, the last one takes the rest of the image height */
		grid-template-rows: repeat(3, min-content) 1fr;
	}
	kcvg-article-card figure {
		grid-row: 1 / span 4;
		margin: 0;
	}
	kcvg-article-card a > :not(figure) {
		grid-column: 2;
	}
}

/* articles in another language than the page */
kcvg-article-card[other-language] {
	opacity: var(--opacity-other-language);
}

kcvg-article-card[other-language] h2 {
	font-size: calc(var(--font-size-card-title) * var(--scale-other-language));
}

kcvg-article-card[other-language]:hover,
kcvg-article-card[other-language]:focus-within {
	opacity: 1;
}

/* theme and series of an article, in the theme's color */
kcvg-article-context {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-m);
	font-family: var(--font-display);
	font-size: var(--font-size-ui);
	font-weight: 600;
	color: var(--tone);
}

kcvg-article-context a {
	display: inline-flex;
	align-items: center;
	min-height: var(--size-target);
	text-decoration: none;
}

kcvg-article-context a:hover {
	text-decoration: underline;
}

kcvg-article-series {
	font-weight: 500;
	font-style: italic;
	color: var(--color-text-muted);
}

/* date, reading time and languages */
kcvg-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs) var(--space-m);
	font-family: var(--font-display);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

kcvg-article-languages ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

kcvg-article-languages [aria-current] {
	color: var(--color-text);
	font-weight: 700;
}

kcvg-article-languages a {
	display: inline-flex;
	align-items: center;
	min-height: var(--size-target);
}