/* ===========================================================================
   SERVICE-DETAIL-LIST-HOSPICE — Hospice page body section (densest)
   Photo top-left + multi-block content right (H2 + intro + 5 feature blocks +
   divider + Our Services Can Include bullet list).
   Standalone CSS.
   Source slice: docs/figma/hospice/_slices/07-service-prioritization-list.png
   =========================================================================== */

.wp-block-group.hodc-service-detail-list-hospice {
	background: var(--wp--preset--color--white);
	padding: 80px 24px;
	margin: 0 !important;
}

.hodc-service-detail-list-hospice__row {
	max-width: 1200px;
	margin-inline: auto;
	gap: 60px;
	align-items: flex-start;
}

.hodc-service-detail-list-hospice__media-col,
.hodc-service-detail-list-hospice__content {
	padding: 0;
}

/* Left column sticks at the top of the viewport while the (taller) right
 * column scrolls past it. Releases naturally once the section ends.
 * Header is static (scrolls off with the page), so top: 24px is just a
 * small breathing-room offset rather than a header-height compensation.
 * Sticky requires the row's align-items to NOT be `stretch` — already
 * set to `flex-start` on .hodc-service-detail-list-hospice__row above. */
.hodc-service-detail-list-hospice__media-col {
	position: sticky;
	top: 24px;
	align-self: flex-start;
}

.hodc-service-detail-list-hospice__photo {
	margin: 0;
}

.hodc-service-detail-list-hospice__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Right-column content */

.hodc-service-detail-list-hospice__heading {
	font-family: var(--wp--preset--font-family--source-serif-pro);
	font-size: 42px;
	line-height: 52px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 24px;
}

/* Intro per Figma frame: p-large 18/28 (the original 15/24 was inferred
 * from slice rendering; Figma's actual text style is the common p-large ramp). */
.hodc-service-detail-list-hospice__intro {
	font-family: var(--wp--preset--font-family--mr-eaves-xl-modern);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	margin: 0 0 40px;
}

.hodc-service-detail-list-hospice__features {
	margin: 0;
}

/* Feature title per Figma style_FQS6RN: Mr Eaves XL Modern Regular 32 / -1%
 * letter, terracotta accent. The earlier SSP/SemiBold/24 was inferred from
 * slice rendering — actual Figma node spec is Mr Eaves Regular 32. */
.hodc-service-detail-list-hospice__feature-title {
	font-family: var(--wp--preset--font-family--mreavesxlmodotheavy);
	font-size: 32px;
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 8px;
}

/* Bumped 14/21 → 18/28 per #9901874831 — Stephanie said the feature
 * descriptions read as smaller than the rest of the body copy; bringing
 * them to the standard p-large 18/28 ramp matches the page intro. */
.hodc-service-detail-list-hospice__feature-body {
	font-family: var(--wp--preset--font-family--mr-eaves-xl-modern);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	margin: 0 0 32px;
}

.hodc-service-detail-list-hospice__feature-body:last-of-type {
	margin-bottom: 0;
}

/* Divider: 528 px wide × 2 px SOLID stroke, primary teal #00557A.
 * Width pinned to 528 and left-anchored to match the column's content
 * rail; 40 / 40 vertical margin. */
.hodc-service-detail-list-hospice__divider {
	border: 0;
	border-top: 2px solid var(--wp--preset--color--primary);
	margin: 40px 0;
	background: transparent;
	height: 0;
	max-width: 528px;
}

.hodc-service-detail-list-hospice__list-eyebrow {
	margin: 0 0 24px;
}

/* Bullet list per Figma "list item block atom": custom marker is a
 * 24 × 12 px hollow rectangle, 1 px terracotta stroke, positioned 40 px
 * from the list-item's left edge. Text follows after the bullet with a
 * small gap. Implemented via ::before pseudo so each <li> gets the
 * marker without a parent flex layout (preserves natural inline-text
 * flow). */
/* Bumped 14/21 → 18/28 per #9901877133 — same family/size as the feature
 * descriptions above so the bullet items read as standard body copy. */
.hodc-service-detail-list-hospice__list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--mr-eaves-xl-modern);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
}

.hodc-service-detail-list-hospice__list > li {
	position: relative;
	padding-left: 40px;             /* 24 px dash + 16 px gap to text */
	margin: 0 0 12px;
}

/* Marker is a horizontal terracotta dash (not a rectangle outline) aligned
 * to the list's left edge — matches the heading's left edge above. */
.hodc-service-detail-list-hospice__list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

/* Mobile — NOT IN FIGMA. Sticky only makes sense for the side-by-side
 * desktop layout; on the stacked mobile layout it has no scroll target,
 * so release it back to static. */
@media (max-width: 1024px) {
	.hodc-service-detail-list-hospice__row {
		flex-direction: column;
		gap: 40px;
	}
	.hodc-service-detail-list-hospice__media-col,
	.hodc-service-detail-list-hospice__content {
		flex-basis: 100% !important;
	}
	.hodc-service-detail-list-hospice__media-col {
		position: static;
	}

	/* Forrest 6/13 (BC #9993800723, hospice2.PNG): on the /hospice/ "A Moment of
	 * Respite" instance, the editor zeroed horizontal padding on the section
	 * (inline style, likely to push a planned image to the viewport edge). That
	 * also kills the 24px text gutter — eyebrow + heading + intro paragraph all
	 * read flush to the screen edge. Attribute selector targets only the
	 * editor-zeroed instances and restores 24px horizontal padding for the text
	 * columns; the "Prioritizing" instance (no inline style) is untouched. */
	.hodc-service-detail-list-hospice[style*="padding-left:0"] .hodc-service-detail-list-hospice__media-col,
	.hodc-service-detail-list-hospice[style*="padding-right:0"] .hodc-service-detail-list-hospice__media-col,
	.hodc-service-detail-list-hospice[style*="padding-left:0"] .hodc-service-detail-list-hospice__content,
	.hodc-service-detail-list-hospice[style*="padding-right:0"] .hodc-service-detail-list-hospice__content {
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}
}