/*
 * The catering pages (Ollie, 30 Sep: "To do Catering and sub catering and
 * all hidden catering pages build").
 *
 * Their own sheet, loaded after components.css, so this work never edits a
 * line other jobs are editing there. Palette variables only; no new hues.
 */

/*
 * The opening of a catering page (templates/page-catering.html): the trail,
 * the heading and the one Book button, and the page's own photo beside them
 * once it has one. Without a photo it is one column, never an empty frame.
 */
.bpc-catering-opening {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin-block-end: var(--wp--preset--spacing--50, 2.5rem);
}

.bpc-catering-opening > * {
	margin: 0 !important;
}

.bpc-catering-opening__text > * + * {
	margin-block-start: var(--wp--preset--spacing--30, 1rem) !important;
}

.bpc-catering-opening__text > .bpc-breadcrumbs + .wp-block-post-title {
	margin-block-start: 0 !important;
}

.bpc-catering-opening__text > .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem) !important;
	align-items: center;
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

.bpc-catering-opening__photo {
	height: clamp(18rem, 50vw, 26rem);
	overflow: hidden;
	border-radius: var(--bpc-radius);
	background-color: var(--bpc-pill-fill);
}

.bpc-catering-opening__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The heading ends in a full stop, as every page title does (components.css
 * draws it for a title placed straight in the page; this one sits in the
 * opening). Black since 20 Oct.
 */
.bpc-catering-opening h1.wp-block-post-title::after {
	content: "." / "";
	color: var(--bpc-type);
}

/* From a laptop up, home's hero grid: the words in five columns, the photo in seven. */
@media (min-width: 64rem) {
	.bpc-catering-opening.has-photo {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: center;
		gap: var(--wp--preset--spacing--50, 2.5rem);
	}

	.bpc-catering-opening.has-photo .bpc-catering-opening__text {
		grid-column: 1 / 6;
	}

	.bpc-catering-opening.has-photo .bpc-catering-opening__photo {
		grid-column: 6 / -1;
		height: clamp(20rem, 50vh, 28rem);
	}
}

/*
 * On a phone the tab bar's Book button is in view, so the opening has none
 * of its own, and the photo runs to both edges under the heading.
 */
@media (max-width: 47.99rem) {
	main:has(.bpc-catering-opening) {
		padding-block-start: 0.75rem !important;
	}

	.bpc-catering-opening {
		margin-block-end: var(--wp--preset--spacing--30, 1rem);
	}

	.bpc-catering-opening__actions {
		display: none !important;
	}

	.bpc-catering-opening__photo {
		margin-inline: calc(var(--wp--style--root--padding-left, 1rem) * -1) calc(var(--wp--style--root--padding-right, 1rem) * -1) !important;
		height: 15rem;
		border-radius: 0;
	}

	.bpc-catering-opening h1.wp-block-post-title {
		margin-block: 0.25rem 1.25rem !important;
		font-size: clamp(2.75rem, 12.5vw, 3.5rem) !important;
		line-height: 1 !important;
		letter-spacing: -0.012em;
		text-wrap: balance;
	}
}

/* ---- The page under the opening (catering spec §2 and §4, 1 Oct) ---------
 * Every section starts on the heading's left edge and runs the wide
 * container's width: no text centred in a column narrower than its title.
 * Sections are the home page's: a display heading on a hairline, a short
 * orange stroke at its start (the .bpc-ed rule in components.css), room
 * above and below, and nothing boxed but on a phone.
 */

/* The page's own content starts where the heading does. */
.bpc-catering-page > .wp-block-post-content > * {
	margin-block-start: 0;
}

.bpc-catering-page > .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * The shared sections (the steps, What we offer) are constrained groups,
 * which centre what they hold in a narrower column on an iPad. On a
 * catering page they keep the heading's left edge. (A phone is narrower
 * than the column, and its swipe rows run to the screen's edges.)
 */
@media (min-width: 48rem) {
	.bpc-catering-page .bpc-ed.is-layout-constrained > * {
		max-width: none !important;
		margin-inline: 0 !important;
	}
}

/*
 * The opening line: one sentence, a size up from the body, on a Light Grey
 * card (20 Oct: body text is never on Pearl Grey).
 */
.bpc-catering-lead {
	max-width: 40rem;
	padding: 1rem var(--wp--preset--spacing--40, 1.5rem);
	border-radius: var(--bpc-radius);
	background-color: var(--bpc-card);
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--bpc-type);
}

.bpc-catering-page > .wp-block-post-content > .bpc-catering-lead {
	margin-block-end: var(--wp--preset--spacing--40, 1.5rem);
}

