/* Event page: the hero fallback band, the at-a-glance block, the photography
   notice and the "details to be confirmed" line. Loaded after components.css.
   Everything reads the page's section colour from --bnjc-section / --bnjc-section-ink,
   which the theme sets on the body of every event page.

   The breadcrumb (templates/single-bnjc_event.html) is the first element of
   .bnjc-event-page__main: the group with class bnjc-breadcrumb is the spot the
   breadcrumb block replaces. */

/* ---- Hero with no picture: a band in the section colour, never a blank hole --------- */
.bnjc-event-hero--band {
	background: var(--bnjc-section, var(--navy));
	min-block-size: 340px;
}

.bnjc-event-hero--band .wp-block-cover__background {
	display: none;
}

.bnjc-event-hero--band .bnjc-event-hero__title,
.bnjc-event-hero--band .bnjc-event-hero__standfirst {
	color: var(--bnjc-section-ink, var(--white)) !important;
	text-shadow: none;
}

/* The section chip would vanish on its own colour, so on the band it is an outline. */
.bnjc-event-hero--band .is-style-tag a,
.bnjc-event-hero--band .is-style-tag-outline a {
	background: transparent !important;
	border: 1.5px solid currentcolor;
	color: var(--bnjc-section-ink, var(--white)) !important;
}

@media (max-width: 899px) {

	.bnjc-event-hero--band {
		min-block-size: 240px !important;
	}
}

/* ---- At a glance: everything a visitor decides on, before the long description ----- */
.bnjc-event-page__glance {
	padding-inline: var(--wp--preset--spacing--90);
	padding-block-start: var(--wp--preset--spacing--70);
}

.bnjc-glance {
	background: var(--white);
	border-block-start: 4px solid var(--bnjc-section, var(--navy));
	border-radius: var(--radius-xs);
	box-shadow: 0 1px 2px rgba(11, 12, 56, 0.08), 0 12px 28px rgba(11, 12, 56, 0.07);
}

.bnjc-glance__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	margin: 0;
}

.bnjc-glance__item {
	padding: 18px 22px;
	border-inline-start: 1px solid var(--wp--custom--color--border-subtle);
	min-inline-size: 0;
}

.bnjc-glance__item:first-child {
	border-inline-start: 0;
}

.bnjc-glance__item dt {
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--berry);
	margin: 0;
}

.bnjc-glance__item dd {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.bnjc-glance__item dd > time,
.bnjc-glance__time {
	display: block;
	font-weight: 600;
	color: var(--navy);
}

.bnjc-glance__flag {
	display: block;
	margin-block-start: 6px;
	color: var(--berry);
}

.bnjc-glance__series {
	display: block;
	margin-block-start: 6px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--grey-700);
}

.bnjc-glance__others {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin-block-start: 8px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--grey-700);
}

.bnjc-glance__others ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnjc-glance__others a {
	display: inline-block;
	padding-block: 10px;
	min-block-size: 24px;
}

@media (max-width: 899px) {

	.bnjc-event-page__glance {
		padding-inline: var(--gutter);
	}

	.bnjc-glance__grid {
		grid-template-columns: 1fr;
	}

	.bnjc-glance__item {
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--custom--color--border-subtle);
		padding: 14px 18px;
	}

	.bnjc-glance__item:first-child {
		border-block-start: 0;
	}
}

/* ---- Photography notice: apart from the invitation, plain and quiet ----------------- */
.bnjc-photo-notice {
	max-inline-size: 640px;
	margin-block-start: var(--wp--preset--spacing--90);
	padding: 12px 18px;
	border-inline-start: 3px solid var(--wp--custom--color--border-subtle);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--grey-700);
}

.bnjc-photo-notice .bnjc-overline {
	color: var(--grey-700);
	margin: 0 0 4px;
}

.bnjc-photo-notice p:last-child {
	margin: 0;
	max-inline-size: none;
}

/* ---- "Details to be confirmed" (only when an editor asks for it) -------------------- */
.bnjc-event-page__tbc {
	color: var(--grey-700);
	font-style: italic;
}

