/* ==========================================================================
   Internal pages: the hero, the body rhythm and the side-panel layout.
   Loaded after components.css (see inc/assets.php: area-*.css).

   One shape for every internal page (about, visit, partners, youth, the
   section sub pages, the legal pages):

     1. A full-width hero (patterns/sub-page-head.php). The page's Featured
        image under a navy protection gradient with white words, or, when the
        page has no picture, a flat band in its section colour.
     2. The body: one 1344px column, running text held to a 68ch measure, one
        vertical rhythm (see "Internal pages" in components.css for the flow
        grid this builds on).
     3. Optional: text with a side panel or picture (.bnjc-page-split) that
        stacks on a phone.

   Colour: the hero reads --bnjc-hero-bg and --bnjc-hero-ink, which the
   pattern sets from the page's Section (bnjc_section_colour_by_slug()); nothing
   is hard-coded here. All sizes are theme.json tokens.
   ========================================================================== */

/* ---- Rhythm tokens ------------------------------------------------------ */
.bnjc-page,
.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) {
	/* Space between the hero and the first thing under it, and between the last
	   thing and the footer. 64px / 80px on a desktop, 40px / 48px on a phone. */
	--bnjc-after-hero: var(--wp--preset--spacing--100);
	--bnjc-page-end: var(--wp--preset--spacing--90);
}

@media (min-width: 782px) {

	.bnjc-page,
	.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) {
		/* 64px, not the 115px of the section token: at 1440 the first line of body text sat 700px
		   down the page, so a laptop screen showed the hero and a gap and nothing to read. */
		--bnjc-after-hero: var(--wp--preset--spacing--100);
		--bnjc-page-end: var(--wp--preset--spacing--100);
	}
}

/* ---- The calm skin (14 Oct 2026, approved in docs/prototypes/internal-pages-modern.html) ----
   Internal pages are quieter than the home page: more white space, the page
   title and the section headings (H2, H3) in the display face, sentence
   case, 2px corners, no waves. (Until 23 Oct the section headings were the
   bold body font; the brand sets headings in the display face, so they are
   back in it. Only H4 stays in the body font.) The gap between sections is the theme.json
   "section" spacing token, so every page breathes at the same pace. Scoped to
   core Heading blocks that sit directly in the page flow, so cards, panels and
   blocks that style their own headings are untouched. */
.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) {
	/* Three steps, not two. Every gap on an internal page used to be 24px (inside a section) or
	   115px (between sections), so cards sat hard under their paragraph and then a canyon opened.
	   Now: 24px between blocks, 32px under a heading, 40px before a card set that follows text
	   (rule below), up to 88px between sections, 48px before a sub-heading. */
	--bnjc-gap-heading: var(--wp--preset--spacing--90);
	--bnjc-gap-section: clamp(56px, 6vw, 88px);
	--bnjc-gap-h2-below: var(--wp--preset--spacing--70);
}

/* A card set or card block straight after running text: a little more air than a paragraph gets. */
.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > :is(p, ul, ol) + :is(.bnjc-cards, .bnjc-cardset) {
	margin-block-start: var(--wp--preset--spacing--80);
}

.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > :is(h2, h3, h4).wp-block-heading,
.bnjc-page-split__main > :is(h2, h3, h4).wp-block-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: var(--wp--custom--typography--tracking-display);
	line-height: var(--wp--custom--typography--leading-heading);
	text-transform: none;
	color: var(--wp--preset--color--navy-darkest);
}

.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > h4.wp-block-heading,
.bnjc-page-split__main > h4.wp-block-heading {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > h2.wp-block-heading,
.bnjc-page-split__main > h2.wp-block-heading {
	font-size: clamp(28px, 3vw, 44px);
}

.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > h3.wp-block-heading,
.bnjc-page-split__main > h3.wp-block-heading {
	font-size: var(--wp--preset--font-size--heading-l);
}

.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > h4.wp-block-heading,
.bnjc-page-split__main > h4.wp-block-heading {
	font-size: var(--wp--preset--font-size--heading-m);
}

/* Running text stops at 68ch (components.css says 70ch; this is the one measure). */
.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) {
	--bnjc-measure: 68ch;
}

/* ---- The hero ----------------------------------------------------------- */
.bnjc-page-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	inline-size: 100%;
	margin: 0;
	/* The words start on the same edge as the page below: the root gutter, or the
	   1344px column centred on a wide screen. Padding rather than an inner margin,
	   because the flow grid zeroes the inline margins of a block's children. */
	padding-inline: max(var(--wp--style--root--padding-left, 24px), calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2));
	background: var(--bnjc-hero-bg, var(--wp--preset--color--navy));
	color: var(--bnjc-hero-ink, var(--wp--preset--color--white));
	overflow: clip;
}

