/* Post Summary */

.block-post-listing__header {
	text-align: center;
	margin-bottom: 1.875rem;
}

/* Section headings. A listing's heading is styled by where it sits (first in the block's header)
   and by the Styles and alignment an editor picks for it, never by a hidden class:
   - Default: the heading face, centred between brass rules; the intro under it centred, 600px
   - Left Line: left, one brass line running right, whatever the alignment; the intro left
   - Section label: the small caps label (inc/roundup.php)
   On posts and in the sidebar the heading is the small caps label whatever its style (below). */
.block-post-listing__header > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.15;
}
.block-post-listing__header > :is(h1, h2, h3, h4, h5, h6):not(.is-style-line, .is-style-section-label) {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 24px;
	text-align: center;
}
.block-post-listing__header > :is(h1, h2, h3, h4, h5, h6):not(.is-style-line, .is-style-section-label)::before,
.block-post-listing__header > :is(h1, h2, h3, h4, h5, h6):not(.is-style-line, .is-style-section-label)::after {
	content: "";
	flex: 1 1 auto;
	width: auto; /* the Left Line style sets its line to 100% wide */
	height: 1px;
	margin-top: 0;
	background: var(--wp--preset--color--quaternary);
}
/* Phones: the rules move into the line of text, close to the words - the same rule as the
   Center Line heading style, from the center-line-phone mixin in _blocks-core.scss. */

/* The intro under the heading */
.block-post-listing .block-post-listing__header > p {
	margin: 0 0 26px;
}
.block-post-listing__header > :is(h1, h2, h3, h4, h5, h6):not(.is-style-line, .is-style-section-label) + p {
	text-align: center;
	/* The article measure, not 600px: a section intro of two or three lines reads better a
	   little wider under the heading's rules. */
	max-width: var(--wp--custom--layout--content);
	margin-left: auto;
	margin-right: auto;
}
.block-post-listing .block-post-listing__header > .is-style-line + p {
	text-align: left;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* On posts, after the post and in the sidebar: the heading is a small caps label, no rules */
.single .block-post-listing .block-post-listing__header > :first-child,
.post-type-post .editor-styles-wrapper .block-post-listing .block-post-listing__header > :first-child,
.block-area-after-post .block-post-listing .block-post-listing__header > :first-child,
.block-area-sidebar .block-post-listing .block-post-listing__header > :first-child {
	display: block;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(1.25rem, 2.1vw, 1.3125rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1.5rem;
}
.single .block-post-listing .block-post-listing__header > :first-child::before,
.single .block-post-listing .block-post-listing__header > :first-child::after,
.post-type-post .editor-styles-wrapper .block-post-listing .block-post-listing__header > :first-child::before,
.post-type-post .editor-styles-wrapper .block-post-listing .block-post-listing__header > :first-child::after,
.block-area-after-post .block-post-listing .block-post-listing__header > :first-child::before,
.block-area-after-post .block-post-listing .block-post-listing__header > :first-child::after,
.block-area-sidebar .block-post-listing .block-post-listing__header > :first-child::before,
.block-area-sidebar .block-post-listing .block-post-listing__header > :first-child::after {
	content: none;
}

.post-summary {
	position: relative;
	isolation: isolate;
}

.post-summary__content {
	padding-top: 12px;
	padding-bottom: 20px;
}

.post-summary .post-summary__content > * {
	margin: 0;
}

.post-summary .post-summary__content > * + * {
	margin-top: 8px;
}

/* Card titles: Figtree 18px bold, centered under the photo (the sidebar recipes layout sets its
   own). Fraunces is kept for section headings and the featured layouts, so a recipe name and a
   heading never share a face */
.post-summary .post-summary__title,
.editor-styles-wrapper .post-summary .post-summary__title {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	/* Black unless a band sets --cwp-text-color (the dark band's mist). Without this the name took the
	   sitewide h3 colour (Brass Dark) wherever no band set the variable. */
	color: var(--cwp-text-color, var(--wp--preset--color--black));
}

.post-summary__title a,
.editor-styles-wrapper .post-summary .post-summary__title a {
	color: inherit; /* the name's colour, set on the heading above */
	text-decoration: none;
}

/* Hover: a brass underline, like the content links and the TOC. Not on a card with a photo
   frame (archive cards and the 6up Carousel): there the frame is the hover, and the name stays put. */
.post-summary:not(.is-archive-card, .layout-6up-carousel .post-summary) .post-summary__title a:is(:focus, :hover) {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--quaternary);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.post-summary__image img {
	width: 100%;
}

/* Archive grid cards (category, diet, season and search pages): a brass tag with white caps
   (white with brass caps on hover) on the photo's top-left corner naming a diet (or, on diet and season pages, a category), the title
   left-aligned, and "5 MIN · ★ 4.8" in Brass Dark caps beneath it */
.post-summary.is-archive-card .post-summary__image,
.layout-6up-carousel .post-summary .post-summary__image {
	position: relative; /* holds the tag and the shared brass hover frame (_blocks-core.scss) */
}
.post-summary__tag {
	position: absolute;
	top: var(--wp--custom--photo-frame--tag); /* just inside the corner of the hover frame (theme.json) */
	left: var(--wp--custom--photo-frame--tag);
	padding: 6px 10px;
	background: var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
}
a.post-summary__tag:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--quaternary);
}
/* The whole photo is a link, so hovering it (or reaching it by keyboard) draws a thin brass
   frame over the image and flips the tag to its reversed colours - the same pair the tag shows
   when you hover the tag itself. The tag sits just inside the frame's corner, with a small gap. */