/* ==========================================================================
   The calm skin (14 Oct 2026; docs/prototypes/internal-pages-modern.html).
   Gyst (display) on the title, a lighter picture, a facts strip and a
   booking card that are white with a soft navy shadow and 2px corners, no
   coloured rule on top. The section colour still tints the chips and the band.
   ========================================================================== */
.bnjc-event-hero {
	min-block-size: clamp(320px, 30vw, 380px);
}

.bnjc-event-hero__title {
	text-transform: none;
	font-size: clamp(var(--wp--preset--font-size--display-s), 5.4vw, var(--wp--preset--font-size--display-l));
}

.bnjc-event-hero__standfirst {
	font-size: 20px;
	line-height: 1.5;
	max-inline-size: 52ch;
}

/* Everything in the hero starts on the same left edge (a narrower title was centring). */
.bnjc-event-hero__inner > * {
	margin-inline: 0 !important;
}

.bnjc-event-hero__tags {
	justify-content: flex-start;
}

.bnjc-glance,
.bnjc-booking {
	border-block-start: 0;
	border-radius: var(--radius-xs);
	box-shadow: 0 14px 40px -24px rgba(11, 12, 56, 0.45);
}

.bnjc-booking {
	padding: 30px;
}

/* Allergies and refunds: said before the booking panel opens, in small plain type. */
.bnjc-booking__notes {
	margin-block-start: var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.bnjc-booking__notes p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
	color: var(--grey-700);
}

.bnjc-booking__refunds a {
	color: var(--navy);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The same link inside the booking panel, on the page before payment. */
.bnjc-drawer__hint.bnjc-drawer__refunds {
	margin-inline: 0;
}

.bnjc-drawer__refunds a {
	color: var(--navy);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Event page, information architecture (14 Oct 2026 audit).
   One reading order, each fact said once:
     1. Hero: title and standfirst. Straight under it, THE SUMMARY as cards (when, where, price, booking).
     2. Main column (two thirds): the description, other dates, good to know, photo notice.
     3. Action card (one third, sticky): what to do (book, RSVP or just turn up), the price,
        add to calendar, directions, allergies and refunds.
   On a phone the action card comes straight after the hero, then the description.
   Type: body 18px, facts 17px, labels 13px and up; nothing a visitor needs to attend is
   smaller than 15px.
   ========================================================================== */

/* ---- The summary, in the hero --------------------------------------------------------- */
/* The hero's inner block was capped at 820px for the title alone; the summary wants the full
   column so its four facts sit in one row. The title and standfirst keep their own measures. */
.bnjc-event-hero__inner {
	max-inline-size: none;
}

/* One left edge for the whole page: the hero's words, the main column and the card all start
   where the header's logo does (48px, or the centred 1344px column on a wide screen; 24px on
   a phone). The padding used to stack three deep in the hero and two in the body. */
.bnjc-event-page {
	--bnjc-edge: max(var(--wp--preset--spacing--90), calc((100% - 1344px) / 2));
}

@media (max-width: 781px) {

	.bnjc-event-page {
		--bnjc-edge: 24px;
	}
}

.wp-block-cover.bnjc-event-hero {
	padding-inline: 0;
}

.bnjc-event-hero .wp-block-cover__inner-container {
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding-inline: var(--bnjc-edge);
}

.bnjc-event-hero .bnjc-event-hero__inner {
	margin: 0 !important;
	padding-inline: 0;
}

.bnjc-event-hero .bnjc-event-hero__inner > * {
	margin-inline: 0 !important;
	max-inline-size: none;
}

.bnjc-event-hero .bnjc-event-hero__inner > .bnjc-event-hero__title {
	max-inline-size: 30ch;
}

.bnjc-event-hero .bnjc-event-hero__inner > .bnjc-event-hero__standfirst {
	max-inline-size: 52ch;
}

.bnjc-event-page__body {
	padding-inline: var(--bnjc-edge);
}

.bnjc-event-page__body > .bnjc-event-page__columns {
	max-inline-size: none;
	margin-inline: 0;
	padding-inline: 0;
}


/* ---- The facts, in cards under the hero ------------------------------------------------ */
/* The hero keeps only the title and the one-line standfirst, so the picture reads. The summary
   (When, Where, Price, Booking, and Who it is for when set) is a row of small cards straight under it:
   four across on a desktop, two by two on a tablet, two on a phone (one when a card has long words). */
.bnjc-event-cards {
	padding-inline: var(--bnjc-edge);
	padding-block-start: var(--wp--preset--spacing--70);
}

.bnjc-event-cards .bnjc-glance {
	max-inline-size: none;
	margin-inline: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.bnjc-event-cards .bnjc-glance__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.bnjc-event-cards .bnjc-glance__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 22px;
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--radius-xs);
	box-shadow: 0 14px 40px -28px rgba(11, 12, 56, 0.45);
}

.bnjc-event-cards .bnjc-glance__item:first-child {
	border-inline-start: 1px solid var(--wp--custom--color--border-subtle);
}

.bnjc-event-cards .bnjc-glance__item dt {
	color: var(--berry);
	font-size: var(--wp--preset--font-size--overline);
}

.bnjc-event-cards .bnjc-glance__item dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--navy);
	overflow-wrap: break-word;
}

