/* Articles and pages: a reading column, with images and videos wider than the text */
kcvg-article,
kcvg-page {
	display: block;
	padding-bottom: var(--space-xl);
	/* shared by the header and the body: full width, a wide column for media, the text column */
	--grid-article:
		[full-start] minmax(var(--space-gutter), 1fr)
		[wide-start] minmax(0, calc((var(--size-wide) - var(--measure)) / 2))
		[text-start] min(var(--measure), 100% - 2 * var(--space-gutter))
		[text-end] minmax(0, calc((var(--size-wide) - var(--measure)) / 2))
		[wide-end] minmax(var(--space-gutter), 1fr)
		[full-end];
}

kcvg-article > article > header,
kcvg-page > article {
	display: grid;
	grid-template-columns: var(--grid-article);
}

kcvg-article > article > header > *,
kcvg-page > article > * {
	grid-column: text;
}

kcvg-article > article > header > figure,
kcvg-page > article > kcvg-article-body {
	grid-column: full;
}

/* titles start with the text and may run past it on wide screens */
kcvg-article h1,
kcvg-page h1 {
	grid-column: text-start / full-end;
	max-width: 18ch;
	padding-right: var(--space-gutter);
}

/* the featured image, full width */
kcvg-article > article > header > figure img {
	width: 100%;
	max-height: 80svh;
	object-fit: cover;
}

kcvg-article > article > header > figure figcaption {
	padding: var(--space-s) var(--space-gutter) 0;
	font-size: var(--font-size-small);
	font-style: italic;
	color: var(--color-text-muted);
	text-align: right;
}

kcvg-article > article > header > kcvg-article-context {
	margin-top: var(--space-l);
}

kcvg-article h1,
kcvg-page h1 {
	font-size: var(--font-size-title);
	margin-bottom: var(--space-m);
}

kcvg-page h1 {
	padding-top: var(--space-l);
}

kcvg-article > article > header > kcvg-article-meta {
	margin-bottom: var(--space-m);
}

kcvg-translations {
	display: block;
	font-size: var(--font-size-small);
	font-style: italic;
	color: var(--color-text-muted);
}

kcvg-translations p {
	margin: 0;
}

/* body: text in the reading column, media in the wide one */
kcvg-article-body {
	display: grid;
	grid-template-columns: var(--grid-article);
	margin-top: var(--space-s);
}

kcvg-article-body > * {
	grid-column: text;
}

kcvg-article-body > p:first-child {
	font-size: var(--font-size-lead);
}

kcvg-article-body > figure,
kcvg-article-body > iframe,
kcvg-article-body > kcvg-video,
kcvg-article-body > p:has(> iframe:only-child) {
	display: block;
	grid-column: full;
	margin: var(--space-l) 0;
}

@media (min-width: 40rem) {
	kcvg-article-body > figure,
	kcvg-article-body > iframe,
	kcvg-article-body > kcvg-video,
	kcvg-article-body > p:has(> iframe:only-child) {
		grid-column: wide;
	}
}

kcvg-article-body figure img {
	width: 100%;
	max-height: 85svh;
	object-fit: contain;
	background-color: var(--color-surface);
}

kcvg-article-body figcaption {
	padding: var(--space-s) var(--space-gutter) 0;
	font-size: var(--font-size-small);
	font-style: italic;
	color: var(--color-text-muted);
}

kcvg-article-body iframe {
	display: block;
	width: 100%;
	border: 0;
}

kcvg-article-body iframe[src*="youtube"],
kcvg-article-body iframe[src*="vimeo"] {
	height: auto;
	aspect-ratio: 16 / 9;
}

kcvg-article-body h1,
kcvg-article-body h2,
kcvg-article-body h3,
kcvg-article-body h4,
kcvg-article-body h5 {
	margin: var(--space-l) 0 var(--space-s);
	font-family: var(--font-display);
	line-height: 1.1;
}

/* some articles use top level headings in their text */
kcvg-article-body h1,
kcvg-article-body h2 {
	font-size: var(--font-size-h2);
	max-width: none;
	padding-right: 0;
	grid-column: text;
}

kcvg-article-body h3,
kcvg-article-body h4,
kcvg-article-body h5 {
	font-size: var(--font-size-h3);
}

/* headings link to themselves, see render-heading.html */
kcvg-article-body :is(h1, h2, h3, h4, h5) a {
	text-decoration: none;
}

kcvg-article-body blockquote {
	margin: var(--space-l) 0;
	padding-left: var(--space-m);
	border-left: 2px solid var(--tone);
	font-style: italic;
}

kcvg-article-body ul,
kcvg-article-body ol {
	padding-left: 1.25em;
}

/* useful links at the end of an article */
kcvg-article > article > footer {
	max-width: var(--measure);
	margin: var(--space-xl) auto 0;
	padding: var(--space-l) var(--space-gutter) 0;
	border-top: 1px solid var(--color-line);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

kcvg-article > article > footer ol {
	margin: 0;
	padding-left: 1.25em;
}

kcvg-article > article > footer li + li {
	margin-top: var(--space-s);
}

/* the other articles of the series */
kcvg-article > aside {
	margin-top: var(--space-xl);
	padding-top: var(--space-l);
	border-top: 1px solid var(--color-line);
}

kcvg-article > aside > h2 {
	max-width: var(--size-container);
	margin: 0 auto var(--space-l);
	padding: 0 var(--space-gutter);
	font-size: var(--font-size-h2);
}

kcvg-article > aside > kcvg-article-card {
	max-width: var(--size-container);
	margin-left: auto;
	margin-right: auto;
}