/* (The frame itself is the shared photo frame in _blocks-core.scss, "Brass photo frame".) */
.post-summary.is-archive-card:is(:hover, :focus-within) .post-summary__tag {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--quaternary);
}

/* A recipe card is one link however you reach it: hovering the photo or the name draws the
   frame and flips the tag, both together. The name itself stays as it is (no underline). */

.post-summary.is-archive-card .post-summary__title {
	text-align: left;
	text-wrap: balance;
}
.post-summary.is-archive-card .post-summary__meta {
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
}
.post-summary.is-archive-card .post-summary__dot {
	color: var(--wp--preset--color--quaternary);
}
/* Carousels (6-up): the name and the "5 MIN · ★ 4.8" line both centred under the photo, in the
   same small brass caps as the grid cards */
.layout-6up-carousel .post-summary .post-summary__title { /* outranks the archive card's left-aligned name */
	text-align: center;
}
.layout-6up-carousel .post-summary__meta {
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
}
/* The searchable recipe grid at the foot of category pages: name and meta centred under the photo
   (the landing-page sections above it keep them left) */
.archive-listing .post-summary.is-archive-card .post-summary__title,
.archive-listing .post-summary.is-archive-card .post-summary__meta {
	text-align: center;
}

.layout-sidebar-grid .post-summary__image img,
.layout-sidebar-list .post-summary__image img {
	aspect-ratio: 1;
	object-fit: cover;
}

/* Category label above the title: breadcrumb style (11px bold caps, Green), no dashes */
.post-summary .entry-category,
.post-summary .entry-category a {
	color: var(--wp--preset--color--green);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	font-style: normal;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	line-height: 1.2;
	text-transform: uppercase;
}

.post-summary .post-summary__excerpt {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--medium);
}

/* More Link */

.block-post-listing footer {
	text-align: center;
	margin-top: 2.5rem;
}

.block-post-listing__more {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--wp--custom--color--outline-text);
	border: 1px solid var(--wp--custom--color--outline-border);
	border-radius: var(--wp--custom--border-radius--button);
	padding: 0.625rem 1.25rem;
	display: inline-block;
}

.block-post-listing__more:is(:focus, :hover) {
	background-color: var(--wp--custom--color--outline-bg-state);
	color: var(--wp--custom--color--outline-text-state);
	border-color: var(--wp--custom--color--outline-bg-state);
}