.bnjc-event-cards .bnjc-glance__item dd > time {
	font-weight: 400;
}

.bnjc-event-cards .bnjc-glance__time {
	margin-block-start: 4px;
	font-family: var(--font-body, inherit);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.bnjc-event-cards .bnjc-glance__series,
.bnjc-event-cards .bnjc-glance__flag {
	font-family: var(--font-body, inherit);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.bnjc-event-cards .bnjc-glance__item dd a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wp--custom--color--border-subtle);
	text-underline-offset: 4px;
}

.bnjc-event-cards .bnjc-glance__item dd a:hover {
	text-decoration-color: currentcolor;
}

@media (max-width: 1099px) {

	.bnjc-event-cards .bnjc-glance__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {

	.bnjc-event-cards {
		padding-block-start: var(--wp--preset--spacing--50);
	}

	.bnjc-event-cards .bnjc-glance__grid {
		gap: 12px;
	}

	.bnjc-event-cards .bnjc-glance__item {
		padding: 16px 16px 18px;
		border-block-start: 1px solid var(--wp--custom--color--border-subtle);
	}

	/* The date is the longest thing there: it gets the whole row, the rest sit two across. */
	.bnjc-event-cards .bnjc-glance__item:first-child {
		grid-column: 1 / -1;
	}

	.bnjc-event-cards .bnjc-glance__item dd {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* ---- Two thirds and one third ---------------------------------------------------------- */
.bnjc-event-page__body {
	padding-block-start: var(--wp--preset--spacing--80);
}

.bnjc-event-page__columns {
	gap: clamp(32px, 4vw, 72px);
	align-items: flex-start;
}

.bnjc-event-page__aside {
	margin-block-start: 0;
}

/* Section headings in the main column: the display serif, as on the About page. */
.bnjc-facts__title,
.bnjc-dates__title {
	margin: 0 0 var(--wp--preset--spacing--60);
	font-family: var(--font-display);
	font-size: clamp(28px, 2.4vw, var(--wp--preset--font-size--display-s));
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-transform: none;
	color: var(--navy);
}

/* ---- Other dates ----------------------------------------------------------------------- */
.bnjc-dates,
.bnjc-facts {
	max-inline-size: none;
	margin-block-start: var(--wp--preset--spacing--section);
}

.bnjc-dates__every {
	margin: calc(-1 * var(--wp--preset--spacing--30)) 0 var(--wp--preset--spacing--50);
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--medium);
}

/* Date cards: weekday, day, month, time. Three across at 375px, more as the column widens; the card on show is filled. */
.bnjc-dates__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnjc-dates__more {
	margin-block-start: 16px;
}

.bnjc-dates__more[open] > .bnjc-dates__cards {
	margin-block-start: 16px;
}

.bnjc-dates__summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding-inline: 24px;
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-pill);
	color: var(--navy);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.bnjc-dates__summary::-webkit-details-marker {
	display: none;
}

.bnjc-dates__summary:hover {
	background: var(--wp--custom--color--hover-wash);
}

.bnjc-dates__summary:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--white);
}

