/* Two Panel (Intro + Checklist) block */

.two-panel {
	background: #f5f5f5;
	padding-top:    var( --tp-pt, 4.5rem );
	padding-bottom: var( --tp-pb, 4.5rem );
	margin-top:     var( --tp-mt, 0rem );
	margin-bottom:  var( --tp-mb, 0rem );
}

.two-panel__inner {
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.75rem;
	align-items: stretch;
}

/* Optional section heading above the two cards */
.two-panel__head { max-width: 75rem; margin: 0 auto 2.25rem; padding: 0 1.5rem; }
.two-panel__eyebrow {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 1rem; font-weight: 500; letter-spacing: 0.25rem;
	text-transform: uppercase; color: rgba( 0, 13, 38, 0.7 ); margin: 0 0 0.6rem;
}
.two-panel__heading {
	font-family: 'Quincy', Georgia, serif;
	font-weight: 400; font-size: clamp( 2rem, 3.6vw, 3rem );
	line-height: clamp( 2.2rem, 3.96vw, 3.3rem ); color: #000d26; margin: 0;
}

/* Left navy intro card */
.two-panel__left {
	background: #000d26;
	color: #fff;
	border-radius: 1.5625rem;   /* 25px */
	padding: 3rem 2.75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.two-panel__left-heading {
	font-family: 'Quincy', Georgia, serif;
	font-weight: 400;
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	line-height: clamp( 2.0125rem, 3.45vw, 2.875rem );
	color: #fff;
	margin: 0 0 1.25rem;
}
.two-panel__left-body {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem;
	line-height: 1.6;
	color: #eef1f6;
	margin: 0 0 1.1rem;
}
.two-panel__left-body:last-child { margin-bottom: 0; }
.two-panel__left-body strong { color: #fff; }

/* Right light checklist card */
.two-panel__right {
	background: #e8ecf5;
	border-radius: 1.5625rem;
	padding: 3.125rem 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.two-panel__right-heading {
	font-family: 'Quincy', Georgia, serif;
	font-weight: 400;
	font-size: clamp( 1.9rem, 3.2vw, 2.75rem );
	line-height: clamp( 2.09rem, 3.52vw, 3.025rem );
	color: #000d26;
	margin: 0 0 1.75rem;
}
.two-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.two-panel__item {
	position: relative;
	padding-left: 2.5rem;
	margin-bottom: 1.1rem;
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem;
	line-height: 1.5;
	color: #2a3346;
}
.two-panel__item:last-child { margin-bottom: 0; }
.two-panel__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.5rem;
	height: 1.25rem;
	/* Inlined as a data URI on purpose — do NOT change back to url("list-icon.webp").
	   This was the theme's only relative url(), and WP Rocket's "Lazy load CSS
	   background images" rewrote it to an absolute URL by prepending the site path
	   to a CSS path that already contained /staging/, producing /staging/staging/...
	   -> 404 -> invisible plug icons (mobile cache only, since WP Rocket processes
	   mobile and desktop separately). At 666 bytes inlining also removes a request
	   and keeps working when the site moves from /staging/ to the domain root. */
	background: url( "data:image/webp;base64,UklGRpICAABXRUJQVlA4WAoAAAAQAAAALgAAJgAAQUxQSBcBAAARkDMAtLHlIzrZNdl27a7RbnKr6w+4RtvmVO+cm2y7Rn3GpPPhntt9T0RMAIg10lO9jRXxdqBdVHjTHsoLEQ8zdHghrnszw29ZzBBruGGlXECFkDgcFc7s/5TBTKkClK8B0ipnQ+KTAwMASHtH4DQPcL0lMIQHeHwguplAOvHFjAmsijCFSwbRRWU+CpUZfxd9WhPHglgZbInoAq0NcWviVsOtjlsft7U3ZX0SKjP6Jvo1Ko4oQPm3JaL4FEhtLRO9TNKRTOAR/JF4MmQR+opkNTAwb/iB5Kul1oxi2t+jZD5IehUIiUvN/wuXP1F6FhQSandNeR1YA6t5c+D0pVAHGH1psgHVKn4sl1iCeo383GhzaYwVqAUAVlA4IFQBAACwCwCdASovACcAPn0ylEakoyIhNVgIAJAPiWwArDlBfqv4gdbhLjl/4q/krzhmtZCv/M/cz7gOYP3AH62frl7AH6Z9gB+zPWAegB+qvpmewv+4fo3f/8H68bwifuHH0RTLITZw/wAA/u/8lemQurfTyyC0Vruc3SEAW3NUXlfaLmvtjh9XhQ4kqJZMhdocyM2Zne9QLeKm7k69pIe1GF9Y2s6U6aCs+rAdCHo8l+amk82eeWn+lGwheV6/k86NJKjUFwIa7oHbdNJ8G7G8eJGVXXG7rrAFiSIyMAimvL+rAY2CiI4CVzb8LGjLUPJL0kUq4RRT6g2HrRbwdlO160fxnl5gO1zXDNVp3jYn17QnjeDew7hKkvScP1zVSXxAjLJFflpvyP0rOHJdI4VvHC9/CAqS0k+j2/4X6YJn40OXolS+HLF4FIzTBUFYbma8t58OQAAA" ) no-repeat center;
	background-size: contain;
}

/* Left (navy) card list: white text + white plug icon */
.two-panel__left .two-panel__item { color: #eef1f6; }
.two-panel__left .two-panel__item::before { filter: brightness( 0 ) invert( 1 ); }
.two-panel__left .two-panel__list { margin-top: 0.25rem; }
.two-panel__right .two-panel__list { margin-top: 0.25rem; }

@media ( max-width: 900px ) {
	.two-panel__left  { padding: 2.5rem 2rem; }
	.two-panel__right { padding: 2.5rem 2rem; }
}

@media ( max-width: 768px ) {
	/* Layout stacks at tablet-portrait; section PADDING stays desktop until
	   600px (site-wide standard: desktop = tablet, reduced only on phones). */
	.two-panel__inner {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		padding: 0 1rem;
	}
}
@media ( max-width: 600px ) {
	.two-panel {
		padding-top:    var( --tp-pt-m, var( --tp-pt, 2rem ) );
		padding-bottom: var( --tp-pb-m, var( --tp-pb, 2rem ) );
		margin-top:     var( --tp-mt-m, var( --tp-mt, 0rem ) );
		margin-bottom:  var( --tp-mb-m, var( --tp-mb, 0rem ) );
	}
}

/* ── Centered section heading, roomier cards, and single-card mode ── */
.two-panel__head-inner { text-align: center; }
.two-panel__heading { text-align: center; }
.two-panel__eyebrow { text-align: center; }

.two-panel__left, .two-panel__right { padding: 3.5rem 3rem; }
.two-panel__left-heading  { margin-bottom: 1.5rem; }
.two-panel__right-heading { margin-bottom: 1.5rem; }

/* Single-card mode: one full-width light card, list flows into 2 columns */
.two-panel--single .two-panel__inner { grid-template-columns: 1fr; }
.two-panel__single {
	background: #e8ecf5;
	border-radius: 1.5625rem;
	padding: 3.5rem 3.5rem;
}
.two-panel__single-heading {
	font-family: 'Quincy', Georgia, serif;
	font-weight: 400; font-size: clamp( 1.9rem, 3.2vw, 2.75rem );
	line-height: clamp( 2.09rem, 3.52vw, 3.025rem ); color: #000d26; margin: 0 0 1.5rem;
}
.two-panel__single-body {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem; line-height: 1.6; color: #2a3346; margin: 0 0 1.25rem;
}
.two-panel__single .two-panel__item { color: #2a3346; }
.two-panel__list--cols { column-count: 2; column-gap: 3.5rem; margin-top: 0.5rem; }
/* Short lists stay in ONE column. Splitting 3 or fewer items across two
   columns leaves a lopsided 2 + 1 (or 2 + 0) split that reads as a mistake;
   two columns only start earning their keep at 4+ items. The :not(:has())
   test matches any list without a 4th item. */
.two-panel__list--cols:not( :has( .two-panel__item:nth-child(4) ) ) { column-count: 1; }
.two-panel__list--cols .two-panel__item { break-inside: avoid; }

@media ( max-width: 768px ) {
	.two-panel__left, .two-panel__right, .two-panel__single { padding: 2.25rem 1.75rem; }
	.two-panel__list--cols { column-count: 1; }
}

/* Optional per-card CTA button (used for cross-links preserved from converted image-cards) */
.two-panel__cta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 1.75rem;
	font-family: 'Jost', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 0.9rem 1.75rem;
	border-radius: 0.5rem;
	background: #0b5cff;
	color: #ffffff;
	text-decoration: none;
	transition: filter 0.15s;
}
.two-panel__cta:hover { filter: brightness( 0.94 ); }

/* ── Optional 3-card mode (navy / light / navy) for three balanced groups ── */
.two-panel--three .two-panel__inner { grid-template-columns: repeat( 3, 1fr ); }
.two-panel__third {
	background: #000d26;
	border-radius: 1.5625rem;
	padding: 3.5rem 3rem;
	display: flex;
	flex-direction: column;
}
.two-panel__third-heading {
	font-family: 'Quincy', Georgia, serif;
	font-weight: 400;
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	line-height: clamp( 2.0125rem, 3.45vw, 2.875rem );
	color: #ffffff;
	margin: 0 0 1.5rem;
}
.two-panel__third-body { font-size: 1.125rem; line-height: 1.6; color: rgba( 255, 255, 255, 0.85 ); margin: 0 0 1.25rem; }
.two-panel__third .two-panel__item { color: #ffffff; }
.two-panel__third .two-panel__item::before { filter: brightness( 0 ) invert( 1 ); }
@media (max-width: 900px) {
	.two-panel--three .two-panel__inner { grid-template-columns: 1fr; }
	.two-panel__third { padding: 2.5rem 2rem; }
}
@media (max-width: 600px) {
	.two-panel__third { padding: 2.25rem 1.75rem; }
}

/* ── Optional 4-card mode (navy / light / navy / light) ── */
/* Wider container than the shared 75rem/1.5rem default (matches the
   90rem-max-width pattern used site-wide, e.g. .fold-hero__inner/.amenities__inner)
   -- with 4 columns the narrower shared default left each card visibly
   cramped compared to every other section on the page. Scoped to --four only
   so the 2-card mode used on ~40 other pages is untouched. */
.two-panel--four .two-panel__inner {
	max-width: 90rem;
	padding: 0 3rem;
	grid-template-columns: repeat( 4, 1fr );
}
/* Cards 1/2 (left/right) vertically center their content (justify-content:
   center inherited from the 2-card layout), while cards 3/4 (third/fourth)
   top-align -- so in the 4-card row a shorter card's heading floated down
   with a gap above it while the others sat flush at the top. Force all four
   to top-align so every heading starts at the same vertical position
   regardless of how much body text each card has. */
.two-panel--four .two-panel__left,
.two-panel--four .two-panel__right,
.two-panel--four .two-panel__third,
.two-panel--four .two-panel__fourth {
	justify-content: flex-start;
}
/* Card 2 reuses .two-panel__right-heading (sized for the 2-card mode: bigger
   font, 1.75rem bottom margin), which visibly mismatched cards 1/3/4's
   smaller heading + 1.25-1.5rem margin -- the extra ~0.5rem read as a gap
   floating above the body text that the other three cards didn't have.
   Scoped override brings card 2 in line with cards 3/4. */
.two-panel--four .two-panel__right-heading {
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	line-height: clamp( 2.0125rem, 3.45vw, 2.875rem );
	margin-bottom: 1.5rem;
}
/* Card 1 (.two-panel__left-heading) still had its own base 1.25rem bottom
   margin -- differed from cards 2/3/4's 1.5rem, so "Mornings" sat measurably
   closer to its paragraph than the other three. All four now match. */
.two-panel--four .two-panel__left-heading {
	margin-bottom: 1.5rem;
}
/* Less horizontal breathing room inside each card (vertical padding
   untouched) -- requested independently of the wider outer container above. */
.two-panel--four .two-panel__left,
.two-panel--four .two-panel__right,
.two-panel--four .two-panel__third,
.two-panel--four .two-panel__fourth {
	padding-left: 2.25rem;
	padding-right: 2.25rem;
}
.two-panel__fourth {
	background: #e8ecf5;
	border-radius: 1.5625rem;
	padding: 3.5rem 3rem;
	display: flex;
	flex-direction: column;
}
.two-panel__fourth-heading {
	font-family: 'Quincy', Georgia, serif;
	font-weight: 400;
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	line-height: clamp( 2.0125rem, 3.45vw, 2.875rem );
	color: #000d26;
	margin: 0 0 1.5rem;
}
.two-panel__fourth-body { font-size: 1.125rem; line-height: 1.6; color: #2a3346; margin: 0 0 1.25rem; }
.two-panel__fourth .two-panel__item { color: #2a3346; }
@media (max-width: 1100px) {
	.two-panel--four .two-panel__inner { grid-template-columns: repeat( 2, 1fr ); }
}
@media (max-width: 900px) {
	.two-panel--four .two-panel__inner { grid-template-columns: 1fr; }
	.two-panel__fourth { padding: 2.5rem 2rem; }
}
@media (max-width: 600px) {
	.two-panel__fourth { padding: 2.25rem 1.75rem; }
}
/* The --four container padding above (0 3rem) out-specifies the generic
   .two-panel__inner mobile rules, so it never shrank on phones -- the cards
   sat noticeably further from the screen edge than the paragraph above them.
   These mirror .amenities__inner's scale exactly so both line up. */
@media (max-width: 900px) {
	.two-panel--four .two-panel__inner { padding: 0 1.5rem; }
}
@media (max-width: 600px) {
	.two-panel--four .two-panel__inner { padding: 0 1rem; }
}
@media (max-width: 360px) {
	.two-panel--four .two-panel__inner { padding: 0 0.875rem; }
}

/* two-panel-spacing-fix (v2, specificity-matched): give the bullet list real room under the
   intro paragraph, and give any trailing note ("*Referral to services available...") room under the list. */
.two-panel__left .two-panel__list,
.two-panel__right .two-panel__list,
.two-panel__third .two-panel__list,
.two-panel__fourth .two-panel__list,
.two-panel__single .two-panel__list,
.two-panel__left .two-panel__list--cols,
.two-panel__right .two-panel__list--cols,
.two-panel__third .two-panel__list--cols,
.two-panel__fourth .two-panel__list--cols,
.two-panel__single .two-panel__list--cols { margin-top: 1.5rem; }

.two-panel__left .two-panel__list + .two-panel__left-body,
.two-panel__right .two-panel__list + .two-panel__right-body,
.two-panel__third .two-panel__list + .two-panel__third-body,
.two-panel__fourth .two-panel__list + .two-panel__fourth-body,
.two-panel__single .two-panel__list + .two-panel__single-body,
.two-panel__list + .two-panel__single-body,
.two-panel__list + .two-panel__left-body,
.two-panel__list + .two-panel__right-body,
.two-panel__list + .two-panel__third-body,
.two-panel__list + .two-panel__fourth-body { margin-top: 1.5rem; }

/* SITE-WIDE SPACING STANDARD: card title -> body paragraph = 0, matching every
   other section intro on the site. Lists keep their own 1.5rem .two-panel__list
   margin-top above (so a heading directly above a bullet list still breathes).
   Placed last + selector-matched so it wins over every earlier per-card and
   --four heading margin-bottom. */
.two-panel__left-heading,
.two-panel__right-heading,
.two-panel__third-heading,
.two-panel__fourth-heading,
.two-panel__single-heading,
.two-panel--four .two-panel__left-heading,
.two-panel--four .two-panel__right-heading {
	margin-bottom: 0;
}