/* Meal Planner Promo block
   Dark Primary band after the post: the portrait is the band's left wall (like the opt-in photo), the
   pitch sits in a wider centre column and an ivory "This week's plan" card on the right; the portrait
   and card columns are the same width. Phones: portrait on top at 4:3, then the
   pitch and the card stacked. Colours are theme tokens; brass is only used on the dark band.
--------------------------------------------- */

.block-meal-planner {
	--mp-pad: 22px;
	position: relative;
	display: grid;
	gap: 0;
	margin: var(--wp--custom--layout--padding) 0;
	border-radius: var(--wp--custom--border-radius--small);
	overflow: hidden;
	color: var(--wp--custom--color--mist);
	font-family: var(--wp--preset--font-family--secondary);
}
.block-meal-planner.has-primary-background-color {
	padding: 0; /* each column carries its own padding */
}

/* Portrait: one link, the tag is text inside it */
.block-meal-planner__portrait {
	position: relative;
	display: block;
	margin: 0;
	line-height: 0;
	text-decoration: none;
}
.block-meal-planner__portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 14%;
	border: 0;
	margin: 0;
}
/* "Meet Jen" tag: same shape as the opt-in photo tag, flush with the photo's left edge with a brass
   accent line, square on the left and rounded on the right */
.block-meal-planner__tag {
	position: absolute;
	left: 0;
	bottom: 14px;
	padding: 7px 12px 7px 12px;
	border-left: 3px solid var(--wp--preset--color--quaternary);
	border-radius: 0 var(--wp--custom--border-radius--small) var(--wp--custom--border-radius--small) 0;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--primary);
}
/* A linked portrait: the tag fills brass on hover (and the photo dims a touch) so it reads as a button */
a.block-meal-planner__portrait .block-meal-planner__tag {
	transition: background-color var(--wp--custom--transition--speed) ease, color var(--wp--custom--transition--speed) ease;
}
a.block-meal-planner__portrait:is(:hover, :focus-visible) .block-meal-planner__tag {
	background: var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--primary);
}
a.block-meal-planner__portrait:focus-visible {
	outline: 2px solid var(--wp--preset--color--quaternary);
	outline-offset: -4px;
}

/* Pitch */
.block-meal-planner__pitch {
	padding: 20px 16px 22px;
}
/* Optional description under the heading: shown in the Band style only (the card stays compact) */
.block-meal-planner .block-meal-planner__description {
	display: none;
	margin: 0 0 16px;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--custom--color--mist);
}
/* "Love my recipes?": the kicker style, small brass caps */
.block-meal-planner .block-meal-planner__eyebrow {
	margin: 0 0 8px;
	color: var(--wp--preset--color--quaternary);
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-transform: uppercase;
	line-height: 1.4;
}
.block-meal-planner .block-meal-planner__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-optical-sizing: auto;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.12;
	color: var(--wp--preset--color--background);
}
.block-meal-planner__heading::after {
	content: "";
	display: block;
	width: var(--wp--custom--title-rule--width);
	height: 1px;
	margin: var(--wp--custom--title-rule--gap) 0 14px;
	background: var(--wp--preset--color--quaternary);
}
.block-meal-planner .block-meal-planner__checks {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px 16px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.4;
}
.block-meal-planner__checks li {
	position: relative;
	margin: 0;
	padding-left: 30px; /* room for the check and a clear gap before the word */
}

/* On the dark band the list reads as one brass mark per promise: the check and its words in the
   same light brass, so the checklist sits quietly under the ivory pitch above it. */
.block-meal-planner.is-style-band .block-meal-planner__checks {
	color: var(--wp--preset--color--quaternary);
}
.block-meal-planner__checks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--wp--preset--color--quaternary);
}
.block-meal-planner .block-meal-planner__button {
	display: block;
	padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-button);
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--quaternary);
	border: 1px solid var(--wp--preset--color--quaternary);
	border-radius: var(--wp--custom--border-radius--button);
}
.block-meal-planner__button:is(:hover, :focus) {
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}
.block-meal-planner__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--background);
	outline-offset: 2px;
}
.block-meal-planner .block-meal-planner__note {
	margin: 10px 0 0;
	font-size: 0.875rem;
	font-style: italic;
	text-align: center;
	white-space: nowrap;
	color: var(--wp--custom--color--mist);
}

