/* Listing components for modern hefte/series pages. Loaded after tokens.css,
   base.css and article.css, and only when a page sets 'css' => 'listing' in
   $artikel (php/artikel_meta.php -> $extraCss -> top.php). */

/* Intro with the floated facts box, which then lines up with the section edge
   via its negative right margin. flow-root contains the float. */
.article-intro {
	display: flow-root;
	padding: var(--space-3) var(--pad);
}

/* Centred masthead logo above the h1. */
.listing-logo {
	display: block;
	width: 165px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 12px;
}

/* The listing title sits under the centred logo, so it is centred too. */
.article-header h1 {
	text-align: center;
}

/* Facts list derived for listing pages: a dl instead of the article facts'
   table, so each row sizes its label and value independently. That keeps the
   box at `--w-aside` while letting a long value like the format stay on one
   line in a row whose label is short. Values are text, so they use the label
   size instead of the article facts' 18px figures. Rows are not clickable, so
   the article facts' row hover is absent here. */
.article-facts-listing dl {
	margin: 0;
	font-size: var(--fs-caption);
	line-height: 1.35;
}
.article-facts-listing dl > div {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 7px 0;
}
.article-facts-listing dl > div + div {
	border-top: 1px solid var(--line);
}
.article-facts-listing dl > div:last-child {
	padding-bottom: 0;
}
.article-facts-listing dt {
	flex: 0 1 auto;
	font-weight: 600;
	color: var(--muted);
}
.article-facts-listing dd {
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* Cover + contents per issue. The issue heading is a step smaller than a
   regular section h2 because there are many of them on the page. */
.article-section.issue h2 {
	font-size: 20px;
	line-height: 1.3;
}
.issue-body {
	display: grid;
	grid-template-columns: 145px minmax(0, 1fr);
	gap: var(--space-2);
	align-items: start;
}
.issue-cover {
	margin: 0;
	text-align: center;
}
.issue-cover img {
	display: block;
	width: 145px;
	height: auto;
	margin: 0 auto;
}
.issue-cover figcaption {
	margin-top: var(--space-1);
}
.issue-contents {
	margin: 0;
}
/* Compact contents rows; the comic-series link carries the emphasis. The
   more specific selectors are needed to beat `table.article-table` in
   article.css (margin, font size, cell padding, text alignment). */
table.article-table.issue-contents {
	margin: 0;
	font-size: var(--fs-small);
}
table.article-table.issue-contents td {
	padding-top: 5px;
	padding-bottom: 5px;
}
table.article-table.issue-contents tr:last-child td {
	border-bottom: 1px solid var(--line);
}
.issue-contents td:first-child a {
	font-weight: 700;
}
table.article-table td.issue-pages {
	text-align: right;
	vertical-align: top;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* Modern equivalent of the legacy span.nachdruck: small and muted on its own
   line under the title. */
.issue-reprint {
	display: block;
	margin-top: 1px;
	font-size: var(--fs-micro);
	line-height: inherit;
	color: var(--muted);
	text-transform: none;
	letter-spacing: 0;
}
/* Plain-text note under an issue title (e.g. Besonderheiten), not a box.
   `.article` in the selector beats the `.article p` margin default. */
.article .issue-note {
	margin: calc(-1 * var(--space-1)) 0 var(--space-2);
	font-size: var(--fs-small);
	color: var(--ink-soft);
}
.article .issue-note strong {
	color: var(--ink);
}

@media (max-width: 480px) {
	.issue-body {
		grid-template-columns: 1fr;
	}
}

@media print {
	.article-facts-listing dl {
		font-size: 10pt; /* matches the article facts' print size */
	}
	.issue {
		break-inside: avoid;
	}
	.issue-cover img {
		width: 120px;
	}
}