.bnjc-page-hero__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--100);
}

.bnjc-page-hero__words {
	max-inline-size: 52rem;
}

/* The H1. One per page; the pattern is the only thing that prints it. */
.bnjc-page-hero__title {
	margin: 0;
	color: inherit;
	/* Juana capitals: the one display line on an internal page. */
	text-transform: none;
	/* display-l is fluid in theme.json (40px on a phone, 64px on a wide screen). */
	font-size: clamp(var(--wp--preset--font-size--display-s), 5.4vw, var(--wp--preset--font-size--display-l));
	line-height: var(--wp--custom--typography--leading-heading);
}

.bnjc-page-hero__lede {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-inline-size: 40rem;
	color: inherit;
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1.5;
}

/* The section label above the H1. */
.bnjc-page-hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline, 0.16em);
	line-height: 1.3;
	text-transform: uppercase;
}

/* With a picture: the Featured image fills the hero under a navy protection
   gradient, so white words read on any photograph (board task 439). The
   gradient is the theme's photo-protection navy, strengthened where the words
   sit. A pure-white photograph under it still gives 4.7:1 at the top and more
   below, so the breadcrumb, the standfirst and the title all pass AA. */
.bnjc-page-hero.has-image {
	min-block-size: clamp(300px, 26vw, 360px);
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--navy-darkest);
}

.bnjc-page-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

.bnjc-page-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Calm: the photograph shows. Light at the top and middle, strong only where the
	   words sit, so white on the bottom third still passes AA on a pale picture. */
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 50%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 6%, transparent) 40%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 60%, transparent) 72%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 86%, transparent) 100%
	);
}

/* On a picture the label is a solid chip in the section colour, so its contrast
   comes from the section's own ink choice, not from the photograph. */
.bnjc-page-hero.has-image .bnjc-page-hero__eyebrow {
	display: inline-block;
	padding: 5px 10px;
	border-radius: var(--wp--custom--radius--xs, 2px);
	background: var(--bnjc-hero-bg, var(--wp--preset--color--navy));
	color: var(--bnjc-hero-ink, var(--wp--preset--color--white));
}

/* Without a picture: a flat band in the section colour, ink from the section. */
.bnjc-page-hero.has-band .bnjc-page-hero__inner {
	gap: var(--wp--preset--spacing--70);
	padding-block-end: var(--wp--preset--spacing--100);
}

.bnjc-page-hero.has-band .bnjc-breadcrumbs.is-on-dark,
.bnjc-page-hero.has-band .bnjc-breadcrumbs.is-on-dark a {
	color: var(--bnjc-hero-ink, var(--wp--preset--color--white));
}

@media (min-width: 782px) {

	.bnjc-page-hero__inner {
		padding-block-end: var(--wp--preset--spacing--100);
	}

	.bnjc-page-hero__lede {
		font-size: var(--wp--preset--font-size--heading-m);
	}

	.bnjc-page-hero.has-band .bnjc-page-hero__inner {
		padding-block-end: var(--wp--preset--spacing--100);
	}
}

/* The breadcrumb inside the hero: loaded here as well as from the block's own
   stylesheet, so the first paint is already white on the picture. */
.bnjc-page-hero .bnjc-breadcrumbs.is-on-dark,
.bnjc-page-hero .bnjc-breadcrumbs.is-on-dark a {
	color: inherit;
}

/* ---- A compact hero ------------------------------------------------------------ */
/* Page details → Hero size → Compact (meta bnjc_hero_size, read by patterns/sub-page-head.php). The same hero with the
   same picture and shade, but short: a smaller title and less air, for a page whose content (the team) should be one
   short scroll away. The breadcrumb, the title and the standfirst keep their contrast: the shade is unchanged. */
.bnjc-page-hero.is-compact.has-image {
	min-block-size: clamp(184px, 17vw, 232px);
}

.bnjc-page-hero.is-compact .bnjc-page-hero__inner {
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
}

.bnjc-page-hero.is-compact .bnjc-page-hero__title {
	font-size: clamp(var(--wp--preset--font-size--display-s), 4vw, var(--wp--preset--font-size--display-m));
}

.bnjc-page-hero.is-compact .bnjc-page-hero__lede {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-s);
}

/* ---- A large hero (Page details → Hero size → Large) --------------------------------------------------------------- */
/* Most of a screen high with the photograph doing the talking: a bigger title, a calmer shade (strong only under the
   words, so white on the bottom third still passes AA on a pale picture), and the page's two buttons right under the
   standfirst, so the way on is on screen before anyone scrolls. Used by About. */
