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

.inkpad-scope .inkpad-hero,
.editor-styles-wrapper .inkpad-hero {
	--inkpad-hero-heading-size: calc(
		var(--inkpad-font-size-base) * var(--inkpad-heading-scale) * 1.75
	);
	--inkpad-hero-heading-weight: var(--inkpad-weight-normal);
	--inkpad-hero-text-size: var(--inkpad-font-md);
	--inkpad-hero-text-weight: var(--inkpad-weight-normal);
	--inkpad-hero-inner-gap: var(--inkpad-space-md);
	--inkpad-hero-inner-pad-y: var(--inkpad-space-md);
	--inkpad-hero-inner-pad-x: var(--inkpad-space-sm);
	--inkpad-hero-content-align: left;
	--inkpad-hero-bg: transparent;
	--inkpad-hero-border: none;
	--inkpad-hero-shadow: none;
	--inkpad-hero-radius: var(--inkpad-radius-md, var(--inkpad-radius));

	width: 100%;
	box-sizing: border-box;
	background: var(--inkpad-hero-bg);
	border: var(--inkpad-hero-border);
	box-shadow: var(--inkpad-hero-shadow);
	border-radius: var(--inkpad-hero-radius);
	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-hero .inkpad-inner,
.editor-styles-wrapper .inkpad-hero .inkpad-inner {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: var(--inkpad-hero-inner-gap);
	padding: var(--inkpad-hero-inner-pad-y) var(--inkpad-hero-inner-pad-x);
	box-sizing: border-box;
	width: 100%;
}

/* ----- Layout: left / right (with media) ----- */
.inkpad-scope .inkpad-hero--has-media.inkpad-hero--content-left .inkpad-inner,
.editor-styles-wrapper .inkpad-hero--has-media.inkpad-hero--content-left .inkpad-inner {
	flex-direction: row;
}

.inkpad-scope .inkpad-hero--has-media.inkpad-hero--content-right .inkpad-inner,
.editor-styles-wrapper .inkpad-hero--has-media.inkpad-hero--content-right .inkpad-inner {
	flex-direction: row-reverse;
}

.inkpad-scope .inkpad-hero--has-media .inkpad-hero__content,
.inkpad-scope .inkpad-hero--has-media .inkpad-hero__media,
.editor-styles-wrapper .inkpad-hero--has-media .inkpad-hero__content,
.editor-styles-wrapper .inkpad-hero--has-media .inkpad-hero__media {
	flex: 1 1 min(100%, calc(var(--inkpad-space-xl) * 14));
	min-width: 0;
}

/* ----- Layout: centered ----- */
.inkpad-scope .inkpad-hero--centered .inkpad-inner,
.editor-styles-wrapper .inkpad-hero--centered .inkpad-inner {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.inkpad-scope .inkpad-hero--centered .inkpad-hero__content,
.editor-styles-wrapper .inkpad-hero--centered .inkpad-hero__content {
	align-items: center;
}

/* ----- No media: content full width ----- */
.inkpad-scope .inkpad-hero:not(.inkpad-hero--has-media) .inkpad-hero__content,
.editor-styles-wrapper .inkpad-hero:not(.inkpad-hero--has-media) .inkpad-hero__content {
	flex: 1 1 100%;
}

/* ----- Content column ----- */
.inkpad-scope .inkpad-hero__content,
.editor-styles-wrapper .inkpad-hero__content {
	display: flex;
	flex-direction: column;
	align-items: var(--inkpad-align-flex, flex-start);
	gap: var(--inkpad-space-sm);
	text-align: var(--inkpad-hero-content-align);
	box-sizing: border-box;
	max-width: var(--inkpad-hero-content-max, none);
}

.inkpad-scope .inkpad-hero--centered .inkpad-hero__content,
.editor-styles-wrapper .inkpad-hero--centered .inkpad-hero__content {
	text-align: center;
}

/* Alignment modifier (overrides default / centered text-align) */
.inkpad-scope .inkpad-hero--align-left .inkpad-hero__content,
.editor-styles-wrapper .inkpad-hero--align-left .inkpad-hero__content {
	--inkpad-hero-content-align: left;
	text-align: left;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ----- CTA ----- */
.inkpad-scope .inkpad-hero__cta,
.editor-styles-wrapper .inkpad-hero__cta {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
	gap: var(--inkpad-space-sm);
	justify-content: var(--inkpad-align-flex, flex-start);
	width: 100%;
	max-width: 100%;
}

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

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

/* ----- Media ----- */
.inkpad-scope .inkpad-hero__media,
.editor-styles-wrapper .inkpad-hero__media {
	position: relative;
	min-width: 0;
	box-sizing: border-box;
}

.inkpad-scope .inkpad-hero__media img,
.editor-styles-wrapper .inkpad-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--inkpad-hero-radius);
}

.editor-styles-wrapper .inkpad-hero__media--empty {
	min-height: calc(var(--inkpad-space-xl) * 2);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed color-mix(in srgb, var(--inkpad-text) 22%, transparent);
	border-radius: var(--inkpad-hero-radius);
}

.editor-styles-wrapper .inkpad-hero__media-replace {
	margin-top: var(--inkpad-space-xs);
}

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

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

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

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

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

.inkpad-scope .inkpad-hero--variant-outlined,
.editor-styles-wrapper .inkpad-hero--variant-outlined {
	--inkpad-hero-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-hero--variant-clay,
.inkpad-scope .inkpad-hero--variant-minimal,
.editor-styles-wrapper .inkpad-hero--variant-clay,
.editor-styles-wrapper .inkpad-hero--variant-minimal {
	--inkpad-hero-bg: var(--inkpad-color-surface, var(--inkpad-surface, #ffffff));
	--inkpad-hero-border: 1px solid color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, #111111)) 10%,
		transparent
	);
	--inkpad-hero-shadow: var(--inkpad-shadow-sm, none);
	--inkpad-hero-inner-gap: var(--inkpad-space-md);
}

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

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

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