/* Care & Amenities: an open, icon-led service directory. */
.care-page-hero,
.care-service-directory,
.care-supporting-info {
	--care-green: var(--wp--preset--color--evergreen);
	--care-gold: var(--wp--preset--color--gold);
	--care-line: rgba(82, 103, 71, 0.16);
}

/* Quietly distinguish the introduction without turning it into a card. */
.care-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.care-page-hero::before {
	position: absolute;
	z-index: -1;
	top: -9rem;
	right: clamp(-10rem, -5vw, -4rem);
	width: clamp(20rem, 36vw, 34rem);
	aspect-ratio: 1;
	border: 1px solid rgba(149, 101, 31, 0.16);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.care-page-hero h1 {
	max-width: 14ch;
}

.care-page-hero .has-large-font-size {
	max-width: 40rem;
}

/* Stack the two categories, then give each category its own two-column list. */
.care-service-directory > .wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(3rem, 7vw, 5.5rem);
}

.care-service-directory > .wp-block-columns > .wp-block-column {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.care-service-directory > .wp-block-columns h2 {
	position: relative;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	padding: 0 0 1rem;
	color: var(--care-green);
}

.care-service-directory > .wp-block-columns h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 4rem;
	height: 3px;
	border-radius: 99px;
	background: var(--care-gold);
	content: "";
}

.care-service-directory ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 6vw, 5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.care-service-directory li {
	position: relative;
	min-height: 3.2rem;
	margin: 0;
	padding: 1.15rem 0 1.15rem 2.8rem;
	border-bottom: 1px solid var(--care-line);
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.5;
}

/* Icons are unboxed, single-color, and aligned consistently with the text. */
.care-service-directory li::before {
	position: absolute;
	top: 1.22rem;
	left: 0;
	width: 1.55rem;
	height: 1.55rem;
	background: var(--care-green);
	content: "";
	-webkit-mask: var(--care-icon) center / contain no-repeat;
	mask: var(--care-icon) center / contain no-repeat;
}

/* Personal care — one meaningful icon for each specific service. */
.care-service-directory .wp-block-column:first-child li:nth-child(1) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-6a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM4 21v-3a5 5 0 0 1 5-5h2.1a5.5 5.5 0 0 0-.6 2H9a3 3 0 0 0-3 3v3H4Zm14.5-7.5c-1 0-1.85.55-2.5 1.35-.65-.8-1.5-1.35-2.5-1.35a2.5 2.5 0 0 0-2.5 2.5c0 2.8 5 5.5 5 5.5s5-2.7 5-5.5a2.5 2.5 0 0 0-2.5-2.5Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:first-child li:nth-child(2) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 4h10l1 3h3l-1.5 8H6.2L4 5H2V3h3.6l.5 2H7V4Zm1.4 2-.34 1h7.88l-.34-1H8.4ZM7 9l.9 4h9.94l.75-4H7Zm1 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm9 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:first-child li:nth-child(3) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.66 2.34a4 4 0 0 1 0 5.66L8 17.66A4 4 0 1 1 2.34 12l9.66-9.66a4 4 0 0 1 5.66 0ZM6.59 16.24 10.83 12 8 9.17l-4.24 4.24a2 2 0 0 0 2.83 2.83ZM16.24 6.6a2 2 0 0 0-2.83-2.83L9.42 7.76l2.83 2.83 3.99-3.99Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:first-child li:nth-child(4) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a8 8 0 0 0-8 8v1a3 3 0 0 0-2 2.83V16a3 3 0 0 0 3 3h2v-8H6v-1a6 6 0 0 1 12 0v1h-1v8h1a3 3 0 0 1-3 3h-2v-2h2a1 1 0 0 0 1-1H9v-8h7v6h2a1 1 0 0 0 1-1v-2.17A3 3 0 0 0 20 11v-1a8 8 0 0 0-8-8Zm-7 11v4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Zm14 4v-4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:first-child li:nth-child(5) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 2 10 8h-3v10h-5v-6h-4v6H5V10H2l10-8Zm0 2.56L7 8.56V18h1v-6h8v6h1V8.56l-5-4ZM12 7c.9-1.3 3-1 3 1 0 1.5-3 3-3 3S9 9.5 9 8c0-2 2.1-2.3 3-1Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:first-child li:nth-child(6) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2h6v3h3a2 2 0 0 1 2 2v13H4V7a2 2 0 0 1 2-2h3V2Zm2 3h2V4h-2v1Zm0 3v3H8v2h3v3h2v-3h3v-2h-3V8h-2Zm-5-1v11h12V7H6Z'/%3E%3C/svg%3E");
}