.bnjc-dates__summary-open,
.bnjc-dates__more[open] .bnjc-dates__summary-closed {
	display: none;
}

.bnjc-dates__more[open] .bnjc-dates__summary-open {
	display: inline;
}

.bnjc-datecard {
	display: flex;
}

.bnjc-datecard__link {
	flex: 1;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0;
	min-block-size: 104px;
	padding: 10px 6px;
	border: 1.5px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--radius-xs);
	background: var(--white);
	color: var(--navy);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--dur-fast, 120ms) ease, background-color var(--dur-fast, 120ms) ease;
}

.bnjc-datecard__link:hover {
	border-color: var(--navy);
}

.bnjc-datecard__link:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--white);
}

.bnjc-datecard__wd {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bnjc-datecard__day {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.bnjc-datecard__mon {
	font-size: 16px;
	font-weight: 700;
}

.bnjc-datecard__time {
	margin-block-start: 4px;
	font-size: 16px;
	color: var(--ink);
}

.bnjc-datecard.is-current .bnjc-datecard__link {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.bnjc-datecard.is-current .bnjc-datecard__time {
	color: var(--white);
}

.bnjc-datecard__now {
	margin-block-start: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--white);
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {

	.bnjc-datecard__link {
		transition: none;
	}
}

/* ---- Good to know ---------------------------------------------------------------------- */
.bnjc-facts {
	display: block;
	background: none;
}

.bnjc-facts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--50);
	max-inline-size: 760px;
}

.bnjc-facts__box {
	padding: 20px 22px;
	border-radius: var(--radius-xs);
	background: var(--white);
	box-shadow: 0 14px 40px -26px rgba(11, 12, 56, 0.45);
}

.bnjc-facts__box .bnjc-overline {
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
}

.bnjc-facts__box p:last-child {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	margin-block-start: 6px;
}

/* ---- The action card ------------------------------------------------------------------- */
.bnjc-booking__status {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading-l);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-wrap: balance;
	color: var(--navy);
}

.bnjc-booking__rows dt {
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-booking__rows dd {
	font-size: var(--wp--preset--font-size--medium);
}

.bnjc-booking__cta {
	min-block-size: 52px;
	font-size: 16px;
}

.bnjc-booking__utilities {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--custom--color--border-subtle);
}

