/*
 * Editor-facing Guideposts patterns. The petal mask matches the SVG path used
 * for the image in the homepage's "Our difference" section. The explicit
 * fallbacks let the block editor preview the patterns even though it does not
 * load CoreFramework's front-end colour variables.
 */
.guideposts-petal-image,
.guideposts-three-image-cards {
	--guideposts-pattern-dark: var(--dark, #2c1933);
	--guideposts-pattern-light: var(--light, #fff);
	--guideposts-pattern-orange: var(--secondary, hsl(19 86% 54%));
	--guideposts-pattern-pink: var(--guideposts-pink, var(--secondary, hsl(335 100% 50%)));
	--guideposts-pattern-purple: var(--primary, hsl(275 100% 25%));
}

.guideposts-petal-image {
	--guideposts-petal-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='205 225 170 140'%3E%3Cpath fill='white' d='M259.95 233.09c-8.15-1.47-16.43-2.94-24.65-2.01-8.22.93-16.53 4.64-21.09 11.55-7.92 12.01-2.01 28.16 5.52 40.42 17.38 28.3 42.83 51.57 72.57 66.34 14.11 7.01 30.96 12.11 45.37 5.71 16.51-7.33 23.57-26.83 26.57-44.65 3.31-19.64 11.67-53.4-12.73-60.71-29.12-8.72-61.62-11.26-91.55-16.65Z'/%3E%3C/svg%3E");
	aspect-ratio: 17 / 14;
	isolation: isolate;
	margin-block: var(--space-xl, 2rem);
	max-width: 42rem;
	position: relative;
}

.guideposts-petal-image::before {
	background: var(--guideposts-pattern-pink);
	content: '';
	inset: 0;
	-webkit-mask-image: var(--guideposts-petal-mask);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: var(--guideposts-petal-mask);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	position: absolute;
	z-index: 0;
}

.guideposts-petal-image .guideposts-petal-image__image {
	inset: .45rem;
	margin: 0;
	position: absolute;
	z-index: 1;
	-webkit-mask-image: var(--guideposts-petal-mask);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: var(--guideposts-petal-mask);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

.guideposts-petal-image .guideposts-petal-image__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.guideposts-three-image-cards {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block: var(--space-xl, 2rem);
	max-width: 75rem;
}

.guideposts-three-image-card {
	align-items: flex-end;
	background: var(--guideposts-pattern-purple);
	border-radius: var(--radius-l, 1.25rem);
	color: var(--guideposts-pattern-light);
	display: flex;
	isolation: isolate;
	min-height: clamp(25rem, 34vw, 34rem);
	overflow: hidden;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	position: relative;
}

.guideposts-three-image-card::after {
	background: linear-gradient(0deg, rgba(38, 0, 60, .94) 0%, rgba(38, 0, 60, .45) 35%, rgba(38, 0, 60, .02) 70%);
	content: '';
	inset: 0;
	position: absolute;
	z-index: 1;
}

.guideposts-three-image-card .guideposts-three-image-card__image {
	height: 100%;
	inset: 0;
	margin: 0;
	position: absolute;
	width: 100%;
	z-index: 0;
}

.guideposts-three-image-card .guideposts-three-image-card__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.guideposts-three-image-card__number {
	align-items: center;
	background: var(--guideposts-pattern-orange);
	border-radius: 50%;
	color: var(--guideposts-pattern-dark);
	display: flex;
	font-size: var(--text-s, .875rem);
	font-weight: 800;
	height: 2.75rem;
	justify-content: center;
	left: clamp(1.25rem, 2vw, 1.75rem);
	margin: 0;
	position: absolute;
	top: clamp(1.25rem, 2vw, 1.75rem);
	width: 2.75rem;
	z-index: 2;
}

.guideposts-three-image-card__content {
	position: relative;
	width: 100%;
	z-index: 2;
}

.guideposts-three-image-card .guideposts-three-image-card__content h3 {
	color: var(--guideposts-pattern-light);
	font-size: var(--text-2xl, 2rem);
	line-height: 1;
	margin: 0 0 var(--space-3xs, .5rem);
}

.guideposts-three-image-card .guideposts-three-image-card__content p {
	font-size: var(--text-s, .875rem);
	line-height: 1.35;
	margin: 0;
}

.guideposts-three-image-card:nth-child(2) {
	transform: translateY(clamp(1.5rem, 4vw, 3.5rem));
}

@media (max-width: 767px) {
	.guideposts-three-image-cards {
		grid-template-columns: 1fr;
	}

	.guideposts-three-image-card:nth-child(2) {
		transform: none;
	}
}

/* Match the public composition in Gutenberg while retaining normal block
 * selection and Media Library controls. */
.editor-styles-wrapper .guideposts-petal-image,
.editor-styles-wrapper .guideposts-three-image-cards {
	margin-left: auto;
	margin-right: auto;
}

.editor-styles-wrapper .guideposts-three-image-card {
	min-height: 25rem;
}

.editor-styles-wrapper .guideposts-three-image-card__content .block-editor-rich-text__editable {
	color: inherit;
}