/**
 * Slider compartilhado dos heroes da Home e da Comunidade.
 *
 * As fotos dos layouts card e diagonal não recebem overlay. O único gradiente
 * sobre imagem pertence explicitamente ao modificador --gradient.
 */

@keyframes fbb-hero-slider-enter {
	from {
		opacity: 0;
		transform: translate3d( 10%, 0, 0 );
	}

	to {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
	}
}

@keyframes fbb-hero-slider-leave {
	from {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
	}

	to {
		opacity: 0;
		transform: translate3d( -8%, 0, 0 );
	}
}

@keyframes fbb-hero-slider-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fbb-hero-slider-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes fbb-hero-slider-ken-in {
	from {
		opacity: 0;
		transform: scale( 1.025 );
	}

	to {
		opacity: 1;
		transform: scale( 1 );
	}
}

@keyframes fbb-hero-image-zoom-subtle {
	from { transform: scale( 1 ); }
	to { transform: scale( 1.06 ); }
}

@keyframes fbb-hero-image-zoom-medium {
	from { transform: scale( 1 ); }
	to { transform: scale( 1.1 ); }
}

@keyframes fbb-hero-image-zoom-strong {
	from { transform: scale( 1 ); }
	to { transform: scale( 1.14 ); }
}

.fbb-hero-slider {
	--fbb-hero-card-width: min( 960px, calc( 100vw - ( var( --fbb-page-gutter ) * 2 ) ) );
	position: relative;
	isolation: isolate;
	width: 100%;
	padding: 0;
	overflow: hidden;
	background: var( --fbb-color-navy );
	color: var( --fbb-color-white );
}

.fbb-hero-slider--home {
	--fbb-home-header-height: 164px;
	--fbb-home-trustbar-height: 108px;
	--fbb-home-admin-bar-height: 0px;
	height: clamp(
		420px,
		calc(
			100svh
			- var( --fbb-home-header-height )
			- var( --fbb-home-trustbar-height )
			- var( --fbb-home-admin-bar-height )
		),
		760px
	);
}

body.admin-bar .fbb-hero-slider--home {
	--fbb-home-admin-bar-height: 32px;
}

.fbb-hero-slider--community {
	height: clamp( 520px, calc( 100svh - 138px ), 760px );
}

.fbb-hero-slider:focus-visible {
	outline: 3px solid var( --fbb-color-yellow );
	outline-offset: -3px;
}

.fbb-hero-slider__track,
.fbb-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fbb-hero-slider__track {
	overflow: hidden;
}

.fbb-hero-slide {
	z-index: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translate3d( 0, 0, 0 );
	will-change: opacity, transform;
}

.fbb-hero-slide.is-active,
.fbb-hero-slide.is-entering,
.fbb-hero-slide.is-leaving {
	visibility: visible;
}

.fbb-hero-slide.is-active {
	z-index: 1;
	opacity: 1;
	pointer-events: auto;
}

.fbb-hero-slide.is-entering {
	z-index: 3;
}

.fbb-hero-slide.is-leaving {
	z-index: 2;
}

.fbb-hero-slider--effect-slide .fbb-hero-slide.is-entering {
	animation: fbb-hero-slider-enter .9s cubic-bezier( .22, .61, .36, 1 ) both;
}

.fbb-hero-slider--effect-slide .fbb-hero-slide.is-leaving {
	animation: fbb-hero-slider-leave .9s cubic-bezier( .22, .61, .36, 1 ) both;
}

.fbb-hero-slider--effect-fade .fbb-hero-slide.is-entering {
	animation: fbb-hero-slider-fade-in .85s ease both;
}

.fbb-hero-slider--effect-fade .fbb-hero-slide.is-leaving {
	animation: fbb-hero-slider-fade-out .85s ease both;
}

.fbb-hero-slider--effect-ken .fbb-hero-slide.is-entering {
	animation: fbb-hero-slider-ken-in 1s ease both;
}

.fbb-hero-slider--effect-ken .fbb-hero-slide.is-leaving {
	animation: fbb-hero-slider-fade-out .8s ease both;
}

.fbb-hero-slide__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.fbb-hero-slide__media > picture {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.fbb-hero-slide__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var( --fbb-hero-object-position, center center );
	transform: scale( 1 );
	transform-origin: center center;
}

.fbb-hero-slide__gradient {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		color-mix( in srgb, var( --fbb-color-navy ) 92%, transparent ) 0%,
		color-mix( in srgb, var( --fbb-color-navy ) 88%, transparent ) 32%,
		color-mix( in srgb, var( --fbb-color-navy ) 62%, transparent ) 48%,
		transparent 66%
	);
	pointer-events: none;
}

