/* ==========================================================================
   Host your event at BNJC (21 Oct 2026): the page for local organisations that would like to host an
   event at the Hub (/host-an-event/, built from patterns/host-event.php and then edited in the page).
   The hero is the photograph-led composition (inc/landing-poster.php gives it bnjc-landing--photo; the
   page takes the Groups colour in inc/template-helpers.php). Everything below it is ordinary blocks in
   bands. Side space comes from the site's one page gutter (--wp--custom--layout--gutter), and the words sit in
   the centred 1344px frame: alignfull groups carry the gutter themselves (the root padding), their
   children are constrained to 1344px, so nothing here hard-codes a pixel gutter.
   Also holds the small "Run something at the Hub?" band under the What's On list.
   ========================================================================== */

/* ---- Hero: the panel lines up with the 1344px frame on wide screens ---------------------------- */
@media (min-width: 900px) {

	.wp-block-cover.alignfull.bnjc-section-hero.bnjc-landing--host-an-event {
		/* 100% here is the page less its two gutters, hence the + gutter (as in area-welcome.css). */
		padding-inline: max(var(--wp--custom--layout--gutter, 24px), calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2 + var(--wp--custom--layout--gutter, 24px))) !important;
	}

	/* Core centres the inner container of a constrained block; the panel belongs at the frame's left edge. */
	.bnjc-landing--host-an-event .wp-block-cover__inner-container {
		margin-inline: 0 !important;
	}
}

/* The button's words are long for a phone: let them wrap inside the panel instead of running past it. */
.bnjc-landing--host-an-event .wp-block-button,
.bnjc-landing--host-an-event .wp-block-button__link {
	max-inline-size: 100%;
}

.bnjc-landing--host-an-event .wp-block-button__link {
	box-sizing: border-box;
	white-space: normal;
	text-align: start;
}

/* ---- Band headings: the display face, as on the other entry pages ------------------------------- */
.bnjc-host-band > h2.wp-block-heading,
.bnjc-host-split__words > h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.04;
	font-size: clamp(var(--wp--preset--font-size--display-s), 4.2vw, var(--wp--preset--font-size--display-m)) !important;
	color: var(--navy);
}

.bnjc-host-band .is-style-standfirst {
	max-inline-size: 40rem;
	color: var(--navy);
}

/* A constrained group centres each child in the 1344px frame, and centres a narrower child (a standfirst, an
   accordion, the form) in the middle of the page. These narrower children start at the frame's left edge
   instead: the frame's left edge is half of what is left over when the band is wider than the frame. */
.bnjc-host-band > :is(.is-style-standfirst, .bnjc-host-note, .wp-block-details, .gform_wrapper) {
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2)) !important;
	margin-inline-end: auto !important;
}

.bnjc-host-split__words > * {
	margin-inline: 0 !important;
}

/* ---- Who it is for: words beside one photograph ------------------------------------------------- */
.bnjc-host-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(20px, 5vw, 80px);
	align-items: center;
}

.bnjc-host-split__words > * + * {
	margin-block-start: 16px;
}

.bnjc-host-split__photo {
	margin: 0;
}

.bnjc-host-split__photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md, 8px);
}

.bnjc-host-split__words ul {
	padding-inline-start: 1.1em;
}

.bnjc-host-split__words li {
	margin-block-end: 8px;
}

/* ---- What the Hub offers: plain cards ------------------------------------------------------------ */
.bnjc-host-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
	margin-block-start: 32px;
}

.bnjc-host-card {
	padding: 24px;
	background: var(--white);
	border: 1px solid color-mix(in srgb, var(--navy) 14%, transparent);
	border-block-start: 3px solid var(--navy);
	border-radius: var(--radius-xs, 2px);
}

.bnjc-host-card h3 {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-l);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--navy);
}

.bnjc-host-card p {
	margin: 0 0 10px;
}

.bnjc-host-card a,
.bnjc-host-enquire p a,
.bnjc-host-faq details a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Links that stand on their own line are at least 44px tall. */
.bnjc-host-card p > a:only-child {
	display: inline-block;
	padding-block: 11px;
}

