/**
 * MH Theme — first real block pattern styles.
 * These patterns are intentionally token-based so inserted page sections do not
 * become one-off design hacks.
 */

.mht-pattern {
	position: relative;
	isolation: isolate;
	padding: clamp(56px, 8vw, 112px) clamp(20px, 4vw, 42px);
	margin-block: clamp(32px, 5vw, 72px);
	border: 1px solid color-mix(in srgb, var(--mht-color-border, #2C2532) 72%, transparent);
	border-radius: var(--mht-radius-section, 28px);
	background:
		radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--mht-color-accent-glow, #B78CFF) 14%, transparent), transparent 38%),
		linear-gradient(135deg, color-mix(in srgb, var(--mht-color-surface, #141017) 88%, transparent), color-mix(in srgb, var(--mht-color-surface-2, #1B1620) 64%, transparent));
	overflow: clip;
}

.mht-pattern__kicker {
	margin: 0 0 clamp(14px, 2vw, 22px);
	color: var(--mht-color-accent-glow, #B78CFF);
	font-family: var(--mht-font-body, system-ui, sans-serif);
	font-size: clamp(0.72rem, 0.8vw, 0.82rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mht-pattern__headline {
	max-width: 920px;
	margin: 0 0 clamp(18px, 3vw, 30px);
	color: var(--mht-color-text, #F6F2F7);
	font-family: var(--mht-font-heading, Georgia, serif);
	font-size: clamp(2.1rem, 5vw, 5.8rem);
	line-height: 0.98;
	letter-spacing: -0.055em;
}

.mht-pattern__lead,
.mht-pattern p:not(.mht-pattern__kicker):not(.mht-pattern__trust) {
	max-width: 680px;
	color: var(--mht-color-text-muted, #AFA4B8);
	font-family: var(--mht-font-body, system-ui, sans-serif);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.7;
}

.mht-pattern__trust {
	margin-top: clamp(18px, 3vw, 28px);
	color: var(--mht-color-text-muted, #AFA4B8);
	font-family: var(--mht-font-body, system-ui, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mht-pattern__cards {
	margin-top: clamp(26px, 4vw, 46px);
	gap: clamp(14px, 2vw, 22px);
}

.mht-pattern__card,
.mht-pattern__detail {
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid color-mix(in srgb, var(--mht-color-border, #2C2532) 72%, transparent);
	border-radius: var(--mht-radius-card, 20px);
	background: color-mix(in srgb, var(--mht-color-surface-2, #1B1620) 74%, transparent);
}

.mht-pattern__card h3,
.mht-pattern__detail summary {
	color: var(--mht-color-text, #F6F2F7);
	font-family: var(--mht-font-heading, Georgia, serif);
}

.mht-pattern__detail {
	margin-block: 10px;
}

.mht-pattern__detail summary {
	cursor: pointer;
	font-weight: 700;
}

.mht-pattern__actions {
	margin-top: clamp(24px, 4vw, 40px);
}

.mht-pattern__button .wp-block-button__link {
	border-radius: 999px;
	font-family: var(--mht-font-body, system-ui, sans-serif);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.mht-pattern__button--primary .wp-block-button__link {
	background: var(--mht-color-accent-glow, #B78CFF);
	color: var(--mht-color-bg, #0D0D0D);
}

.mht-pattern__button--secondary .wp-block-button__link {
	background: transparent;
	color: var(--mht-color-text, #F6F2F7);
	border: 1px solid color-mix(in srgb, var(--mht-color-border, #2C2532) 80%, var(--mht-color-accent-glow, #B78CFF));
}

[data-mht-theme-effective="light"] .mht-pattern,
[data-mht-theme="light"] .mht-pattern {
	background:
		radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--mht-color-accent, #8E63A3) 12%, transparent), transparent 38%),
		linear-gradient(135deg, rgba(255,255,255,.88), color-mix(in srgb, var(--mht-color-surface, #FFFFFF) 76%, transparent));
}

@media (max-width: 781px) {
	.mht-pattern__headline {
		font-size: clamp(2rem, 10vw, 3.5rem);
	}
}

/* Phase 17 — expanded pattern library styles. */
.mht-pattern__purpose {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	width: fit-content;
	margin: 0 0 clamp(16px, 2vw, 24px);
	padding: .55rem .8rem;
	border: 1px solid color-mix(in srgb, var(--mht-color-border, #2C2532) 70%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--mht-color-surface-2, #1B1620) 54%, transparent);
	color: var(--mht-color-text-muted, #AFA4B8);
	font-family: var(--mht-font-body, system-ui, sans-serif);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
}

.mht-pattern__purpose::before {
	content: "";
	width: .42rem;
	height: .42rem;
	border-radius: 999px;
	background: var(--mht-color-accent-glow, #B78CFF);
	box-shadow: 0 0 18px color-mix(in srgb, var(--mht-color-accent-glow, #B78CFF) 68%, transparent);
}

.mht-pattern__split {
	gap: clamp(28px, 6vw, 84px);
}

.mht-pattern__proof-panel,
.mht-pattern__media-card {
	min-height: clamp(280px, 34vw, 460px);
	padding: clamp(24px, 4vw, 42px);
	border: 1px solid color-mix(in srgb, var(--mht-color-border, #2C2532) 76%, transparent);
	border-radius: var(--mht-radius-section, 28px);
	background:
		radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--mht-color-accent-glow, #B78CFF) 18%, transparent), transparent 42%),
		color-mix(in srgb, var(--mht-color-surface-2, #1B1620) 78%, transparent);
}

.mht-pattern__media-card {
	display: grid;
	place-items: center;
}

.mht-pattern__media-placeholder {
	display: grid;
	place-items: center;
	width: min(100%, 420px);
	min-height: 260px;
	border: 1px dashed color-mix(in srgb, var(--mht-color-border, #2C2532) 78%, var(--mht-color-accent-glow, #B78CFF));
	border-radius: var(--mht-radius-card, 20px);
	color: var(--mht-color-text-muted, #AFA4B8);
	font-family: var(--mht-font-body, system-ui, sans-serif);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.mht-pattern__rows {
	margin-top: clamp(26px, 4vw, 46px);
	border-top: 1px solid color-mix(in srgb, var(--mht-color-border, #2C2532) 72%, transparent);
}

.mht-pattern__row {
	display: grid;
	grid-template-columns: minmax(220px, .6fr) minmax(0, 1fr);
	gap: clamp(18px, 4vw, 56px);
	padding: clamp(22px, 4vw, 34px) 0;
	border-bottom: 1px solid color-mix(in srgb, var(--mht-color-border, #2C2532) 72%, transparent);
}

.mht-pattern__row h3,
.mht-pattern__number,
.mht-pattern__badge {
	margin: 0;
	color: var(--mht-color-accent-glow, #B78CFF);
	font-family: var(--mht-font-body, system-ui, sans-serif);
	font-size: .76rem;
	font-weight: 850;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.mht-pattern__row p {
	margin: 0;
}

.mht-pattern__number {
	margin-bottom: clamp(18px, 2vw, 28px);
}

.mht-pattern__badge {
	width: fit-content;
	margin-bottom: 18px;
	padding: .5rem .72rem;
	border: 1px solid color-mix(in srgb, var(--mht-color-border, #2C2532) 74%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--mht-color-accent-glow, #B78CFF) 10%, transparent);
}

.mht-pattern__quote p:first-child {
	color: var(--mht-color-text, #F6F2F7);
	font-family: var(--mht-font-heading, Georgia, serif);
	font-size: clamp(1.35rem, 2.1vw, 2rem);
	line-height: 1.2;
}

.mht-pattern__list {
	margin: 1.2rem 0 0;
	padding-left: 1.2rem;
	color: var(--mht-color-text-muted, #AFA4B8);
	font-family: var(--mht-font-body, system-ui, sans-serif);
	line-height: 1.8;
}

.mht-pattern--final-cta {
	text-align: center;
}

.mht-pattern--final-cta .mht-pattern__headline,
.mht-pattern--final-cta .mht-pattern__lead,
.mht-pattern--final-cta .mht-pattern__actions,
.mht-pattern--final-cta .mht-pattern__purpose {
	margin-left: auto;
	margin-right: auto;
}

.mht-pattern--belief .mht-pattern__headline {
	max-width: 1080px;
}

[data-mht-theme-effective="light"] .mht-pattern__purpose,
[data-mht-theme="light"] .mht-pattern__purpose,
[data-mht-theme-effective="light"] .mht-pattern__card,
[data-mht-theme="light"] .mht-pattern__card,
[data-mht-theme-effective="light"] .mht-pattern__detail,
[data-mht-theme="light"] .mht-pattern__detail,
[data-mht-theme-effective="light"] .mht-pattern__proof-panel,
[data-mht-theme="light"] .mht-pattern__proof-panel,
[data-mht-theme-effective="light"] .mht-pattern__media-card,
[data-mht-theme="light"] .mht-pattern__media-card {
	background-color: color-mix(in srgb, var(--mht-color-surface, #fff) 88%, transparent);
}

@media (max-width: 781px) {
	.mht-pattern__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.mht-pattern__proof-panel,
	.mht-pattern__media-card {
		min-height: auto;
	}
}