/* ==========================================================================
   The blog (area: blog). Loaded after components.css.
   Covers the News page as a blog index, the archive banner on old posts, the
   end-of-post module, and the way a post's own text is set (spacing, headings,
   pictures, the embedded sign-up form). Markup comes from the plugin's
   Blog\Blog (block bnjc/blog-parts); every word is in BNJC → News and blog.

   Type: Gyst (display) for titles and headings, Heebo for the rest. Colour
   comes from theme.json tokens; section colours are not used as text.
   ========================================================================== */

.bnjc-blog-archive,
.bnjc-blog-cta,
.bnjc-blog-invite,
.bnjc-post-card {
	box-sizing: border-box;
}

/* ---- Pieces shared by the index and the end of a post ----------------------------------- */
.bnjc-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1023px) {

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

@media (max-width: 640px) {

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

.bnjc-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: var(--white);
	border-radius: var(--radius-xs);
	overflow: hidden;
	box-shadow: 0 14px 40px -26px rgba(11, 12, 56, 0.45);
	transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.bnjc-post-card:hover {
	box-shadow: 0 18px 44px -24px rgba(11, 12, 56, 0.55);
	transform: var(--lift-hover, none);
}

.bnjc-post-card__media {
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--cream-deep);
	overflow: hidden;
}

.bnjc-post-card__media.is-placeholder {
	background: var(--wp--preset--color--cream-deep) repeating-linear-gradient(135deg, transparent 0 9px, rgba(0, 0, 0, 0.05) 9px 10px);
}

.bnjc-post-card__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.bnjc-post-card__body {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 18px 20px 24px;
}

.bnjc-post-card__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grey-700);
}

/* An event ticked "Also show in News" (Blog\EventsInNews): its label stands out from the date, in the accent for a light ground. */
.bnjc-post-card__kind {
	color: var(--accent);
}

.bnjc-post-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.bnjc-post-card__title a {
	color: var(--navy);
	text-decoration: none;
}

/* One link, stretched over the whole card. */
.bnjc-post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bnjc-post-card__title a:focus-visible {
	outline: none;
}

.bnjc-post-card__title a:focus-visible::after {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

.bnjc-post-card__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--ink);
}

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

	.bnjc-post-card {
		transition: none;
	}

	.bnjc-post-card:hover {
		transform: none;
	}
}

/* ---- The News page ------------------------------------------------------------------------- */
.bnjc-blog-head {
	max-inline-size: 780px;
	margin-block-end: var(--wp--preset--spacing--70);
}

.bnjc-blog-head__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--berry);
}

.bnjc-blog-head__title {
	margin: 0;
	text-transform: none;
	color: var(--navy);
	font-size: clamp(var(--wp--preset--font-size--display-s), 6vw, var(--wp--preset--font-size--display-l));
}

.bnjc-blog-head__intro {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-inline-size: 62ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: var(--ink);
}

.bnjc-blog-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 var(--wp--preset--spacing--80);
	padding: 0;
	list-style: none;
}

.bnjc-blog-chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: 18px;
	border-radius: var(--radius-pill);
	background: var(--white);
	box-shadow: 0 8px 24px -16px rgba(11, 12, 56, 0.5);
	color: var(--navy);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition-control);
}

.bnjc-blog-chip:hover {
	box-shadow: 0 8px 24px -14px rgba(11, 12, 56, 0.6);
}

.bnjc-blog-chip.is-active {
	background: var(--navy);
	color: var(--white);
}

/* The latest post: picture and words side by side. */
.bnjc-blog-feature {
	margin-block-end: var(--wp--preset--spacing--80);
}

.bnjc-post-card.is-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: stretch;
}

.bnjc-post-card.is-featured .bnjc-post-card__media {
	aspect-ratio: auto;
	min-block-size: 340px;
}

.bnjc-post-card.is-featured .bnjc-post-card__body {
	align-content: center;
	gap: 14px;
	padding: clamp(24px, 4vw, 48px);
}

.bnjc-post-card.is-featured .bnjc-post-card__title {
	font-size: clamp(var(--wp--preset--font-size--heading-l), 3vw, var(--wp--preset--font-size--display-s));
}

