/* =========================================
   inkPad / Media + Text
   Class-driven + token-based styles
========================================= */

.inkpad-scope .inkpad-media-text,
.editor-styles-wrapper .inkpad-media-text {
	--inkpad-media-text-inner-pad: 0;
	--inkpad-media-text-heading-size: calc(var(--inkpad-font-size-base) * var(--inkpad-heading-scale) * 1.3);
	--inkpad-media-text-heading-weight: var(--inkpad-weight-bold);
	--inkpad-media-text-body-size: var(--inkpad-font-md);
	--inkpad-media-text-text-align: left;
	--inkpad-media-text-bg: transparent;
	--inkpad-media-text-border: none;
	--inkpad-media-text-shadow: none;
	--inkpad-media-text-radius: var(--inkpad-radius-md, var(--inkpad-radius));
	width: 100%;
	box-sizing: border-box;
}

.inkpad-scope .inkpad-media-text__inner,
.editor-styles-wrapper .inkpad-media-text__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--inkpad-space-md);
	width: 100%;
	padding: var(--inkpad-media-text-inner-pad);
	box-sizing: border-box;
	background: var(--inkpad-media-text-bg);
	border: var(--inkpad-media-text-border);
	border-radius: var(--inkpad-media-text-radius);
	box-shadow: var(--inkpad-media-text-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-media-text--image-left .inkpad-media-text__inner,
.inkpad-scope .inkpad-media-text--image-right .inkpad-media-text__inner,
.editor-styles-wrapper .inkpad-media-text--image-left .inkpad-media-text__inner {
	flex-direction: row;
	flex-wrap: nowrap;
}

.editor-styles-wrapper .inkpad-media-text--image-right .inkpad-media-text__inner {
	flex-direction: row;
	flex-wrap: nowrap;
}

.inkpad-scope .inkpad-media-text--image-left .inkpad-media,
.inkpad-scope .inkpad-media-text--image-left .inkpad-text,
.inkpad-scope .inkpad-media-text--image-right .inkpad-media,
.inkpad-scope .inkpad-media-text--image-right .inkpad-text,
.editor-styles-wrapper .inkpad-media-text--image-left .inkpad-media,
.editor-styles-wrapper .inkpad-media-text--image-left .inkpad-text,
.editor-styles-wrapper .inkpad-media-text--image-right .inkpad-media,
.editor-styles-wrapper .inkpad-media-text--image-right .inkpad-text {
	flex: 1 1 0;
	max-width: calc(50% - (var(--inkpad-space-md) / 2));
	min-width: 0;
}

.inkpad-scope .inkpad-media-text--stack .inkpad-media-text__inner,
.editor-styles-wrapper .inkpad-media-text--stack .inkpad-media-text__inner {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
}

.inkpad-scope .inkpad-media-text--stack .inkpad-media,
.inkpad-scope .inkpad-media-text--stack .inkpad-text,
.editor-styles-wrapper .inkpad-media-text--stack .inkpad-media,
.editor-styles-wrapper .inkpad-media-text--stack .inkpad-text {
	flex: 1 1 100%;
	max-width: 100%;
}

.inkpad-scope .inkpad-media-text .inkpad-media,
.editor-styles-wrapper .inkpad-media-text .inkpad-media {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: min(100%, calc(var(--inkpad-space-md) * 12.5));
	min-width: 0;
}

.inkpad-scope .inkpad-media-text--image-right .inkpad-media,
.editor-styles-wrapper .inkpad-media-text--image-right .inkpad-media {
	order: 2;
}

.inkpad-scope .inkpad-media-text--image-right .inkpad-text,
.editor-styles-wrapper .inkpad-media-text--image-right .inkpad-text {
	order: 1;
}

.inkpad-scope .inkpad-media-text .inkpad-text,
.editor-styles-wrapper .inkpad-media-text .inkpad-text {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: min(100%, calc(var(--inkpad-space-md) * 16.25));
	min-width: 0;
	text-align: var(--inkpad-media-text-text-align);
}

.inkpad-scope .inkpad-media-text--image-left .inkpad-media,
.inkpad-scope .inkpad-media-text--image-left .inkpad-text,
.inkpad-scope .inkpad-media-text--image-right .inkpad-media,
.inkpad-scope .inkpad-media-text--image-right .inkpad-text,
.editor-styles-wrapper .inkpad-media-text--image-left .inkpad-media,
.editor-styles-wrapper .inkpad-media-text--image-left .inkpad-text,
.editor-styles-wrapper .inkpad-media-text--image-right .inkpad-media,
.editor-styles-wrapper .inkpad-media-text--image-right .inkpad-text {
	flex: 1 1 0;
	max-width: calc(50% - (var(--inkpad-space-md) / 2));
	min-width: 0;
}

.inkpad-scope .inkpad-media-text__cta,
.editor-styles-wrapper .inkpad-media-text__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--inkpad-space-sm);
	justify-content: var(--inkpad-align-flex, flex-start);
	width: 100%;
}

