/*
 * Inline CTA card (navy, pattern cluedit/article-cta): in article and service
 * prose, on the /services/ hub and as the homepage health-check band
 * (pattern cluedit/cta-health-check). Loaded only when a group with the class
 * cluedit-inline-cta renders (inc/blocks.php).
 */

/* The contexts are disjoint, so rules group by part, not by specificity. */
/* stylelint-disable no-descending-specificity */

.cluedit-article .cluedit-prose > .cluedit-inline-cta,
.cluedit-services-hub > .cluedit-inline-cta,
.cluedit-health > .cluedit-inline-cta {
	display: grid;
	position: relative;
	box-sizing: border-box;
	gap: 20px;
	justify-items: start;
	margin-block: 44px;
	padding: 30px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--l);
	background-image: var(--wp--preset--gradient--navy);
	color: var(--wp--preset--color--surface);
}

.cluedit-article .cluedit-prose .cluedit-inline-cta::after,
.cluedit-services-hub .cluedit-inline-cta::after,
.cluedit-health .cluedit-inline-cta::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--surface) 14%, transparent), transparent 65%);
	pointer-events: none;
}

.cluedit-article .cluedit-prose .cluedit-inline-cta > *,
.cluedit-services-hub .cluedit-inline-cta > *,
.cluedit-health .cluedit-inline-cta > * {
	position: relative;
	z-index: 1;
	margin-block: 0;
}

.cluedit-article .cluedit-prose .cluedit-inline-cta__title,
.cluedit-services-hub .cluedit-inline-cta__title,
.cluedit-health .cluedit-inline-cta__title {
	margin-bottom: -14px;
	font-size: var(--wp--custom--font-size--article--cta-title);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

/* On the homepage band the title is the section's h2. */
.cluedit-health .cluedit-inline-cta__title {
	color: var(--wp--preset--color--surface);
}

/* Reference: the copy sits on the 18px/1.75 line of its container. */
.cluedit-article .cluedit-prose .cluedit-inline-cta__text,
.cluedit-services-hub .cluedit-inline-cta__text,
.cluedit-health .cluedit-inline-cta__text {
	color: var(--wp--custom--color--article--cta-text);
	font-size: var(--wp--preset--font-size--s);
	line-height: 2.1;
}

/* Hub and health-check band: the card centred in its section. */
.cluedit-services-hub > .cluedit-inline-cta,
.cluedit-health > .cluedit-inline-cta {
	max-width: 720px;
	margin: 48px auto 0;
	text-align: left;
}

.cluedit-health > .cluedit-inline-cta {
	margin-top: 0;
}

@media (max-width: 800px) {

	.cluedit-article .cluedit-prose > .cluedit-inline-cta,
	.cluedit-services-hub > .cluedit-inline-cta,
	.cluedit-health > .cluedit-inline-cta {
		padding: 24px;
	}
}