/**
 * Widget "Banner Carrossel"
 *
 * Faixa full-width com fundo que muda de cor por slide, texto à esquerda
 * (tag + título + subtítulo + CTA) e imagem à direita com blob decorativo.
 * Reproduz a seção BannerCarrossel do design original (Figma Make) — ver
 * Obsidian proerp/fjpn-site/architecture/secoes-design.md.
 *
 * Tipografia/botões reaproveitam .fjpn-heading-md, .fjpn-body de base.css —
 * não redeclarados aqui. Cor de destaque e cor de fundo são definidas por
 * slide via `style` inline no PHP (Repeater), nunca literal neste arquivo.
 *
 * Mecanismo de transição: todos os slides ocupam a mesma célula de grid
 * (`grid-template-areas`), então a altura do carrossel = altura do maior
 * slide, mesmo com os outros ocultos. A troca de slide é só opacidade +
 * visibilidade — nenhum JS é necessário para o primeiro slide aparecer
 * legível (ver banner-carrossel.php, classe `is-active` já vem do servidor).
 */

/* ==========================================================
 * 1. SEÇÃO E CAMADA DE FUNDO FULL-BLEED
 * ========================================================== */

.fjpn-carrossel {
	position: relative;
	overflow: hidden;
}

/* Camada de fundo sangra até a borda da tela — independente do container
   de 1280px que envolve o conteúdo (texto/imagem). Sincronizada por índice
   com .fjpn-carrossel__slide via banner-carrossel.js. */
.fjpn-carrossel__fundos {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.fjpn-carrossel__fundo {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--fjpn-duration-base) var(--fjpn-ease-simple);
}

.fjpn-carrossel__fundo.is-active {
	opacity: 1;
}

/* ==========================================================
 * 2. CONTAINER E VIEWPORT
 * ========================================================== */

.fjpn-carrossel__container {
	position: relative;
	z-index: 1; /* fica acima da camada de fundo */
	padding-block: var(--fjpn-space-section-py-md);
}

.fjpn-carrossel__viewport {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--fjpn-gap-medium);
}

/* ==========================================================
 * 3. SETAS DE NAVEGAÇÃO
 * ========================================================== */

/* CAUSA DAS SETAS "INVISÍVEIS": duas causas somadas, nenhuma delas
   "elemento sumiu" — a seta sempre esteve lá, só ilegível.
   1) O tema pai declara `button { padding: 6px 26px; }` (main.css) e esta
      regra nunca era sobrescrita aqui — a seta virava uma cápsula ovalada
      de ~96px em vez do círculo de 44px do design, com o SVG deslocado do
      centro do alvo de toque.
   2) `--fjpn-shadow-card` (usada antes) é só 7% de opacidade — pensada
      para dar uma sombra discreta em card sobre fundo branco, não para dar
      contorno a um círculo TAMBÉM branco. Um círculo branco sobre fundo
      branco/quase-branco (os 3 slides são #fff, #f0f6ff, #f0fdf8) com essa
      sombra é visualmente indistinguível do fundo — lê como "não aparece"
      mesmo estando 100% renderizado. Troca para --fjpn-shadow-card-hover,
      que é a mesma família de sombra do resto do site, só mais forte. */
.fjpn-carrossel__seta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	box-sizing: border-box;
	border-radius: var(--fjpn-radius-full);
	border: none;
	/* Cores customizáveis (widgets/banner-carrossel.php, controles "Cor de
	   fundo das setas" / "Cor do ícone das setas") — fallback idêntico ao
	   original (--fjpn-white / --fjpn-text-primary). */
	background: var(--fjpn-carrossel-seta-bg, var(--fjpn-white));
	color: var(--fjpn-carrossel-seta-icone, var(--fjpn-text-primary));
	box-shadow: var(--fjpn-shadow-card-hover);
	/* Empilhamento explícito acima de .fjpn-carrossel__fundos — não depende
	   só da ordem do DOM continuar como está hoje. */
	position: relative;
	z-index: 1;
	cursor: pointer;
	transition:
		transform var(--fjpn-duration-base) var(--fjpn-ease-simple),
		box-shadow var(--fjpn-duration-shadow) var(--fjpn-ease-simple);
}

.fjpn-carrossel__seta:hover {
	transform: scale(1.08);
	box-shadow: var(--fjpn-shadow-button-blue-strong);
}

.fjpn-carrossel__seta:active {
	transform: scale(0.95);
}

/* Foco visível — obrigatório para navegação por teclado. Reforça o outline
   nativo do navegador em vez de suprimi-lo. */