/* Sections of the page's own, and the lists of live pages. */
:is(.bpc-catering-section, .bpc-good-to-know, .bpc-menus-section, .bpc-catering-index.bpc-ed) {
	padding-block: var(--wp--preset--spacing--50, 2.5rem) var(--wp--preset--spacing--40, 1.5rem) !important;
}

/* The menu's group labels are upright eyebrows, as everywhere else. */
.bpc-menus-section h3.bpc-menus__heading {
	font-family: var(--bpc-font-sans);
	font-style: normal;
}

/*
 * Good to know: the page's own rows, then the shared ones (pattern
 * good-to-know-shared). The answer in body text on Light Grey, a hairline
 * over each row, so the rows read as one card under the heading. Two
 * columns from a laptop up, on .bpc-ed's grid, with no gap between them.
 */
.bpc-good-to-know > :not(.wp-block-heading) {
	margin: 0 !important;
	padding: 1rem var(--wp--preset--spacing--40, 1.5rem);
	border-block-start: var(--bpc-hairline) solid var(--bpc-rule);
	background-color: var(--bpc-card);
	color: var(--bpc-type);
}

.bpc-good-to-know > .wp-block-heading + * {
	border-block-start: 0;
}

.bpc-good-to-know > .wp-block-heading {
	margin-block-end: 0.75rem !important;
}

@media (min-width: 64rem) {
	.bpc-good-to-know {
		row-gap: 0 !important;
		column-gap: 0 !important;
	}

	.bpc-good-to-know > :not(.wp-block-heading) {
		grid-column: auto !important;
		align-self: stretch;
	}

	/* The second column's first row starts the card too. */
	.bpc-good-to-know > .wp-block-heading + * + * {
		border-block-start: 0;
	}

	/*
	 * An odd row out takes both columns (21 Oct), so the last note is not
	 * a half-width row beside an empty one. The heading is the first
	 * child, so an odd count of notes ends on an even child.
	 */
	.bpc-good-to-know > .wp-block-heading ~ :last-child:nth-child(even) {
		grid-column: 1 / -1 !important;
	}
}

/*
 * The menus: the lead line under a hairline with its short stroke, as an
 * offer is on the Catering page, then the menu itself.
 */
.bpc-menus-section__body > * {
	margin: 0 !important;
}

.bpc-menus-section__body > * + * {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem) !important;
}

.bpc-menus-lead {
	position: relative;
	padding: 1rem var(--wp--preset--spacing--40, 1.5rem);
	border-radius: var(--bpc-radius);
	background-color: var(--bpc-card);
}

.bpc-menus-lead::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	width: 1.25rem;
	height: 2px;
	background-color: var(--bpc-accent);
}

.bpc-menus-lead > * {
	margin: 0 !important;
}

.bpc-menus-lead > * + * {
	margin-block-start: 0.375rem !important;
}

.bpc-menus-lead > .wp-block-heading {
	font-family: var(--bpc-font-display);
	font-style: italic;
	font-weight: 300;
}

/*
 * Rows: one page a row, its name in the display italic, an arrow at the
 * right, a hairline under each with a short orange stroke on it.
 * The Catering page writes them for Street trading, Where we cater and
 * Menus, and bpc/catering-index prints them for the hidden pages that are
 * live, so the two are one component. Two to a line from a laptop up.
 */
.bpc-rows-wrap {
	padding-block: 0;
}

/* On a Light Grey card (20 Oct), as a phone has always had them. */
.bpc-rows {
	display: grid;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40, 1.5rem);
	border-radius: var(--bpc-radius);
	background-color: var(--bpc-card);
	list-style: none;
}

.bpc-rows > li {
	position: relative;
	margin: 0;
	border-block-end: var(--bpc-hairline) solid var(--bpc-rule);
}

@media (min-width: 64rem) {
	.bpc-rows > li:nth-last-child(-n + 2):nth-child(odd),
	.bpc-rows > li:last-child {
		border-block-end: 0;
	}

	.bpc-rows > li:nth-last-child(-n + 2):nth-child(odd)::before,
	.bpc-rows > li:last-child::before {
		display: none;
	}
}

@media (max-width: 63.99rem) {
	.bpc-rows > li:last-child {
		border-block-end: 0;
	}

	.bpc-rows > li:last-child::before {
		display: none;
	}
}

.bpc-rows > li::before {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: 0;
	width: 1.25rem;
	height: 2px;
	background-color: var(--bpc-accent);
	pointer-events: none;
}