/* Home & daily life — food, laundry, activities, routines, room, grooming. */
.care-service-directory .wp-block-column:last-child li:nth-child(1) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 2h2v7a3 3 0 0 1-2 2.83V22H5V11.83A3 3 0 0 1 3 9V2h2v7a1 1 0 0 0 2 0V2Zm8 0h2v20h-2v-8h-3V7a5 5 0 0 1 3-4.58V2Zm0 2.76A3 3 0 0 0 14 7v5h1V4.76Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:last-child li:nth-child(2) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 2h14a2 2 0 0 1 2 2v18H3V4a2 2 0 0 1 2-2Zm0 2v3h14V4H5Zm0 5v11h14V9H5Zm7 1a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM6 5h2v1H6V5Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:last-child li:nth-child(3) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 0 0 0 20h1.5a2.5 2.5 0 0 0 0-5H12a1.5 1.5 0 0 1 0-3h2a8 8 0 0 0-2-12Zm-4 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm3-4a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm5 5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm-9 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:last-child li:nth-child(4) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3h11v2H10V3Zm0 6h11v2H10V9Zm0 6h11v2H10v-2Zm-6.3-9.3-2-2L.3 5.1 3.7 8.5 8.3 4 6.9 2.6 3.7 5.7ZM3.7 11.7l-2-2-1.4 1.4 3.4 3.4 4.6-4.5-1.4-1.4-3.2 3.1Zm0 6-2-2-1.4 1.4 3.4 3.4L8.3 16l-1.4-1.4-3.2 3.1Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:last-child li:nth-child(5) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 4h2v8h14V7a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v3H5v2h16v8h-2v-2H5v2H3V4Zm9 6V7h5v3h-5Zm-7 4v2h14v-2H5Z'/%3E%3C/svg%3E");
}

.care-service-directory .wp-block-column:last-child li:nth-child(6) {
	--care-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM6 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm13.7-7.7-1.4-1.4L12 14.2 5.7 7.9 4.3 9.3l6.3 6.3-2.2 2.2 1.4 1.4L12 17l2.2 2.2 1.4-1.4-2.2-2.2 6.3-6.3Z'/%3E%3C/svg%3E");
}

.care-service-directory .has-small-font-size {
	max-width: 48rem;
	margin-top: 1.5rem;
	padding: 0 0 0 1rem;
	border-left: 3px solid var(--care-gold);
	line-height: 1.6;
}

/* One intentional feature panel for the page's central message. */
.care-service-directory > .wp-block-group {
	position: relative;
	overflow: hidden;
	border: 0;
	border-radius: var(--hvach-radius-lg);
	background: var(--wp--preset--color--evergreen) !important;
	box-shadow: var(--hvach-shadow-soft);
	color: var(--wp--preset--color--cream);
}

.care-service-directory > .wp-block-group h2 {
	color: var(--wp--preset--color--cream);
}

.care-service-directory > .wp-block-group p {
	max-width: 44rem;
	margin-inline: auto;
	color: var(--wp--preset--color--sage);
}

/* Supporting information stays open and separated by a simple rule. */
.care-supporting-info > .wp-block-columns {
	gap: clamp(2rem, 6vw, 5rem);
}

.care-supporting-info .wp-block-column {
	padding: 0;
	border: 0;
	background: transparent;
}

.care-supporting-info h2 {
	padding-top: 1rem;
	border-top: 2px solid var(--care-gold);
	font-size: clamp(1.55rem, 3vw, 2rem) !important;
}

@media (max-width: 700px) {
	.care-service-directory {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	.care-service-directory ul {
		grid-template-columns: 1fr;
	}

	.care-service-directory > .wp-block-group {
		margin-top: var(--wp--preset--spacing--50) !important;
		padding: 2rem 1.25rem !important;
	}
}