/* Listings (restoration spec 4.2): home, archives, search results.
   Markup: patterns/entry.php inside core/post-template; the image block is
   inc/entry-image.php. Colours are palette tokens only, so dark mode is the
   token swap in dark.css and nothing here. */

/* One entry per rule-separated row. */
.wp-block-post-template > .wp-block-post {
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.wp-block-post-template > .wp-block-post:first-child {
	padding-top: 0;
}
.wp-block-post-template > .wp-block-post > * {
	margin-block: 0;
}
.wp-block-post-template > .wp-block-post .wp-block-post-title {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.15;
}
.wp-block-post-template > .wp-block-post .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Kicker and meta line: the same treatment as single posts (post.css, which is
   enqueued on single posts only, so the two shared rules are repeated here). */
.wp-block-post .department-kicker {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--emphasis-ink);
}
.wp-block-post .post-meta {
	align-items: baseline;
	gap: 0;
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}
.wp-block-post .post-meta > * {
	margin: 0;
}
.wp-block-post .post-meta > * + *::before {
	content: "·";
	margin-inline: 0.5em;
}
.wp-block-post .post-meta a {
	color: inherit;
}

/* The image. */
.entry-image {
	margin: 0;
}
.entry-image a {
	display: block;
}
.entry-image__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Lead story (li.is-lead-entry, image or not): larger title; its image, when
   it has one, above the kicker at the column's full width. */
.wp-block-post.is-lead-entry {
	display: flex;
	flex-direction: column;
}
.wp-block-post-template > .wp-block-post > .entry-image--lead {
	order: -1;
	margin-bottom: var(--wp--preset--spacing--30);
}
/* The title size (a single post's headline size), against the large of every
   other listing title. !important because the block's has-large-font-size class
   sets its size with !important (core's preset utility classes). */
.wp-block-post.is-lead-entry .wp-block-post-title {
	font-size: var(--wp--preset--font-size--title) !important;
}

/* Every other entry: the image is the last block in the markup. On a phone it
   moves above the text; with room, it sits to the right at a fixed 3:2. */
.entry-image--side .entry-image__img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
/* First-attached fallback charts and diagrams (PNG/GIF/SVG; featured images
   never get the class, see inc/entry-image.php): a cover crop cuts off axes
   and legends, so show the whole image on the surface ground instead (spec
   4.2 allows this for fallbacks only). */
.entry-image--graphic .entry-image__img {
	object-fit: contain;
	background-color: var(--wp--preset--color--surface);
}
.wp-block-post:has(> .entry-image--side) {
	display: flex;
	flex-direction: column;
}
.wp-block-post-template > .wp-block-post > .entry-image--side {
	order: -1;
	margin-bottom: var(--wp--preset--spacing--30);
}

@media (min-width: 48rem) {
	/* The text blocks fill the first column's rows in order; the image spans
	   them all. The trailing 1fr row takes up any height the image has over
	   the text, so the text rows stay packed at the top. */
	.wp-block-post:has(> .entry-image--side) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 11rem;
		grid-template-rows: repeat(4, auto) 1fr;
		column-gap: var(--wp--preset--spacing--40);
	}
	.wp-block-post:has(> .entry-image--side) > * {
		grid-column: 1;
	}
	.wp-block-post-template > .wp-block-post:has(> .entry-image--side) > .entry-image--side {
		grid-column: 2;
		grid-row: 1 / -1;
		margin-bottom: 0;
	}
}