.bpc-rows a {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 3.25rem;
	padding-block: 0.875rem;
	font-family: var(--bpc-font-display);
	font-size: 1.75rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.15;
	color: var(--bpc-type);
	text-decoration: none;
}

.bpc-rows a::after {
	content: "\2192" / "";
	margin-inline-start: auto;
	font-family: var(--bpc-font-sans);
	font-style: normal;
	font-size: 1.125rem;
	color: var(--bpc-type);
	transition: transform var(--bpc-dur) var(--bpc-ease);
}

.bpc-rows a:hover {
	color: var(--bpc-type-strong);
}

.bpc-rows a:hover::after,
.bpc-rows a:focus-visible::after {
	transform: translateX(0.25rem);
}

/* Something said beside the name, at the right: Street trading's season. */
.bpc-rows__aside {
	margin-inline-start: auto;
	font-size: 1.25rem;
	color: var(--bpc-type);
}

.bpc-rows a:has(.bpc-rows__aside)::after {
	margin-inline-start: 0;
}

/* An area page's own photograph, in a circle before its name. */
.bpc-rows__photo {
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
}

/* A section after the rows keeps its own room: two hairlines never touch. */
.bpc-rows-wrap + :is(.bpc-ed, .wp-block-group.alignwide:is(.has-light-grey-background-color, .has-petal-light-background-color)) {
	margin-block-start: var(--wp--preset--spacing--50, 2.5rem) !important;
}

@media (min-width: 64rem) {
	.bpc-rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--50, 2.5rem);
	}

	.bpc-rows.bpc-rows--one {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bpc-rows a::after {
		transition: none;
	}

	.bpc-rows a:hover::after,
	.bpc-rows a:focus-visible::after {
		transform: none;
	}
}

/*
 * The four circles on the Catering page: home's, spread across the full
 * width so the first starts on the heading's left edge and the last ends
 * on the right one.
 */
.bpc-catering-circles .bpc-types {
	justify-content: space-between;
	margin-block-start: 0 !important;
}

@media (min-width: 64rem) {
	.bpc-catering-circles .bpc-types {
		grid-template-columns: repeat(4, minmax(0, 12rem));
	}
}

.bpc-catering-circles {
	padding-block: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.5rem);
}

/* Where we cater: "Further afield?" sits under the sentence, on its own Light Grey card. */
.bpc-catering-afield {
	max-width: 40rem;
	padding: 0.75rem var(--wp--preset--spacing--40, 1.5rem);
	border-radius: var(--bpc-radius);
	background-color: var(--bpc-card);
	color: var(--bpc-type);
}

/*
 * Phones: what a section holds sits on a Light Grey card (28 Sep, "Looks
 * like an app"; Snow until 20 Oct), as the steps and the menus do. Good to
 * know is one card, a hairline between its rows; the rows are an inset
 * list, 52px a row.
 */
@media (max-width: 47.99rem) {
	.bpc-catering-lead {
		font-size: 1.125rem;
	}

	:is(.bpc-catering-section, .bpc-good-to-know, .bpc-menus-section, .bpc-catering-index.bpc-ed) {
		padding-block: 2rem 0.5rem !important;
	}

	.bpc-good-to-know > :not(.wp-block-heading) {
		padding: 0.875rem var(--bpc-app-card-pad, 1.25rem);
		border-block-start: var(--bpc-hairline) solid var(--bpc-rule);
		background-color: var(--bpc-card);
	}

	.bpc-good-to-know > .wp-block-heading + * {
		border-block-start: 0;
		border-start-start-radius: var(--bpc-app-radius, 8px);
		border-start-end-radius: var(--bpc-app-radius, 8px);
	}

	.bpc-good-to-know > :last-child {
		border-end-start-radius: var(--bpc-app-radius, 8px);
		border-end-end-radius: var(--bpc-app-radius, 8px);
		box-shadow: var(--bpc-app-lift, none);
	}

	.bpc-rows-wrap {
		padding-block: 0.5rem;
	}

	.bpc-rows {
		padding: 0 var(--bpc-app-card-pad, 1.25rem);
		background-color: var(--bpc-card);
		border-radius: var(--bpc-app-radius, 8px);
		box-shadow: var(--bpc-app-lift, none);
	}

	.bpc-rows > li {
		border-block-end-color: var(--bpc-rule);
	}

	.bpc-rows > li:last-child {
		border-block-end: 0;
	}

	.bpc-rows > li::before {
		display: none;
	}

	.bpc-rows a {
		min-height: 3.25rem;
		padding-block: 0.5rem;
		font-size: 1.375rem;
	}

	.bpc-rows__aside {
		font-size: 1rem;
	}

	.bpc-menus-lead {
		padding: 1rem var(--bpc-app-card-pad, 1.25rem);
		border-block-start: 0;
		border-radius: var(--bpc-app-radius, 8px);
		background-color: var(--bpc-card);
		box-shadow: var(--bpc-app-lift, none);
	}

	.bpc-menus-lead::before {
		inset-block-start: 0;
		inset-inline-start: var(--bpc-app-card-pad, 1.25rem);
	}
}