.fjpn-carrossel__seta:focus-visible,
.fjpn-carrossel__dot:focus-visible,
.fjpn-carrossel__cta:focus-visible {
	outline: var(--fjpn-border-width-outline) solid var(--fjpn-blue-primary);
	outline-offset: 2px;
}

/* ==========================================================
 * 4. PILHA DE SLIDES (grid empilhado — ver nota de topo do arquivo)
 * ========================================================== */

.fjpn-carrossel__slides {
	flex: 1 1 auto;
	display: grid;
	grid-template-areas: 'slide';
	min-width: 0; /* evita que o grid estoure a largura do viewport */
	/* pan-y: entrega o gesto vertical pro navegador (rolagem nativa da
	   página) e o horizontal pro JS (arrastar/trocar de slide) — ver
	   banner-carrossel.js. Sem isto o navegador decide sozinho, no
	   pointerdown, que o gesto é rolagem de página e nunca chega no JS. */
	touch-action: pan-y;
	cursor: grab;
}

/* Alternado via JS enquanto o ponteiro está pressionado — só feedback
   visual, não afeta o gesto em si. */
.fjpn-carrossel__slides.is-arrastando {
	cursor: grabbing;
}

.fjpn-carrossel__slide {
	grid-area: slide;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--fjpn-gap-hero-columns);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	/* visibility troca sem transição própria para o slide que está saindo
	   (delay = duração do fade) e instantaneamente para o que está entrando
	   (delay 0) — ver .is-active abaixo. Isso é o que faz um slide oculto
	   nunca ficar alcançável por Tab: `visibility: hidden` remove o elemento
	   da ordem de tabulação e da árvore de acessibilidade nativamente, sem
	   depender do JS rodar. */
	transition:
		opacity var(--fjpn-duration-base) var(--fjpn-ease-simple),
		transform var(--fjpn-duration-base) var(--fjpn-ease-simple),
		visibility 0s linear var(--fjpn-duration-base);
}

.fjpn-carrossel__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity var(--fjpn-duration-base) var(--fjpn-ease-simple),
		transform var(--fjpn-duration-base) var(--fjpn-ease-simple),
		visibility 0s linear 0s;
}

@media (min-width: 768px) {
	.fjpn-carrossel__slide {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================
 * 5. BLOCO DE TEXTO
 * ========================================================== */

.fjpn-carrossel__conteudo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fjpn-gap-icon-text);
}

.fjpn-carrossel__tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-bold);
	letter-spacing: var(--fjpn-tracking-wide);
	padding: var(--fjpn-padding-badge-y) var(--fjpn-padding-badge-x);
	border-radius: var(--fjpn-radius-full);
	/* Cor por slide — vem de --fjpn-carrossel-accent, definida inline no PHP
	   a partir do controle "Cor de destaque" do Repeater. */
	color: var(--fjpn-carrossel-accent);
	/* Pílula com fundo claro na própria cor do slide (era texto solto).
	   color-mix() deriva o tom claro do accent em vez de um segundo token —
	   a cor de destaque é arbitrária (a cliente escolhe no Repeater), então
	   um hex fixo não acompanharia a troca de cor por slide. */
	background: color-mix(in srgb, var(--fjpn-carrossel-accent) 15%, var(--fjpn-white));
}

.fjpn-carrossel__titulo {
	margin: 0;
	/* Sem isto o título herdava a cor escura padrão de .fjpn-heading-md — a
	   cor de destaque do slide chegava na tag e no fundo do botão, mas não
	   aqui. */
	color: var(--fjpn-carrossel-accent);
}

.fjpn-carrossel__subtitulo {
	margin: 0;
}

.fjpn-carrossel__subtitulo strong {
	color: var(--fjpn-text-primary);
	font-weight: var(--fjpn-weight-semibold);
}

.fjpn-carrossel__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--fjpn-gap-icon-text);
	margin-top: var(--fjpn-gap-icon-text);
	padding: var(--fjpn-padding-button-y) var(--fjpn-padding-button-x);
	border-radius: var(--fjpn-radius-2xl);
	background: var(--fjpn-carrossel-accent);
	/* Cor customizável (widgets/banner-carrossel.php, controle "Cor do texto
	   do botão do slide") — fallback idêntico ao original (--fjpn-white). O
	   fundo continua sendo --fjpn-carrossel-accent, definido por slide. */
	color: var(--fjpn-carrossel-cta-texto, var(--fjpn-white));
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-button);
	font-weight: var(--fjpn-weight-semibold);
	text-decoration: none;
	transition:
		transform var(--fjpn-duration-base) var(--fjpn-ease-simple),
		box-shadow var(--fjpn-duration-shadow) var(--fjpn-ease-simple);
}

.fjpn-carrossel__cta:hover {
	transform: scale(1.05);
	box-shadow: var(--fjpn-shadow-card-hover);
}

