/* bnjc/unit-page. Tokens from theme.json only. Mobile first; the two-column
   layout with the sticky booking card starts at 960px. */
.bnjc-unit {
	--unit-gap: 32px;
	--unit-accent: var(--bnjc-section-text, var(--navy));
	--unit-accent-tint: color-mix(in srgb, var(--bnjc-section, var(--navy)) 12%, var(--white));
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: var(--wp--custom--typography--leading-body);
	max-inline-size: var(--wp--style--global--wide-size, 1344px);
	margin-inline: auto;
	padding-inline: var(--gutter, 16px);
	padding-block-end: 112px; /* room for the booking bar on mobile */
	color: var(--ink);
}
.bnjc-unit-placeholder {
	padding: 24px;
	background: var(--white);
	border: 1px dashed var(--wp--preset--color--grey-300);
	border-radius: var(--radius-xs);
}
.bnjc-unit__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.bnjc-unit__gallery {
	position: relative;
	aspect-ratio: 5 / 4; /* the box is reserved before any photo loads */
	margin-inline: calc(var(--gutter) * -1);
	background: var(--navy-deep);
	overflow: hidden;
}
.bnjc-unit__track {
	display: flex;
	block-size: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.bnjc-unit__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	block-size: 100%;
}
.bnjc-unit__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.bnjc-unit__gallery.is-empty {
	display: grid;
	place-items: center;
	background: var(--navy);
}
.bnjc-unit__gallery.is-empty.has-plan {
	background: var(--white);
	border: 1px solid var(--wp--custom--color--grey-100);
}
.bnjc-unit__plan {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: 16px;
	box-sizing: border-box;
	object-fit: contain;
}
.bnjc-unit__empty {
	margin: 0;
	color: var(--white);
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 600;
}
.bnjc-unit__counter {
	position: absolute;
	inset-block-end: 14px;
	inset-inline: 0;
	inline-size: max-content;
	margin: 0 auto;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: var(--navy-darkest);
	color: var(--white);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.bnjc-unit__nav {
	display: none; /* desktop with JavaScript only, see below */
}
.bnjc-unit__head {
	padding-block-start: 24px;
}
.bnjc-unit__overline {
	margin: 0 0 6px;
	color: var(--bnjc-section-text, var(--navy));
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline);
	text-transform: uppercase;
}
.bnjc-unit__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-m);
	text-wrap: balance;
}
.bnjc-unit__sub {
	margin: 10px 0 0;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}
.bnjc-unit__spec {
	margin: 12px 0 0;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--medium);
}
.bnjc-unit__score {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-min);
	color: var(--ink);
	font-weight: 700;
	white-space: nowrap;
}
.bnjc-unit__back {
	margin: 0 0 12px;
}
.bnjc-unit__back a,
.bnjc-unit__links a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-block-size: var(--touch-min);
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}
.bnjc-unit__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin: 16px 0 0;
}
.bnjc-unit__highlights {
	display: grid;
	margin: 24px 0 0;
	padding: 4px 0;
	list-style: none;
	border-block: 1px solid var(--wp--custom--color--divider);
}
.bnjc-unit__highlights li {
	display: flex;
	gap: 14px;
	align-items: center;
	padding-block: 12px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}