/* With no booking at all, the utilities are the card: no rule above them. */
.bnjc-booking__status + .bnjc-booking__utilities {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.bnjc-booking__utilities .bnjc-addcal > summary,
.bnjc-booking__directions {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding-inline: 20px;
	border: 2px solid var(--navy);
	border-radius: 999px;
	color: var(--navy);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

.bnjc-booking__utilities .bnjc-addcal > summary::-webkit-details-marker {
	display: none;
}

.bnjc-booking__utilities .bnjc-addcal > summary:hover,
.bnjc-booking__directions:hover {
	background: var(--navy);
	color: var(--white);
}

.bnjc-booking__utilities .bnjc-addcal__list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.bnjc-booking__utilities .bnjc-addcal__list a {
	display: block;
	padding: 12px 8px;
	color: var(--navy);
	font-weight: 600;
}

.bnjc-booking__notes p {
	font-size: var(--wp--preset--font-size--medium);
}

/* ---- Phones: the action card straight after the hero ------------------------------------ */
@media (max-width: 781px) {

	.bnjc-event-page__columns {
		flex-direction: column;
	}

	.bnjc-event-page__aside {
		order: -1;
		position: static;
		inline-size: 100%;
		flex-basis: auto !important;
	}

	.bnjc-event-page__body {
		padding-block-start: var(--wp--preset--spacing--80);
	}

	.bnjc-event-hero .bnjc-glance__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ---- The square picture: first in the right-hand column (21 Oct 2026) ------------------
   bnjc/event-poster (templates/single-bnjc_event.html). The event's own "Square image", or
   its featured image cropped to a square from the middle (the theme stores no focal point,
   so object-position stays centred). On phones the column is moved up, so the square sits
   straight under the hero and ahead of the booking card; it is capped at 480px so a tablet
   does not get a 700px square. The same radius and shadow as the booking card below it. */
.bnjc-event-poster {
	margin: 0 0 var(--wp--preset--spacing--60);
	inline-size: 100%;
	max-inline-size: 480px;
	border-radius: var(--radius-xs);
	box-shadow: 0 14px 40px -24px rgba(11, 12, 56, 0.45);
	overflow: hidden;
	line-height: 0;
}

.bnjc-event-poster__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 50%;
}

/* The featured image in this place (no Square image set) keeps its own shape: a portrait poster is shown whole, last
   line included (4 Nov 2026). A very tall one stops at 80% of the screen height and is shown whole inside that. */
.bnjc-event-poster.is-natural {
	background: var(--wp--preset--color--cream-deep);
}

.bnjc-event-poster.is-natural .bnjc-event-poster__img {
	aspect-ratio: auto;
	max-block-size: 80vh;
	object-fit: contain;
}

/* With a square above it the column can be taller than the screen, and a sticky column that tall
   hides its own bottom (the Book button). So the column scrolls normally and only the card sticks. */
@media (min-width: 782px) {

	.bnjc-event-page__aside:has(.bnjc-event-poster) {
		position: static;
	}

	.bnjc-event-page__aside:has(.bnjc-event-poster) > .bnjc-booking {
		position: sticky;
		inset-block-start: calc(var(--header-h) + 20px);
	}
}

/* ---- The banner under the hero: this one has happened, or was cancelled (20 Oct 2026) ----- */
.bnjc-event-banner {
	box-sizing: border-box;
	padding-block: clamp(20px, 3vw, 32px);
	padding-inline: var(--bnjc-edge, 24px);
	background: var(--wp--preset--color--cream-deep);
	color: var(--ink);
	border-block-end: 4px solid var(--bnjc-section, var(--navy));
}

.bnjc-event-banner.is-cancelled {
	border-block-end-color: var(--berry);
}

.bnjc-event-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
}

.bnjc-event-banner__words {
	flex: 1 1 420px;
	max-inline-size: 68ch;
}

.bnjc-event-banner__title {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.12;
	text-transform: none;
	color: var(--navy);
}

.bnjc-event-banner__words p {
	margin: 0;
	line-height: 1.5;
}

.bnjc-event-banner__words .bnjc-event-banner__note {
	margin-block-start: 8px;
	font-weight: 700;
}

.bnjc-event-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.bnjc-event-banner__cta {
	min-block-size: 44px;
	box-sizing: border-box;
	border-color: transparent;
	background: var(--navy);
	color: var(--white);
}

.bnjc-event-banner__cta:hover {
	background: var(--navy-deep);
	color: var(--white);
}

.bnjc-event-banner__cta.is-outline {
	border-color: var(--navy);
	background: transparent;
	color: var(--navy);
}

.bnjc-event-banner__cta.is-outline:hover {
	background: var(--white);
	color: var(--navy);
}

.bnjc-event-banner__more {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 781px) {

	.bnjc-event-banner__actions {
		inline-size: 100%;
	}

	.bnjc-event-banner__cta {
		flex: 1 1 100%;
	}
}

/* ---- Phones and small tablets: the picture is never a backdrop for the words -------------------
   Event pictures are often posters with their own lettering, and the title laid over them made a
   muddle. Here the title, tags and facts sit on the section colour and the picture follows
   underneath, whole and uncropped. On a wide screen the picture stays behind the hero as before. */
@media (max-width: 899px) {

	.wp-block-cover.bnjc-event-hero {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-block-size: 0 !important;
		padding: 0;
		background: var(--bnjc-section, var(--navy));
	}

	.wp-block-cover.bnjc-event-hero .wp-block-cover__background {
		display: none;
	}

	.wp-block-cover.bnjc-event-hero .wp-block-cover__inner-container {
		order: 1;
		padding-block: var(--wp--preset--spacing--70);
	}

	.wp-block-cover.bnjc-event-hero .wp-block-cover__image-background {
		position: static !important;
		order: 2;
		inset: auto;
		inline-size: 100%;
		block-size: auto !important;
		max-block-size: none;
		object-fit: contain !important; /* No aspect-ratio here: the picture's own width and height give its shape. */
	}

	.bnjc-event-hero .bnjc-event-hero__title,
	.bnjc-event-hero .bnjc-event-hero__standfirst,
	.bnjc-event-hero .bnjc-glance,
	.bnjc-event-hero .bnjc-glance__item dt,
	.bnjc-event-hero .bnjc-glance__item dd {
		color: var(--bnjc-section-ink, var(--white)) !important;
		text-shadow: none;
	}

	.bnjc-event-hero .is-style-tag a,
	.bnjc-event-hero .is-style-tag-outline a {
		background: transparent !important;
		border: 1.5px solid currentcolor;
		color: var(--bnjc-section-ink, var(--white)) !important;
	}
}

/* ==========================================================================
   The description (the post's own words), set as an article (3 Nov 2026).
   Same house style as the About page: the display serif for the opening line
   and the headings, generous space, a calm reading measure. Scoped to
   .bnjc-event-page__copy, which only the single event template carries, so
   no other page changes. Fonts, colours, radii and spacing all come from
   theme.json and brand.css.
   ========================================================================== */
.bnjc-event-page__copy {
	max-inline-size: 66ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	color: var(--ink);
	text-wrap: pretty;
}

.bnjc-event-page__copy > * {
	max-inline-size: none;
	margin-inline: 0 !important;
}

.bnjc-event-page__copy > * + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.bnjc-event-page__copy p {
	margin-block-end: 0;
}

.bnjc-event-page__copy strong,
.bnjc-event-page__copy b {
	font-weight: 700;
	color: var(--navy);
}

/* The opening line: the editor's lead paragraph, or failing that the first paragraph. */
.bnjc-event-page__copy > p.bnjc-lead,
.bnjc-event-page__copy:not(:has(> p.bnjc-lead)) > p:first-of-type {
	font-family: var(--font-display);
	font-size: clamp(var(--wp--preset--font-size--heading-l), 2.2vw, var(--wp--preset--font-size--display-s));
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--navy);
	text-wrap: balance;
}

