/* inkPad / CTA — class-driven + tokens */

.inkpad-scope .inkpad-cta,
.editor-styles-wrapper .inkpad-cta {
	--inkpad-cta-heading-size: calc(
		var(--inkpad-font-size-base) * var(--inkpad-heading-scale) * 1.75
	);
	--inkpad-cta-heading-weight: var(--inkpad-weight-normal);
	--inkpad-cta-text-size: var(--inkpad-font-md);
	--inkpad-cta-text-weight: var(--inkpad-weight-normal);
	--inkpad-cta-inner-gap: var(--inkpad-space-md);
	--inkpad-cta-inner-pad-y: var(--inkpad-space-lg);
	--inkpad-cta-inner-pad-x: var(--inkpad-space-md);
	--inkpad-cta-content-align: center;
	--inkpad-cta-bg: transparent;
	--inkpad-cta-border: none;
	--inkpad-cta-shadow: none;
	--inkpad-cta-radius: var(--inkpad-radius-md, var(--inkpad-radius));
	--inkpad-cta-content-max: var(--inkpad-container-width, 64rem);

	width: 100%;
	box-sizing: border-box;
	background: var(--inkpad-cta-bg);
	border: var(--inkpad-cta-border);
	border-radius: var(--inkpad-cta-radius);
	box-shadow: var(--inkpad-cta-shadow);
	transition:
		background var(--inkpad-transition-fast, var(--inkpad-transition-med)),
		border-color var(--inkpad-transition-fast, var(--inkpad-transition-med)),
		box-shadow var(--inkpad-transition-fast, var(--inkpad-transition-med));
}

.inkpad-scope .inkpad-cta .inkpad-inner,
.editor-styles-wrapper .inkpad-cta .inkpad-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--inkpad-cta-inner-gap);
	padding: var(--inkpad-cta-inner-pad-y) var(--inkpad-cta-inner-pad-x);
	box-sizing: border-box;
	width: 100%;
}

/* Layout: inline (row) */
.inkpad-scope .inkpad-cta--inline .inkpad-inner,
.editor-styles-wrapper .inkpad-cta--inline .inkpad-inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

/* Layout: stacked (column) */
.inkpad-scope .inkpad-cta--stacked .inkpad-inner,
.editor-styles-wrapper .inkpad-cta--stacked .inkpad-inner {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

/* Mobile: always stacked */
@media (max-width: 48em) {
	.inkpad-scope .inkpad-cta--inline .inkpad-inner,
	.editor-styles-wrapper .inkpad-cta--inline .inkpad-inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--inkpad-space-md);
	}
}

/* Content */
.inkpad-scope .inkpad-cta__content,
.editor-styles-wrapper .inkpad-cta__content {
	display: flex;
	flex-direction: column;
	align-items: var(--inkpad-align-flex, center);
	gap: var(--inkpad-space-sm);
	text-align: var(--inkpad-cta-content-align);
	box-sizing: border-box;
	max-width: var(--inkpad-cta-content-max);
	min-width: 0;
	flex: 1 1 auto;
}

.inkpad-scope .inkpad-cta--inline .inkpad-cta__content,
.editor-styles-wrapper .inkpad-cta--inline .inkpad-cta__content {
	flex: 1 1 min(100%, calc(var(--inkpad-space-xl) * 12));
}

/* Alignment */
.inkpad-scope .inkpad-cta--align-left .inkpad-cta__content,
.editor-styles-wrapper .inkpad-cta--align-left .inkpad-cta__content {
	--inkpad-cta-content-align: left;
	text-align: left;
}

.inkpad-scope .inkpad-cta--align-center .inkpad-cta__content,
.editor-styles-wrapper .inkpad-cta--align-center .inkpad-cta__content {
	--inkpad-cta-content-align: center;
	text-align: center;
}

.inkpad-scope .inkpad-cta--align-right .inkpad-cta__content,
.editor-styles-wrapper .inkpad-cta--align-right .inkpad-cta__content {
	--inkpad-cta-content-align: right;
	text-align: right;
}

/* Inline + center: center row as a group */
.inkpad-scope .inkpad-cta--inline.inkpad-cta--align-center .inkpad-inner,
.editor-styles-wrapper .inkpad-cta--inline.inkpad-cta--align-center .inkpad-inner {
	justify-content: center;
}