.inkpad-scope .inkpad-media-text__actions .inkpad-button__link,
.editor-styles-wrapper .inkpad-media-text__actions .inkpad-button__link {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* ---------- Align ---------- */
.inkpad-scope .inkpad-media-text.inkpad-media-text--align-left,
.editor-styles-wrapper .inkpad-media-text.inkpad-media-text--align-left {
	--inkpad-media-text-text-align: left;
}

.inkpad-scope .inkpad-media-text.inkpad-media-text--align-center,
.editor-styles-wrapper .inkpad-media-text.inkpad-media-text--align-center {
	--inkpad-media-text-text-align: center;
}

.inkpad-scope .inkpad-media-text.inkpad-media-text--align-right,
.editor-styles-wrapper .inkpad-media-text.inkpad-media-text--align-right {
	--inkpad-media-text-text-align: right;
}

/* CTA: inkpad-button is full-width by default; keep action inline with text column */
.inkpad-scope .inkpad-media-text__cta .inkpad-button,
.editor-styles-wrapper .inkpad-media-text__cta .inkpad-button {
	width: auto;
	max-width: 100%;
}

/* ---------- Media ---------- */
.inkpad-scope .inkpad-media-text__img,
.editor-styles-wrapper .inkpad-media-text__img {
	width: 100%;
	height: auto;
	border-radius: var(--inkpad-media-text-radius);
	display: block;
}

.inkpad-scope .inkpad-media-text__placeholder,
.editor-styles-wrapper .inkpad-media-text__placeholder {
	min-height: calc(var(--inkpad-space-md) * 11.25);
	border-radius: var(--inkpad-media-text-radius);
	background: var(--inkpad-color-surface, var(--inkpad-surface, #ffffff));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--inkpad-color-text-muted, var(--inkpad-text-muted, #666666));
	font-size: var(--inkpad-font-sm);
	border: 1px dashed color-mix(in srgb, var(--inkpad-color-text, var(--inkpad-text, #111111)) 18%, transparent);
}

/* ---------- Typography ---------- */
.inkpad-scope .inkpad-media-text__heading,
.editor-styles-wrapper .inkpad-media-text__heading {
	font-size: var(--inkpad-media-text-heading-size);
	font-weight: var(--inkpad-media-text-heading-weight);
	margin: 0 0 var(--inkpad-space-sm);
	color: var(--inkpad-text);
	line-height: var(--inkpad-line-height-tight);
}

.inkpad-scope .inkpad-media-text__p,
.editor-styles-wrapper .inkpad-media-text__p {
	margin: 0 0 var(--inkpad-space-md);
	font-size: var(--inkpad-media-text-body-size);
	color: var(--inkpad-text-muted);
	line-height: var(--inkpad-line-height, var(--inkpad-line-height-relaxed));
}

.inkpad-scope .inkpad-media-text__cta,
.editor-styles-wrapper .inkpad-media-text__cta {
	margin-top: var(--inkpad-space-xs);
}

/* ---------- Size ---------- */
.inkpad-scope .inkpad-media-text.inkpad-media-text--size-sm,
.editor-styles-wrapper .inkpad-media-text.inkpad-media-text--size-sm {
	--inkpad-media-text-heading-size: calc(var(--inkpad-font-size-base) * var(--inkpad-heading-scale) * 1.1);
	--inkpad-media-text-body-size: var(--inkpad-font-sm);
}

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

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

/* ---------- Weight (heading) ---------- */
.inkpad-scope .inkpad-media-text.inkpad-media-text--weight-normal,
.editor-styles-wrapper .inkpad-media-text.inkpad-media-text--weight-normal {
	--inkpad-media-text-heading-weight: var(--inkpad-weight-normal);
}

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

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

/* ---------- Padding ---------- */
.inkpad-scope .inkpad-media-text.inkpad-media-text--padding-none,
.editor-styles-wrapper .inkpad-media-text.inkpad-media-text--padding-none {
	--inkpad-media-text-inner-pad: 0;
}

.inkpad-scope .inkpad-media-text.inkpad-media-text--padding-sm,
.editor-styles-wrapper .inkpad-media-text.inkpad-media-text--padding-sm {
	--inkpad-media-text-inner-pad: var(--inkpad-space-sm);
}

.inkpad-scope .inkpad-media-text.inkpad-media-text--padding-md,
.editor-styles-wrapper .inkpad-media-text.inkpad-media-text--padding-md {
	--inkpad-media-text-inner-pad: var(--inkpad-space-md);
}

.inkpad-scope .inkpad-media-text.inkpad-media-text--padding-lg,
.editor-styles-wrapper .inkpad-media-text.inkpad-media-text--padding-lg {
	--inkpad-media-text-inner-pad: var(--inkpad-space-lg);
}

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

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

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

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

/* Stack on narrow viewports */
@media (max-width: 48rem) {
	.inkpad-scope .inkpad-media-text .inkpad-media-text__inner,
	.editor-styles-wrapper .inkpad-media-text .inkpad-media-text__inner {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
	}

	.inkpad-scope .inkpad-media-text .inkpad-media,
	.inkpad-scope .inkpad-media-text .inkpad-text,
	.editor-styles-wrapper .inkpad-media-text .inkpad-media,
	.editor-styles-wrapper .inkpad-media-text .inkpad-text {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	.inkpad-scope .inkpad-media-text .inkpad-media,
	.editor-styles-wrapper .inkpad-media-text .inkpad-media,
	.inkpad-scope .inkpad-media-text .inkpad-text,
	.editor-styles-wrapper .inkpad-media-text .inkpad-text {
		order: initial !important;
	}
}

@media (max-width: 30em) {
	.inkpad-scope .inkpad-media-text__actions .inkpad-button,
	.editor-styles-wrapper .inkpad-media-text__actions .inkpad-button {
		width: 100%;
	}
}