.bnjc-unit__tick {
	display: grid;
	place-items: center;
	flex: 0 0 36px;
	block-size: 36px;
	border-radius: var(--radius-pill);
	background: var(--unit-accent-tint);
	color: var(--unit-accent);
}
/* The unit's own copy: body size, regular weight, loose leading and a readable line length. */
.bnjc-unit__copy {
	max-inline-size: 68ch;
	margin-block-start: 24px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: var(--wp--custom--typography--leading-loose);
}
.bnjc-unit__copy > * + * {
	margin-block-start: 1em;
}
.bnjc-unit__section {
	margin-block-start: 36px;
}
/* Sub-heads are working type, not display: body face, sentence case. */
.bnjc-unit__section h2,
.bnjc-unit__section h3 {
	margin: 0 0 12px;
	color: var(--unit-accent);
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
}
.bnjc-unit__section h2 {
	font-size: var(--wp--preset--font-size--heading-m);
}
/* A short Pomegranate rule under each section heading: the motif line, a touch of colour. */
.bnjc-unit__section h2::after {
	content: "";
	display: block;
	inline-size: 40px;
	block-size: 3px;
	margin-block-start: 8px;
	background: var(--accent-dark);
	border-radius: var(--radius-pill);
}
.bnjc-unit__section h3 {
	margin-block-start: 24px;
	font-size: var(--wp--preset--font-size--heading-s);
}
.bnjc-unit__sleep {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bnjc-unit__sleep li {
	display: grid;
	gap: 4px;
	padding: 16px;
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-default);
	border-radius: var(--radius-md);
	font-size: var(--wp--preset--font-size--medium);
}
.bnjc-unit__sleep span {
	color: var(--grey-700);
}
/* Where you'll sleep: one row per room, a bed icon in the section colour. */
.bnjc-unit__rooms {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bnjc-unit__rooms li {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px 16px;
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-default);
	border-radius: var(--radius-md);
}
.bnjc-unit__bed {
	flex: none;
	box-sizing: content-box;
	padding: 8px;
	background: var(--unit-accent-tint);
	border-radius: var(--radius-pill);
	color: var(--unit-accent);
}
.bnjc-unit__room {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}
.bnjc-unit__room strong {
	font-weight: 700;
}
.bnjc-unit__room span {
	color: var(--grey-700);
}
.bnjc-unit__amenities {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--medium);
}
.bnjc-unit__amenities li {
	position: relative;
	padding-inline-start: 1.5em;
}
/* A small dot, not an arrow. */
.bnjc-unit__amenities li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.2em;
	inset-block-start: 0.65em;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--unit-accent);
}
.bnjc-unit__more {
	margin-block-start: 14px;
}
.bnjc-unit__more[open] > summary {
	margin-block-end: 14px;
}
.bnjc-unit__more summary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	background: var(--white);
	border: 1px solid var(--ink);
	border-radius: var(--radius-pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.bnjc-unit__more summary::-webkit-details-marker {
	display: none;
}
.bnjc-unit__reviews :is(blockquote, p) {
	margin: 0;
}
/* Good to know */
.bnjc-unit__know {
	padding: 20px;
	background: var(--wp--custom--color--gold-tint);
	border-radius: var(--radius-md);
}
.bnjc-unit__facts {
	display: grid;
	gap: 14px;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}
.bnjc-unit__facts dt {
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline);
	text-transform: uppercase;
}
.bnjc-unit__facts dd {
	margin: 2px 0 0;
	line-height: 1.5;
}
/* ---- Booking: the bar on mobile ----------------------------------------- */
.bnjc-unit__book {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 40;
	padding: 12px var(--gutter) max(14px, env(safe-area-inset-bottom));
	background: var(--white);
	border-block-start: 1px solid var(--wp--custom--color--divider);
	box-shadow: var(--wp--preset--shadow--card);
}
.bnjc-unit__card {
	min-inline-size: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 16px;
	align-items: center;
	max-inline-size: var(--wp--style--global--wide-size, 1344px);
	margin-inline: auto;
}
.bnjc-unit__status {
	grid-column: 1;
	margin: 0;
	overflow-wrap: anywhere;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
}
.bnjc-unit__status strong {
	font-size: var(--wp--preset--font-size--medium);
}
.bnjc-unit__status small {
	display: block;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
}
.bnjc-unit__status.is-error {
	color: var(--wp--custom--color--berry-deep);
	font-weight: 600;
}
.bnjc-unit__toggle {
	display: none;
	grid-column: 1;
	justify-self: start;
	min-block-size: var(--touch-min);
	margin-block: -8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--navy);
	font: inherit;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