.editor-styles-wrapper .block-post-listing__more {
	pointer-events: none;
	text-decoration: none;
}

/* Layouts */

.block-post-listing__inner {
	display: grid;
	grid-template-columns: repeat( var(--cwp-columns, 1), 1fr );
	column-gap: 20px;
	row-gap: 30px;
}

.layout-sidebar-grid {
	--cwp-columns: 2;
}

.layout-6up-carousel .slick-slide .post-summary {
	padding: 0 0.9375rem;
}

@media (max-width: 899px) {
	.layout-6up-carousel .block-post-listing__inner.slick-slider {
		margin-left: calc(-1 * var(--wp--custom--layout--padding));
		margin-right: calc(-1 * var(--wp--custom--layout--padding));
		display: grid;
		grid-template-areas:
			"carousel carousel"
			"prev next";
		grid-auto-columns: 1fr;
		column-gap: 1.25rem;
		row-gap: 1.5rem;
	}

	.layout-6up-carousel .slick-prev {
		grid-area: prev;
		justify-self: end;
	}
	.layout-6up-carousel .slick-next {
		grid-area: next;
		justify-self: start;
	}
	.layout-6up-carousel .slick-list {
		grid-area: carousel;
	}
}

@media (max-width: 767px) {
	/* Phones: tighter rows in recipe grids */
	.block-post-listing__inner {
		row-gap: 18px;
	}

	.post-summary__content {
		padding-bottom: 6px;
	}
}

/* 3up, 4up Grid and 6up List (the sections on category landing pages): the same recipe card as the
   grids - diet tag on the photo, "5 MIN · ★ 4.8" under the name, the brass frame on hover - with
   the name and the line centred, as in the other landing-page sections. Phones: the first card full width (its
   photo cropped 4:3, so it isn't a screen tall), then the other two side by side, rather than
   three full-width cards in a column. */
:is(.layout-3up-full, .layout-4up-grid, .layout-6up-list) .post-summary.is-archive-card :is(.post-summary__title, .post-summary__meta) {
	text-align: center;
}

@media (max-width: 600px) {
	.layout-3up-full {
		--cwp-columns: 2;
	}

	.layout-3up-full .post-summary:first-child {
		grid-column: 1 / -1;
	}

	.layout-3up-full .post-summary:first-child .post-summary__image img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}
}

@media (max-width: 600px) {

	.post-summary.m-list {
		display: grid;
		gap: 16px;
		grid-template-columns: 138px 1fr;
	}
}

@media (min-width: 601px) {

	.layout-3up-full {
		--cwp-columns: 3;
	}

	.layout-6up-list {
		--cwp-columns: 6;
	}

	.layout-6up-list .post-summary {
		text-align: center;
	}

	.post-summary.d-list {
		display: grid;
		gap: 16px;
		grid-template-columns: 120px 1fr;
		align-items: center;
	}

	.post-summary.d-list .post-summary__content {
		padding: 0;
	}

}

@media (min-width: 768px) {
	.block-post-listing__inner {
		column-gap: 30px;
	}
}

@media (min-width: 900px) {
	.layout-6up-carousel {
		--cwp-columns: 6;
	}

	.layout-6up-carousel .slick-slider {
		margin-left: calc(-1 * 0.9375rem);
		margin-right: calc(-1 * 0.9375rem);
	}
}


/* Sidebar Recipes (2026) layout
   Brass Dark caps heading, then rows separated by brass rules: 88px 4:5 photo, bold title and the
   "★ 4.8 • 5 min • 203 cal" line in Brass Dark caps. Sits on the linen sidebar with no card.
--------------------------------------------- */