.fjpn-carrossel__cta:active {
	transform: scale(0.95);
}

/* ==========================================================
 * 6. BLOCO DE MÍDIA (imagem + blob decorativo + ícone flutuante)
 *
 * O código original do Figma trazia `hidden md:block` — a imagem
 * simplesmente sumia no celular. Isso foi reproduzido aqui e está errado:
 * esconder conteúdo no mobile não é adaptação, é amputação. Quem abre o
 * site pelo telefone perde a imagem do slide inteira, e é de onde vem a
 * maior parte do tráfego de um site institucional.
 * Agora a imagem aparece em toda largura, e no mobile vai PARA CIMA do
 * texto — que é a ordem natural de leitura numa coluna só: primeiro o que
 * chama atenção, depois o que explica. `order` faz isso sem duplicar
 * markup nem mexer no DOM, então a ordem de leitura para leitor de tela
 * continua sendo a do HTML.
 * ========================================================== */

.fjpn-carrossel__midia {
	display: block;
	order: -1;
	position: relative;
	justify-self: center;
}

@media (min-width: 768px) {
	.fjpn-carrossel__midia {
		/* Nas duas colunas a imagem volta para a direita, posição do aprovado. */
		order: 0;
	}
}

.fjpn-carrossel__blob {
	position: absolute;
	inset: 12px;
	z-index: 0;
	border-radius: var(--fjpn-radius-3xl);
	background: var(--fjpn-carrossel-accent);
	opacity: 0.14;
	transform: rotate(-4deg);
}

.elementor .fjpn-carrossel__imagem {
	position: relative;
	z-index: 1;
	display: block;
	width: 380px;
	max-width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: var(--fjpn-radius-3xl);
	box-shadow: var(--fjpn-shadow-card-hover);
}

.fjpn-carrossel__icone-flutuante {
	position: absolute;
	z-index: 2;
	top: -16px;
	right: -16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--fjpn-radius-full);
	background: var(--fjpn-white);
	box-shadow: var(--fjpn-shadow-card-hover);
	font-size: var(--fjpn-text-heading-sm);
	animation: fjpn-float var(--fjpn-duration-float) var(--fjpn-ease-default) infinite;
}

/* ==========================================================
 * 7. INDICADORES (DOTS)
 * ========================================================== */

.fjpn-carrossel__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fjpn-gap-icon-text);
	margin-top: var(--fjpn-gap-medium);
}

/* O ativo já vira pílula alongada (width: 28px mantendo height: 10px, com
   border-radius: full) — só faltava o width entrar na transition abaixo
   para a troca de círculo → pílula ser animada, não instantânea. */
.fjpn-carrossel__dot {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	padding: 0;
	border: none;
	border-radius: var(--fjpn-radius-full);
	/* Cor customizável (widgets/banner-carrossel.php, controle "Cor do
	   indicador (dot) inativo") — fallback idêntico ao original
	   (--fjpn-slate-200). */
	background: var(--fjpn-carrossel-dot-inativo, var(--fjpn-slate-200));
	cursor: pointer;
	transition:
		width var(--fjpn-duration-base) var(--fjpn-ease-simple),
		background var(--fjpn-duration-color) var(--fjpn-ease-simple),
		transform var(--fjpn-duration-base) var(--fjpn-ease-simple);
}

.fjpn-carrossel__dot:hover {
	transform: scale(1.2);
}

.fjpn-carrossel__dot.is-active {
	width: 28px;
	border-radius: var(--fjpn-radius-full);
	/* Cor customizável (controle "Cor do indicador (dot) ativo") — fallback
	   idêntico ao original (--fjpn-blue-primary). */
	background: var(--fjpn-carrossel-dot-ativo, var(--fjpn-blue-primary));
}

/* ==========================================================
 * 8. AVISO DE EDITOR (sem slides configurados)
 * Só aparece dentro do editor do Elementor — nunca no site publicado
 * (ver condição `is_edit_mode()` em banner-carrossel.php).
 * ========================================================== */

.fjpn-carrossel__aviso-editor {
	padding: var(--fjpn-gap-medium);
	border: 1px dashed var(--fjpn-slate-400);
	border-radius: var(--fjpn-radius-lg);
	color: var(--fjpn-text-muted);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
}

/* ==========================================================
 * 9. PREFERS-REDUCED-MOTION
 * A regra global de base.css já zera duração/iteração de toda animação e
 * transição da página (inclusive o fade de slide/fundo e a flutuação do
 * ícone acima) — nada adicional é necessário neste arquivo. O autoplay em
 * si é desligado via JS (ver banner-carrossel.js), não só via CSS.
 * ========================================================== */