/** Página ODS. */

.fbb-ods-container {
	width: 100%;
	max-width: calc( var( --fbb-content-narrow-width ) + var( --fbb-page-gutter ) + var( --fbb-page-gutter ) );
	margin-inline: auto;
	padding-inline: var( --fbb-page-gutter );
}

.fbb-ods-hero {
	padding-block: var( --fbb-section-space-medium );
}

.fbb-ods-hero > .fbb-ods-container {
	display: grid;
	grid-template-columns: minmax( 0, 1.1fr ) minmax( 360px, .9fr );
	gap: var( --fbb-content-gap );
	align-items: center;
}

.fbb-ods-hero h1 {
	margin: 0;
	color: var( --fbb-color-navy );
	font-size: clamp( 38px, 4.4vw, 58px );
	line-height: 1.08;
}

.fbb-ods-hero__copy > p:not( .fbb-page-eyebrow ) {
	margin: 22px 0 0;
	color: var( --fbb-color-text );
	line-height: 1.75;
}

.fbb-ods-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.fbb-ods-hero__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px;
	padding: 26px;
	background: var( --fbb-color-offwhite );
	border-radius: var( --fbb-radius-card );
}

.fbb-ods-tile {
	display: grid;
	aspect-ratio: 1;
	color: var( --fbb-color-white );
	border-radius: var( --fbb-radius-card );
	place-content: center;
	text-align: center;
}

.fbb-ods-tile strong {
	font-size: 42px;
	line-height: 1;
}

.fbb-ods-tile span {
	margin-top: 8px;
	font-size: 11px;
	font-weight: var( --fbb-font-weight-extrabold );
	text-transform: uppercase;
}

