/**
 * ETheme Block — PetEvia design-system integration.
 *
 * This file owns shared typography and the portable integration contract.
 * Component-specific visual treatments remain with each module.
 */

/*
 * Compatibility aliases are intentionally centralized here. ETheme supplies
 * the semantic --eth-* values; the fallbacks only keep the plugin usable with
 * another theme and are not repeated across component stylesheets.
 */
:root {
	--etb-control-bg: var(--eth-bg-surface, #fff);
	--etb-control-color: var(--eth-text-title, #1f2937);
	--etb-control-border: var(--eth-border, rgba(31, 41, 55, 0.18));
	--etb-control-shadow: var(--eth-shadow-m, 0 0.5rem 1.5rem rgba(15, 23, 42, 0.18));
	--etb-control-muted: var(--eth-text-muted, #64748b);
	--etb-overlay-dark: var(--eth-dark-60, rgba(0, 0, 0, 0.78));
	--etb-overlay-dark-soft: var(--eth-dark-20, rgba(0, 0, 0, 0.2));
	--etb-overlay-dark-medium: var(--eth-dark-40, rgba(0, 0, 0, 0.55));
	--etb-overlay-dark-subtle: var(--eth-dark-10, rgba(0, 0, 0, 0.08));
	--etb-overlay-light: var(--eth-light-10, rgba(255, 255, 255, 0.08));
	--etb-overlay-light-border: var(--eth-light-60, rgba(255, 255, 255, 0.28));
	--etb-overlay-light-muted: var(--eth-light-80, rgba(255, 255, 255, 0.8));
}

/* Shared section/container skeleton from THEME-DESIGN-CONTEXT.md. */
.eth-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--eth-container, 1350px);
	margin-inline: auto;
	padding-inline: var(--eth-section-space-x, 1.5rem);
}

/* Custom gradients are opt-in per module; incomplete values use theme tokens. */
.etb-bg-custom-gradient,
.eth-module--bg-custom-gradient {
	background-color: var(--eth-bg-surface);
	background-image: linear-gradient(
		var(--etb-gradient-angle, 135deg),
		var(--etb-gradient-start, var(--eth-bg-surface)),
		var(--etb-gradient-end, var(--eth-primary-10))
	);
}

.etheme-block-color-label {
	margin: var(--eth-space-2xs, 0.5rem) 0 var(--eth-space-3xs, 0.25rem);
	color: var(--eth-text-muted, #64748b);
	font-size: var(--eth-fs-small, 0.875rem);
	font-weight: var(--eth-fw-medium, 500);
}

.etheme-block-gradient-preview {
	min-height: var(--eth-space-xl);
	margin-bottom: var(--eth-space-s);
	border: 1px solid var(--eth-border);
	border-radius: var(--eth-radius-s);
}

.etheme-block-gradient-reset {
	margin-inline-start: var(--eth-space-2xs);
}

/* Main-title design controls. Values live on the block root and inherit here. */
.etb-heading-scale-80 { --etb-heading-scale: 0.8; }
.etb-heading-scale-85 { --etb-heading-scale: 0.85; }
.etb-heading-scale-90 { --etb-heading-scale: 0.9; }
.etb-heading-scale-95 { --etb-heading-scale: 0.95; }
.etb-heading-scale-100 { --etb-heading-scale: 1; }
.etb-heading-scale-105 { --etb-heading-scale: 1.05; }
.etb-heading-scale-110 { --etb-heading-scale: 1.1; }

.etb-heading-color-primary { --etb-heading-color: var(--eth-primary); }
.etb-heading-color-secondary { --etb-heading-color: var(--eth-secondary); }
.etb-heading-color-dark { --etb-heading-color: var(--eth-dark); }
.etb-heading-color-light { --etb-heading-color: var(--eth-light); }

.eth-section .etb-section-heading {
	--etb-heading-base-size: var(--eth-fs-h2);
	margin: 0;
	color: var(--etb-heading-color, var(--eth-text-title));
	font-family: var(--eth-font-heading);
	font-size: calc(var(--etb-heading-base-size) * var(--etb-heading-scale, 1));
	font-weight: var(--eth-fw-heading);
	line-height: var(--eth-lh-heading);
}

.eth-section .etb-section-heading:is(h1) {
	--etb-heading-base-size: var(--eth-fs-h1);
}

.eth-section .etb-section-description {
	margin: 0;
	color: var(--eth-text-muted);
	font-family: var(--eth-font-body);
	font-size: var(--eth-fs-body);
	line-height: var(--eth-lh-body);
}

.eth-section .etb-section-description > :first-child {
	margin-top: 0;
}

.eth-section .etb-section-description > :last-child {
	margin-bottom: 0;
}

/* Only modules that explicitly opt in receive a centered, full-width header. */
.eth-section .etb-section-header--center {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: var(--eth-space-2xs);
	align-items: center;
	width: 100%;
	margin-bottom: var(--eth-space-l);
	text-align: center;
}

.eth-section .etb-section-header--center .etb-section-heading {
	max-inline-size: min(100%, var(--eth-container));
	text-align: center;
}

.eth-section .etb-section-header--center .etb-section-description {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	text-align: center;
}

@media (max-width: 768px) {
	.eth-section .etb-section-header--center {
		margin-bottom: var(--eth-space-m);
	}
}