/* ─── CTA: centered-layout base (transparent surface, inherits section bg) ─── */
.cta-block .cta-surface {
	background: transparent;
	color: inherit;
}

/* Section-level background overrides for the centred variant */
.cta-block.serenelife-section-background--purple,
.cta-block.bg-purple {
	background-color: #6c52ee !important;
}

.cta-block.serenelife-section-background--purple .cta-content_wrapper p,
.cta-block.bg-purple .cta-content_wrapper p {
	color: #fff !important;
}

/* Colour inheritance for all text nodes inside the CTA wrapper */
.cta-block .cta-content_wrapper h1,
.cta-block .cta-content_wrapper h2,
.cta-block .cta-content_wrapper h3,
.cta-block .cta-content_wrapper h4,
.cta-block .cta-content_wrapper h5,
.cta-block .cta-content_wrapper h6,
.cta-block .cta-content_wrapper p,
.cta-block .cta-content_wrapper ul,
.cta-block .cta-content_wrapper ol {
	color: inherit;
}

/* Button chrome reset */
.cta-block .wp-block-buttons,
.cta-block .wp-block-button {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Default button colours for the centred layout */
.cta-block .wp-block-buttons > .wp-block-button:nth-child(1) .wp-block-button__link:not(.has-background) { background-color: #fff !important; }
.cta-block .wp-block-buttons > .wp-block-button:nth-child(1) .wp-block-button__link:not(.has-background):not(.has-text-color) { color: #6c52ee !important; }
.cta-block .wp-block-buttons > .wp-block-button:nth-child(2) .wp-block-button__link:not(.has-background) { background-color: #ffac75 !important; }
.cta-block .wp-block-buttons > .wp-block-button:nth-child(2) .wp-block-button__link:not(.has-background):not(.has-text-color) { color: #111827 !important; }


/* ─── Horizontal layout: dynamic contrast custom properties ─────────────────
 * Text and tick colours are driven by CSS custom properties defined on the
 * surface element so they flip automatically when the surface bg changes.
 * !important on the text rules overrides WP's inline style="color:…" and any
 * baked-in utility classes (e.g. text-white from the default block template).
 * ─────────────────────────────────────────────────────────────────────────── */

/* Default: dark surfaces (purple, black, darkgray, secondary) */
.cta-block--horizontal .cta-surface {
	--cta-text:    #fff;
	--cta-muted:   rgba(255, 255, 255, 0.85);
	--cta-tick-bg: #ffac75;
}

/* Light surfaces → dark text */
.cta-block--horizontal.cta-block--surface-white .cta-surface,
.cta-block--horizontal.cta-block--surface-lightgray .cta-surface,
.cta-block--horizontal.cta-block--surface-grgray .cta-surface {
	--cta-text:    #111827;
	--cta-muted:   #4b5563;
	--cta-tick-bg: #ffac75;
}

/* Orange surface → dark text, purple tick (orange-on-orange would vanish) */
.cta-block--horizontal.cta-block--surface-orange .cta-surface {
	--cta-text:    #111827;
	--cta-muted:   #374151;
	--cta-tick-bg: #6c52ee;
}

/* Emergency surface → dark red text */
.cta-block--horizontal.cta-block--surface-emergency .cta-surface {
	--cta-text:    #450a0a;
	--cta-muted:   #7f1d1d;
	--cta-tick-bg: #ffac75;
}

/* Apply contrast variables — beats WP inline styles and utility classes */
.cta-block--horizontal .cta-content_wrapper h1,
.cta-block--horizontal .cta-content_wrapper h2,
.cta-block--horizontal .cta-content_wrapper h3,
.cta-block--horizontal .cta-content_wrapper h4,
.cta-block--horizontal .cta-content_wrapper h5,
.cta-block--horizontal .cta-content_wrapper h6,
.cta-block--horizontal .cta-content_wrapper .wp-block-heading {
	color: var(--cta-text) !important;
}

.cta-block--horizontal .cta-content_wrapper p,
.cta-block--horizontal .cta-content_wrapper .wp-block-paragraph {
	color: var(--cta-muted) !important;
}

.cta-block--horizontal .cta-content_wrapper li {
	color: var(--cta-text) !important;
}


/* ─── Horizontal layout: surface backgrounds ─── */

.cta-block--horizontal .cta-surface {
	background: linear-gradient(135deg, #7557ff 0%, #a348e8 100%);
	color: var(--cta-text);
}

.cta-block--horizontal.cta-block--surface-purple .cta-surface {
	background: linear-gradient(135deg, #7557ff 0%, #a348e8 100%);
	color: var(--cta-text);
}

.cta-block--horizontal.cta-block--surface-secondary .cta-surface {
	background: linear-gradient(135deg, #7557ff, #a348e8, #7557ff);
	color: var(--cta-text);
}

.cta-block--horizontal.cta-block--surface-orange .cta-surface {
	background: #ffac75;
	color: var(--cta-text);
}

.cta-block--horizontal.cta-block--surface-white .cta-surface {
	background: #fff;
	border: 1px solid #dbe2ec;
	color: var(--cta-text);
}

.cta-block--horizontal.cta-block--surface-black .cta-surface {
	background: #111827;
	color: var(--cta-text);
}

.cta-block--horizontal.cta-block--surface-darkgray .cta-surface {
	background: #1f2937;
	color: var(--cta-text);
}

.cta-block--horizontal.cta-block--surface-lightgray .cta-surface {
	background: #f3f4f6;
	color: var(--cta-text);
}

.cta-block--horizontal.cta-block--surface-grgray .cta-surface {
	background: linear-gradient(135deg, #f8fafc, #e2e8f0, #f1f5f9);
	color: var(--cta-text);
}

.cta-block--horizontal.cta-block--surface-emergency .cta-surface {
	background: #fef2f2;
	color: var(--cta-text);
}

/* Outline button contrast */
.cta-block.cta-block--horizontal .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
	background: transparent !important;
	border-color: currentColor !important;
}

.cta-block.cta-block--horizontal .wp-block-buttons > .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
	color: inherit !important;
}


/* ─── Horizontal layout: two-column grid ─── */
.cta-block--horizontal .cta-content_wrapper {
	display: grid;
	gap: 0.5rem 3rem;
	grid-template-columns: minmax(0, 2fr) minmax(13rem, 0.85fr);
	text-align: left;
}

/* Prevent WP block-gap injection from adding unwanted left spacing on direct children */
.cta-block--horizontal .cta-content_wrapper > * {
	margin-left: 0 !important;
	margin-inline-start: 0 !important;
	padding-left: 0 !important;
}


/* ─── List tick marks ─── */

/* Remove native bullet and reset padding from the blanket reset above */
.cta-block--horizontal .cta-content_wrapper ul,
.cta-block--horizontal .cta-content_wrapper .wp-block-list {
	list-style: none !important;
	padding-left: 0 !important;
}

.cta-block--horizontal .cta-content_wrapper ul li,
.cta-block--horizontal .cta-content_wrapper .wp-block-list li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
	list-style: none !important;
}

/* Coloured circle + white checkmark; circle colour adapts via --cta-tick-bg */
.cta-block--horizontal .cta-content_wrapper ul li::before,
.cta-block--horizontal .cta-content_wrapper .wp-block-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.15em;
	height: 1.15em;
	background-color: var(--cta-tick-bg, #ffac75);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65%;
}


/* ─── Layout: copy-list (default) — copy+buttons left, list right ─── */

.cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > h1,
.cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > h2,
.cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > h3,
.cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > p,
.cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > h1,
.cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > h2,
.cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > h3,
.cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > p {
	grid-column: 1;
}

/*
 * Buttons in col 1 — grid positioning only.
 * WP's .is-content-justification-* classes control internal alignment so the
 * editor's "Justify items left / centre / right" control works without being
 * overridden by our CSS.
 */
.cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > .wp-block-buttons,
.cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > .wp-block-buttons {
	grid-column: 1;
	grid-row: auto;
}

/* List: col 2 (right), spanning all rows */
.cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > ul,
.cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > ol,
.cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > .wp-block-list,
.cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > ul,
.cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > ol,
.cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > .wp-block-list {
	align-self: center;
	grid-column: 2;
	grid-row: 1 / span 5;
}


/* ─── Layout: copy-buttons — copy+list left, buttons right ─── */

.cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > h1,
.cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > h2,
.cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > h3,
.cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > p,
.cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > ul,
.cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > ol,
.cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > .wp-block-list {
	grid-column: 1;
}

/* Buttons: col 2, vertically centred */
.cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > .wp-block-buttons {
	align-self: center;
	grid-column: 2;
	grid-row: 1 / span 5;
}


/* ─── Layout: list-copy — list left, copy+buttons right ─── */

.cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > h1,
.cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > h2,
.cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > h3,
.cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > p,
.cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > .wp-block-buttons {
	grid-column: 2;
}

.cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > ul,
.cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > ol,
.cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > .wp-block-list {
	align-self: center;
	grid-column: 1;
	grid-row: 1 / span 5;
}


/* ─── Layout: buttons-copy — buttons left, copy+list right ─── */

.cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > h1,
.cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > h2,
.cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > h3,
.cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > p,
.cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > ul,
.cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > ol,
.cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > .wp-block-list {
	grid-column: 2;
}

/* Buttons: col 1, vertically centred */
.cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > .wp-block-buttons {
	align-self: center;
	grid-column: 1;
	grid-row: 1 / span 5;
}


/* ─── Button sizing ─── */
/* Auto-width so buttons don't stretch to the full column. */
.cta-block--horizontal .wp-block-buttons .wp-block-button {
	width: auto;
}

.cta-block--horizontal .wp-block-buttons .wp-block-button__link {
	width: auto;
}

/*
 * Button alignment within the CTA surface.
 *
 * WP's global block CSS sets justify-content via .is-content-justification-*
 * classes. However those rules have lower specificity than our grid selectors,
 * so we explicitly map every WP justification class at higher specificity AND
 * provide a left-aligned default for blocks saved without any class (the old
 * variation template had no justifyContent, so they received WP's built-in
 * center default).
 */

/* Default: left-align when no WP justification class is present */
.cta-block--horizontal .cta-content_wrapper .wp-block-buttons:not([class*="is-content-justification"]) {
	justify-content: flex-start !important;
}

/* Honour user's explicit choice */
.cta-block--horizontal .cta-content_wrapper .wp-block-buttons.is-content-justification-left {
	justify-content: flex-start !important;
}

.cta-block--horizontal .cta-content_wrapper .wp-block-buttons.is-content-justification-center {
	justify-content: center !important;
}

.cta-block--horizontal .cta-content_wrapper .wp-block-buttons.is-content-justification-right {
	justify-content: flex-end !important;
}

.cta-block--horizontal .cta-content_wrapper .wp-block-buttons.is-content-justification-space-between {
	justify-content: space-between !important;
}



/* ─── Editor: mirror the frontend grid inside the block-editor wrapper ─── */

/* Default / copy-list */
.editor-styles-wrapper .cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	gap: 0.5rem 3rem;
	grid-template-columns: minmax(0, 2fr) minmax(13rem, 0.85fr);
	text-align: left;
}

.editor-styles-wrapper .cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-buttons,
.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-buttons {
	grid-column: 1;
}

.editor-styles-wrapper .cta-block--horizontal:not([class*="cta-block--layout-"]) .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-list,
.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-copy-list .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-list {
	align-self: center;
	grid-column: 2;
	grid-row: 1 / span 5;
}

/* copy-buttons */
.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	gap: 0.5rem 3rem;
	grid-template-columns: minmax(0, 2fr) minmax(13rem, 0.85fr);
	text-align: left;
}

.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-buttons {
	align-self: center;
	grid-column: 2;
	grid-row: 1 / span 5;
}

.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-copy-buttons .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-list {
	grid-column: 1;
}

/* list-copy */
.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	gap: 0.5rem 3rem;
	grid-template-columns: minmax(13rem, 0.85fr) minmax(0, 2fr);
	text-align: left;
}

.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-list {
	align-self: center;
	grid-column: 1;
	grid-row: 1 / span 5;
}

.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-list-copy .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > :not(.wp-block-list) {
	grid-column: 2;
}

/* buttons-copy */
.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	gap: 0.5rem 3rem;
	grid-template-columns: minmax(13rem, 0.85fr) minmax(0, 2fr);
	text-align: left;
}

.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-buttons {
	align-self: center;
	grid-column: 1;
	grid-row: 1 / span 5;
}

.editor-styles-wrapper .cta-block--horizontal.cta-block--layout-buttons-copy .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > :not(.wp-block-buttons) {
	grid-column: 2;
}


/* ─── Mobile: single-column for all layout variants ─── */
@media (max-width: 767px) {
	.cta-block--horizontal .cta-content_wrapper,
	.editor-styles-wrapper .cta-block--horizontal .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.cta-block--horizontal .cta-content_wrapper > *,
	.editor-styles-wrapper .cta-block--horizontal .cta-content_wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
}