.bnjc-event-page__copy > p.bnjc-lead,
.bnjc-event-page__copy:not(:has(> p.bnjc-lead)) > p:first-of-type:first-child {
	margin-block-end: var(--wp--preset--spacing--70);
}

.bnjc-event-page__copy > p.bnjc-lead + :not(h2, h3, h4),
.bnjc-event-page__copy:not(:has(> p.bnjc-lead)) > p:first-of-type:first-child + :not(h2, h3, h4) {
	margin-block-start: 0;
}

/* Headings in the text: the display serif, sentence case, room above and a little below. */
.bnjc-event-page__copy :is(h2, h3, h4) {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.12;
	text-transform: none;
	text-wrap: balance;
	color: var(--navy);
}

.bnjc-event-page__copy h2 {
	margin-block: var(--wp--preset--spacing--100) var(--wp--preset--spacing--50) !important;
	padding-block-start: var(--wp--preset--spacing--70);
	border-block-start: 1px solid color-mix(in srgb, var(--navy) 25%, transparent);
	font-size: clamp(28px, 2.4vw, var(--wp--preset--font-size--display-s));
}

.bnjc-event-page__copy h3,
.bnjc-event-page__copy h4 {
	margin-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40) !important;
	font-size: clamp(var(--wp--preset--font-size--heading-m), 2vw, var(--wp--preset--font-size--display-xs));
}

.bnjc-event-page__copy > :is(h2, h3, h4):first-child {
	margin-block-start: 0 !important;
	padding-block-start: 0;
	border-block-start: 0;
}

.bnjc-event-page__copy :is(h2, h3, h4) + * {
	margin-block-start: 0;
}

/* Lists: a short brand-colour dash in place of the dot, aligned to the first line of text. */
main.bnjc-event-page .bnjc-event-page__copy :is(ul, ol):not(.bnjc-menu__items) {
	margin-block-end: 0;
	padding-inline-start: 0;
	list-style: none;
}

main.bnjc-event-page .bnjc-event-page__copy ul:not(.bnjc-menu__items) > li {
	position: relative;
	padding-inline-start: 1.75em;
}