.bnjc-post-card.is-featured .bnjc-post-card__excerpt {
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 781px) {

	.bnjc-post-card.is-featured {
		grid-template-columns: minmax(0, 1fr);
	}

	.bnjc-post-card.is-featured .bnjc-post-card__media {
		aspect-ratio: 3 / 2;
		min-block-size: 0;
	}
}

/* An event category or a venue page: the What's On cards, then the events that have finished. */
.bnjc-blog-events {
	margin-block-end: var(--wp--preset--spacing--100);
}

.bnjc-blog-events__earlier {
	margin: 0 0 var(--wp--preset--spacing--70);
	text-transform: none;
	color: var(--navy);
	font-size: var(--wp--preset--font-size--heading-l);
}

/* The earlier events keep the same 32px spacing as the cards above them, across and down. */
.bnjc-blog-events__earlier + .bnjc-blog-grid {
	gap: var(--wp--preset--spacing--70);
}

/* The head reads as the What's On page's: the introduction in the standfirst size and measure (52ch, 1.45). */
.bnjc-blog-head--whats-on .bnjc-blog-head__intro {
	max-inline-size: 52ch;
	font-size: var(--wp--preset--font-size--standfirst);
	line-height: 1.45;
}

.bnjc-blog-empty {
	margin: 0 0 var(--wp--preset--spacing--80);
	font-size: var(--wp--preset--font-size--medium);
}

/* Older and newer pages. */
.bnjc-blog-pages ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: var(--wp--preset--spacing--80) 0 0;
	padding: 0;
	list-style: none;
}

.bnjc-blog-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding-inline: 14px;
	border-radius: var(--radius-pill);
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
}

.bnjc-blog-pages .page-numbers.current {
	background: var(--navy);
	color: var(--white);
}

.bnjc-blog-pages a.page-numbers:hover {
	background: var(--white);
}

/* The invitation to send community news. */
.bnjc-blog-invite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	margin-block-start: var(--wp--preset--spacing--section);
	padding: clamp(24px, 4vw, 48px);
	border-radius: var(--radius-xs);
	background: var(--navy);
	color: var(--white);
}

.bnjc-blog-invite__words {
	flex: 1 1 380px;
	max-inline-size: 60ch;
}

.bnjc-blog-invite__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--display-xs);
	line-height: 1.05;
	text-transform: none;
	color: var(--white);
}

.bnjc-blog-invite__words p {
	margin: 0;
	line-height: 1.55;
	color: var(--white);
}

.bnjc-blog-invite__actions {
	display: grid;
	justify-items: start;
	gap: 12px;
}

.bnjc-blog-invite__button,
.bnjc-blog-cta__button {
	box-sizing: border-box;
	min-block-size: 48px;
	padding-inline: 22px;
	border-color: transparent;
	background: var(--white);
	color: var(--navy);
}

.bnjc-blog-invite__button:hover,
.bnjc-blog-cta__button:hover {
	background: var(--cream);
	color: var(--navy);
}

.bnjc-blog-invite__button:focus-visible,
.bnjc-blog-cta__button:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 3px;
}

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

/* ---- The note on an older post (Blog\ArchiveNote) ------------------------------------------------------------ */
.bnjc-blog-archive {
	margin-block-end: var(--wp--preset--spacing--60);
	padding: 16px 20px;
	background: var(--wp--preset--color--cream-deep);
	border-inline-start: 6px solid var(--navy);
	border-radius: var(--radius-xs);
	color: var(--ink);
}

.bnjc-blog-archive__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.bnjc-blog-archive__text {
	flex: 1 1 320px;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

/* A quiet text link, not a button: the band is a note, not a call to action. 44px target, Ink Blue on cream (well over 4.5:1). */
.bnjc-blog-archive__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	box-sizing: border-box;
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bnjc-blog-archive__link:hover {
	color: var(--navy-deep);
	text-decoration-thickness: 2px;
}

/* ---- End of a post: a call to action and three more posts -------------------------------------- */
.bnjc-blog-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding: clamp(24px, 4vw, 40px);
	border-radius: var(--radius-xs);
	background: var(--navy);
	color: var(--white);
}

.bnjc-blog-cta__words {
	flex: 1 1 360px;
	max-inline-size: 56ch;
}