/* ---- One sheet, from an iPad up (21 Oct) -----------------------------------
 * Ollie's two rulings meet here: words never on Pearl Grey (20 Oct), and a
 * page "dense like a magazine page: sections close, fine hairlines between
 * them, no big empty bands, less padding in cards" (13 Oct). On 20 Oct each
 * block became its own Light Grey box with Pearl Grey gaps between them, a
 * dozen slabs on Weddings. Instead, everything under the opening is one
 * Light Grey sheet, as the plain pages' already is (page.html): the title
 * and the photograph stand on the Pearl Grey above it, and inside it the
 * sections are set as they were in September, a hairline over each with the
 * orange stroke on it, and nothing boxed. The closing block runs across the
 * sheet's foot, White on Black. A phone keeps its app cards (28 Sep).
 */
@media (min-width: 48rem) {
	.bpc-catering-page > .wp-block-post-content {
		padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--40, 1.5rem) !important;
		border-radius: var(--bpc-radius);
		background-color: var(--bpc-card);
	}

	/* The sheet's top edge is its first section's line: no second hairline, and no stroke floating on it. */
	.bpc-catering-page > .wp-block-post-content > :first-child {
		padding-block-start: 0 !important;
		border-block-start: 0 !important;
	}

	.bpc-catering-page > .wp-block-post-content > :first-child::before {
		display: none;
	}

	/* The closing block, last, is the sheet's foot: the full width of it, its lower corners the sheet's. */
	.bpc-catering-page > .wp-block-post-content:has(> .bpc-closing:last-child) {
		padding-block-end: 0 !important;
	}

	.bpc-catering-page > .wp-block-post-content > .bpc-closing {
		max-width: none !important;
		margin-inline: calc(-1 * var(--wp--preset--spacing--40, 1.5rem)) !important;
		border-radius: 0;
	}

	.bpc-catering-page > .wp-block-post-content > .bpc-closing:last-child {
		margin-block-end: 0 !important;
		border-end-start-radius: var(--bpc-radius);
		border-end-end-radius: var(--bpc-radius);
	}

	/* What was a card on the Pearl Grey is now simply on the sheet. */
	.bpc-catering-page > .wp-block-post-content :is(.bpc-catering-lead, .bpc-catering-afield, .bpc-steps, .bpc-menus__group, .bpc-type) {
		padding-inline: 0 !important;
		border-radius: 0 !important;
		background-color: transparent !important;
		box-shadow: none !important;
	}

	.bpc-catering-page > .wp-block-post-content :is(.bpc-catering-lead, .bpc-catering-afield) {
		padding-block: 0;
	}

	.bpc-catering-page > .wp-block-post-content .bpc-good-to-know > :not(.wp-block-heading) {
		padding-inline: 0;
		background-color: transparent;
	}

	.bpc-catering-page > .wp-block-post-content .bpc-rows {
		padding-inline: 0;
		border-radius: 0;
		background-color: transparent;
	}

	/* The menus' lead, and an offer: a hairline over it, as in September. */
	.bpc-catering-page > .wp-block-post-content :is(.bpc-menus-lead, .bpc-offer) {
		padding: 1rem 0 0;
		border-block-start: var(--bpc-hairline) solid var(--bpc-rule-strong);
		border-radius: 0;
		background-color: transparent;
	}

	/* The facts strip, and Street trading's band: between two hairlines, close. */
	.bpc-catering-page > .wp-block-post-content :is(.wp-block-group.alignwide:is(.has-light-grey-background-color, .has-petal-light-background-color):has(> .wp-block-columns > .wp-block-column > .bpc-display), .bpc-street) {
		padding: var(--wp--preset--spacing--40, 1.5rem) 0 !important;
		border-block: var(--bpc-hairline) solid var(--bpc-rule-strong);
		border-radius: 0;
		background-color: transparent !important;
	}

	.bpc-catering-page > .wp-block-post-content .bpc-good-to-know {
		column-gap: var(--wp--preset--spacing--50, 2.5rem) !important;
	}
}