.layout-sidebar-recipes .block-post-listing__header {
	text-align: left;
	margin-bottom: 0;
}
.block-post-listing.layout-sidebar-recipes .block-post-listing__header > :first-child,
.block-area-sidebar .block-post-listing.layout-sidebar-recipes .block-post-listing__header > :first-child {
	margin: 0 0 4px;
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-optical-sizing: auto;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.15;
	color: var(--wp--preset--color--primary);
}
.layout-sidebar-recipes .block-post-listing__inner {
	display: block;
}
.layout-sidebar-recipes .post-summary {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--wp--preset--color--quaternary);
	background: none;
	box-shadow: none;
}
.layout-sidebar-recipes .post-summary:first-child {
	border-top: 0;
	padding-top: 8px;
}
.layout-sidebar-recipes .post-summary:last-child {
	padding-bottom: 0;
}
.layout-sidebar-recipes .post-summary__image {
	line-height: 0;
}
.layout-sidebar-recipes .post-summary__image img {
	display: block;
	width: 88px;
	height: auto;
	aspect-ratio: 1; /* square thumbnails */
	object-fit: cover;
	border-radius: var(--wp--custom--border-radius--small);
	margin: 0;
}
.layout-sidebar-recipes .post-summary__content {
	padding: 0;
	min-width: 0;
	text-align: left;
}
.block-post-listing.layout-sidebar-recipes .post-summary .post-summary__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
}
.layout-sidebar-recipes .post-summary__title a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}
.layout-sidebar-recipes .post-summary__title a:is(:hover, :focus) {
	color: var(--wp--preset--color--green);
}
.layout-sidebar-recipes .post-summary__meta {
	display: block;
	margin-top: 4px;
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
}
.layout-sidebar-recipes .post-summary__rating span[aria-hidden],
.layout-sidebar-recipes .post-summary__dot {
	color: var(--wp--preset--color--quaternary);
}

/* Category pages (Cultivate Pro category pages): section heading sits close to its description */
.cultivate-category-page .block-post-listing__header h2 {
	margin-bottom: 12px;
}

.cultivate-category-page .block-post-listing__header h2 + p {
	margin-top: 0;
}

/* Phones: the sidebar's popular-recipes rows read a step larger (the sidebar runs full width there) */
@media (max-width: 767px) {
	.block-post-listing.layout-sidebar-recipes .post-summary .post-summary__title {
		font-size: 1.125rem;
	}
	.layout-sidebar-recipes .post-summary__meta {
		margin-top: 6px;
	}
}


/* Featured + 4 (2026): one big tile on the left, a 2x2 of small cards on the right. The big
   tile's photo stretches so the tile ends level with the stack; under it the recipe name in
   Fraunces, the "stars | time | calories" line over a brass rule, an excerpt and a button
--------------------------------------------- */

.layout-featured-4 .block-post-listing__inner {
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 20px;
	row-gap: 24px;
}
.layout-featured-4 .post-summary--featured {
	grid-column: 1;
	grid-row: 1 / 3;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	margin-right: 10px;
}
.layout-featured-4 .post-summary--featured .post-summary__image {
	position: relative; /* holds the absolutely placed photo inside its box on every page, not only on category archives */
	min-height: 0; /* the photo takes whatever the text leaves, so it never runs over the title */
	overflow: hidden;
}
.layout-featured-4 .post-summary--featured .post-summary__content {
	padding-bottom: 0; /* the button's foot sits level with the stack's last meta line */
}
.layout-featured-4 .post-summary--featured .post-summary__image > a:first-child {
	display: block;
	height: 100%;
}
.layout-featured-4 .post-summary--featured .post-summary__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.layout-featured-4 .post-summary--mini .post-summary__image img {
	aspect-ratio: 1;
	object-fit: cover;
}
.layout-featured-4 .post-summary--mini .post-summary__title {
	font-size: 16px;
}

