/* ==========================================================================
   Entry pages: one composition per purpose (20 Oct 2026, from the approved mockups
   docs/prototypes/ad-yofi.html, ad-shoresh.html, ad-health.html).
   inc/landing-poster.php puts bnjc-landing--{section} and bnjc-landing--{photo|split|poster}
   on each landing's hero. This file holds the photo-led (YOFI) and split (Shoresh, Health)
   compositions; the type-led poster (Stay, Groups, Jewish Life) is in area-poster.css.
   The section colour (--bnjc-section) and its ink come from the Section in the admin.
   Selectors are long on purpose: they have to beat the earlier hero rules that use !important.
   ========================================================================== */
.bnjc-landing {
	/* The header's own side padding (48px, 18px on a phone), so the hero lines up with the logo. */
	--bnjc-gutter: var(--wp--preset--spacing--90, 48px);
	--bnjc-landing-ink: var(--bnjc-section-ink, var(--wp--preset--color--navy));
}

.wp-block-cover.alignfull.bnjc-section-hero.bnjc-landing--photo .wp-block-cover__background,
.wp-block-cover.alignfull.bnjc-section-hero.bnjc-landing--split .wp-block-cover__background,
.bnjc-landing--photo .wp-block-cover__inner-container::before,
.bnjc-landing--split .wp-block-cover__inner-container::before {
	display: none;
}

/* ---- Photo-led (YOFI): the photograph is the hero, the words sit on a panel ----------- */
.wp-block-cover.alignfull.bnjc-section-hero.bnjc-landing--photo {
	align-items: flex-end;
	justify-content: flex-start;
	min-block-size: min(84vh, 780px) !important;
	padding: 0 var(--bnjc-gutter) clamp(28px, 4vw, 56px) !important;
}

.bnjc-landing--photo .wp-block-cover__inner-container {
	box-sizing: border-box;
	inline-size: min(560px, 100%);
	padding: clamp(24px, 3vw, 40px);
	background: var(--bnjc-section);
	color: var(--bnjc-landing-ink);
	border-radius: var(--wp--custom--radius--xs, 2px);
}

/* ---- Split (Shoresh, Health): words and answers beside one photograph ------------------ */
.wp-block-cover.alignfull.bnjc-section-hero.bnjc-landing--split {
	display: grid !important;
	grid-template-columns: var(--bnjc-split, minmax(0, 6fr) minmax(0, 5fr));
	gap: clamp(24px, 5vw, 80px);
	align-items: center;
	min-block-size: 0 !important;
	padding: clamp(40px, 6vw, 88px) var(--bnjc-gutter) !important;
	background: var(--bnjc-section);
	color: var(--bnjc-landing-ink);
}

.bnjc-landing--gym {
	--bnjc-split: minmax(0, 7fr) minmax(0, 3fr);
}

.bnjc-landing--split .wp-block-cover__image-background {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	inset: auto;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 30% 50%;
	border-radius: var(--wp--custom--radius--xs, 2px);
}

.bnjc-landing--gym .wp-block-cover__image-background {
	object-position: 50% 40%;
}

.bnjc-landing--split .wp-block-cover__inner-container {
	grid-column: 1;
	grid-row: 1;
	padding: 0;
	color: var(--bnjc-landing-ink);
}

.bnjc-landing--split:not(:has(.wp-block-cover__image-background)) .wp-block-cover__inner-container {
	grid-column: 1 / -1;
}

/* Shared: the words on the panel or the ground read in the section's ink. */
.bnjc-landing--photo .wp-block-cover__inner-container :is(h1, p),
.bnjc-landing--split .wp-block-cover__inner-container :is(h1, p) {
	color: var(--bnjc-landing-ink) !important;
}

.bnjc-landing--photo .wp-block-cover__inner-container h1,
.bnjc-landing--split .wp-block-cover__inner-container h1 {
	margin-block: 12px 16px;
	font-size: clamp(var(--wp--preset--font-size--heading-l), 4.6vw, var(--wp--preset--font-size--display-m)) !important;
	line-height: 1.04;
}

.bnjc-landing--shoresh .wp-block-cover__inner-container h1 {
	font-size: clamp(40px, 5.2vw, 80px) !important;
}

/* On-dark buttons were made for a photograph; here they become the outline pill. */
.bnjc-landing--photo .is-style-on-dark .wp-block-button__link,
.bnjc-landing--split .is-style-on-dark .wp-block-button__link {
	background: transparent;
	color: var(--bnjc-landing-ink);
	border: 2px solid var(--bnjc-landing-ink);
}

@media (max-width: 899px) {

	.wp-block-cover.alignfull.bnjc-section-hero.bnjc-landing--split {
		grid-template-columns: minmax(0, 1fr);
	}

	.bnjc-landing--split .wp-block-cover__image-background {
		grid-column: 1;
		grid-row: 2;
		aspect-ratio: 3 / 2;
	}

	.wp-block-cover.alignfull.bnjc-section-hero.bnjc-landing--photo {
		min-block-size: min(70vh, 560px) !important;
		padding-inline: 0 !important;
	}

	.bnjc-landing--photo .wp-block-cover__inner-container {
		inline-size: calc(100% - 2 * 16px);
		margin-inline: 16px;
	}
}

/* ---- Task pages: no signup band under a booking, checkout or enquiry form ---------------- */
.bnjc-task-page .bnjc-signup {
	display: none;
}

/* ---- Cove on the gym entry page: the name, until there is a logo ------------------------- */
.bnjc-cove-mark {
	margin: 0 0 6px !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(var(--wp--preset--font-size--display-s), 5vw, var(--wp--preset--font-size--display-m));
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: lowercase;
}

.bnjc-cove-mark__img {
	display: block;
	block-size: clamp(36px, 4vw, 52px);
	inline-size: auto;
}

/* The YOFI Deli order form is the bnjc/deli-order block, styled by the plugin (blocks/deli-order/style.css). */

@media (max-width: 767px) {

	.bnjc-landing {
		--bnjc-gutter: 18px;
	}
}

/* The split photograph is a supporting picture: a sensible height, not a full-height wall. */
.bnjc-landing--split .wp-block-cover__image-background {
	block-size: clamp(300px, 36vw, 500px);
	aspect-ratio: auto;
}

.bnjc-landing--gym .wp-block-cover__image-background {
	block-size: auto;
	aspect-ratio: 4 / 5;
	max-inline-size: 300px;
	justify-self: end;
}

@media (max-width: 899px) {

	.bnjc-landing--split .wp-block-cover__image-background,
	.bnjc-landing--gym .wp-block-cover__image-background {
		block-size: auto;
		aspect-ratio: 3 / 2;
		max-inline-size: none;
		justify-self: stretch;
	}
}

/* Email and phone in the facts strip: Ink Blue, underlined, readable on cream. */
.bnjc-hours-band .bnjc-hours a {
	color: var(--wp--preset--color--navy);
}