.bnjc-blog-cta__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.1;
	text-transform: none;
	color: var(--white);
}

.bnjc-blog-cta__words p {
	margin: 0;
	line-height: 1.5;
	color: var(--white);
}

.bnjc-blog-related {
	margin-block-start: var(--wp--preset--spacing--section);
}

.bnjc-blog-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-block-end: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--custom--color--border-subtle);
}

.bnjc-blog-related__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-l);
	text-transform: none;
	color: var(--navy);
}

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

/* ==========================================================================
   A post's own text (20 Oct 2026: "check formatting").
   The text is held to one reading column (860px, Gyst headings, a calmer
   rhythm than a page's), pictures are capped so a poster or a headshot does
   not fill the screen, and what the old site left behind (bold lines used as
   headings, stray line breaks, a form in its default blue) is set properly
   here, in one place, rather than post by post.

   4 Nov 2026 (Yosef: "page feels too narrow"): the column went from 720px to
   860px (templates/single.html). Event boxes, pictures, tables and the title
   take the whole 860px; running text grows from 18px to about 19px on a laptop
   (fluid, 18px on a phone, never past the 20px step) and its lines stop at
   40em, about 770px, so a line is no longer than it was at 720px.
   ========================================================================== */
.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow {
	/* em, so it follows each block's own size: a paragraph or a list stops at about 88 characters,
	   a heading or a quote (bigger type) runs the whole column. */
	--bnjc-measure: 40em;
	/* The page flow keeps a 24px edge each side of its column; this column is already the reading width. */
	--bnjc-edge: 0px;
	--bnjc-gap: var(--wp--preset--spacing--50);
	--bnjc-gap-heading: var(--wp--preset--spacing--70);
	--bnjc-gap-section: var(--wp--preset--spacing--80);
	--bnjc-gap-h2-below: var(--wp--preset--spacing--40);
	--bnjc-gap-h3-below: var(--wp--preset--spacing--30);
	font-size: clamp(var(--wp--preset--font-size--medium), 1rem + 0.25vw, var(--wp--preset--font-size--large));
	line-height: 1.7;
}

.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > :is(h2, h3, h4, h5).wp-block-heading {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.1;
	color: var(--navy);
	text-wrap: balance;
}

.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--display-s);
}

/* Old posts use H3 and H4 as their section headings (Blog::tidy_headings renumbers them so the
   page's headings run in order); the level under H2 is one step smaller. */
.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > :is(h3, h4, h5).wp-block-heading {
	font-size: var(--wp--preset--font-size--display-xs);
}

.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > * + :is(h4, h5) {
	margin-block-start: var(--bnjc-gap-heading);
}

.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > :is(h4, h5) + * {
	margin-block-start: var(--bnjc-gap-h3-below);
}

/* theme.json gives every paragraph the site's 1.55 leading; a post's longer lines take the column's
   1.7 (1.6 on a phone) instead. */
.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > p {
	margin-block-end: 0;
	line-height: inherit;
}

/* Lists: recipes and "when, where, book" lines. */
.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > :is(ul, ol).wp-block-list {
	padding-inline-start: 1.3em;
	line-height: inherit;
}

.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > :is(ul, ol).wp-block-list li + li {
	margin-block-start: 0.45em;
}

/* A leading bold phrase sat tight against the text after it. */
.bnjc-post .entry-content p > strong:first-child:not(:only-child) {
	margin-inline-end: 0.35em;
}

/* A paragraph that is only a bold line is a heading in disguise ("1. On the couch"). */
.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > p:has(> :is(b, strong):only-child) {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.15;
	color: var(--navy);
}

.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > p:has(> :is(b, strong):only-child) :is(b, strong) {
	font-weight: 700;
}

/* A short line between a picture and a heading is that picture's date or label. */
.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > figure + p:has(+ h2) {
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--berry);
}

/* Pictures: capped in height, centred, never wider than the column. A poster or a headshot is a
   portrait, so it stands at a sensible size instead of filling the screen. */
.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > figure.wp-block-image {
	margin-inline: 0;
	text-align: center;
}