/* Plan card (ivory, text in Ink/Green) */
.block-meal-planner__card {
	margin: 0 16px 22px;
	overflow: hidden;
	color: var(--wp--preset--color--black);
	background: var(--wp--preset--color--secondary); /* linen */
	border-radius: var(--wp--custom--border-radius--small);
}
/* "Sample Menu": centred Fraunces label in brass with a brass rule either side (like Follow Along) */
.block-meal-planner .block-meal-planner__card-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 20px 24px 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-optical-sizing: auto;
	font-size: 1.5rem; /* phones: a clear title for the card (back to 1rem from tablet up, below) */
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	white-space: nowrap;
	color: var(--wp--preset--color--brass-dark);
}
.block-meal-planner .block-meal-planner__card-eyebrow::before,
.block-meal-planner .block-meal-planner__card-eyebrow::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--wp--preset--color--quaternary);
}
.block-meal-planner .block-meal-planner__plan {
	margin: 0;
	padding: 0 24px;
	list-style: none;
	font-size: 1rem;
	line-height: 1.3;
}
.block-meal-planner__plan li {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 10px 0;
	white-space: nowrap;
	border-top: 1px solid var(--wp--custom--color--hairline);
}
.block-meal-planner__plan li:first-child {
	border-top: 0;
}
.block-meal-planner__day {
	flex: 0 0 40px;
	font-weight: 500;
	color: var(--wp--preset--color--black);
}
.block-meal-planner__recipe {
	overflow: hidden;
	text-overflow: ellipsis;
}
.block-meal-planner .block-meal-planner__card-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 6px 0 0;
	padding: 10px 24px;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--black);
	background: var(--wp--preset--color--background); /* ivory strip on the linen card */
	border-top: 1px solid var(--wp--preset--color--quaternary);
}
.block-meal-planner__card-footer svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--green); /* the stroke uses currentColor */
}

/* Tablet and up: three columns. The portrait fills the band's full height on the left with no inset;
   the side columns match and scale with the band so a wide content column (no sidebar) doesn't
   leave the pitch floating in empty space. */
@media (min-width: 768px) {
	.block-meal-planner {
		--mp-pad: 20px;
		--mp-side: clamp(200px, 26%, 280px);
		grid-template-columns: var(--mp-side) minmax(0, 1fr) var(--mp-side);
		gap: clamp(22px, 3%, 40px);
		align-items: center;
		padding: var(--mp-pad) var(--mp-pad) var(--mp-pad) 0;
	}
	.block-meal-planner.has-primary-background-color {
		padding: var(--mp-pad) var(--mp-pad) var(--mp-pad) 0;
	}
	.block-meal-planner:not(.block-meal-planner--has-portrait) {
		grid-template-columns: minmax(0, 1fr) var(--mp-side);
		padding-left: var(--mp-pad);
	}
	.block-meal-planner__portrait {
		align-self: stretch;
		margin: calc(-1 * var(--mp-pad)) 0; /* bleed to the band's top and bottom edges */
		min-height: 100%;
	}
	.block-meal-planner__portrait img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-position: 50% 8%; /* keep the face in view as the band gets shorter */
		border-radius: 0;
	}
	.block-meal-planner__tag {
		bottom: 18px;
	}
	.block-meal-planner__pitch {
		align-self: center;
		max-width: 460px;
		padding: 8px 0 var(--mp-pad);
	}
	.block-meal-planner__heading,
	.block-meal-planner .block-meal-planner__heading {
		font-size: clamp(1.375rem, 1rem + 0.9vw, 1.75rem);
	}
	.block-meal-planner__heading::after {
		margin: 12px 0 14px;
	}
	.block-meal-planner__checks,
	.block-meal-planner .block-meal-planner__checks {
		grid-template-columns: repeat(2, max-content);
		gap: 6px 24px;
		margin-bottom: 18px;
		font-size: 0.875rem;
	}
	.block-meal-planner__button,
	.block-meal-planner .block-meal-planner__button {
		display: inline-block;
		font-size: 1rem;
		padding: 0.8em 1.5em;
	}
	.block-meal-planner__note,
	.block-meal-planner .block-meal-planner__note {
		margin-top: 12px;
		font-size: 0.8125rem;
		text-align: left;
	}
	.block-meal-planner__card {
		align-self: center; /* equal space above and below the card */
		margin: 0;
	}
	.block-meal-planner__card-eyebrow,
	.block-meal-planner .block-meal-planner__card-eyebrow {
		padding: 12px 20px 6px;
		font-size: 1rem;
	}
	.block-meal-planner__plan,
	.block-meal-planner .block-meal-planner__plan {
		padding: 0 20px;
		font-size: 0.8125rem;
	}
	.block-meal-planner__plan li {
		padding: 7px 0;
	}
	.block-meal-planner__day {
		flex-basis: 32px;
	}
	.block-meal-planner__card-footer,
	.block-meal-planner .block-meal-planner__card-footer {
		padding: 10px 20px;
		font-size: 0.8125rem;
	}
	.block-meal-planner__checks li {
		padding-left: 18px;
	}
}