/* Cores oficiais dos Objetivos de Desenvolvimento Sustentável. */
.fbb-ods-tile--3 { background: #4C9F38; }

.fbb-ods-tile--10 { background: #DD1367; }

.fbb-ods-tile--11 { background: #FD9D24; }

.fbb-ods-tile--17 { background: #19486A; }

.fbb-ods-context {
	padding-block: var( --fbb-section-space-medium );
	color: var( --fbb-color-white );
	background: var( --fbb-color-navy );
	text-align: center;
}

.fbb-ods-context h2 {
	max-width: 850px;
	margin-inline: auto;
	color: inherit;
	font-size: clamp( 32px, 4vw, 48px );
	line-height: 1.15;
}

.fbb-ods-context > .fbb-ods-container > p:not( .fbb-page-eyebrow ) {
	max-width: 920px;
	margin: 24px auto 0;
	color: rgba( 255, 255, 255, .78 );
	line-height: 1.7;
}

.fbb-ods-stats {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --fbb-grid-gap );
	margin-top: 46px;
}

.fbb-ods-stats strong,
.fbb-ods-stats span {
	display: block;
}

.fbb-ods-stats strong {
	font-size: 44px;
	line-height: 1;
}

.fbb-ods-stats span {
	margin-top: 8px;
	font-size: 13px;
	font-weight: var( --fbb-font-weight-bold );
}

.fbb-ods-details {
	padding-block: var( --fbb-section-space-small );
}

.fbb-ods-detail {
	display: grid;
	grid-template-columns: minmax( 320px, .9fr ) minmax( 0, 1.1fr );
	gap: var( --fbb-content-gap );
	align-items: center;
	padding-block: var( --fbb-section-space-small );
}

.fbb-ods-detail.is-reversed .fbb-ods-detail__tile {
	order: 2;
}

.fbb-ods-detail:nth-child( even ) {
	background: var( --fbb-color-offwhite );
	box-shadow: 0 0 0 100vmax var( --fbb-color-offwhite );
	clip-path: inset( 0 -100vmax );
}

.fbb-ods-detail__tile {
	display: grid;
	aspect-ratio: 1;
	color: var( --fbb-color-white );
	border-radius: var( --fbb-radius-card );
	place-content: center;
	text-align: center;
}

.fbb-ods-detail__tile strong {
	font-size: 68px;
	line-height: 1;
}

.fbb-ods-detail__tile span {
	margin-top: 10px;
	font-size: 12px;
	font-weight: var( --fbb-font-weight-extrabold );
	text-transform: uppercase;
}

.fbb-ods-detail__copy h2 {
	margin: 0;
	color: var( --fbb-color-navy );
	font-size: clamp( 28px, 3vw, 36px );
	line-height: 1.2;
}

.fbb-ods-detail__copy > p:not( .fbb-page-eyebrow ) {
	margin-top: 18px;
	color: var( --fbb-color-text );
	line-height: 1.75;
}

.fbb-ods-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0;
}

.fbb-ods-tags span {
	padding: 7px 12px;
	background: var( --fbb-color-white );
	border: 1px solid var( --fbb-border-subtle );
	border-radius: 4px;
	font-size: 11px;
	font-weight: var( --fbb-font-weight-bold );
}

.fbb-ods-impact strong,
.fbb-ods-impact span {
	display: block;
}

.fbb-ods-impact strong {
	color: var( --fbb-color-navy );
	font-size: 34px;
	line-height: 1;
}

.fbb-ods-impact span {
	margin-top: 6px;
	color: var( --fbb-color-text );
	font-size: 12px;
}

.fbb-ods-summary {
	padding-block: var( --fbb-section-space-medium );
	text-align: center;
}

.fbb-ods-summary h2 {
	margin: 0;
	color: var( --fbb-color-navy );
	font-size: clamp( 30px, 3.5vw, 42px );
	line-height: 1.2;
}

.fbb-ods-summary > .fbb-ods-container > p:not( .fbb-page-eyebrow ) {
	max-width: 760px;
	margin: 16px auto 0;
	color: var( --fbb-color-text );
	line-height: 1.7;
}

.fbb-ods-summary__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px;
	margin-top: 42px;
	text-align: left;
}

.fbb-ods-summary__grid article {
	display: grid;
	grid-template-columns: 48px minmax( 0, 1fr );
	gap: 4px 16px;
	padding: 22px;
	background: var( --fbb-color-offwhite );
	border-radius: var( --fbb-radius-card );
}

.fbb-ods-summary__number {
	grid-row: 1 / 3;
	display: grid;
	width: 48px;
	height: 48px;
	color: var( --fbb-color-white );
	border-radius: 4px;
	place-items: center;
	font-weight: var( --fbb-font-weight-extrabold );
}

.fbb-ods-summary h3 {
	margin: 0;
	color: var( --fbb-color-navy );
	font-size: 17px;
}

.fbb-ods-summary article p {
	margin: 0;
	color: var( --fbb-color-text );
	font-size: 12px;
	line-height: 1.7;
}

.fbb-ods-ctas {
	text-align: center;
}

.fbb-ods-enterprise,
.fbb-ods-support {
	padding-block: var( --fbb-section-space-small );
}

.fbb-ods-enterprise {
	color: var( --fbb-color-white );
	background: var( --fbb-color-navy );
	box-shadow: 0 0 0 100vmax var( --fbb-color-navy );
	clip-path: inset( 0 -100vmax );
}

.fbb-ods-support {
	background: var( --fbb-color-offwhite );
	box-shadow: 0 0 0 100vmax var( --fbb-color-offwhite );
	clip-path: inset( 0 -100vmax );
}

.fbb-ods-enterprise h2,
.fbb-ods-support h2 {
	max-width: 900px;
	margin-inline: auto;
	font-size: clamp( 28px, 3.3vw, 40px );
	line-height: 1.2;
}

.fbb-ods-enterprise h2 {
	color: inherit;
}

.fbb-ods-support h2 {
	color: var( --fbb-color-navy );
}

.fbb-ods-enterprise > p:not( .fbb-page-eyebrow ) {
	max-width: 850px;
	margin: 20px auto 28px;
	color: rgba( 255, 255, 255, .78 );
	line-height: 1.7;
}

.fbb-ods-enterprise > div,
.fbb-ods-support > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

/* Tablet e abaixo (≤1023px). */
@media ( max-width: 1023px ) {
	.fbb-ods-hero > .fbb-ods-container,
	.fbb-ods-detail {
		grid-template-columns: 1fr;
	}

	.fbb-ods-detail.is-reversed .fbb-ods-detail__tile {
		order: 0;
	}

	.fbb-ods-detail__tile {
		width: min( 100%, 500px );
		margin-inline: auto;
	}

	.fbb-ods-summary__grid {
		grid-template-columns: 1fr;
	}
}

/* Mobile (≤767px). */
@media ( max-width: 767px ) {
	.fbb-ods-hero__grid {
		padding: 14px;
	}

	.fbb-ods-stats {
		grid-template-columns: 1fr;
	}

	.fbb-ods-enterprise > div,
	.fbb-ods-support > div {
		align-items: stretch;
		flex-direction: column;
	}
}