main.bnjc-event-page .bnjc-event-page__copy ul:not(.bnjc-menu__items) > li + li,
main.bnjc-event-page .bnjc-event-page__copy ol > li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

main.bnjc-event-page .bnjc-event-page__copy ul:not(.bnjc-menu__items) > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.86em;
	inline-size: 14px;
	block-size: 2px;
	border-radius: 0;
	background: var(--berry);
}

main.bnjc-event-page .bnjc-event-page__copy ol {
	counter-reset: bnjc-copy-step;
}

main.bnjc-event-page .bnjc-event-page__copy ol > li {
	position: relative;
	padding-inline-start: 2em;
	counter-increment: bnjc-copy-step;
}

main.bnjc-event-page .bnjc-event-page__copy ol > li::before {
	content: counter(bnjc-copy-step) ".";
	position: absolute;
	inset-inline-start: 0;
	font-family: var(--font-display);
	font-size: 1.1em;
	color: var(--berry);
	font-variant-numeric: lining-nums tabular-nums;
}

/* "When: / Where: / Cost:" lines: a quiet table of facts, hairlines between, labels in navy. */
main.bnjc-event-page .bnjc-event-page__copy ul.bnjc-details {
	border-block-start: 1px solid var(--wp--custom--color--border-subtle);
}

main.bnjc-event-page .bnjc-event-page__copy ul.bnjc-details > li {
	margin: 0;
	padding: var(--wp--preset--spacing--30) 0;
	border-block-end: 1px solid var(--wp--custom--color--border-subtle);
}

main.bnjc-event-page .bnjc-event-page__copy ul.bnjc-details > li::before {
	content: none;
}

main.bnjc-event-page .bnjc-event-page__copy ul.bnjc-details > li + li {
	margin-block-start: 0;
}

/* Links: underlined with a soft offset, the colour firming up on hover. */
.bnjc-event-page__copy a:not(.wp-block-button__link) {
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--navy) 40%, transparent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color var(--dur-base) var(--ease-out);
}

.bnjc-event-page__copy a:not(.wp-block-button__link):hover {
	text-decoration-color: currentcolor;
}

/* A quotation: a rule in the section colour, the display serif, the speaker small underneath. */
.bnjc-event-page__copy blockquote {
	margin-inline: 0;
	margin-block: var(--wp--preset--spacing--80);
	padding: 0 0 0 var(--wp--preset--spacing--70);
	border: 0;
	border-inline-start: 3px solid var(--bnjc-section-text, var(--navy));
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--display-xs);
	line-height: 1.3;
	color: var(--navy);
}

.bnjc-event-page__copy blockquote p {
	margin: 0;
}

.bnjc-event-page__copy blockquote p + p {
	margin-block-start: var(--wp--preset--spacing--40);
}

.bnjc-event-page__copy blockquote :is(cite, footer) {
	display: block;
	margin-block-start: var(--wp--preset--spacing--40);
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	line-height: 1.4;
	color: var(--grey-700);
}

/* Pictures: the full width of the column, with the same corners as the cards. */
.bnjc-event-page__copy figure {
	margin-inline: 0;
	margin-block: var(--wp--preset--spacing--80);
}

.bnjc-event-page__copy figure img,
.bnjc-event-page__copy > img {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: auto;
	border-radius: var(--radius-xs);
}

.bnjc-event-page__copy figcaption {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--grey-700);
}

.bnjc-event-page__copy hr {
	margin-block: var(--wp--preset--spacing--80);
	border: 0;
	border-block-start: 1px solid var(--wp--custom--color--border-subtle);
}

/* A button after the text gets room to breathe. */
.bnjc-event-page__copy .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--70);
}

/* The menu block (Yofi supper club): the same rhythm above and below. */
.bnjc-event-page__copy .bnjc-menu {
	margin-block: var(--wp--preset--spacing--80);
	columns: 1;
}

@media (max-width: 781px) {

	.bnjc-event-page__copy h2 {
		margin-block-start: var(--wp--preset--spacing--90) !important;
		padding-block-start: var(--wp--preset--spacing--60);
	}

	.bnjc-event-page__copy blockquote {
		padding-inline-start: var(--wp--preset--spacing--50);
	}
}