/* Featured and Spotlight type */
.post-summary--featured .post-summary__title,
.post-summary--spotlight .post-summary__title,
.block-post-listing .post-summary--featured .post-summary__title,
.block-post-listing .post-summary--spotlight .post-summary__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* the section H2 size */
	line-height: 1.15;
	text-align: left;
}
.post-summary__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--quaternary);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
}
.post-summary__stars {
	color: var(--wp--preset--color--quaternary);
	letter-spacing: 0.02em;
	font-size: 14px;
	margin-right: 4px; /* a little air between the stars and the rating ("★★★★★ 5.0") */
}
.post-summary__bar {
	color: var(--wp--preset--color--quaternary);
}
.post-summary .post-summary__excerpt {
	margin-top: 12px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--green);
}
.post-summary .post-summary__action {
	margin-top: 28px;
}
.post-summary__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 24px;
	background: var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--border-radius--button); /* the corner every site button shares (theme.json) */
}
/* Hover/focus: white with a Brass Dark label and a brass edge, on light and dark bands alike -
   the hover every brass button on the site shares (see the Brass button in _blocks-core.scss). */
.post-summary__button:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--brass-dark);
}

/* Spotlight (2026): the recipe card's header as a section. Dark panel, text left, photo inset on
   the right with a brass keyline; on phones the photo comes first */
.layout-spotlight .block-post-listing__inner {
	grid-template-columns: minmax(0, 1fr);
}
.post-summary--spotlight {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 50 / 50: two grid columns each */
	gap: 0 30px;
	padding: 24px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--color--mist);
}
.post-summary--spotlight .post-summary__image {
	order: 2;
	outline: 1px solid var(--wp--preset--color--quaternary);
	outline-offset: 8px;
	margin: 9px; /* the keyline sits 1px inside the panel edge, evenly all round */
	position: relative;
	min-height: 320px;
}
.post-summary--spotlight .post-summary__image > a:first-child {
	display: block;
	height: 100%;
}
.post-summary--spotlight .post-summary__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-summary--spotlight .post-summary__content {
	order: 1;
	padding: 16px 0; /* text starts on the grid's left edge, like the cards above */
	align-self: center;
}
.post-summary--spotlight .post-summary__eyebrow {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-transform: uppercase;
	color: var(--wp--preset--color--quaternary);
}
.post-summary--spotlight .post-summary__title {
	color: var(--wp--preset--color--background);
}
.post-summary--spotlight .post-summary__line {
	color: var(--wp--preset--color--quaternary);
}
.post-summary--spotlight .post-summary__excerpt {
	color: var(--wp--custom--color--mist);
}

/* The Spotlight never sits in a boxed panel: the section is the panel, so the panel loses its own
   padding and the section's padding frames the photo, evenly top and bottom.
   Default: on the page's ivory; Linen band: on linen; Dark band: the dark green band */
.layout-spotlight .post-summary--spotlight {
	padding: 0;
}
.block-post-listing.layout-spotlight {
	padding-top: var(--wp--custom--layout--section-padding);
	padding-bottom: var(--wp--custom--layout--section-padding);
}
/* Default and Linen band: no dark panel; Ink title and text, Brass Dark eyebrow and recipe line */
.block-post-listing.layout-spotlight:not(.is-style-dark) .post-summary--spotlight {
	background: none;
	color: var(--wp--preset--color--black);
}
.block-post-listing.layout-spotlight:not(.is-style-dark) .post-summary--spotlight :is(.post-summary__title, .post-summary__title a, .post-summary__excerpt) {
	color: var(--wp--preset--color--black);
}
.block-post-listing.layout-spotlight:not(.is-style-dark) .post-summary--spotlight :is(.post-summary__eyebrow, .post-summary__line) {
	color: var(--wp--preset--color--brass-dark);
}
/* an empty header (no heading typed) takes no room: the editor still prints the wrapper div,
   whose bottom margin was pushing the content down */
.block-post-listing > header:not(:has(h1, h2, h3, h4, p)) {
	display: none;
}

/* Dark band / Linen band block styles: the section paints a full-width band, its heading centred
   between brass rules, an intro paragraph centred beneath */
.block-post-listing.is-style-dark,
.block-post-listing.is-style-linen {
	/* full-width the way the theme's alignfull groups are: out over the content padding, the
	   section's own content held to the page width inside */
	max-width: none;
	margin-left: calc(-1 * var(--wp--custom--layout--padding));
	margin-right: calc(-1 * var(--wp--custom--layout--padding));
	padding: var(--wp--custom--layout--section-padding) var(--wp--custom--layout--padding);
}
/* in every page section the last row of cards carries no bottom padding of its own, so the
   space above a section's heading and below its last card are the same (the block's margins) */