/* Band style (Before Footer area): the promo as the full-width band under every page. The block
   sits inside a full-width Group with the Primary background, so it drops its radius and card
   edge, centres at the wide width and gets more room top and bottom; the portrait still runs the
   band's full height. The pitch fills the middle instead of stopping at a card's width: bigger
   heading, the description line, the checklist in three columns from 1200px, and wider photo and
   menu columns, so no empty stretch opens before the menu card on big screens. Phones keep the
   card's stacked layout with the portrait on top. */
.block-meal-planner.is-style-band {
	margin: 0 auto;
	max-width: var(--wp--custom--layout--wide);
	border-radius: 0;
}
/* The band paints to the screen edges on its own (no wrapping Group needed): the layout stays at
   the wide width and the background is extended sideways, clipped to the band's own height */
.block-meal-planner.is-style-band.has-primary-background-color {
	box-shadow: 0 0 0 100vw var(--wp--preset--color--primary);
	clip-path: inset(0 -100vw);
}
.block-meal-planner.is-style-band .block-meal-planner__description {
	display: block;
}
/* Band, all widths: the menu rows at the footer line's size, the day in small brass caps like the
   "Love my recipes?" eyebrow */
.block-meal-planner.is-style-band .block-meal-planner__plan {
	font-size: 0.9375rem;
}
.block-meal-planner.is-style-band .block-meal-planner__day {
	flex: 0 0 48px;
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-transform: uppercase;
	line-height: 1.6; /* keeps the caps on the recipe's baseline */
	color: var(--wp--preset--color--brass-dark);
}
/* Band style: the "Meet Jen" tag sits on the photo's right edge, so it stays clear of Jen's face
   (the portrait is framed on her, left of centre); square on the right, rounded on the left */