/* ---- How it works: four numbered steps ------------------------------------------------------------ */
.bnjc-host-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: host-step;
}

.bnjc-host-steps > li {
	counter-increment: host-step;
	padding-block-start: 16px;
	border-block-start: 3px solid var(--navy);
}

.bnjc-host-steps > li::before {
	content: counter(host-step);
	display: block;
	margin-block-end: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
	line-height: 1;
	color: var(--navy);
}

.bnjc-host-steps > li > strong {
	display: block;
	margin-block-end: 6px;
	color: var(--navy);
}

.bnjc-host-note {
	margin-block-start: 28px;
	color: var(--grey-700);
}

/* ---- Events that suit ----------------------------------------------------------------------------- */
.bnjc-host-kinds {
	columns: 2 280px;
	column-gap: clamp(24px, 5vw, 80px);
	margin-block-start: 24px;
	padding-inline-start: 1.1em;
	font-size: var(--wp--preset--font-size--large);
}

.bnjc-host-kinds li {
	margin-block-end: 10px;
	break-inside: avoid;
}

/* ---- Questions: accordions with a 44px tap target -------------------------------------------------- */
.bnjc-host-faq .wp-block-details {
	max-inline-size: 68ch;
	margin-block-start: var(--wp--preset--spacing--40);
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle, color-mix(in srgb, var(--navy) 14%, transparent));
	border-radius: var(--wp--custom--radius--xs, 2px);
}

.bnjc-host-faq .wp-block-details > summary {
	display: flex;
	align-items: center;
	min-block-size: var(--wp--custom--layout--touch-min, 44px);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	font-weight: 700;
	color: var(--navy);
	cursor: pointer;
}

.bnjc-host-faq .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

.bnjc-host-faq .wp-block-details > :not(summary) {
	margin-inline: var(--wp--preset--spacing--50);
}

/* ---- The enquiry band: the form keeps a readable width; its look is the site's form theme ------------ */
.bnjc-host-enquire .wp-block-gravityforms-form,
.bnjc-host-enquire .gform_wrapper {
	max-inline-size: 820px;
}

.bnjc-host-enquire > p:last-child {
	margin-block-start: 24px;
}

/* The phone and email stand on their own line: 44px targets. */
.bnjc-host-enquire > p:last-child a {
	display: inline-block;
	padding-block: 10px;
}

@media (max-width: 899px) {

	.bnjc-host-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- What's On: one small band under the list --------------------------------------------------------- */
.bnjc-wo-host {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin-block: 20px 0;
	padding: 12px 20px;
	background: var(--wp--preset--color--cream-deep);
	border-radius: var(--radius-xs, 2px);
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-wo-host__text {
	font-weight: 700;
}

.bnjc-wo-host__link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--layout--touch-min, 44px);
	color: var(--navy);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

/* The host band sits above the events: one tidy row, full width of the list, with the link as a button. */
/* Bigger and in the brand's colours (Yosef, 4 Nov 2026): Berry, the words in white display type, a Gold pill. */
.bnjc-wo-host--top {
	grid-column: 1 / -1;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none; /* A paragraph, so the reading-width cap on paragraphs would stop it short of the list's width. */
	justify-content: space-between;
	gap: 16px 32px;
	margin-block: 0 32px;
	padding: clamp(24px, 3.5vw, 40px) clamp(20px, 4vw, 48px);
	background: var(--berry);
	color: var(--white);
}

.bnjc-wo-host--top .bnjc-wo-host__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
}

.bnjc-wo-host--top .bnjc-wo-host__link {
	padding-inline: 28px;
	border-radius: 999px;
	background: var(--wp--preset--color--gold);
	color: var(--navy);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	text-decoration: none;
}

.bnjc-wo-host--top .bnjc-wo-host__link:hover,
.bnjc-wo-host--top .bnjc-wo-host__link:focus-visible {
	background: var(--white);
	color: var(--navy);
}