/**
 * Carrossel "Nossa História" (Quem Somos) — estilos.
 * Classes com prefixo "fjls-historia-" para não conflitar com o Divi ou
 * outros componentes do site. Ajuste as variáveis de cor/raio abaixo para
 * bater com o design system.
 */

.fjls-historia-carousel {
	--fjls-historia-navy: #0a2f6e;
	--fjls-historia-navy-dark: #071f4a;
	--fjls-historia-text-muted: rgba(255, 255, 255, 0.78);
	--fjls-historia-radius: 32px;
	--fjls-historia-pad-x: 64px;
	--fjls-historia-pad-y: 56px;
	/* trilho de paginação: pensado para o fundo azul escuro do container */
	--fjls-historia-track: rgba(255, 255, 255, 0.3);
	--fjls-historia-track-active: #ffffff;
	--ft-font-extra-bold: "Museo Sans Rounded Extra Bold", Nunito, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ft-font-bold: "Museo Sans Rounded Bold", Nunito, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ft-font-reg: "Museo Sans Rounded Regular", Nunito, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--fjls-historia-radius);
	background: var(--fjls-historia-navy);
	box-sizing: border-box;
}

.fjls-historia-carousel *,
.fjls-historia-carousel *::before,
.fjls-historia-carousel *::after {
	box-sizing: inherit;
}

/* --- Decoração: círculos no canto superior direito --- */

.fjls-historia-carousel__decor {
	position: absolute;
	top: 0;
	right: 0;
	width: min(46%, 460px);
	height: min(70%, 460px);
	pointer-events: none;
	z-index: 0;
}

.fjls-historia-carousel__decor-circle {
	position: absolute;
	border-radius: 50%;
}

.fjls-historia-carousel__decor-circle--blue {
	top: -18%;
	right: 38%;
	width: 68%;
	height: 68%;
	background: #0066D5;
	z-index: 2;
}

.fjls-historia-carousel__decor-circle--green {
	top: -34%;
	right: -68%;
	width: 130%;
	height: 130%;
	background: #0BBF37;
}

.fjls-historia-carousel__decor-circle--orange {
	bottom: -22%;
	right: -29%;
	width: 62%;
	height: 62%;
	background: #ff5f00;
}

/* --- Viewport / slides --- */

.fjls-historia-carousel__viewport {
	position: relative;
	z-index: 1;
	width: 100%;
}

.fjls-historia-carousel .swiper-wrapper {
	align-items: stretch;
}

.fjls-historia-carousel .swiper-slide {
	height: auto;
}

/* --- Card --- */

.fjls-historia-card {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	min-height: 380px;
	padding: var(--fjls-historia-pad-y) var(--fjls-historia-pad-x);
}

.fjls-historia-card--com-imagem {
	grid-template-columns: 1.15fr 1fr;
	gap: 40px;
}

.fjls-historia-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	max-width: 620px;
}

.fjls-historia-card__subtitle {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	font-family: var(--ft-font-bold);
}

.fjls-historia-card__year {
	display: block;
	font-size: clamp(56px, 9vw, 120px);
	line-height: 1;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: -0.02em;
	font-family: var(--ft-font-extra-bold);
}

.fjls-historia-card__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--fjls-historia-text-muted);
	font-family: var(--ft-font-reg);
}

/* Imagem "sangra" até o canto superior/direito do container. */
.fjls-historia-card__media {
	position: relative;
	min-height: 240px;
	border-radius: 0 var(--fjls-historia-radius) 0 var(--fjls-historia-radius);
	overflow: hidden;
}

.fjls-historia-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Rodapé: paginação + setas (fixo) e botão "História completa" (fixo) --- */

.fjls-historia-carousel__footer {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 var(--fjls-historia-pad-x) var(--fjls-historia-pad-y);
	margin-top: -8px;
	width: 70%;
}

.fjls-historia-carousel__controls {
	display: flex;
	align-items: center;
	gap: 24px;
}

.fjls-historia-carousel__pagination {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Swiper gera 1 <span class="swiper-pagination-bullet"> por slide. */
.fjls-historia-carousel__pagination .swiper-pagination-bullet {
	flex: 1 1 auto;
	height: 4px;
	width: auto;
	margin: 0;
	border-radius: 2px;
	background: var(--fjls-historia-track);
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.fjls-historia-carousel__pagination .swiper-pagination-bullet-active {
	background: var(--fjls-historia-track-active);
}

.fjls-historia-carousel__nav {
	flex: none;
	display: flex;
	gap: 8px;
}

.fjls-historia-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.fjls-historia-carousel__arrow:hover,
.fjls-historia-carousel__arrow:focus-visible {
	opacity: 0.7;
}

.fjls-historia-carousel__arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.fjls-historia-carousel__cta {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	color: var(--fjls-historia-navy);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	padding: 20px 24px;
	border-radius: 15px;
	transition: all 0.3s ease;
}

.fjls-historia-carousel__cta:hover,
.fjls-historia-carousel__cta:focus-visible {
	background: #eef1f7;
	border-radius: 60px;
}

/* --- Responsivo --- */

@media (max-width: 900px) {
	.fjls-historia-carousel {
		--fjls-historia-pad-x: 32px;
		--fjls-historia-pad-y: 40px;
	}

	.fjls-historia-card--com-imagem {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.fjls-historia-card__media {
		order: -1;
		height: 300px;
		border-radius: 0 var(--fjls-historia-radius) 0 var(--fjls-historia-radius);
	}

	.fjls-historia-card__content {
		max-width: 100%;
	}

	.fjls-historia-carousel__footer {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.fjls-historia-carousel {
		--fjls-historia-pad-x: 24px;
		--fjls-historia-pad-y: 32px;
	}

	.fjls-historia-carousel__controls {
		gap: 16px;
	}
}