/* ==========================================================================
   Section landings: the calm skin (14 Oct 2026;
   docs/prototypes/internal-pages-modern.html, "section landing").
   Loaded after components.css (inc/assets.php loads every area-*.css).

   The landing pages (YOFI, Gym, Stay, the generic landing) are built from the
   section-* and stay-* patterns, and their copy lives in the page, so this is a
   skin only: a shorter hero, Juana capitals for the page title alone, the
   band headings in bold sentence case, one section-wide gap, 2px corners.
   Where a pattern sets a size or padding inline, the rule here says
   !important on purpose: an inline value is the block's default, and the calm
   rhythm has to win over it without anyone editing sixty pages.
   ========================================================================== */

/* ---- The hero: shorter, and the title is the one Juana line ------------------------- */
.wp-block-cover.alignfull.bnjc-section-hero {
	min-block-size: clamp(300px, 27vw, 380px) !important;
	padding-block-end: var(--wp--preset--spacing--90) !important;
}

.bnjc-section-hero h1,
.bnjc-stay-hero h1 {
	text-transform: none;
	font-size: clamp(var(--wp--preset--font-size--display-s), 5.4vw, var(--wp--preset--font-size--display-l)) !important;
}

/* ---- Band headings: bold, sentence case, one size ----------------------------------- */
:is(.bnjc-section-intro, .bnjc-shabbat-yofi, .bnjc-deli-band, .bnjc-catering-band, .bnjc-closing-band, .bnjc-menu-cards-band, .bnjc-order-band, .bnjc-plans-band, .bnjc-tour-band, .bnjc-doors-band, .bnjc-book-band, .bnjc-apply-band, .bnjc-stay-groups, .bnjc-faq) :is(h2, h3).wp-block-heading {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	text-transform: none;
}

:is(.bnjc-section-intro, .bnjc-shabbat-yofi, .bnjc-deli-band, .bnjc-catering-band, .bnjc-closing-band, .bnjc-menu-cards-band, .bnjc-order-band, .bnjc-plans-band, .bnjc-tour-band, .bnjc-doors-band, .bnjc-book-band, .bnjc-apply-band, .bnjc-stay-groups, .bnjc-faq) h2.wp-block-heading {
	font-size: clamp(28px, 3vw, 44px) !important;
}

/* ---- One gap between bands ---------------------------------------------------------- */
/* Landings are for finding things, so the bands sit close: 56px at most above and below
   (112px between two bands), not the 120px a page of reading can afford. */
:is(.bnjc-section-intro, .bnjc-shabbat-yofi, .bnjc-deli-band, .bnjc-closing-band, .bnjc-menu-cards-band, .bnjc-order-band, .bnjc-plans-band, .bnjc-tour-band, .bnjc-doors-band, .bnjc-book-band, .bnjc-apply-band).wp-block-group {
	padding-block: clamp(32px, 4vw, 56px) !important;
}

.bnjc-catering-band.wp-block-group {
	padding-block-end: clamp(32px, 4vw, 56px) !important;
}

/* ---- The doors into a section: one grid, one look ------------------------------------ */
/* Six cards, three across, all the same size and colour (the first two used to carry the
   colour and the sixth wrapped on its own). The whole card is the link. */
.bnjc-doors {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--60);
}

.bnjc-door,
.bnjc-door.is-primary {
	position: relative;
	box-sizing: border-box; /* block-size: 100% plus padding was 44px taller than its grid cell */
	min-block-size: 112px;
	padding: 22px 24px;
	border: 0;
	background: var(--white);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 14px 40px -26px rgba(11, 12, 56, 0.45);
}

/* No arrow: the card lifts (components.css) and its name underlines on hover and focus. */
.bnjc-door:hover .bnjc-door__name,
.bnjc-door:focus-visible .bnjc-door__name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.bnjc-door:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

.bnjc-door__name,
.bnjc-door:not(.is-primary) .bnjc-door__name {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--wp--preset--color--navy-darkest);
}

.bnjc-door__note {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	opacity: 1;
	color: var(--grey-700);
}

.bnjc-door__note:empty {
	display: none;
}

/* A long note must not make one card taller than its neighbours. */
.bnjc-door__note {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 899px) {

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

@media (max-width: 599px) {

	.bnjc-doors {
		grid-template-columns: 1fr;
	}
}

/* ---- Cards and panels: 2px corners, a soft shadow, no outline ----------------------- */
.bnjc-package,
.bnjc-kashrut-card,
.bnjc-groups-card,
.bnjc-stay-groups__card,
.bnjc-cred {
	border-radius: var(--radius-xs);
}

.bnjc-kashrut-card,
.bnjc-groups-card,
.bnjc-stay-groups__card {
	border: 0;
	box-shadow: 0 14px 40px -26px rgba(11, 12, 56, 0.45);
}

/* ---- The essentials strip, last thing above the footer ------------------------------ */
/* The handful of things a hungry visitor came for, in one line. A fill in the section's
   supporting colour with dark navy ink (terracotta is a fill, never text on cream). */
.bnjc-essentials {
	background: var(--wp--preset--color--yofi-terracotta);
	color: var(--wp--preset--color--navy-darkest);
	padding-block: var(--wp--preset--spacing--60);
}

.bnjc-essentials > p,
.bnjc-essentials .bnjc-essentials__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bnjc-essentials__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--70);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnjc-essentials__list a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.bnjc-essentials__list a:hover {
	text-decoration-thickness: 3px;
}

/* ---- Stay: the unit grid and the cards around it (design only, 14 Oct audit) ---------- */
/* Equal door heights on every landing: the tallest door sets the row. */
.bnjc-doors {
	grid-auto-rows: 1fr;
}

/* The building names ("Elm Tree") were 12px grey capitals: they head the groups of units, so
   they read as headings. */
.bnjc-search .bnjc-search__bname {
	margin-block-end: var(--wp--preset--spacing--50);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy-darkest);
}

/* Unit cards: 2px photos, the guest count and price carry the weight. */
.bnjc-search__photo {
	border-radius: var(--wp--custom--radius--xs, 2px);
}

/* A unit with no photo yet gets a quiet tile, never a blank hole. */
.bnjc-search__photo:not(:has(img)) {
	background: var(--wp--preset--color--cream-deep) repeating-linear-gradient(135deg, transparent 0 9px, rgba(11, 12, 56, 0.06) 9px 10px);
}

.bnjc-search__body .bnjc-search__size {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.bnjc-search__body .bnjc-search__price {
	color: var(--wp--preset--color--navy-darkest);
	font-weight: 800;
}

/* Small print that people need to decide is not 12 or 13px. */
.bnjc-search__lab,
.bnjc-search__hol-name,
.bnjc-search__hol-dates,
.bnjc-cred__note,
.bnjc-stay-events__stay,
.bnjc-stay-events__book,
.bnjc-stay-events__about,
.bnjc-group-logos__name {
	font-size: var(--wp--preset--font-size--small);
}

/* The feature cards are information, not controls: no hover lift, a quiet card. */
.bnjc-cred {
	box-shadow: 0 14px 40px -26px rgba(11, 12, 56, 0.45);
}