/**
 * MON PORTÉ Product Intro (PDP-C1).
 * Strictly .mppi-* scoped. No card, no border, no shadow, no background.
 * Tiers: base = desktop, max-width:850 tablet, max-width:549 mobile.
 */

.mppi-intro {
	color: var(--mppi-text, #1f1e1b);
	padding-top: var(--mppi-pad-y, 0px);
	padding-bottom: var(--mppi-pad-y, 0px);
}

.mppi-inner {
	width: 100%;
	max-width: var(--mppi-maxw, 600px);
	display: flex;
	flex-direction: column;
	gap: var(--mppi-gap, 16px);
}

.mppi-align-center .mppi-inner {
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

.mppi-align-right .mppi-inner {
	margin-left: auto;
	text-align: right;
	align-items: flex-end;
}

.mppi-align-left .mppi-inner {
	text-align: left;
	align-items: flex-start;
}

/* ---- Badge ---- */

.mppi-badge {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mppi-accent, #60373d);
}

.mppi-badge-soft .mppi-badge {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--mppi-accent, #60373d) 8%, transparent);
}

.mppi-badge-outline .mppi-badge {
	display: inline-block;
	padding: 5px 13px;
	border: 1px solid color-mix(in srgb, var(--mppi-accent, #60373d) 45%, transparent);
	border-radius: 999px;
}

/* ---- Title (Signature: Clean Sans Manrope; Serif optional) ---- */

.mppi-title {
	margin: 0;
	font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
	font-size: var(--mppi-title-size, 38px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.12;
	text-wrap: balance;
}

.mppi-title-serif .mppi-title {
	font-family: var(--mppi-head-font, "Playfair Display", Georgia, serif);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: 0;
}

/* ---- Subtitle ---- */

.mppi-subtitle {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--mppi-muted, #646049);
}

/* ---- Intro copy ---- */

.mppi-copy {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--mppi-muted, #646049);
}

.mppi-copy p {
	margin: 0 0 0.75em;
}

.mppi-copy p:last-child {
	margin-bottom: 0;
}

.mppi-copy a {
	color: var(--mppi-accent, #60373d);
	text-underline-offset: 3px;
}

/* ---- Placeholder (Builder only) ---- */

.mppi-placeholder {
	padding: 24px;
	border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 8px;
	font-size: 13.5px;
	text-align: center;
	opacity: 0.75;
}

/* ---- Tablet: max-width 849px ---- */

@media (max-width: 849px) {
	.mppi-intro {
		padding-top: var(--mppi-pad-y-md, 0px);
		padding-bottom: var(--mppi-pad-y-md, 0px);
	}

	.mppi-inner {
		gap: var(--mppi-gap-md, 16px);
	}

	.mppi-title {
		font-size: var(--mppi-title-size-md, 34px);
	}
}

/* ---- Mobile: max-width 549px ---- */

@media (max-width: 549px) {
	.mppi-intro {
		padding-top: var(--mppi-pad-y-sm, 0px);
		padding-bottom: var(--mppi-pad-y-sm, 0px);
	}

	.mppi-inner {
		gap: var(--mppi-gap-sm, 16px);
	}

	.mppi-title {
		font-size: var(--mppi-title-size-sm, 30px);
	}

	.mppi-subtitle {
		font-size: 15px;
	}
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.mppi-intro,
	.mppi-intro * {
		transition: none;
	}
}