/* ==========================================================================
   Widget: Minha história (título à esquerda, textos à direita, citação embaixo)
   ========================================================================== */

.mr-story {
	position: relative;
	padding: 5rem 1.5rem 6.5rem;
	background: var(--mr-white);
	font-family: var(--mr-font-body);
}

.mr-story__inner {
	max-width: var(--mr-max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 3rem 5rem;
	align-items: start;
}

/* ---------- Título (esquerda) ---------- */
/* a coluna estica até o fim dos textos; o título gruda dentro dela e para onde ela termina (antes da citação) */
.mr-story__head { align-self: stretch; }
.mr-story--sticky .mr-story__head-inner { position: sticky; top: 7.5rem; }
.admin-bar .mr-story--sticky .mr-story__head-inner { top: 9.5rem; }

.mr-story__eyebrow { display: block; margin-bottom: .9rem; }

.mr-story .mr-story__title {
	margin: 0;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(2.2rem, 4.4vw, 4rem);
	font-style: italic;
	font-weight: 400;
	font-variant-numeric: lining-nums;
	line-height: 1.05;
	color: var(--mr-purple);
	text-wrap: balance;
}
.mr-story .mr-story__title em,
.mr-story .mr-story__title strong { font-style: italic; font-weight: 500; color: var(--mr-purple-mid); }

/* ---------- Foto em balão (abaixo do título) ---------- */
.mr-story__photo { margin-top: 1.25rem; }
.mr-story .mr-bphoto { margin-left: 0; }

/* ---------- Blocos de texto (direita) ---------- */
.mr-story__body { display: grid; gap: 2rem; }

.mr-story .mr-story__block { padding-left: 1.5rem; border-left: 3px solid var(--mr-lavender); }

.mr-story .mr-story__block-title {
	margin: 0 0 .5rem;
	padding: 0;
	font-family: var(--mr-font-display);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--mr-purple);
}

.mr-story .mr-story__block p {
	margin: 0 0 .9rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--mr-text-muted);
}
.mr-story .mr-story__block p:last-child { margin-bottom: 0; }

/* ---------- Citação (largura total) ---------- */
.mr-story .mr-story__quote {
	position: relative;
	grid-column: 1 / -1;
	margin: 1rem 0 0;
	padding: 3.5rem 4rem 3rem;
	background: var(--mr-lavender-soft);
	border: 1.5px solid var(--mr-lavender);
	border-radius: 1.75rem;
	text-align: center;
	overflow: hidden;
}

.mr-story__quote-mark {
	position: absolute;
	top: -.5rem;
	left: 2rem;
	font-family: var(--mr-font-display);
	font-size: 10rem;
	font-style: italic;
	line-height: 1;
	color: var(--mr-lavender);
	pointer-events: none;
	user-select: none;
}

.mr-story .mr-story__quote-text {
	position: relative;
	max-width: 30ch;
	margin: 0 auto;
	padding: 0;
	border: 0;
	font-family: var(--mr-font-display);
	font-size: clamp(1.7rem, 3.4vw, 2.9rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	color: var(--mr-purple);
	text-wrap: balance;
}

.mr-story__quote-cite { position: relative; display: flex; flex-direction: column; gap: .15rem; margin-top: 1.5rem; }
.mr-story__quote-author { font-size: .9rem; font-weight: 800; color: var(--mr-purple-mid); }
.mr-story__quote-role { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mr-text-light); }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
	.mr-story { padding: 4rem 1.25rem 5rem; }
	.mr-story__inner { grid-template-columns: 1fr; gap: 2rem; }
	.mr-story--sticky .mr-story__head-inner,
	.admin-bar .mr-story--sticky .mr-story__head-inner { position: static; }
	.mr-story .mr-story__quote { padding: 3rem 2rem 2.5rem; }
}

@media (max-width: 640px) {
	.mr-story .mr-bphoto { margin-left: auto; }
	.mr-story { padding: 3.5rem 1rem 4.5rem; }
	.mr-story .mr-story__block { padding-left: 1.1rem; }
	.mr-story .mr-story__quote { padding: 3rem 1.25rem 2rem; border-radius: 1.25rem; }
	.mr-story__quote-mark { left: 1rem; font-size: 7rem; }
}