/* LR — Page Hero (interna). Valores = layout aprovado (About/Contact/Assessment 01). */

.lr-phero {
	--lr-phero-strip: clamp(80px, 10vw, 160px);
	--lr-phero-band: var(--lr-primary);
	--lr-phero-strip-bg: var(--lr-white);
	--lr-phero-h1: clamp(42px, 5.2vw, 88px);
	--lr-phero-pos: 50% 50%;
	position: relative;
	z-index: 1;
	overflow: hidden;
	color: var(--lr-white);
	background: linear-gradient(180deg, var(--lr-phero-band) 0, var(--lr-phero-band) calc(100% - var(--lr-phero-strip)), var(--lr-phero-strip-bg) calc(100% - var(--lr-phero-strip)));
}

.lr-phero--panel {
	--lr-phero-h1: clamp(42px, 4.8vw, 80px);
	--lr-phero-pos: 50% 30%;
}

.lr-phero__inner {
	position: relative;
}

/* ------------------------------------------------------------------ text */

.lr-phero__text {
	min-width: 0;
}

.lr-phero__eyebrow {
	gap: 14px;
	color: var(--lr-mint);
}

.lr-phero__title {
	margin: 24px 0 0;
	max-width: 820px;
	font-weight: 800;
	font-size: calc(var(--lr-phero-h1) * var(--lr-ts, 1));
	line-height: .98;
	letter-spacing: -.04em;
	color: inherit;
	text-wrap: balance;
}

.lr-phero__body {
	margin-top: 32px;
	max-width: 620px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: calc(clamp(17px, 1.3vw, 19px) * var(--lr-ts, 1));
	line-height: 1.6;
	text-wrap: pretty;
}

.lr-phero__p--hl {
	font-weight: 700;
	color: var(--lr-mint);
}

.lr-phero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 22px;
	margin-top: 34px;
}

.lr-phero__note {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: calc(16px * var(--lr-ts, 1));
	font-weight: 700;
	line-height: 1.3;
}

.lr-phero__note .lr-graphic {
	flex: 0 0 auto;
	height: 22px;
	width: auto;
}

/* ------------------------------------------------------------------ shared photo */

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

.lr-phero__pic .lr-media__img,
.lr-phero__pic .lr-media__video {
	object-position: var(--lr-phero-pos);
}

/* ------------------------------------------------------------------ variant: arch (About / Contact) */

:where(.lr-phero--arch) .lr-phero__inner {
	max-width: var(--lr-max);
	margin: 0 auto;
	padding: clamp(140px, 13vw, 180px) var(--lr-gutter) 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(48px, 6vw, 96px);
	align-items: flex-end;
}

:where(.lr-phero--arch) .lr-phero__text {
	flex: 1.3 1 560px;
	padding-bottom: 0;
}

.lr-phero--arch .lr-phero__media {
	flex: 1 1 360px;
	min-width: 0;
	max-width: 500px;
	margin: 0 auto;
}

.lr-phero__arch {
	position: relative;
	padding: 7% 0 0 7%;
}

.lr-phero__frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 93%;
	height: 93%;
	border-radius: 999px 999px 0 0;
	background: var(--lr-mint);
	transform-origin: 50% 100%;
}

.lr-phero--arch .lr-phero__pic {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 999px 999px 0 0;
	background: var(--lr-black);
}

.lr-phero__arch .lr-layer {
	z-index: 2;
}

@media (min-width: 1000px) {
	/* Desktop: texto e foto sempre lado a lado (em 1000–1070px a soma das bases não cabia
	 * e a foto quebrava para baixo); os dois encolhem proporcionalmente. */
	:where(.lr-phero--arch) .lr-phero__inner {
		flex-wrap: nowrap;
	}

	:where(.lr-phero--arch) .lr-phero__text {
		flex-basis: 500px;
		padding-bottom: clamp(140px, 16vw, 240px);
	}

	.lr-phero--arch .lr-phero__media {
		flex-basis: 340px;
	}
}

/* Entrada (About): moldura cresce, foto revela de baixo para cima, layers giram para a posição. */
.lr-motion .lr-phero--intro .lr-phero__frame {
	transition: transform 1.3s var(--lr-ease) .15s;
}

.lr-motion .lr-phero--intro .lr-phero__pic {
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.4s cubic-bezier(.65, 0, .25, 1) .35s;
}

.lr-motion .lr-phero--intro .lr-phero__img {
	transition: scale 2.2s var(--lr-ease) .35s;
}