.block-post-listing .block-post-listing__inner > .post-summary:nth-last-child(-n+4) .post-summary__content,
.layout-6up-carousel .post-summary__content {
	padding-bottom: 0;
}
.block-post-listing.is-style-dark,
.block-post-listing.is-style-linen {
	padding-bottom: var(--wp--custom--layout--section-padding);
}
.block-post-listing.is-style-dark > *,
.block-post-listing.is-style-linen > * {
	max-width: var(--wp--custom--layout--page);
	margin-left: auto;
	margin-right: auto;
}
/* a band that opens a category page sits straight under the archive header (no page padding) */
.archive .block-area > .block-post-listing.is-style-dark:first-child,
.archive .block-area > .block-post-listing.is-style-linen:first-child {
	margin-top: calc(-1 * var(--wp--custom--layout--block-gap-large));
}
/* (Two bands in a row touch: see the shared band rule in assets/scss/partials/_blocks-core.scss) */
.block-post-listing.is-style-dark {
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--color--mist);
}
.block-post-listing.is-style-linen {
	background: var(--wp--preset--color--secondary);
}
.block-post-listing.is-style-dark .block-post-listing__header > :is(h1, h2, h3, h4, h5, h6),
.block-post-listing.is-style-dark .post-summary__title,
.block-post-listing.is-style-dark .post-summary__title a,
.block-post-listing.is-style-dark .post-summary__excerpt {
	color: var(--wp--preset--color--background);
}
.block-post-listing.is-style-dark .block-post-listing__header > p,
.block-post-listing.is-style-dark .post-summary__excerpt {
	color: var(--wp--custom--color--mist);
}
.block-post-listing.is-style-dark .post-summary__meta,
.block-post-listing.is-style-dark .post-summary__line {
	color: var(--wp--preset--color--quaternary);
}

/* 4up grid ("Fresh off the blog" on the home page, recipe grids): two by two on phones and
   tablets, four across from 992px - the width where Featured + 4 also goes to one row. */
.layout-4up-grid {
	--cwp-columns: 2;
}
@media (min-width: 992px) {
	.layout-4up-grid {
		--cwp-columns: 4;
	}
}

@media (max-width: 991px) {
	.layout-featured-4 .block-post-listing__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}
	.layout-featured-4 .post-summary--featured {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-right: 0;
	}
	.layout-featured-4 .post-summary--featured .post-summary__image {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	/* room between the featured recipe's button and the four small cards below it */
	.layout-featured-4 .post-summary--featured {
		padding-bottom: 28px;
		margin-bottom: 8px;
		border-bottom: 1px solid var(--wp--preset--color--quaternary);
	}
	.post-summary--spotlight {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}
	.post-summary--spotlight .post-summary__image {
		order: 1;
		min-height: 0;
		aspect-ratio: 4 / 3;
		margin: 8px 8px 28px;
	}
	.post-summary--spotlight .post-summary__content {
		order: 2;
		padding: 8px 8px 16px;
	}
}

/* Editor only: the note on a "Current season only" section (season_note() in init.php). Red when the
   live page will hide it, brass when it might */
.block-post-listing__season-note {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 4px solid var(--wp--preset--color--quaternary);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}
.block-post-listing__season-note.is-hidden {
	border-left-color: #B3261E; /* editor warning red: no theme token for an error state */
}

/* Ranked List (2026) layout
   Numbered rows for "most popular" and "start here" sections: a tall photo with its number in a
   brass circle on the corner, the name, the first sentence of the description, "5 MIN · ★ 4.8" in brass caps and a
   small "Get recipe" button. The photo stretches to the height of the text beside it, so it is
   always as tall as the row. Two columns of three rows from 768px (1-3 down the left, 4-6 down
   the right), one column on phones. Rows are separated by brass rules.
--------------------------------------------- */
.layout-ranked-list .block-post-listing__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
	.layout-ranked-list .block-post-listing__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column; /* 1-3 down the first column, 4-6 down the second */
		column-gap: 48px;
	}
}