.fbb-hero-slide__content-shell {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	width: 100%;
	max-width: var( --fbb-container-max-width );
	margin-inline: auto;
	align-items: flex-end;
	box-sizing: border-box;
	padding: 54px var( --fbb-page-gutter ) 78px;
}

.fbb-hero-slide__content {
	width: min( 640px, 48% );
	/* The shell already clips the hero; do not create a second scrollbar over the artwork. */
	max-height: none;
	overflow: visible;
	overflow-wrap: anywhere;
}

.fbb-hero-slide__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	color: color-mix( in srgb, var( --fbb-color-white ) 82%, transparent );
	font-size: 14px;
	font-weight: var( --fbb-font-weight-medium );
}

.fbb-hero-slide__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.fbb-hero-slide__breadcrumb a:hover,
.fbb-hero-slide__breadcrumb a:focus-visible {
	color: var( --fbb-color-white );
	text-decoration: underline;
}

.fbb-hero-slide__eyebrow {
	margin: 0 0 14px;
	color: color-mix( in srgb, var( --fbb-color-white ) 84%, transparent );
	font-size: 13px;
	font-weight: var( --fbb-font-weight-extrabold );
	letter-spacing: 0;
	text-transform: uppercase;
}

.fbb-hero-slide__title {
	margin: 0;
	color: var( --fbb-color-white );
	font-size: 52px;
	font-weight: var( --fbb-font-weight-bold );
	letter-spacing: 0;
	line-height: 1.08;
}

.fbb-hero-slide__title .fbb-hero__title-highlight {
	font-size: 1.3em;
	font-weight: inherit;
	line-height: .95;
}

.fbb-hero-slide__title strong,
.fbb-hero-slide__title b {
	color: inherit;
	font-weight: inherit;
}

.fbb-hero-slide__description {
	max-width: 560px;
	margin-top: 20px;
	color: color-mix( in srgb, var( --fbb-color-white ) 92%, transparent );
	font-size: 16px;
	font-weight: var( --fbb-font-weight-medium );
	line-height: 1.6;
}

.fbb-hero-slide__description .fbb-rich-text {
	margin: 0;
}

.fbb-hero-slide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Card: a fotografia permanece completamente limpa. */
.fbb-hero-slide--card .fbb-hero-slide__content {
	width: var( --fbb-hero-card-width );
	padding: 24px 32px;
	border-radius: var( --fbb-radius-card );
	background: var( --fbb-color-white );
	box-shadow: var( --fbb-shadow-card-strong );
	color: var( --fbb-color-navy );
	box-sizing: border-box;
}

/* Gradiente lateral: mais espaço para o texto sem transformar a foto em coluna. */
.fbb-hero-slide--gradient .fbb-hero-slide__content {
	width: min( 700px, 56% );
}

.fbb-hero-slide--card .fbb-hero-slide__breadcrumb {
	color: var( --fbb-color-text );
}

.fbb-hero-slide--card .fbb-hero-slide__content-shell {
	justify-content: center;
	padding-bottom: 75px;
}

.fbb-hero-slide--card .fbb-hero-slide__breadcrumb a:hover,
.fbb-hero-slide--card .fbb-hero-slide__breadcrumb a:focus-visible,
.fbb-hero-slide--card .fbb-hero-slide__title {
	color: var( --fbb-color-navy );
}

.fbb-hero-slide--card .fbb-hero-slide__eyebrow {
	margin-bottom: 8px;
	color: var( --fbb-color-red );
}

.fbb-hero-slide--card .fbb-hero-slide__title {
	font-size: 40px;
	line-height: 1.06;
}

.fbb-hero-slide--card .fbb-hero-slide__description {
	max-width: 760px;
	margin-top: 12px;
	color: var( --fbb-color-text );
	font-size: 15px;
	line-height: 1.45;
}

.fbb-hero-slide--card .fbb-hero-slide__actions {
	margin-top: 16px;
}

@media ( min-width: 1024px ) {
	.fbb-hero-slide--card .fbb-hero-slide__actions {
		padding-right: 180px;
	}
}

/* Diagonal: clip-path cria a divisão sem SVG, skew ou máscara sobre a foto. */
.fbb-hero-slide--diagonal .fbb-hero-slide__media {
	inset: 0 0 auto auto;
	width: 62%;
	height: 100%;
	min-height: 100%;
	clip-path: polygon( 12% 0, 100% 0, 100% 100%, 0 100% );
}