/* Reserve, with a call button beside it on phones when a phone number is set. */
.bnjc-unit__act {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	gap: 8px;
	align-items: center;
}
.bnjc-unit__call {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-pill);
	color: var(--navy);
}
.bnjc-unit__call:hover {
	background: var(--wp--custom--color--navy-tint);
}
.bnjc-unit__call:focus-visible {
	outline: 2px solid var(--focus-ring, var(--navy));
	box-shadow: 0 0 0 4px var(--focus-halo, var(--white));
	outline-offset: 2px;
}
.bnjc-unit__reserve {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 52px;
	padding-inline: 22px;
	background: var(--navy);
	border-radius: var(--radius-pill);
	color: var(--white);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-decoration: none;
}
.bnjc-unit__reserve:hover {
	background: var(--navy-deep);
	color: var(--white);
}
.bnjc-unit__fine {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--caption);
}
/* An enquiry-only unit says so beside the button, in the bar as well as in the open sheet. */
.bnjc-unit__only {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--caption);
}
.bnjc-unit__only strong {
	color: var(--navy);
}
/* The date fields need JavaScript. Without it the bar is a price and a link. */
.bnjc-unit__fields {
	display: none;
	grid-column: 1 / -1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.bnjc-unit__book[data-ready] .bnjc-unit__toggle {
	display: inline-flex;
	align-items: center;
}
.bnjc-unit__book[data-ready].is-open .bnjc-unit__fields {
	display: grid;
}
.bnjc-unit__book[data-ready]:not(.is-open) .bnjc-unit__fine {
	display: none; /* the bar stays short; the note shows once the sheet is open */
}
/* An enquiry-only unit: the button asks, it does not book, so "No payment is taken" stays under it
   in the bar, not only after the sheet is opened (UX review 22 Oct, item 10). */
.bnjc-unit__book[data-mode="enquiry"][data-ready]:not(.is-open) .bnjc-unit__fine {
	display: block;
}
.bnjc-unit__field {
	display: grid;
	gap: 4px;
}
.bnjc-unit__field.is-wide {
	grid-column: 1 / -1;
}
.bnjc-unit__field label {
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 700;
	letter-spacing: var(--wp--custom--typography--tracking-overline);
	text-transform: uppercase;
}
.bnjc-unit__field,
.bnjc-unit__field input,
.bnjc-unit__field select,
.bnjc-unit__date {
	min-inline-size: 0;
}
.bnjc-unit__field input,
.bnjc-unit__field select,
.bnjc-unit__date {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 48px;
	padding-inline: 12px;
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-default);
	border-radius: var(--radius-md);
	color: var(--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.bnjc-unit__fields {
	position: relative;
}
.bnjc-unit__date {
	text-align: start;
	cursor: pointer;
}
/* The calendar sheet (assets/css/stay-calendar.css) opens over the fixed booking bar. */
.bnjc-cal-open .bnjc-unit__book {
	z-index: 200;
}
.bnjc-unit__candles {
	grid-column: 1 / -1;
}
/* "I only need one room": a plain tick box, 44px to tap. It adds a note at checkout, never a price. */
.bnjc-unit__one {
	display: flex;
	grid-column: 1 / -1;
	gap: 10px;
	align-items: center;
	min-block-size: var(--touch-min);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}
.bnjc-unit__one input {
	flex: none;
	inline-size: 22px;
	block-size: 22px;
	margin: 0;
	accent-color: var(--navy);
}
.bnjc-unit__one input:focus-visible {
	outline: 2px solid var(--focus-ring, var(--navy));
	box-shadow: 0 0 0 4px var(--focus-halo, var(--white));
	outline-offset: 2px;
}
.bnjc-unit__candles,
.bnjc-unit__chips p {
	overflow-wrap: anywhere;
	margin: 0;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--caption);
}
/* ---- Coming up chips: page body on phones, booking card on desktop ---- */
.bnjc-unit__chips p {
	margin-block-end: 6px;
	font-weight: 600;
}
.bnjc-unit__chips ul {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
}
.bnjc-unit__chips a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-min);
	padding-inline: 14px;
	border: 1px solid var(--navy);
	border-radius: var(--radius-pill);
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	scroll-snap-align: start;
	text-decoration: none;
	white-space: nowrap;
}
/* In the booking card there is no room to scroll sideways: chips wrap to the card's width. */
.bnjc-unit__chips.is-panel a {
	max-inline-size: 100%;
	padding-block: 6px;
	white-space: normal;
}
.bnjc-unit__chips a:hover {
	background: var(--wp--custom--color--navy-tint);
}
.bnjc-unit__chips.is-head {
	margin-block: 16px 0;
}
.bnjc-unit__chips.is-panel {
	display: none;
}
/* Phone, bar expanded: dates, guests, then price and Reserve. */
@media (max-width: 959px) {
	.is-open .bnjc-unit__toggle {
		grid-column: 1 / -1;
	}
	.is-open .bnjc-unit__fields {
		grid-row: 2;
	}
	.is-open .bnjc-unit__status,
	.is-open .bnjc-unit__act {
		grid-row: 3;
	}
	.is-open .bnjc-unit__fine {
		grid-row: 4;
	}
}
/* ---- Tablet and up ------------------------------------------------------- */
@media (min-width: 600px) {
	.bnjc-unit__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bnjc-unit__facts > div:last-child {
		grid-column: 1 / -1;
	}
}
/* ---- Desktop: two columns, the card sticks ------------------------------- */
@media (min-width: 960px) {
	.bnjc-unit {
		padding-block-end: 80px;
	}
	.bnjc-unit__gallery {
		aspect-ratio: 21 / 9;
		margin-inline: 0;
		border-radius: var(--radius-md);
	}
	.bnjc-unit__counter {
		inset-inline: auto 16px;
		margin: 0;
	}
	.bnjc-unit__gallery[data-ready] .bnjc-unit__nav {
		position: absolute;
		inset-block-start: 50%;
		display: grid;
		place-items: center;
		inline-size: var(--touch-min);
		block-size: var(--touch-min);
		margin-block-start: -22px;
		padding: 0;
		background: var(--white);
		border: 0;
		border-radius: var(--radius-pill);
		box-shadow: var(--wp--preset--shadow--card);
		color: var(--ink);
		cursor: pointer;
	}
	.bnjc-unit__nav.is-prev {
		inset-inline-start: 16px;
	}
	.bnjc-unit__nav.is-next {
		inset-inline-end: 16px;
	}
	[dir="rtl"] .bnjc-unit__nav svg {
		scale: -1 1;
	}
	.bnjc-unit__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(320px, 34vw, 380px);
		gap: clamp(32px, 4vw, 56px);
		align-items: start;
	}
	.bnjc-unit__book {
		position: sticky;
		inset-block-start: calc(var(--header-h) + 24px);
		inset-inline: auto;
		z-index: auto;
		margin-block-start: 24px;
		min-inline-size: 0;
		padding: clamp(16px, 2vw, 24px);
		border: 1px solid var(--wp--custom--color--border-subtle);
		border-block-start: 4px solid var(--accent-dark);
		border-radius: var(--radius-md);
		box-shadow: var(--wp--preset--shadow--raised);
	}
	.bnjc-unit__card {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.bnjc-unit__status,
	.bnjc-unit__fields,
	.bnjc-unit__act,
	.bnjc-unit__fine {
		grid-column: 1;
		grid-row: auto;
	}
	.bnjc-unit__call {
		display: none; /* the desktop card is a section of the page, not a bar */
	}
	.bnjc-unit__status {
		font-size: var(--wp--preset--font-size--medium);
	}
	.bnjc-unit__status strong {
		font-size: var(--wp--preset--font-size--heading-m);
	}
	.bnjc-unit__book[data-ready] .bnjc-unit__toggle {
		display: none;
	}
	.bnjc-unit__book[data-ready] .bnjc-unit__fields {
		display: grid;
		grid-row: auto;
	}
	.bnjc-unit__book[data-ready]:not(.is-open) .bnjc-unit__fine {
		display: block;
	}
	.bnjc-unit__reserve {
		inline-size: 100%;
		box-sizing: border-box;
	}
	.bnjc-unit__chips.is-head {
		display: none;
	}
	.bnjc-unit__chips.is-panel {
		display: block;
		grid-column: 1;
	}
	.bnjc-unit__chips.is-panel ul {
		flex-wrap: wrap;
		overflow: visible;
	}
	.bnjc-unit__fine {
		text-align: center;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.bnjc-unit__track {
		scroll-behavior: smooth;
	}
}

/* Dates chosen (view.js): the holiday shortcuts step aside. */
.bnjc-unit-has-dates .bnjc-unit__chips {
	display: none;
}