.bnjc-page-hero.is-large.has-image {
	min-block-size: clamp(520px, 82svh, 840px);
}

.bnjc-page-hero.is-large .bnjc-page-hero__img {
	object-position: 50% 42%;
}

.bnjc-page-hero.is-large .bnjc-page-hero__scrim {
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 55%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 0%, transparent) 30%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 30%, transparent) 55%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 88%, transparent) 100%
	);
}

.bnjc-page-hero.is-large .bnjc-page-hero__inner {
	padding-block: var(--wp--preset--spacing--60) clamp(48px, 7vw, 104px);
}

.bnjc-page-hero.is-large .bnjc-page-hero__title {
	font-size: clamp(var(--wp--preset--font-size--display-m), 11vw, var(--wp--preset--font-size--display-hero));
	line-height: 0.92;
	letter-spacing: -0.015em;
}

.bnjc-page-hero.is-large .bnjc-page-hero__lede {
	max-inline-size: 36rem;
	margin-block-start: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.45;
}

@media (min-width: 782px) {

	.bnjc-page-hero.is-large .bnjc-page-hero__lede {
		font-size: var(--wp--preset--font-size--standfirst);
	}
}

/* Hero buttons (Page details → Hero buttons): the first filled in Seafoam, the second an outline, both pills 52px high. */
.bnjc-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--70) 0 0;
}

.bnjc-page-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 52px;
	padding: 0 28px;
	border: 1.5px solid currentcolor;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-pill, 0.06em);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.bnjc-page-hero__btn.is-primary {
	border-color: var(--wp--preset--color--cream);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
}

.bnjc-page-hero__btn:hover {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.bnjc-page-hero__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

@media (max-width: 480px) {

	.bnjc-page-hero__btn {
		flex: 1 1 100%;
	}
}

/* ---- Centred (standard and compact heroes; Yosef, 4 Nov 2026) ----------------------------------------------------- */
/* The breadcrumb, the section label, the H1 and the standfirst are one centred column in the middle of the band, with
   the same space above and below, instead of words on the left and an empty right half. The large hero (About) keeps
   its own layout. The shade is even across the band, since the words now fill most of its height: never under 60% Ink
   Blue darkest, which over a pure-white photograph blends to about #6D6D88 (white on it: 5.0:1). */
.bnjc-page-hero:not(.is-large) .bnjc-page-hero__inner {
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	padding-block: clamp(40px, 5vw, 64px);
	text-align: center;
}

.bnjc-page-hero:not(.is-large) .bnjc-breadcrumbs ol {
	justify-content: center;
}

.bnjc-page-hero:not(.is-large) .bnjc-page-hero__words {
	inline-size: 100%;
	max-inline-size: 52rem;
	margin-inline: auto;
}

.bnjc-page-hero:not(.is-large) .bnjc-page-hero__title {
	text-wrap: balance;
}

.bnjc-page-hero:not(.is-large) .bnjc-page-hero__lede {
	max-inline-size: 60ch;
	margin-inline: auto;
	text-wrap: pretty;
}

.bnjc-page-hero:not(.is-large) .bnjc-page-hero__actions {
	justify-content: center;
}

.bnjc-page-hero.has-image:not(.is-large) .bnjc-page-hero__scrim {
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 62%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 60%, transparent) 50%,
		color-mix(in srgb, var(--wp--preset--color--navy-darkest) 70%, transparent) 100%
	);
}

.bnjc-page-hero.is-compact .bnjc-page-hero__inner {
	padding-block: clamp(32px, 4vw, 48px);
}

/* Legal and other narrow pages (area-policies.css sets 48px under the words): 48px above them too. */
.bnjc-page--narrow .bnjc-page-hero.has-band .bnjc-page-hero__inner {
	padding-block: var(--wp--preset--spacing--90);
}

/* ---- Where the hero sits ------------------------------------------------- */
/* On the default and narrow templates the hero is the first child of <main>. */
.bnjc-page > * {
	margin-block: 0;
}

/* Inside the page flow (pages that open their content with the hero) the hero
   is a full-width band, not a title in the column. Same specificity as the
   components.css rules it replaces; this file loads later. */
.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > .bnjc-page-hero {
	grid-column: full;
	padding-inline: max(var(--wp--style--root--padding-left, 24px), calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2));
}

/* The first thing under the hero gets one deliberate gap (components.css set 0,
   because the old head carried its own bottom padding). A band that bleeds
   edge to edge sits straight under it. */