.inkpad-scope .inkpad-cta--inline.inkpad-cta--align-center .inkpad-cta__content,
.editor-styles-wrapper .inkpad-cta--inline.inkpad-cta--align-center .inkpad-cta__content {
	flex: 0 1 min(100%, calc(var(--inkpad-space-xl) * 12));
}

/* Inline + right */
.inkpad-scope .inkpad-cta--inline.inkpad-cta--align-right .inkpad-inner,
.editor-styles-wrapper .inkpad-cta--inline.inkpad-cta--align-right .inkpad-inner {
	flex-direction: row-reverse;
	justify-content: space-between;
}

@media (max-width: 48em) {
	.inkpad-scope .inkpad-cta--inline.inkpad-cta--align-right .inkpad-inner,
	.editor-styles-wrapper .inkpad-cta--inline.inkpad-cta--align-right .inkpad-inner {
		flex-direction: column;
	}
}

/* Heading / text */
.inkpad-scope .inkpad-cta__heading,
.editor-styles-wrapper .inkpad-cta__heading {
	margin: 0;
	font-size: var(--inkpad-cta-heading-size);
	font-weight: var(--inkpad-cta-heading-weight);
	color: var(--inkpad-text);
	line-height: var(--inkpad-line-height, var(--inkpad-line-height-tight));
}

.inkpad-scope .inkpad-cta__text,
.editor-styles-wrapper .inkpad-cta__text {
	margin: 0;
	width: 100%;
	font-size: var(--inkpad-cta-text-size);
	font-weight: var(--inkpad-cta-text-weight);
	color: var(--inkpad-text-muted);
	line-height: var(--inkpad-line-height, var(--inkpad-line-height-relaxed));
}

.inkpad-scope .inkpad-cta__text p:last-child,
.editor-styles-wrapper .inkpad-cta__text p:last-child {
	margin-bottom: 0;
}

/* Typography: size */
.inkpad-scope .inkpad-cta--size-sm,
.editor-styles-wrapper .inkpad-cta--size-sm {
	--inkpad-cta-heading-size: calc(
		var(--inkpad-font-size-base) * var(--inkpad-heading-scale) * 1.35
	);
	--inkpad-cta-text-size: var(--inkpad-font-sm);
}

.inkpad-scope .inkpad-cta--size-md,
.editor-styles-wrapper .inkpad-cta--size-md {
	--inkpad-cta-heading-size: calc(
		var(--inkpad-font-size-base) * var(--inkpad-heading-scale) * 1.75
	);
	--inkpad-cta-text-size: var(--inkpad-font-md);
}

.inkpad-scope .inkpad-cta--size-lg,
.editor-styles-wrapper .inkpad-cta--size-lg {
	--inkpad-cta-heading-size: calc(
		var(--inkpad-font-size-base) * var(--inkpad-heading-scale) * 2.1
	);
	--inkpad-cta-text-size: var(--inkpad-font-lg);
}

/* Typography: weight */
.inkpad-scope .inkpad-cta--weight-normal .inkpad-cta__heading,
.editor-styles-wrapper .inkpad-cta--weight-normal .inkpad-cta__heading {
	--inkpad-cta-heading-weight: var(--inkpad-weight-normal);
}

.inkpad-scope .inkpad-cta--weight-medium .inkpad-cta__heading,
.editor-styles-wrapper .inkpad-cta--weight-medium .inkpad-cta__heading {
	--inkpad-cta-heading-weight: var(--inkpad-weight-medium);
}

.inkpad-scope .inkpad-cta--weight-bold .inkpad-cta__heading,
.editor-styles-wrapper .inkpad-cta--weight-bold .inkpad-cta__heading {
	--inkpad-cta-heading-weight: var(--inkpad-weight-bold);
}

.inkpad-scope .inkpad-cta--weight-normal .inkpad-cta__text,
.editor-styles-wrapper .inkpad-cta--weight-normal .inkpad-cta__text {
	--inkpad-cta-text-weight: var(--inkpad-weight-normal);
}

.inkpad-scope .inkpad-cta--weight-medium .inkpad-cta__text,
.editor-styles-wrapper .inkpad-cta--weight-medium .inkpad-cta__text {
	--inkpad-cta-text-weight: var(--inkpad-weight-medium);
}

.inkpad-scope .inkpad-cta--weight-bold .inkpad-cta__text,
.editor-styles-wrapper .inkpad-cta--weight-bold .inkpad-cta__text {
	--inkpad-cta-text-weight: var(--inkpad-weight-bold);
}