.block-meal-planner.is-style-band .block-meal-planner__tag {
	left: auto;
	right: 0;
	border-left: 0;
	border-right: 3px solid var(--wp--preset--color--quaternary);
	border-radius: var(--wp--custom--border-radius--small) 0 0 var(--wp--custom--border-radius--small);
}
@media (max-width: 767px) {
	/* Phones: the tag sits at the top of the photo and reads a step larger; the pitch and the
	   menu card line up with the photo's edges (the card's inset is for the card style) */
	.block-meal-planner.is-style-band .block-meal-planner__tag {
		top: 14px;
		bottom: auto;
		padding: 9px 14px;
		font-size: 0.875rem;
	}
	.block-meal-planner.is-style-band .block-meal-planner__pitch {
		padding: 24px 0 36px; /* room under the button before the linen section starts */
	}
	/* Room under the menu card, as padding on the band rather than margin on the card: the
	   theme strips the bottom margin from a band's last child, so the card was ending flush
	   with the band and the section under it started with no green between them. */
	.block-meal-planner.is-style-band,
	.block-meal-planner.is-style-band.has-primary-background-color {
		padding-bottom: 28px;
	}
}
@media (min-width: 768px) {
	.block-meal-planner.is-style-band,
	.block-meal-planner.is-style-band.has-primary-background-color {
		--mp-pad: var(--wp--custom--layout--section-padding); /* the same space above and below as every other band */
		--mp-side: clamp(220px, 25%, 300px);
		gap: clamp(32px, 4%, 56px); /* one gutter either side of the pitch */
		padding: var(--mp-pad) 0;
		align-items: stretch; /* the portrait and the menu card share one height */
	}
	/* The portrait sits inside the band's padding (no bleed), the same height as the menu card */
	.block-meal-planner.is-style-band .block-meal-planner__portrait {
		margin: 0;
		min-height: 0;
	}
	.block-meal-planner.is-style-band .block-meal-planner__pitch {
		align-self: center;
		padding: 0;
	}
	.block-meal-planner.is-style-band .block-meal-planner__pitch {
		max-width: none;
	}
	/* The menu card fills the right column top to bottom, with larger type and its rows spread
	   evenly; "Grocery list included" stays pinned to the card's foot */
	.block-meal-planner.is-style-band .block-meal-planner__card {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		border-radius: 0;
		overflow: visible;
		/* a 1px brass keyline 8px outside the linen, the green showing between */
		outline: 1px solid var(--wp--preset--color--quaternary);
		outline-offset: 8px;
		margin: 9px; /* keeps the keyline inside the band's padding, level with the portrait's edges */
	}
	.block-meal-planner.is-style-band .block-meal-planner__card-eyebrow {
		padding: 16px 24px 8px;
		font-size: 1.25rem;
		line-height: 1; /* the label's box is only as tall as its letters, so the rules centre on it */
	}
	.block-meal-planner.is-style-band .block-meal-planner__card-eyebrow::before,
	.block-meal-planner.is-style-band .block-meal-planner__card-eyebrow::after {
		height: 1px;
		margin-top: 2px; /* lines sit on the label's visual middle, not its baseline */
	}
	.block-meal-planner.is-style-band .block-meal-planner__plan {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		padding: 0 24px;
		font-size: 0.9375rem; /* the same size as the "Grocery list included" line */
	}
	.block-meal-planner.is-style-band .block-meal-planner__plan li {
		padding: 8px 0;
	}

	.block-meal-planner.is-style-band .block-meal-planner__card-footer {
		margin-top: auto;
		padding: 12px 24px;
		font-size: 0.9375rem;
	}
	.block-meal-planner.is-style-band .block-meal-planner__card-footer svg {
		width: 18px;
		height: 18px;
	}
	.block-meal-planner.is-style-band .block-meal-planner__heading {
		font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); /* tops out at 32px (was 40px) */
	}
	.block-meal-planner.is-style-band .block-meal-planner__checks {
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* two columns across the whole pitch, room for longer lines */
		gap: 8px 32px;
		font-size: 0.9375rem;
	}
	.block-meal-planner.is-style-band .block-meal-planner__pitch {
		max-width: none;
	}
	/* The portrait runs the band's full height here, so the tag sits up near the top of the photo
	   instead of on the band's bottom edge */
	.block-meal-planner.is-style-band .block-meal-planner__tag {
		top: 36px;
		bottom: auto;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	/* Tablets: the band is about 700px wide here, too narrow for three columns (the pitch would get
	   150px), so the portrait sits out and the pitch and menu card share the width, like the
	   no-portrait layout. The three columns return at 992px. */
	.block-meal-planner.is-style-band.block-meal-planner--has-portrait {
		grid-template-columns: minmax(0, 1fr) var(--mp-side);
		padding-left: var(--mp-pad);
	}
	.block-meal-planner.is-style-band .block-meal-planner__portrait {
		display: none;
	}
}