/* ==========================================================================
   Widget: Sobre (foto + texto)
   ========================================================================== */

.mr-about {
	position: relative;
	padding: 6.5rem 1.5rem 8rem;
	background: var(--mr-lavender-soft);
	font-family: var(--mr-font-body);
}

.mr-about__inner {
	max-width: var(--mr-max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: center;
}
.mr-about--photo-right .mr-about__photo { order: 2; }

/* ---------- Foto em duas camadas ---------- */
.mr-about__photo { position: relative; }
.mr-about__wrap { position: relative; width: 100%; max-width: 420px; }

.mr-about__blob {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	margin-top: 65px;
	overflow: hidden;
	background: var(--mr-lavender);
	border-radius: 60% 40% 45% 55% / 55% 50% 50% 45%;
}

.mr-about .mr-about__photo-body {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top center;
	transform: scale(1.15);
	transform-origin: top center;
}

.mr-about .mr-about__photo-head {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top center;
	transform: scale(1.15);
	transform-origin: top center;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 13%, transparent 24%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 13%, transparent 24%);
	pointer-events: none;
}

/* ---------- Card de dados ---------- */
.mr-about__badge {
	position: absolute;
	right: -1rem;
	bottom: 1.5rem;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .9rem 1.2rem;
	background: var(--mr-white);
	border-radius: 1rem;
	box-shadow: 0 4px 20px rgba(83, 32, 107, .12);
}
.mr-about__badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mr-lavender);
	color: var(--mr-purple);
	font-size: 15px;
}
.mr-about__badge-icon i { line-height: 1; }
.mr-about__badge-icon svg { width: 16px; height: 16px; fill: currentColor; }
.mr-about__badge-text strong { display: block; font-size: .85rem; font-weight: 700; color: var(--mr-purple); }
.mr-about__badge-text span { display: block; font-size: .72rem; color: var(--mr-text-muted); }

/* ---------- Texto ---------- */
.mr-about__eyebrow { display: block; margin-bottom: .7rem; }

.mr-about .mr-about__title {
	margin: 0 0 1.2rem;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(2rem, 4vw, 4rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	color: var(--mr-purple);
	text-wrap: balance;
}
.mr-about .mr-about__title em,
.mr-about .mr-about__title strong { font-style: italic; font-weight: 500; color: var(--mr-purple-mid); }

.mr-about .mr-about__content p {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--mr-text-muted);
}
.mr-about .mr-about__content p:last-child { margin-bottom: 1.5rem; }
.mr-about .mr-about__content strong { color: var(--mr-dark); }
.mr-about .mr-about__content ul,
.mr-about .mr-about__content ol { margin: 0 0 1rem 1.25rem; padding: 0; color: var(--mr-text-muted); line-height: 1.4; }

.mr-about__wave { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; pointer-events: none; color: #53206b; }
.mr-about__wave svg { display: block; width: 100%; height: 72px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
	.mr-about__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.mr-about--photo-right .mr-about__photo { order: 0; }
	.mr-about__photo { max-width: 340px; width: 100%; margin: 0 auto; }
	.mr-about__blob { margin-top: 52px; }
	.mr-about__badge { right: -.5rem; bottom: 1rem; }
	.mr-about--photo-hide-mobile .mr-about__photo { display: none; }
}

@media (max-width: 640px) {
	.mr-about { padding: 4.5rem 1.25rem 6rem; }
	.mr-about__badge { right: .25rem; padding: .75rem 1rem; }
	.mr-about .mr-btn { width: 100%; justify-content: center; }
}