.layout-ranked-list .post-summary--ranked {
	display: grid;
	position: relative; /* holds the number badge */
	grid-template-columns: 96px minmax(0, 1fr); /* photo, text (the number sits on the photo) */
	gap: 14px;
	align-items: start;
	padding: 20px 0;
	border-top: 1px solid var(--wp--preset--color--quaternary);
	text-align: left;
}
.layout-ranked-list .post-summary--ranked:first-child {
	border-top: 0;
}
@media (min-width: 768px) {
	.layout-ranked-list .post-summary--ranked {
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 18px;
	}
	/* the first row of each column has no rule above it */
	.layout-ranked-list .post-summary--ranked:nth-child(3n + 1) {
		border-top: 0;
	}
}

/* The number: a brass circle on the photo's top-left corner, dark green digit - the same pair as the
   brass buttons, so it reads on a light band, a dark band and a busy photo alike. The row has 20px of
   padding above the photo, so the badge sits that far down plus a small inset. */
.layout-ranked-list .post-summary__rank {
	position: absolute;
	z-index: 1;
	top: 30px;
	left: 10px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--primary);
	/* A soft shadow lifts the circle off pale and busy photos alike */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.08);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}
@media (min-width: 768px) {
	.layout-ranked-list .post-summary__rank {
		width: 54px;
		height: 54px;
		font-size: 1.875rem;
	}
}

/* The photo fills its box, and the box is as tall as the text beside it (the photo is laid out
   absolutely, so it never makes the row taller; min-height keeps it from going squat when the
   text is short) */
.layout-ranked-list .post-summary--ranked .post-summary__image {
	position: relative;
	align-self: stretch;
	min-height: 130px;
	line-height: 0;
}
.layout-ranked-list .post-summary--ranked .post-summary__image a {
	position: absolute;
	inset: 0;
	display: block;
}
.layout-ranked-list .post-summary--ranked .post-summary__image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: var(--wp--custom--border-radius--small);
}
@media (min-width: 768px) {
	.layout-ranked-list .post-summary--ranked .post-summary__image {
		min-height: 170px;
	}
}
.layout-ranked-list .post-summary--ranked .post-summary__content {
	min-width: 0;
	padding: 0;
}
.layout-ranked-list .post-summary--ranked .post-summary__content > * + * {
	margin-top: 6px;
}
.layout-ranked-list .post-summary--ranked .post-summary__title {
	font-size: 20px;
	text-align: left; /* the card default is centred */
}
.layout-ranked-list .post-summary--ranked .post-summary__excerpt {
	margin-top: 6px;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--black);
	display: -webkit-box;
	-webkit-line-clamp: 2; /* a long description stops at two lines */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.layout-ranked-list .post-summary--ranked .post-summary__meta {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 13px; /* larger than the 11px caps on grid cards: this line is the row's only fact */
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
}
.layout-ranked-list .post-summary--ranked .post-summary__dot {
	color: var(--wp--preset--color--quaternary);
}
/* The "Get recipe" button, the Featured card's button at row size (its hover is the shared one above) */
.layout-ranked-list .post-summary--ranked .post-summary__action {
	margin-top: 12px;
}
.layout-ranked-list .post-summary--ranked .post-summary__button {
	height: 44px; /* a comfortable tap target (WCAG's recommended 44px) */
	padding: 0 20px;
	font-size: 14px;
}

/* On a dark band: ivory names, mist descriptions (names and meta follow the band rules above) */
.block-post-listing.is-style-dark.layout-ranked-list .post-summary--ranked .post-summary__excerpt {
	color: var(--wp--custom--color--mist);
}
.block-post-listing.is-style-dark.layout-ranked-list .post-summary--ranked .post-summary__meta {
	color: var(--wp--preset--color--quaternary);
}