.lr-motion .lr-phero--intro .lr-phero__arch .lr-layer {
	transition: opacity .8s ease 1.2s, rotate 1.1s var(--lr-ease) 1.2s, scale 1.1s var(--lr-ease) 1.2s;
}

.lr-motion .lr-phero--intro:not(.is-in) .lr-phero__frame {
	transform: scaleY(0);
}

.lr-motion .lr-phero--intro:not(.is-in) .lr-phero__pic {
	clip-path: inset(100% 0 0 0);
}

.lr-motion .lr-phero--intro:not(.is-in) .lr-phero__img {
	scale: 1.18;
}

.lr-motion .lr-phero--intro:not(.is-in) .lr-phero__arch .lr-layer {
	opacity: 0;
	rotate: -40deg;
	scale: .6;
}

/* ------------------------------------------------------------------ variant: panel (Assessment) */

.lr-phero--panel .lr-phero__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	min-height: auto;
}

:where(.lr-phero--panel) .lr-phero__text {
	flex: 1 1 520px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: clamp(140px, 13vw, 180px) var(--lr-gutter) clamp(56px, 8vw, 96px);
}

.lr-phero--panel .lr-phero__text-in {
	max-width: 640px;
	width: 100%;
}

:where(.lr-phero--panel) .lr-phero__media {
	flex: 1 1 480px;
	min-width: 0;
	position: relative;
	min-height: clamp(440px, 60vw, 720px);
	margin-top: 0;
	overflow: hidden;
}

.lr-phero__media .lr-phero__center {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	height: 52%;
	width: auto;
	max-width: 70%;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}

.lr-phero--panel .lr-phero__media .lr-layer {
	z-index: 2;
}

@media (min-width: 1000px) {
	.lr-phero--panel .lr-phero__inner {
		min-height: var(--lr-phero-min-h, min(100vh, 880px));
	}

	:where(.lr-phero--panel) .lr-phero__text {
		justify-content: flex-end;
		padding: clamp(140px, 13vw, 180px) clamp(32px, 5vw, 96px) clamp(140px, 16vw, 240px) max(var(--lr-gutter), calc((100vw - var(--lr-max)) / 2 + 56px));
	}

	:where(.lr-phero--panel) .lr-phero__media {
		margin-top: 104px;
	}
}

/* ------------------------------------------------------------------ chips de atalho (Insights 01) */

.lr-phero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 34px;
}

.lr-w .lr-phero__chip,
.lr-w .lr-phero__chip:hover,
.lr-w .lr-phero__chip:focus-visible {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border: 1.5px solid var(--lr-white);
	border-radius: 999px;
	font-size: calc(14px * var(--lr-ts, 1));
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .3s, gap .3s var(--lr-ease), color .3s;
}

.lr-w .lr-phero__chip {
	background-color: transparent;
	color: var(--lr-white);
}

.lr-w .lr-phero__chip:hover,
.lr-w .lr-phero__chip:focus-visible {
	gap: 14px;
	background-color: var(--lr-mint);
	color: var(--lr-primary);
}

/* ------------------------------------------------------------------ post em destaque (Insights 01) */

.lr-w .lr-phero__feature,
.lr-w .lr-phero__feature:hover,
.lr-w .lr-phero__feature:focus-visible {
	display: block;
	color: var(--lr-primary);
	text-decoration: none;
}

.lr-phero__pic .lr-layer {
	z-index: 2;
}

.lr-phero__fmeta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	font-size: calc(12px * var(--lr-ts, 1));
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lr-teal);
}

.lr-phero__fdate {
	color: var(--lr-primary);
}

.lr-phero__frow {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-top: 10px;
}

.lr-phero__ftitle {
	margin: 0;
	font-weight: 800;
	font-size: calc(clamp(22px, 2vw, 30px) * var(--lr-ts, 1));
	line-height: 1.1;
	letter-spacing: -.02em;
	color: inherit;
}

.lr-phero__fgo {
	flex: 0 0 44px;
	height: 44px;
	border-radius: 999px;
	background-color: var(--lr-yellow);
	color: var(--lr-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(18px * var(--lr-ts, 1));
	line-height: 1;
	transition: transform .45s var(--lr-ease);
}

.lr-phero__feature:hover .lr-phero__fgo,
.lr-phero__feature:focus-visible .lr-phero__fgo {
	transform: translateX(4px);
}