/* Actions */
.inkpad-scope .inkpad-cta__actions,
.editor-styles-wrapper .inkpad-cta__actions {
	display: flex;
	flex: 0 0 auto;
	flex-shrink: 0;
	justify-content: var(--inkpad-align-flex, center);
	width: auto;
	max-width: 100%;
}

.inkpad-scope .inkpad-cta--stacked .inkpad-cta__actions,
.editor-styles-wrapper .inkpad-cta--stacked .inkpad-cta__actions {
	margin-top: var(--inkpad-space-md);
	flex: 0 0 auto;
	width: 100%;
}

.inkpad-scope .inkpad-cta__actions .inkpad-button,
.editor-styles-wrapper .inkpad-cta__actions .inkpad-button {
	display: flex;
	width: auto;
	max-width: 100%;
}

/* Padding modifier */
.inkpad-scope .inkpad-cta--padding-none .inkpad-inner,
.editor-styles-wrapper .inkpad-cta--padding-none .inkpad-inner {
	padding: 0;
}

.inkpad-scope .inkpad-cta--padding-sm .inkpad-inner,
.editor-styles-wrapper .inkpad-cta--padding-sm .inkpad-inner {
	--inkpad-cta-inner-pad-y: var(--inkpad-space-sm);
	--inkpad-cta-inner-pad-x: var(--inkpad-space-xs);
}

.inkpad-scope .inkpad-cta--padding-md .inkpad-inner,
.editor-styles-wrapper .inkpad-cta--padding-md .inkpad-inner {
	--inkpad-cta-inner-pad-y: var(--inkpad-space-md);
	--inkpad-cta-inner-pad-x: var(--inkpad-space-sm);
}

.inkpad-scope .inkpad-cta--padding-lg .inkpad-inner,
.editor-styles-wrapper .inkpad-cta--padding-lg .inkpad-inner {
	--inkpad-cta-inner-pad-y: var(--inkpad-space-lg);
	--inkpad-cta-inner-pad-x: var(--inkpad-space-md);
}

/* Variants */
.inkpad-scope .inkpad-cta--variant-primary,
.inkpad-scope .inkpad-cta--variant-default,
.editor-styles-wrapper .inkpad-cta--variant-primary,
.editor-styles-wrapper .inkpad-cta--variant-default {
	--inkpad-cta-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 92%,
		var(--inkpad-color-accent, var(--inkpad-accent, currentcolor)) 8%
	);
	--inkpad-cta-shadow: var(--inkpad-shadow-sm, none);
}

.inkpad-scope .inkpad-cta--variant-clay,
.inkpad-scope .inkpad-cta--variant-minimal,
.editor-styles-wrapper .inkpad-cta--variant-clay,
.editor-styles-wrapper .inkpad-cta--variant-minimal {
	--inkpad-cta-bg: var(--inkpad-color-surface, var(--inkpad-surface, #ffffff));
	--inkpad-cta-border: 1px solid color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, #111111)) 10%,
		transparent
	);
	--inkpad-cta-shadow: var(--inkpad-shadow-sm, none);
}

.inkpad-scope .inkpad-cta--variant-glass,
.inkpad-scope .inkpad-cta--variant-surface,
.editor-styles-wrapper .inkpad-cta--variant-glass,
.editor-styles-wrapper .inkpad-cta--variant-surface {
	--inkpad-cta-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 78%,
		transparent
	);
	--inkpad-cta-border: 1px solid color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, #111111)) 12%,
		transparent
	);
	--inkpad-cta-shadow: var(--inkpad-shadow-sm, none);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.inkpad-scope .inkpad-cta--variant-outlined,
.editor-styles-wrapper .inkpad-cta--variant-outlined {
	--inkpad-cta-border: 1px solid color-mix(
		in srgb,
		var(--inkpad-color-accent, var(--inkpad-accent, currentcolor)) 28%,
		var(--inkpad-color-text, var(--inkpad-text, #111111))
	);
}

@media (max-width: 48em) {
	.inkpad-scope .inkpad-cta--padding-lg .inkpad-inner,
	.editor-styles-wrapper .inkpad-cta--padding-lg .inkpad-inner {
		--inkpad-cta-inner-pad-y: var(--inkpad-space-md);
		--inkpad-cta-inner-pad-x: var(--inkpad-space-sm);
	}
}