/* ------------------------------------------------------------------ */
/* MON PORTÉ Newsletter (UX Builder element "MON PORTÉ Newsletter").    */
/* Strictly .mpn-* scoped. No bare selectors, no global rules.          */
/* PHP + CSS only; submission lifecycle owned by Contact Form 7.        */
/* ------------------------------------------------------------------ */

.mpn-section {
	--mpn-bg: #f3ece0;
	--mpn-text: #1f1e1b;
	--mpn-muted: #646049;
	--mpn-accent: #60373d;
	--mpn-title-font: "Playfair Display", Georgia, "Times New Roman", serif;
	--mpn-pad-y: 96px;
	--mpn-pad-x: 24px;
	--mpn-ctl-h: 54px;
	--mpn-radius: 10px;
	--mpn-anim-delay: 0ms;
	background-color: var(--mpn-bg);
	color: var(--mpn-text);
	padding: var(--mpn-pad-y) var(--mpn-pad-x);
}

.mpn-inner {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.mpn-w-contained .mpn-inner {
	max-width: 1080px;
}

.mpn-w-wide .mpn-inner {
	max-width: 1200px;
}

/* Shared content stack. */
.mpn-content {
	min-width: 0;
}

.mpn-content-centered {
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
	text-align: center;
}

.mpn-eyebrow {
	color: var(--mpn-muted);
	font-family: Manrope, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.24em;
	line-height: 1.5;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.mpn-title {
	color: var(--mpn-text);
	font-family: var(--mpn-title-font);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.12;
	margin: 0 0 16px;
	text-wrap: balance;
}

.mpn--minimal .mpn-title {
	font-size: clamp(1.9rem, 1.35rem + 2.8vw, 3rem);
}

.mpn--split .mpn-title {
	font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.75rem);
}

.mpn--statement .mpn-title {
	font-size: clamp(2.1rem, 1.45rem + 3.2vw, 3.5rem);
}

.mpn-sub {
	color: var(--mpn-text);
	font-family: Manrope, sans-serif;
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0 0 28px;
	opacity: 0.82;
}

.mpn--minimal .mpn-sub {
	margin-left: auto;
	margin-right: auto;
	max-width: 56ch;
}

/* Variation 02 — Editorial Split grid. */
.mpn--split .mpn-grid {
	align-items: center;
	column-gap: clamp(32px, 5vw, 64px);
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.mpn-media {
	margin: 0;
	min-width: 0;
	overflow: hidden;
}

.mpn-media-img {
	aspect-ratio: 4 / 5;
	display: block;
	height: auto;
	max-height: 620px;
	object-fit: cover;
	width: 100%;
}

.mpn-pos-center .mpn-media-img {
	object-position: center;
}

.mpn-pos-top .mpn-media-img {
	object-position: center top;
}

.mpn-pos-bottom .mpn-media-img {
	object-position: center bottom;
}

.mpn-radius-soft .mpn-media-img {
	border-radius: 12px;
}

.mpn-radius-medium .mpn-media-img {
	border-radius: 20px;
}

/* Variation 03 — Brand Statement asymmetric grid. */
.mpn--statement .mpn-eyebrow {
	align-items: center;
	column-gap: 12px;
	display: flex;
}

.mpn--statement .mpn-eyebrow::before {
	background-color: var(--mpn-accent);
	content: "";
	display: inline-block;
	flex: none;
	height: 2px;
	width: 28px;
}

.mpn-grid-statement {
	align-items: start;
	column-gap: clamp(32px, 5vw, 72px);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
}

.mpn-grid-statement .mpn-title {
	margin-bottom: 0;
}

.mpn-side {
	min-width: 0;
}

.mpn-side .mpn-sub {
	margin-bottom: 24px;
}

/* ------------------------------------------------------------------ */
/* Form design system. Every visual role consumes a per-instance       */
/* --mpn-* token; presets only supply PHP fallbacks, explicit owner    */
/* values always win (inline vars beat preset classes).                */
/* ------------------------------------------------------------------ */
.mpn-form {
	margin-bottom: 0;
	margin-top: 0;
	max-width: var(--mpn-form-max, 520px);
	position: relative;
	width: 100%;
}

.mpn-align-center .mpn-form,
.mpn-align-auto.mpn--minimal .mpn-form {
	margin-left: auto;
	margin-right: auto;
}

.mpn-align-right .mpn-form {
	margin-left: auto;
}

.mpn-form *,
.mpn-form *::before,
.mpn-form *::after {
	box-sizing: border-box;
}

.mpn-form-note {
	color: var(--mpn-muted);
	font-family: Manrope, sans-serif;
	font-size: 0.85rem;
	margin: 0;
}

/* Visually-hidden label text (real <label> kept for AT). */
.mpn-sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* CF7 form row: CF7 wraps controls in <p>, and real-world templates add
   extra <div> wrappers (.form-flat, .flex-row/.flex-col, …);
   display:contents lets the email field + submit participate in one flex
   row without touching markup. Strictly scoped under .mpn-form.
   Direction/gap/height/width resolve per breakpoint from the
   --mpn-*-md/-sm vars (desktop-first inheritance computed in PHP). */
.mpn-form .wpcf7-form,
.mpn-form .mpn-formrow {
	align-items: stretch;
	column-gap: var(--mpn-form-gap, 12px);
	display: flex;
	flex-direction: var(--mpn-form-dir, row);
	flex-wrap: wrap;
	position: relative;
	row-gap: var(--mpn-form-gap, 12px);
}

@media (max-width: 849px) {
	.mpn-form .wpcf7-form,
	.mpn-form .mpn-formrow {
		column-gap: var(--mpn-form-gap-md, var(--mpn-form-gap, 12px));
		flex-direction: var(--mpn-form-dir-md, var(--mpn-form-dir, row));
		row-gap: var(--mpn-form-gap-md, var(--mpn-form-gap, 12px));
	}

	.mpn-form {
		max-width: var(--mpn-form-max-md, var(--mpn-form-max, 520px));
	}

	.mpn-form .wpcf7-email,
	.mpn-form .wpcf7-submit {
		min-height: var(--mpn-ctl-h-md, var(--mpn-ctl-h, 54px));
	}

	.mpn-form .wpcf7-submit {
		flex: var(--mpn-btn-flex-md, var(--mpn-btn-flex, none));
		width: var(--mpn-btn-width-md, var(--mpn-btn-width, fit-content));
	}

	.mpn-form .wpcf7-spinner {
		top: calc(var(--mpn-ctl-h-md, var(--mpn-ctl-h, 54px)) / 2);
	}
}

@media (max-width: 549px) {
	.mpn-form .wpcf7-form,
	.mpn-form .mpn-formrow {
		column-gap: var(--mpn-form-gap-sm, var(--mpn-form-gap-md, var(--mpn-form-gap, 12px)));
		flex-direction: var(--mpn-form-dir-sm, var(--mpn-form-dir-md, var(--mpn-form-dir, row)));
		row-gap: var(--mpn-form-gap-sm, var(--mpn-form-gap-md, var(--mpn-form-gap, 12px)));
	}

	.mpn-form {
		max-width: var(--mpn-form-max-sm, var(--mpn-form-max-md, var(--mpn-form-max, 520px)));
	}

	.mpn-form .wpcf7-email,
	.mpn-form .wpcf7-submit {
		min-height: var(--mpn-ctl-h-sm, var(--mpn-ctl-h-md, var(--mpn-ctl-h, 54px)));
	}

	.mpn-form .wpcf7-submit {
		flex: var(--mpn-btn-flex-sm, var(--mpn-btn-flex-md, var(--mpn-btn-flex, none)));
		width: var(--mpn-btn-width-sm, var(--mpn-btn-width-md, var(--mpn-btn-width, fit-content)));
	}

	.mpn-form .wpcf7-spinner {
		top: calc(var(--mpn-ctl-h-sm, var(--mpn-ctl-h-md, var(--mpn-ctl-h, 54px))) / 2);
	}
}

.mpn-form .wpcf7-form p {
	display: contents;
	margin: 0;
}

.mpn-form .wpcf7-form div:not(.wpcf7-response-output):not(.hidden-fields-container) {
	display: contents;
	margin: 0;
}

/* CF7 injects a <br> after the label text node; it must not become
   a flex item in the form row. */
.mpn-form .wpcf7-form br {
	display: none;
}

/* Belt-and-braces: CF7 hides its hidden-fields container itself, but the
   rule must also hold wherever CF7 CSS is absent (e.g. Builder canvas). */
.mpn-form .hidden-fields-container {
	display: none;
}

.mpn-form .mpn-cf7-label {
	display: flex;
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

.mpn-form .wpcf7-form-control-wrap {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.mpn-form .wpcf7-email {
	appearance: none;
	background-color: var(--mpn-input-bg, #fff);
	border: var(--mpn-input-border-w, 1px) solid var(--mpn-input-border, rgba(31, 30, 27, 0.22));
	border-radius: var(--mpn-input-radius, 10px);
	box-shadow: none;
	color: var(--mpn-input-color, #1f1e1b);
	font-family: Manrope, sans-serif;
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0;
	min-height: var(--mpn-ctl-h, 54px);
	min-width: 0;
	padding: 0 var(--mpn-input-px, 18px);
	width: 100%;
}

/* Editorial preset: bottom-border field, radius/padding stay owner-driven. */
.mpn-fs-editorial .mpn-form .wpcf7-email {
	border-width: 0 0 var(--mpn-input-border-w, 1px) 0;
}

.mpn-form .wpcf7-email::placeholder {
	color: var(--mpn-placeholder, #646049);
	opacity: 0.75;
}

.mpn-form .wpcf7-email:focus {
	border-color: var(--mpn-focus, #60373d);
	box-shadow: none;
	outline: none;
}

.mpn-fring-soft .mpn-form .wpcf7-email:focus-visible {
	border-color: var(--mpn-focus, #60373d);
	box-shadow: 0 0 0 2px var(--mpn-input-bg, #fff), 0 0 0 4px var(--mpn-focus, #60373d);
	outline: none;
}

.mpn-form .wpcf7-submit {
	appearance: none;
	background-color: var(--mpn-btn-bg, #60373d);
	border: var(--mpn-btn-border-w, 0px) solid var(--mpn-btn-border, #60373d);
	border-radius: var(--mpn-btn-radius, 10px);
	box-shadow: none;
	color: var(--mpn-btn-color, #fff);
	cursor: pointer;
	flex: var(--mpn-btn-flex, none);
	font-family: Manrope, sans-serif;
	font-size: var(--mpn-btn-fs, 13px);
	font-weight: var(--mpn-btn-weight, 600);
	letter-spacing: var(--mpn-btn-track, 0.14em);
	line-height: 1.2;
	margin: 0;
	max-width: 100%;
	min-height: var(--mpn-ctl-h, 54px);
	padding: 0 var(--mpn-btn-px, 28px);
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, filter 180ms ease, transform 180ms ease;
	white-space: nowrap;
	width: var(--mpn-btn-width, fit-content);
}

.mpn-hv-darken .mpn-form .wpcf7-submit:hover {
	filter: brightness(0.9);
}

.mpn-hv-fill .mpn-form .wpcf7-submit:hover {
	background-color: var(--mpn-accent);
	border-color: var(--mpn-accent);
	color: #fff;
}

.mpn-hv-invert .mpn-form .wpcf7-submit:hover {
	background-color: var(--mpn-btn-color);
	border-color: var(--mpn-btn-color);
	color: var(--mpn-btn-bg);
}

.mpn-hv-arrow .mpn-form .wpcf7-submit:hover {
	transform: translateX(3px);
}

.mpn-form .wpcf7-submit:focus-visible {
	box-shadow: 0 0 0 2px var(--mpn-bg), 0 0 0 4px var(--mpn-focus, #60373d);
	outline: none;
}

.mpn-form .wpcf7-submit:disabled {
	cursor: default;
	opacity: 0.92;
}

.mpn-form .wpcf7-submit:disabled:hover {
	background-color: var(--mpn-btn-bg);
	border-color: var(--mpn-btn-border);
	color: var(--mpn-btn-color);
	filter: none;
	transform: none;
}

.mpn-form .wpcf7-email:disabled {
	opacity: 1;
}

/* CF7 spinner: overlaid on the button end, never shifts layout.
   Visibility stays CF7-driven (visible while submitting only). */
.mpn-form .wpcf7-spinner {
	flex: none;
	margin: 0;
	position: absolute;
	right: 16px;
	top: calc(var(--mpn-ctl-h, 54px) / 2);
	transform: translateY(-50%);
}

/* CF7 validation tip: small, precise, under the input. */
.mpn-form .wpcf7-not-valid-tip {
	color: var(--mpn-error, #8a3b3b);
	display: block;
	font-family: Manrope, sans-serif;
	font-size: var(--mpn-msg-size, 13px);
	line-height: 1.45;
	margin-top: 6px;
}

.mpn-form .wpcf7-email.wpcf7-not-valid {
	border-color: var(--mpn-error, #8a3b3b);
}

/* CF7 response output: quiet editorial line, never an alert box.
   Hidden while empty so no vacant box renders. CF7 6.x marks the form
   with status classes + data-status (verified in plugin source):
   .sent surfaces the success tone, everything else stays error tone.
   Specificity audit (no !important needed):
   - CF7 base `.wpcf7 form .wpcf7-response-output` = (0,2,1)
   - CF7 states `.wpcf7 form.sent …` = (0,3,1) ← the surviving green box
   - Flatsome `.wpcf7 .wpcf7-response-output` = (0,2,0)
   - below = (0,4,1): wins outright, strictly under .mpn-form. */
.mpn-form .wpcf7-response-output:empty {
	display: none;
}

.mpn-form .wpcf7 form.wpcf7-form .wpcf7-response-output {
	animation: mpn-response-in 240ms ease;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mpn-error, #8a3b3b);
	flex: 1 1 100%;
	font-family: Manrope, sans-serif;
	font-size: var(--mpn-msg-size, 13px);
	line-height: 1.5;
	margin: 15px 0 0;
	outline: none;
	padding: 0;
	text-align: center;
}

@keyframes mpn-response-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpn-form .wpcf7 form.wpcf7-form .wpcf7-response-output {
		animation: none;
	}
}

.mpn-form .wpcf7 form.wpcf7-form.sent .wpcf7-response-output,
.mpn-form .wpcf7 form.wpcf7-form[data-status="sent"] .wpcf7-response-output {
	color: var(--mpn-success, #5c6b47);
}

/* Optional highlights. */
.mpn-perks {
	column-gap: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: inherit;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	row-gap: 6px;
}

.mpn-content-centered .mpn-perks {
	justify-content: center;
}

.mpn-perks li {
	color: var(--mpn-muted);
	font-family: Manrope, sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.mpn-perks li + li::before {
	content: "·";
	margin-right: 10px;
}

/* Microcopy + consent. */
.mpn-microcopy {
	color: var(--mpn-muted);
	font-family: Manrope, sans-serif;
	font-size: 0.8rem;
	line-height: 1.55;
	margin: 18px 0 0;
}

.mpn-consent {
	color: var(--mpn-muted);
	font-family: Manrope, sans-serif;
	font-size: 0.75rem;
	line-height: 1.6;
	margin: 10px 0 0;
	opacity: 0.9;
}

.mpn-privacy {
	color: var(--mpn-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Tablet: relax split/statement grids. Form direction stays owner-driven. */
@media (max-width: 849px) {
	.mpn--split .mpn-grid {
		column-gap: 32px;
	}

	.mpn-grid-statement {
		grid-template-columns: 1.15fr 1fr;
	}

	.mpn-media-img {
		max-height: 480px;
	}
}

/* Mobile: single column everywhere; content/form first, image below.
   Form direction/width resolve from owner vars (stacked/full by
   default) — never hardcoded here. */
@media (max-width: 549px) {
	.mpn-section {
		--mpn-pad-x: 20px;
	}

	.mpn--split .mpn-grid,
	.mpn-grid-statement {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.mpn--split .mpn-media {
		order: 2;
	}

	.mpn-mobile-hide .mpn-media {
		display: none;
	}

	.mpn-media-img {
		aspect-ratio: 4 / 3;
		max-height: 320px;
	}

	.mpn-grid-statement .mpn-title {
		margin-bottom: 0;
	}
}

/* Entry animation: same data-animate/data-animated contract as the
   approved components; keyframes scoped to .mpn-section. */
@media (prefers-reduced-motion: no-preference) {
	.mpn-section[data-animate="mpn-fade-up"]:not([data-animated="true"]) {
		opacity: 0;
	}

	.mpn-section[data-animate="mpn-fade-up"][data-animated="true"] {
		animation: mpn-fade-up-in 500ms ease backwards;
		animation-delay: var(--mpn-anim-delay, 0ms);
	}

	@keyframes mpn-fade-up-in {
		from {
			opacity: 0;
			transform: translateY(14px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpn-section[data-animate="mpn-fade-up"] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.mpn-form .wpcf7-submit {
		transition: none;
	}
}