.fbb-hero-slide--diagonal .fbb-hero-slide__content-shell {
	inset: 0 auto 0 0;
	width: 45%;
	max-width: none;
	margin: 0;
	align-items: center;
	padding: 54px 76px 54px max( var( --fbb-page-gutter ), calc( ( 100vw - var( --fbb-content-max-width ) ) / 2 ) );
	background: var( --fbb-color-navy );
	clip-path: polygon( 0 0, 100% 0, 84% 100%, 0 100% );
}

.fbb-hero-slide--diagonal .fbb-hero-slide__content {
	width: 100%;
}

.fbb-hero-slide--diagonal .fbb-hero-slide__title {
	font-size: 44px;
}

.fbb-hero-slider__controls {
	position: absolute;
	right: max( var( --fbb-page-gutter ), calc( ( 100vw - var( --fbb-content-max-width ) ) / 2 ) );
	bottom: 22px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 10px;
}

.fbb-hero-slider[data-active-layout="card"] .fbb-hero-slider__controls,
.fbb-hero-slider[data-active-layout="diagonal"] .fbb-hero-slider__controls {
	right: auto;
	left: max( var( --fbb-page-gutter ), calc( ( 100vw - var( --fbb-content-max-width ) ) / 2 ) );
}

.fbb-hero-slider[data-active-layout="card"] .fbb-hero-slider__controls {
	left: 50%;
	bottom: 99px;
	justify-content: flex-end;
	width: var( --fbb-hero-card-width );
	padding-inline: 32px;
	box-sizing: border-box;
	transform: translateX( -50% );
}

.fbb-hero-slider__arrow,
.fbb-hero-slider__dot {
	flex: 0 0 auto;
	border: 1px solid color-mix( in srgb, var( --fbb-color-white ) 72%, transparent );
	background: color-mix( in srgb, var( --fbb-color-navy ) 58%, transparent );
	color: var( --fbb-color-white );
	cursor: pointer;
}

.fbb-hero-slider__arrow {
	display: grid;
	width: 38px;
	height: 38px;
	padding: 0;
	place-items: center;
	border-radius: var( --fbb-radius-pill );
}

.fbb-hero-slider__arrow--previous svg {
	transform: rotate( 180deg );
}

.fbb-hero-slider__arrow:hover,
.fbb-hero-slider__arrow:focus-visible {
	background: var( --fbb-color-red );
	border-color: var( --fbb-color-red );
}

.fbb-hero-slider__dots {
	display: flex;
	align-items: center;
	gap: 7px;
}

.fbb-hero-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: var( --fbb-radius-pill );
	transition: width .2s ease, background-color .2s ease;
}

.fbb-hero-slider__dot.is-active {
	width: 28px;
	background: var( --fbb-color-red );
	border-color: var( --fbb-color-red );
}

.fbb-hero-slider__arrow:focus-visible,
.fbb-hero-slider__dot:focus-visible {
	outline: 3px solid var( --fbb-color-yellow );
	outline-offset: 2px;
}

.fbb-hero-slider-empty {
	display: grid;
	min-height: 420px;
	place-items: center;
	padding: var( --fbb-page-gutter );
	background: var( --fbb-color-offwhite );
	color: var( --fbb-color-navy );
}

