/* LR — Mídia + Texto. Valores padrão = About 05 ("Because more growth means more impact"). */

.lr-mt,
.lr-mt--mint {
	--lr-mt-bg: var(--lr-mint);
	--lr-mt-ink: var(--lr-primary);
	--lr-mt-eyebrow: var(--lr-primary);
	--lr-mt-box-bg: var(--lr-white);
	--lr-mt-box-ink: var(--lr-primary);
}

.lr-mt--white {
	--lr-mt-bg: var(--lr-white);
	--lr-mt-ink: var(--lr-primary);
	--lr-mt-eyebrow: var(--lr-teal);
	--lr-mt-box-bg: var(--lr-mint);
	--lr-mt-box-ink: var(--lr-primary);
}

.lr-mt--brown {
	--lr-mt-bg: var(--lr-primary);
	--lr-mt-ink: var(--lr-white);
	--lr-mt-eyebrow: var(--lr-mint);
	--lr-mt-box-bg: var(--lr-white);
	--lr-mt-box-ink: var(--lr-primary);
}

.lr-mt {
	position: relative;
	overflow: hidden;
	background-color: var(--lr-mt-bg);
	color: var(--lr-mt-ink);
}

/* Layers de fundo (escopo "Seção inteira"): referência = a seção toda. */
.lr-mt__deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.lr-mt__inner {
	position: relative;
	z-index: 1;
	max-width: var(--lr-max);
	margin: 0 auto;
	padding: clamp(90px, 11vw, 170px) var(--lr-gutter);
}

/* ------------------------------------------------------------------ título */

.lr-mt__title {
	margin: 0;
	font-weight: 800;
	color: inherit;
	text-wrap: balance;
}

.lr-mt__title--above {
	max-width: 1100px;
}

.lr-mt__title--display {
	font-size: calc(clamp(46px, 7.2vw, 124px) * var(--lr-ts, 1));
	line-height: .94;
	letter-spacing: -.045em;
}

.lr-mt__title--xl {
	font-size: calc(clamp(42px, 5.6vw, 96px) * var(--lr-ts, 1));
	line-height: .96;
	letter-spacing: -.045em;
}

.lr-mt__title--lg {
	font-size: calc(clamp(40px, 5vw, 84px) * var(--lr-ts, 1));
	line-height: .98;
	letter-spacing: -.04em;
}

.lr-mt__title--sm {
	font-size: calc(clamp(30px, 3.2vw, 52px) * var(--lr-ts, 1));
	line-height: 1.02;
	letter-spacing: -.03em;
}

.lr-mt__title--md {
	font-size: calc(clamp(36px, 4.2vw, 70px) * var(--lr-ts, 1));
	line-height: 1;
	letter-spacing: -.035em;
}

/* ------------------------------------------------------------------ grade */

.lr-mt__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: clamp(40px, 6vw, 100px);
}

.lr-mt__title--above + .lr-mt__grid {
	margin-top: clamp(48px, 6vw, 96px);
}

/* ------------------------------------------------------------------ mídia */

.lr-mt__media {
	position: relative;
	flex: 0 1 340px;
	min-width: 220px;
}

.lr-mt--media-right .lr-mt__media {
	order: 2;
}

.lr-mt--media-center .lr-mt__media {
	margin-inline: auto;
}

.lr-mt__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	isolation: isolate;
	border-radius: 999px 999px 0 0;
}

.lr-mt--shape-rect .lr-mt__frame {
	border-radius: 0;
}

.lr-mt__photo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 112%;
}

.lr-motion .lr-mt__photo[data-lr-par] {
	will-change: transform;
}

.lr-mt__frame .lr-layer {
	z-index: 1;
}

/* ------------------------------------------------------------------ texto */

.lr-mt__text {
	flex: 1 1 480px;
	min-width: 0;
	max-width: 680px;
}

.lr-mt .lr-mt__eyebrow {
	color: var(--lr-mt-eyebrow);
}

.lr-mt__eyebrow + .lr-mt__title {
	margin-top: 20px;
}

.lr-mt__paras {
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: calc(clamp(17px, 1.3vw, 19px) * var(--lr-ts, 1));
	line-height: 1.65;
	text-wrap: pretty;
}

.lr-mt--body-sm .lr-mt__paras {
	gap: 14px;
	font-size: calc(18px * var(--lr-ts, 1));
	line-height: 1.6;
}

.lr-mt--body-lg .lr-mt__paras {
	gap: 24px;
	font-size: calc(clamp(18px, 1.5vw, 22px) * var(--lr-ts, 1));
	line-height: 1.55;
}

.lr-mt__text > * + .lr-mt__paras {
	margin-top: 32px;
}

.lr-mt__p {
	margin: 0;
}

.lr-mt__p--bold {
	font-weight: 700;
}

.lr-mt__p--lead {
	font-weight: 700;
	font-size: calc(clamp(20px, 1.8vw, 27px) * var(--lr-ts, 1));
	line-height: 1.4;
	letter-spacing: -.01em;
}

.lr-mt__p--statement {
	font-weight: 800;
	font-size: calc(clamp(26px, 2.6vw, 40px) * var(--lr-ts, 1));
	line-height: 1.12;
	letter-spacing: -.025em;
}

/* Especificidade baixa (0,2,0): o controle "Espaço extra acima" do item sempre vence. */
.lr-mt__paras > .lr-mt__p--statement:where(:not(:first-child)) {
	margin-top: 12px;
}

.lr-mt__p--boxed {
	padding: 20px 24px;
	background-color: var(--lr-mt-box-bg);
	color: var(--lr-mt-box-ink);
	font-weight: 700;
	font-size: calc(18px * var(--lr-ts, 1));
	line-height: 1.5;
}

.lr-mt__cta {
	margin-top: 36px;
}

/* Desktop/notebook (≥ 1000px): texto e mídia sempre lado a lado (exceto mídia centralizada,
 * que empilha por desenho). Em ~1000–1150px a soma das bases não cabia e o bloco empilhava. */
@media (min-width: 1000px) {
	.lr-mt:not(.lr-mt--media-center) .lr-mt__grid {
		flex-wrap: nowrap;
	}
}