/* ==========================================================================
   Groups (20 Oct 2026 audit): the photograph-led entry hero is composed in area-entry.css
   (inc/landing-poster.php gives Groups the same composition as YOFI). This file is the
   Shabbatonim page: six services as ruled rows, name on the left, what it means on the right.
   ========================================================================== */

.bnjc-gservices {
	margin-block: clamp(8px, 2vw, 24px) clamp(32px, 5vw, 64px);
	border-block-start: 2px solid var(--navy);
}

.bnjc-gservices__item {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(16px, 4vw, 64px);
	padding-block: clamp(24px, 3.4vw, 44px);
	border-block-end: 1px solid color-mix(in srgb, var(--navy) 25%, transparent);
}

.bnjc-gservices__item > h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(var(--wp--preset--font-size--display-s), 3.4vw, var(--wp--preset--font-size--display-m)) !important;
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--navy);
}

.bnjc-gservices__body > * + * {
	margin-block-start: 14px;
}

.bnjc-gservices__body .is-style-standfirst {
	margin: 0;
	font-weight: 600;
	color: var(--navy);
}

.bnjc-gservices__body p {
	max-inline-size: 40rem;
}

.bnjc-gservices__body ul {
	margin: 0;
	padding-inline-start: 1.1em;
	max-inline-size: 40rem;
}

.bnjc-gservices__body li {
	margin-block-end: 6px;
}

/* "A typical weekend" under the rows: the page's flow spacing pulled it up to 20px under the last
   row and the card's 24px inside read as cramped. It gets the rows' own gap above and room inside. */
.entry-content.wp-block-post-content > .bnjc-gservices + .bnjc-cardset.bnjc-cardset {
	margin-block-start: clamp(32px, 5vw, 64px);
}

.bnjc-gservices + .bnjc-cardset .bnjc-cardset__item {
	padding: clamp(24px, 3.4vw, 44px);
}

.bnjc-gservices + .bnjc-cardset .bnjc-cardset__item h3 {
	margin-block-end: 14px;
}

.bnjc-gservices + .bnjc-cardset .bnjc-cardset__item p {
	max-inline-size: 40rem;
}

@media (max-width: 760px) {

	.bnjc-gservices__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

/* The hero panel keeps the width YOFI's has: the section pattern's own full-width rule (components.css)
   would otherwise stretch it across the photograph. */
.wp-block-cover.alignfull.bnjc-section-hero.bnjc-landing--photo.has-custom-content-position .wp-block-cover__inner-container {
	inline-size: min(560px, 100%);
}

@media (max-width: 899px) {

	.wp-block-cover.alignfull.bnjc-section-hero.bnjc-landing--photo.has-custom-content-position .wp-block-cover__inner-container {
		inline-size: calc(100% - 32px);
	}
}