.fbb-hero-zoom--enabled .fbb-hero-slide.is-active .fbb-hero-slide__image,
.fbb-hero-zoom--enabled .fbb-hero-slide.is-leaving .fbb-hero-slide__image {
	animation-timing-function: ease-out;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.fbb-hero-zoom--enabled.fbb-hero-zoom--subtle .fbb-hero-slide.is-active .fbb-hero-slide__image,
.fbb-hero-zoom--enabled.fbb-hero-zoom--subtle .fbb-hero-slide.is-leaving .fbb-hero-slide__image {
	animation-name: fbb-hero-image-zoom-subtle;
}

.fbb-hero-zoom--enabled.fbb-hero-zoom--medium .fbb-hero-slide.is-active .fbb-hero-slide__image,
.fbb-hero-zoom--enabled.fbb-hero-zoom--medium .fbb-hero-slide.is-leaving .fbb-hero-slide__image {
	animation-name: fbb-hero-image-zoom-medium;
}

.fbb-hero-zoom--enabled.fbb-hero-zoom--strong .fbb-hero-slide.is-active .fbb-hero-slide__image,
.fbb-hero-zoom--enabled.fbb-hero-zoom--strong .fbb-hero-slide.is-leaving .fbb-hero-slide__image {
	animation-name: fbb-hero-image-zoom-strong;
}

.fbb-hero-zoom--enabled.fbb-hero-zoom-speed--slow .fbb-hero-slide.is-active .fbb-hero-slide__image,
.fbb-hero-zoom--enabled.fbb-hero-zoom-speed--slow .fbb-hero-slide.is-leaving .fbb-hero-slide__image {
	animation-duration: 12s;
}

.fbb-hero-zoom--enabled.fbb-hero-zoom-speed--normal .fbb-hero-slide.is-active .fbb-hero-slide__image,
.fbb-hero-zoom--enabled.fbb-hero-zoom-speed--normal .fbb-hero-slide.is-leaving .fbb-hero-slide__image {
	animation-duration: 8s;
}

.fbb-hero-zoom--enabled.fbb-hero-zoom-speed--fast .fbb-hero-slide.is-active .fbb-hero-slide__image,
.fbb-hero-zoom--enabled.fbb-hero-zoom-speed--fast .fbb-hero-slide.is-leaving .fbb-hero-slide__image {
	animation-duration: 5s;
}

@media ( min-width: 1024px ) and ( max-width: 1439px ) {
	.fbb-hero-slider--home {
		--fbb-home-header-height: 138px;
		--fbb-home-trustbar-height: 80px;
	}

	.fbb-hero-slide__content-shell {
		padding: 44px var( --fbb-page-gutter ) 70px;
	}

	.fbb-hero-slide__content {
		width: min( 620px, 52% );
	}

	.fbb-hero-slide__title {
		font-size: 44px;
	}

	.fbb-hero-slide--card .fbb-hero-slide__content {
		width: var( --fbb-hero-card-width );
		padding: 22px 28px;
	}

	.fbb-hero-slide--card .fbb-hero-slide__title {
		font-size: 36px;
	}

	.fbb-hero-slide--diagonal .fbb-hero-slide__content-shell {
		padding: 44px 60px 44px var( --fbb-page-gutter );
	}

	.fbb-hero-slide--diagonal .fbb-hero-slide__title {
		font-size: 38px;
	}
}

@media ( min-width: 1024px ) and ( max-height: 800px ) {
	.fbb-hero-slider--home {
		height: clamp(
			380px,
			calc(
				100svh
				- var( --fbb-home-header-height )
				- var( --fbb-home-trustbar-height )
				- var( --fbb-home-admin-bar-height )
			),
			560px
		);
	}

	.fbb-hero-slider--community {
		height: clamp( 500px, calc( 100svh - 138px ), 630px );
	}

	.fbb-hero-slide__content-shell {
		padding-block: 32px 62px;
	}

	.fbb-hero-slide__breadcrumb {
		margin-bottom: 12px;
		font-size: 13px;
	}

	.fbb-hero-slide__eyebrow {
		margin-bottom: 10px;
	}

	.fbb-hero-slide__title {
		font-size: 40px;
	}

	.fbb-hero-slide__description {
		margin-top: 14px;
		font-size: 14px;
		line-height: 1.5;
	}

	.fbb-hero-slide__actions {
		margin-top: 18px;
	}

	.fbb-hero-slide--card .fbb-hero-slide__content {
		padding: 18px 28px 22px;
	}

	.fbb-hero-slide--diagonal .fbb-hero-slide__content-shell {
		padding-block: 34px;
	}

	.fbb-hero-slide--diagonal .fbb-hero-slide__title {
		font-size: 35px;
	}

	.fbb-hero-slider__controls {
		bottom: 16px;
	}
}

@media ( max-width: 1023px ) {
	.fbb-hero-slider--home,
	.fbb-hero-slider--community {
		height: clamp( 620px, calc( 100svh - 104px ), 760px );
	}

	.fbb-hero-slide__content-shell {
		padding: 46px var( --fbb-page-gutter ) 76px;
	}

	.fbb-hero-slide__content,
	.fbb-hero-slide--card .fbb-hero-slide__content {
		width: min( 600px, 76% );
	}

	.fbb-hero-slide--card .fbb-hero-slide__content {
		width: var( --fbb-hero-card-width );
		padding-bottom: 60px;
	}

	.fbb-hero-slide--card .fbb-hero-slide__title {
		font-size: 40px;
	}

	.fbb-hero-slider[data-active-layout="card"] .fbb-hero-slider__controls {
		justify-content: flex-start;
	}

	.fbb-hero-slide--gradient .fbb-hero-slide__content {
		width: min( 640px, 54% );
	}

	.fbb-hero-slide__title,
	.fbb-hero-slide--diagonal .fbb-hero-slide__title {
		font-size: 40px;
	}

	.fbb-hero-slide--diagonal .fbb-hero-slide__media {
		width: 60%;
	}

	.fbb-hero-slide--diagonal .fbb-hero-slide__content-shell {
		width: 48%;
		padding: 42px 52px 42px var( --fbb-page-gutter );
	}
}

@media ( max-width: 767px ) {
	.fbb-hero-slider--home,
	.fbb-hero-slider--community {
		height: clamp( 680px, calc( 100svh - 82px ), 820px );
	}

	.fbb-hero-slide__gradient {
		background: linear-gradient(
			90deg,
			color-mix( in srgb, var( --fbb-color-navy ) 92%, transparent ) 0%,
			color-mix( in srgb, var( --fbb-color-navy ) 88%, transparent ) 38%,
			color-mix( in srgb, var( --fbb-color-navy ) 58%, transparent ) 56%,
			transparent 72%
		);
	}

	.fbb-hero-slide__content-shell {
		padding: 72px var( --fbb-page-gutter ) 82px;
	}

	.fbb-hero-slide__content,
	.fbb-hero-slide--card .fbb-hero-slide__content {
		width: 88%;
	}

	.fbb-hero-slide--gradient .fbb-hero-slide__content {
		width: 72%;
	}

	.fbb-hero-slide__title,
	.fbb-hero-slide--diagonal .fbb-hero-slide__title {
		font-size: 34px;
	}

	.fbb-hero-slide__description {
		font-size: 15px;
		line-height: 1.5;
	}

	.fbb-hero-slide__actions {
		gap: 10px;
	}

	.fbb-hero-slide__actions .fbb-btn--pill {
		width: 100%;
	}

	.fbb-hero-slide--card .fbb-hero-slide__content-shell {
		align-items: flex-end;
		padding: 0;
	}

	.fbb-hero-slide--card .fbb-hero-slide__content {
		width: 100%;
		max-height: 62%;
		padding: 24px var( --fbb-page-gutter ) 76px;
		border-radius: var( --fbb-radius-card ) var( --fbb-radius-card ) 0 0;
	}

	.fbb-hero-slide--card .fbb-hero-slide__title {
		font-size: 34px;
	}

	.fbb-hero-slide--diagonal {
		display: grid;
		grid-template-rows: minmax( 320px, auto ) minmax( 300px, 1fr );
		background: var( --fbb-color-navy );
	}

	.fbb-hero-slide--diagonal .fbb-hero-slide__media {
		position: relative;
		inset: auto;
		grid-row: 2;
		width: 100%;
		min-height: 0;
		clip-path: none;
	}

	.fbb-hero-slide--diagonal .fbb-hero-slide__content-shell {
		position: relative;
		inset: auto;
		grid-row: 1;
		width: 100%;
		min-height: 0;
		padding: 36px var( --fbb-page-gutter ) 54px;
		background: var( --fbb-color-navy );
		clip-path: none;
	}

	.fbb-hero-slide--diagonal .fbb-hero-slide__content {
		width: 100%;
	}

	.fbb-hero-slider__controls {
		top: 18px;
		right: var( --fbb-page-gutter );
		left: auto;
		bottom: auto;
	}

	.fbb-hero-slider[data-active-layout="card"] .fbb-hero-slider__controls {
		top: auto;
		right: auto;
		bottom: 18px;
		left: var( --fbb-page-gutter );
		justify-content: flex-start;
		width: auto;
		padding-inline: 0;
		transform: none;
	}

	.fbb-hero-slider[data-active-layout="diagonal"] .fbb-hero-slider__controls {
		top: 18px;
		right: var( --fbb-page-gutter );
		bottom: auto;
		left: auto;
	}
}

@media ( max-width: 479px ) {
	.fbb-hero-slide__content {
		width: 92%;
	}

	.fbb-hero-slide--gradient .fbb-hero-slide__content {
		width: 74%;
	}

	.fbb-hero-slide__title,
	.fbb-hero-slide--diagonal .fbb-hero-slide__title {
		font-size: 30px;
	}

	.fbb-hero-slide--card .fbb-hero-slide__content {
		max-height: 66%;
		padding-top: 20px;
	}

	.fbb-hero-slide--card .fbb-hero-slide__title {
		font-size: 30px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fbb-hero-slide,
	.fbb-hero-slide__image,
	.fbb-hero-slider__dot {
		animation: none !important;
		transition: none !important;
	}
}