/* ==========================================================================
   Work with us (/work-with-us/, "Get involved"): the page for people who would like to volunteer, run
   something at the Hub or partner for an event. Its body is patterns/page-work-with-us.php (the page
   holds the same markup; edit it in Pages → Work with us).

   Two jobs:
   1. The hero. This page's photograph is a bright, busy restaurant, and the shared hero shade is
      light at the middle of the picture, where the title sits. Scoped with :has() to a hero that
      is followed by this page's bands, so no other page's hero changes. The shade is darkest on the
      left, where the words are, and eases off to the right so the photograph still shows.
      Worst case, a pure-white photograph, still gives white words at least 4.5:1 (see the figures
      beside each stop).
   2. The body: alternating bands in the 1344px frame, a photograph beside each way in, and one
      form band. Same language as /host-an-event/: Juana headings in navy, white cards with a navy
      top rule, arrow buttons, cream and deep-cream bands. Tokens only; logical properties.
   ========================================================================== */

/* ---- Hero legibility ------------------------------------------------------------------------------- */
/* The words are centred (area-page.css, 4 Nov 2026), so the shade is even across the width at every size. 76% is the
   least it ever is: navy-darkest (#0B0C38) at 76% over a pure-white photograph blends to about #464668 (white on it: 9.0:1). */
.bnjc-page-hero.has-image:has(~ .bnjc-wwu) .bnjc-page-hero__scrim {
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 78%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 76%, transparent) 55%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 86%, transparent) 100%
	);
}

.bnjc-page-hero.has-image:has(~ .bnjc-wwu) :is(.bnjc-page-hero__title, .bnjc-page-hero__lede) {
	text-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--navy-darkest) 45%, transparent);
}

/* ---- Bands ------------------------------------------------------------------------------------------ */
.bnjc-wwu {
	scroll-margin-block-start: calc(var(--wp--custom--layout--header-height, 76px) + 16px);
}

/* The frame: the 1344px column, centred; the band's own gutter keeps it off the screen edge. */
.bnjc-wwu__frame {
	max-inline-size: var(--wp--style--global--wide-size, 1344px);
	margin-inline: auto;
}

.bnjc-wwu__frame > * {
	margin-inline: 0;
}

.bnjc-wwu .bnjc-wwu-label {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--grey-700);
}

.bnjc-wwu h2.wp-block-heading {
	margin: 0;
	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-wwu .is-style-standfirst {
	max-inline-size: 36rem;
	margin: var(--wp--preset--spacing--50) 0 0;
	color: var(--navy);
}

.bnjc-wwu p a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Jump links ------------------------------------------------------------------------------------- */
.bnjc-wwu-intro {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40) !important;
}

.bnjc-wwu-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnjc-wwu-jump li {
	margin: 0;
	padding: 0;
}


.bnjc-wwu-jump a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--layout--touch-min, 44px);
	padding: 8px 20px;
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-pill);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: var(--navy);
	background: transparent;
	transition: background-color 140ms, color 140ms;
}

.bnjc-wwu-jump a:hover {
	background: var(--navy);
	color: var(--white);
}

.bnjc-wwu-jump li:last-child a {
	background: var(--navy);
	color: var(--white);
}

.bnjc-wwu-jump li:last-child a:hover {
	background: var(--navy-darkest);
}

.bnjc-wwu-jump a:focus-visible,
.bnjc-wwu p a:focus-visible,
.bnjc-wwu .wp-block-button__link:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

/* ---- A way in: words beside one photograph ------------------------------------------------------------ */
.bnjc-wwu-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: center;
}

.bnjc-wwu-split--flip {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.bnjc-wwu-split--flip .bnjc-wwu-split__photo {
	order: -1;
}

.bnjc-wwu-split__words > * {
	margin-inline: 0;
}

.bnjc-wwu-split__words > p:not(.bnjc-wwu-label):not(.is-style-standfirst) {
	max-inline-size: 36rem;
	margin-block: var(--wp--preset--spacing--50) 0;
}

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

.bnjc-wwu-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);
}

/* Buttons sit under the words with room to spare; two of them wrap rather than run off a phone. */
.wp-block-buttons.bnjc-wwu-actions {
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-block-start: var(--wp--preset--spacing--60);
}

.bnjc-wwu-actions .wp-block-button,
.bnjc-wwu-actions .wp-block-button__link {
	max-inline-size: 100%;
}

.bnjc-wwu-actions .wp-block-button__link {
	box-sizing: border-box;
	white-space: normal;
	text-align: start;
}

/* ---- Mitzvah Day: one card inside the volunteer band --------------------------------------------------- */
.bnjc-wwu-note {
	max-inline-size: 36rem;
	margin-block: var(--wp--preset--spacing--60) 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle, color-mix(in srgb, var(--navy) 14%, transparent));
	border-inline-start: var(--wp--custom--border--rule-width, 3px) solid var(--navy);
	border-radius: var(--radius-xs, 2px);
}

.bnjc-wwu-note > * {
	margin: 0;
}

.bnjc-wwu-note__label {
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline, 0.16em);
	text-transform: uppercase;
	color: var(--grey-700);
}

.bnjc-wwu-note__date {
	margin-block: 4px 6px !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-l);
	font-weight: 700;
	line-height: 1.15;
	color: var(--navy);
}

/* ---- The form band ------------------------------------------------------------------------------------ */
.bnjc-wwu-form__main {
	margin-block-start: var(--wp--preset--spacing--60);
}

.bnjc-wwu-form .wp-block-gravityforms-form,
.bnjc-wwu-form .gform_wrapper {
	max-inline-size: 820px;
}

.bnjc-wwu-careers {
	margin-block: var(--wp--preset--spacing--60) 0;
}

.bnjc-wwu-careers a {
	display: inline-block;
	padding-block: 10px;
}

/* A phone: the four links make a 2 x 2 grid instead of four rows. */
@media (max-width: 599px) {

	.bnjc-wwu-jump {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.bnjc-wwu-jump a {
		inline-size: 100%;
		box-sizing: border-box;
		justify-content: center;
		padding-inline: 12px;
		text-align: center;
	}
}

/* ---- Narrower than 900px: one column ------------------------------------------------------------------ */
@media (max-width: 899px) {

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

	.bnjc-wwu-split--flip .bnjc-wwu-split__photo {
		order: 0;
	}
}