/*
 * Laffranchi Elementor Addons
 * Medidas retiradas da exportacao do Figma (frame 1920px):
 * conteudo 1600px, titulo 52.8px, card com gap 91.5px, imagem 570x922
 * raio 28.16px, pilulas com borda 2px #1D4562, raio 16px, padding 16/32,
 * gap entre pilulas 16px, gap icone/texto 32px, texto 21.12px.
 *
 * Obs: as medidas fluidas usam vw, nao cqw. O container-type: inline-size
 * fazia o wrapper do widget no Elementor esticar (2161px para 1216px de
 * conteudo), abrindo um vazio enorme abaixo de cada bloco no mobile.
 */

.lff-esg {
	--lff-max: 1600px;
	--lff-navy: #002641;
	--lff-azul: #1d4562;
	box-sizing: border-box;
	width: 100%;
}

.lff-esg *,
.lff-esg *::before,
.lff-esg *::after {
	box-sizing: border-box;
}

.lff-esg__titulo {
	max-width: var(--lff-max);
	margin: 0 auto clamp(32px, 4vw, 64px);
	font-family: "Sora", sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3.3vw, 52.8px);
	line-height: 1.1;
	text-align: center;
}

.lff-esg__card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(24px, 5.72vw, 91.5px);
	max-width: var(--lff-max);
	margin: 0 auto;
}

.lff-esg--invertido .lff-esg__card {
	flex-direction: row-reverse;
}

.lff-esg__media {
	flex: 0 0 35.6%;
	max-width: 35.6%;
	align-self: stretch;
}

.lff-esg .lff-esg__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: clamp(280px, 57.6vw, 922px);
	object-fit: cover;
	border-radius: 28px;
}

.lff-esg__lista {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lff-esg__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(12px, 2vw, 32px);
	padding: 16px clamp(16px, 2vw, 32px);
	background-color: #fff;
	border: 2px solid var(--lff-azul);
	border-radius: 16px;
}

.lff-esg__icone {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

.lff-esg__icone img {
	display: block;
	width: 32px;
	height: auto;
}

.lff-esg__texto {
	font-family: "Sora", sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 1.32vw, 21.12px);
	line-height: 1.556;
	color: var(--lff-navy);
}

.lff-esg__texto a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lff-esg__notas {
	max-width: var(--lff-max);
	margin: clamp(24px, 3.5vw, 56px) auto 0;
}

.lff-esg__nota {
	margin: 0 0 8px;
	font-family: "Sora", sans-serif;
	font-size: clamp(14px, 1.25vw, 20px);
	line-height: 1.556;
}

.lff-esg__nota strong {
	font-weight: 600;
}

.lff-esg__acao {
	max-width: var(--lff-max);
	margin: clamp(24px, 3.5vw, 56px) auto 0;
}

.lff-esg__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 42px;
	font-family: "Sora", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	border-radius: 53px;
	transition: opacity .2s ease;
}

.lff-esg__botao:hover {
	opacity: .85;
}

/* Tablet: imagem menor, pilulas mais compactas */
@media (max-width: 1024px) {
	.lff-esg__media {
		flex-basis: 40%;
		max-width: 40%;
	}

	.lff-esg .lff-esg__media img {
		min-height: 420px;
	}
}

/* Mobile: empilha imagem e lista */
@media (max-width: 767px) {
	.lff-esg__card,
	.lff-esg--invertido .lff-esg__card {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.lff-esg__media {
		flex-basis: auto;
		max-width: 100%;
	}

	.lff-esg .lff-esg__media img {
		min-height: 0;
		height: 320px;
	}

	.lff-esg__item {
		align-items: flex-start;
		gap: 12px;
		padding: 12px 16px;
		border-radius: 12px;
	}

	.lff-esg__icone img {
		width: 22px;
	}
}

/*
 * Imagem do CTA "Tradicao, genetica e sustentabilidade no campo".
 * A foto e 984x657: sem object-fit ela so encolheria ao limitar a altura,
 * entao o cover faz o corte mantendo a largura cheia do bloco.
 */
.lff-cta-img img {
	width: 100%;
	max-height: 488px;
	object-fit: cover;
	object-position: center;
}