.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow > figure.wp-block-image img {
	display: inline-block;
	inline-size: auto;
	max-inline-size: 100%;
	max-block-size: min(70vh, 560px);
	block-size: auto;
	border-radius: var(--radius-xs);
	object-fit: contain;
}

.bnjc-post .entry-content figcaption {
	margin-block-start: 8px;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--grey-700);
}

/* Video and other embeds fill the column at 16:9. */
.bnjc-post .entry-content .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.bnjc-post .entry-content .wp-block-embed__wrapper iframe,
.bnjc-post .entry-content .wp-block-video video {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.bnjc-post .entry-content .wp-block-video video {
	position: static;
	block-size: auto;
}

.bnjc-post .entry-content blockquote,
.bnjc-post .entry-content .wp-block-pullquote {
	margin-inline: 0;
	padding: 0 0 0 var(--wp--preset--spacing--50);
	border: 0;
	border-inline-start: 4px solid var(--accent-dark);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.25;
	color: var(--navy);
}

/* A form inside a post (the On The Couch notify list): a quiet card in the site's colours, not
   Gravity Forms' default blue. */
.bnjc-post .entry-content .gform_wrapper {
	margin-block: var(--wp--preset--spacing--60);
	padding: clamp(20px, 3vw, 32px);
	background: var(--wp--preset--color--cream-deep);
	border-radius: var(--radius-xs);
}

.bnjc-post .entry-content .gform_wrapper.gform-theme {
	--gf-color-primary: var(--navy) !important;
	--gf-color-primary-darker: var(--navy-deep) !important;
	--gf-color-primary-lighter: var(--wp--preset--color--blue) !important;
	--gf-color-in-ctrl-primary: var(--navy) !important;
	--gf-color-in-ctrl-primary-darker: var(--navy-deep) !important;
	--gf-color-in-ctrl-primary-lighter: var(--wp--preset--color--blue) !important;
	--gf-radius: 2px !important;
}

/* The button in a post is the shared pill (area-forms.css). */

/* The page around the text. */
.bnjc-post__head .bnjc-post-meta {
	margin-block-end: var(--wp--preset--spacing--40);
}

.bnjc-post__head .wp-block-post-title {
	text-transform: none;
	color: var(--navy);
	font-size: clamp(var(--wp--preset--font-size--display-s), 5vw, var(--wp--preset--font-size--display-m));
	line-height: 1.04;
}

/* The featured picture (4 Nov 2026: "hero feels way too big"). It used to run edge to edge at
   16:9 (720px tall on a laptop). Now it sits centred in a frame a little wider than the 860px
   column, inside the page gutter, and is a wide letterbox: 21:9 and never over 480px tall on a
   laptop, 2:1 on a tablet, 3:2 on a phone so it is not a thin strip. The template's aspect ratio
   is an inline style, hence !important. Cover, centred, so the middle of the photo stays. */
.bnjc-post > .wp-block-post-featured-image.bnjc-post__image {
	inline-size: min(1120px, 100% - var(--wp--style--root--padding-left, 24px) - var(--wp--style--root--padding-right, 24px));
	max-inline-size: none;
	margin-inline: auto;
	margin-block-end: 0;
}

.bnjc-post__image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 21 / 9 !important;
	max-block-size: 480px;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: var(--radius-md);
}

@media (max-width: 1023px) {

	.bnjc-post__image img {
		aspect-ratio: 2 / 1 !important;
	}
}

@media (max-width: 640px) {

	.bnjc-post__image img {
		aspect-ratio: 3 / 2 !important;
	}
}

/* Event posters in a post (figure.bnjc-flier, a portrait poster linked to its event). The wider
   column would make them over 1,000px tall, so they stop at 580px wide, centred, whole (never
   cropped). On a phone they are narrower than that anyway. */
.bnjc-post .entry-content figure.bnjc-flier {
	max-inline-size: 580px;
	margin-inline: auto;
}

.bnjc-post .entry-content figure.bnjc-flier img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
}

@media (max-width: 640px) {

	.bnjc-post .entry-content.wp-block-post-content.bnjc-post__content.bnjc-flow {
		line-height: 1.6;
	}

	.bnjc-blog-cta__button,
	.bnjc-blog-invite__button {
		inline-size: 100%;
		justify-content: center;
	}
}