.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > .bnjc-page-hero + * {
	margin-block-start: var(--bnjc-after-hero);
}

.entry-content.wp-block-post-content:is(.bnjc-flow, .bnjc-flow-auto:has(> .bnjc-sub-head)) > .bnjc-page-hero + .alignfull {
	margin-block-start: 0;
}

/* On the default and narrow templates the hero is outside the content, so the
   content carries the same gap as top padding (none if it opens with a band). */
.bnjc-page-body {
	padding-block-start: var(--bnjc-after-hero);
}

.bnjc-page-body:has(> .alignfull:first-child) {
	padding-block-start: 0;
}

/* The bottom: breathing room before the footer, unless the page ends on a band
   that already has its own padding. Section sub pages (the section-landing
   template) get it too once they open with the hero. */
.bnjc-page-body,
.entry-content.wp-block-post-content.bnjc-flow-auto:has(> .bnjc-page-hero) {
	padding-block-end: var(--bnjc-page-end);
}

.bnjc-page-body:has(> .alignfull:last-child),
.entry-content.wp-block-post-content.bnjc-flow-auto:has(> .bnjc-page-hero):has(> .alignfull:last-child) {
	padding-block-end: 0;
}

/* Legal and other narrow pages: the hero is the same, the text is one 68ch
   column at the page's left edge, under the centred hero. */
.bnjc-page--narrow .entry-content.wp-block-post-content.bnjc-page-body:is(.bnjc-flow) > :not(.bnjc-page-hero) {
	max-inline-size: var(--bnjc-measure);
}

/* The hero is the exception (QA H-4). It pads itself in from the page edge to
   the 1344px column, so a 68ch cap on the box left no room for the H1: 74px
   wide at 1920, zero from 1994. It stays a full-width band; its words are
   capped by __words (52rem). */
.bnjc-page--narrow .entry-content.wp-block-post-content.bnjc-page-body:is(.bnjc-flow) > .bnjc-page-hero {
	max-inline-size: none;
}

/* ---- Text with a side panel or picture ---------------------------------- */
/* Replaces the old 3/4 text + 1/4 image columns. Add the class "bnjc-page-split"
   to a Group holding two things: the text, then the panel or picture (give that
   one the class "bnjc-page-split__side"). In the inserter: Patterns → "Page ·
   text with a side panel". The text keeps its 68ch measure, the side takes the
   rest of the column and stays in view as you read; on a phone the side goes
   under the text (add "is-media-first" to put it above). */
.bnjc-page-split.bnjc-page-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--80);
	align-items: start;
}

.bnjc-page-split.bnjc-page-split > * {
	margin: 0;
	min-inline-size: 0;
}

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

.bnjc-page-split__main > * + h2,
.bnjc-page-split__main > * + h3 {
	margin-block-start: var(--wp--preset--spacing--90);
}

.bnjc-page-split__main > :is(p, ul, ol, h2, h3, h4, blockquote) {
	max-inline-size: var(--bnjc-measure, 68ch);
}

.bnjc-page-split.is-media-first > .bnjc-page-split__side {
	order: -1;
}

@media (min-width: 900px) {

	.bnjc-page-split.bnjc-page-split {
		grid-template-columns: minmax(0, 68ch) minmax(280px, 1fr);
		gap: var(--wp--preset--spacing--110);
	}

	.bnjc-page-split.bnjc-page-split.is-media-first {
		grid-template-columns: minmax(280px, 1fr) minmax(0, 68ch);
	}

	.bnjc-page-split.bnjc-page-split > .bnjc-page-split__side {
		position: sticky;
		inset-block-start: calc(var(--wp--custom--layout--header-height, 76px) + var(--wp--preset--spacing--60));
	}
}

/* A picture in the side column: tall, 2px corners like the rest of the calm skin. */
.bnjc-page-split__side img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--xs, 2px);
}

.bnjc-page-split__side figcaption {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--caption);
}

/* A panel for facts, contact details or "good to know": cream-deep ground and a
   rule in the page's section colour. Works in the side column or on its own. */
.bnjc-page-panel {
	padding: var(--wp--preset--spacing--70);
	border-block-start: var(--wp--custom--border--rule-width, 3px) solid var(--bnjc-section, var(--wp--preset--color--navy));
	border-radius: var(--wp--custom--radius--xs, 2px);
	background: var(--wp--preset--color--cream-deep);
	color: var(--wp--preset--color--ink);
}

.bnjc-page-panel > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.bnjc-page-panel :is(h2, h3, h4) {
	margin: 0;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--heading-m);
}