.text-component {
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--wp--preset--color--neutral-900);
}

.text-component--narrow {
	max-width: 638px;
}

.text-component > p,
.text-component > h2,
.text-component > h3,
.text-component > h4,
.text-component--narrow > p,
.text-component--narrow > h2,
.text-component--narrow > h3,
.text-component--narrow > h4 {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Tick list — core/list block style variation
   --------------------------------------------------------------------------- */

.wp-block-list.is-style-tick {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wp-block-list.is-style-tick > li {
	position: relative;
	padding-left: 32px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	line-height: 32px;
}

.wp-block-list.is-style-tick > li::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23D0E995'/%3E%3Cpath d='M6 10.3L8.7 13L14 7' stroke='%232A2637' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ---------------------------------------------------------------------------
   Arrow list — core/list block style variation
   --------------------------------------------------------------------------- */

.wp-block-list.is-style-arrow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wp-block-list.is-style-arrow > li {
	position: relative;
	padding-left: 32px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	line-height: 32px;
}

/* Same circle-and-arrow artwork as .topic-card__arrow
   (assets/css/components/workshop-topic-card.css), redrawn at marker
   scale — the arrow paths keep their original 26x23 coordinate space,
   translated by the same (8, 9.5) offset that centres them within the
   topic card's 42x42 circle, so shrinking the whole 42x42 viewBox down to
   20x20 here reproduces that exact icon rather than a re-eyeballed one. */
.wp-block-list.is-style-arrow > li::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 42 42' fill='none'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23B9BDFF'/%3E%3Cg transform='translate(8 9.5)'%3E%3Cpath stroke='%232a2637' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%232a2637' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ---------------------------------------------------------------------------
   Text component with image — collage (two offset photos) or single image
   --------------------------------------------------------------------------- */

.text-component--with-image {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 68px;
}

.text-component--with-image .text-component--narrow {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-shrink: 0;
	width: 638px;
	max-width: 100%;
}

.text-component__image-collage {
	position: relative;
	width: 452px;
	height: 452px;
	flex-shrink: 0;
}

.text-component__image {
	position: absolute;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(42, 38, 55, 0.18);
	margin: 0;
}

.text-component__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.text-component__image--back {
	top: 0;
	left: 60px;
	width: 320px;
	height: 380px;
	z-index: 0;
}

.text-component__image--front {
	bottom: 0;
	left: 0;
	width: 320px;
	height: 380px;
	z-index: 1;
}

.text-component__image-collage--single {
	width: 377px;
	height: auto;
}

.text-component__image-collage--single .text-component__image {
	position: static;
	display: flex;
	width: 100%;
	height: auto;
}

.text-component__image-collage--single .text-component__image img {
	height: auto;
	object-fit: initial;
}

@media (max-width: 900px) {
	.text-component--with-image {
		flex-direction: column;
	}

	.text-component__image-collage {
		width: 100%;
		max-width: 452px;
		height: 380px;
		margin: 0 auto;
	}

	.text-component__image-collage--single {
		width: 100%;
		max-width: 452px;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
   Stat pair — a stat-card (see stat-cards.css) alongside a text-component
   --------------------------------------------------------------------------- */

.stat-pair {
	display: flex;
	align-items: flex-start;
	gap: 68px;
	container-type: inline-size;
}

.stat-pair > .text-component {
	flex: 1 1 auto;
	min-width: 0;
	margin-block-start: 0;
}

@media (max-width: 900px) {
	.stat-pair {
		flex-wrap: wrap;
	}
}