/**
 * Widget "Sobre" (Quem Somos)
 *
 * Grid de 2 colunas com ordem responsiva invertida (texto primeiro no
 * mobile, imagem primeiro a partir de 1024px — --fjpn-breakpoint-lg) e
 * fundo decorado por blobs animados. A classe `.blob-bg` do design original
 * (secoes-design.md, seção 5) não virou utilitário em base.css porque é um
 * efeito decorativo exclusivo desta seção — nenhuma outra parte do site usa
 * blobs de fundo.
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho literal.
 * Tipografia (eyebrow, heading, body) e botões reaproveitam as classes
 * utilitárias de base.css (.fjpn-eyebrow, .fjpn-heading-lg, .fjpn-body,
 * .fjpn-btn*, .fjpn-card-lift, .fjpn-section-divider) — não redeclaradas aqui.
 */

.fjpn-sobre {
	position: relative;
	overflow: hidden;
	/* S1 — causa raiz: esta era a única seção do tema sem `background`
	   declarado. Ficava transparente e mostrava o azul de trás, tornando o
	   texto escuro ilegível (e, por tabela, apagando o botão outline azul
	   do CTA 2 — ver S4 abaixo: borda azul sobre fundo azul é invisível). */
	background: var(--fjpn-sobre-bg, var(--fjpn-white));
	padding-block: var(--fjpn-space-section-py-lg);
}

/* ==========================================================
 * BLOBS DE FUNDO ("blob-bg" no design original)
 * Manchas grandes, desfocadas e translúcidas, com deriva lenta contínua.
 * Puramente decorativo — aria-hidden, sem conteúdo, atrás do grid (z-index 0).
 * ========================================================== */

/* Conferido contra `.blob-bg` no index.css do protótipo. Eu havia feito dois
   círculos grandes com `blur(70px)` e deriva animada — chamativo demais e
   custoso (filtro de desfoque em 400px repinta a cada quadro da animação).
   No fonte são duas formas ORGÂNICAS, estáticas, com `border-radius`
   assimétrico de 8 valores e opacidade de 4–5% embutida na própria cor. É um
   fundo que quase não se percebe, que é a intenção. */
.fjpn-sobre__blob {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.fjpn-sobre__blob--1 {
	top: -120px;
	right: -120px;
	width: 400px;
	height: 400px;
	border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%;
	background: rgba(27, 77, 161, 0.05);
}

.fjpn-sobre__blob--2 {
	bottom: -100px;
	left: -100px;
	width: 300px;
	height: 300px;
	border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;
	background: rgba(37, 99, 235, 0.04);
}

/* ==========================================================
 * GRID — 2 colunas, ordem responsiva invertida
 * Mobile: texto (ordem natural do DOM) → imagem.
 * Desktop (≥1024px): imagem à esquerda, texto à direita.
 * ========================================================== */

.fjpn-sobre__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	/* `gap-16` no fonte = 64px, não os 48px do Hero. */
	gap: 4rem;
}

/* Mobile: TEXTO primeiro, imagem depois — conferido contra o protótipo.
   Houve um `order: -1` aqui que subia a imagem para o topo. Foi removido: o
   aprovado mostra a seção abrindo pelo rótulo "QUEM SOMOS" e pelo título, com
   a foto fechando o bloco. Numa coluna só, a ordem natural do DOM já entrega
   isso — não é preciso `order` nenhum, e a ordem de leitura para leitor de
   tela passa a coincidir com a visual, que é o ideal.
   A partir de 1024px o bloco de duas colunas assume e inverte para imagem à
   esquerda (ver a media query logo abaixo). */

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

	.fjpn-sobre__texto {
		order: 2;
	}

	.fjpn-sobre__imagem-col {
		order: 1;
	}
}

/* S2 — bloco decorativo vazando: mesma causa-raiz do Hero (H3, ver hero.css
   §3). Item de grid sem min-width:0 não encolhe abaixo do min-content da
   <img>, empurrando a coluna além da faixa de 1fr; o bloco decorativo
   (dimensionado a 100%/100% do wrap, ver .fjpn-sobre__imagem-decor abaixo)
   segue junto e "vaza" a área visual. min-width:0 faz a coluna respeitar
   o grid de fato. */
.fjpn-sobre__imagem-col {
	min-width: 0;
}

/* ==========================================================
 * COLUNA DE TEXTO
 * ========================================================== */

.fjpn-sobre__titulo {
	margin-top: var(--fjpn-gap-icon-text);
	margin-bottom: var(--fjpn-gap-medium);
	color: var(--fjpn-sobre-titulo-cor, var(--fjpn-text-primary));
}

.fjpn-sobre__titulo-destaque {
	color: var(--fjpn-sobre-destaque-cor, var(--fjpn-blue-primary));
}

.fjpn-sobre__selo {
	margin-bottom: var(--fjpn-gap-medium);
}

.fjpn-sobre__paragrafo {
	color: var(--fjpn-sobre-texto-cor, var(--fjpn-text-muted));
}

.fjpn-sobre__paragrafo + .fjpn-sobre__paragrafo {
	margin-top: var(--fjpn-gap-medium);
}

/* S3 — antes só tinha a borda esquerda, texto solto por cima (sem fundo,
   virava aspas soltas). No aprovado é um bloco: fundo azul-clarinho + barra
   vertical azul à esquerda. */
.fjpn-sobre__citacao {
	margin: var(--fjpn-gap-hero-columns) 0 0;
	padding: var(--fjpn-gap-medium) var(--fjpn-padding-card);
	background: var(--fjpn-sobre-citacao-fundo, var(--fjpn-blue-light));
	border-inline-start: var(--fjpn-border-width-outline) solid var(--fjpn-sobre-destaque-cor, var(--fjpn-blue-primary));
	border-radius: var(--fjpn-radius-xl);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body-lg);
	font-weight: var(--fjpn-weight-medium);
	font-style: italic;
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-text-primary);
}

.fjpn-sobre__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fjpn-gap-medium);
	margin-top: var(--fjpn-gap-hero-columns);
}

/* CTA 1 — reaproveita .fjpn-btn-orange de base.css (não editado); estas
   duas declarações só sobrescrevem fundo/texto quando a cliente define uma
   cor no painel (widgets/sobre.php, seção "Estilo"). Sem escolha, os
   fallbacks reproduzem exatamente o gradiente/branco de base.css. */
.fjpn-sobre__ctas .fjpn-btn-orange {
	background: var(--fjpn-sobre-cta1-fundo, var(--fjpn-gradient-orange-cta));
	color: var(--fjpn-sobre-cta1-texto, var(--fjpn-white));
}

/* S4 — "Nossos programas" usa .fjpn-btn-blue-outline (base.css): fundo
   transparente + borda azul. Enquanto a seção não tinha fundo próprio (S1),
   isso virava borda azul sobre azul — invisível. Fundo branco explícito
   aqui deixa a correção resiliente (não depende só do fundo herdado da
   seção) e corresponde ao aprovado: "branco com borda azul". */
.fjpn-sobre__ctas .fjpn-btn-blue-outline {
	background: var(--fjpn-white);
}

/* ==========================================================
 * COLUNA DE IMAGEM
 * Bloco decorativo azul-claro atrás da foto, deslocado -6px/-6px
 * (valor literal do design original — não existe token de offset
 * dedicado em tokens.css para esse deslocamento pontual).
 * ========================================================== */

.fjpn-sobre__imagem-wrap {
	position: relative;
	max-width: 28rem;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.fjpn-sobre__imagem-wrap {
		max-width: none;
		margin-inline: 0;
	}
}

.fjpn-sobre__imagem-decor {
	position: absolute;
	/* -24px, não -6px. O fonte usa `-top-6 -left-6`, e no Tailwind a escala 6
	   vale 1.5rem — eu li o "6" como pixel. Com 6px o bloco decorativo ficava
	   praticamente escondido atrás da foto, em vez de formar a moldura
	   deslocada que aparece no aprovado. */
	top: -1.5rem;
	left: -1.5rem;
	width: 100%;
	height: 100%;
	background: var(--fjpn-blue-light);
	border-radius: var(--fjpn-radius-3xl);
	z-index: 0;
}

.elementor .fjpn-sobre__imagem {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 30rem; /* 480px — altura fixa da foto no design original */
	object-fit: cover;
	border-radius: var(--fjpn-radius-3xl);
}

/* Botão "Blog Paiva Netto" sobreposto no canto inferior esquerdo da foto.
   Hover de elevação vem de .fjpn-card-lift (base.css), reaproveitada via
   classe no HTML — não redeclarada aqui. */
.fjpn-sobre__blog-btn {
	position: absolute;
	z-index: 2;
	left: var(--fjpn-gap-medium);
	bottom: var(--fjpn-gap-medium);
	display: flex;
	flex-direction: column;
	padding: var(--fjpn-padding-card);
	/* Conferido no fonte: o botão é AZUL com texto branco, gradiente do
	   cabeçalho (#28529c → #1a3567). Eu havia feito branco com texto escuro —
	   sobre uma foto clara ele desaparecia, e era o oposto do aprovado, onde
	   ele é o único ponto de contraste forte na imagem. */
	background: var(--fjpn-gradient-header-cta);
	border-radius: var(--fjpn-radius-2xl);
	box-shadow: 0 8px 24px rgba(27, 77, 161, 0.35);
	text-decoration: none;
	max-width: calc(100% - (2 * var(--fjpn-gap-medium)));
}

.fjpn-sobre__blog-btn-rotulo {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-bold);
	line-height: var(--fjpn-leading-tight);
	color: var(--fjpn-white);
}

.fjpn-sobre__blog-btn-texto {
	font-family: var(--fjpn-font-sans);
	/* 10px no fonte — menor que o rótulo, é a linha de apoio "Acesse o blog →". */
	font-size: 0.625rem;
	font-weight: var(--fjpn-weight-medium);
	line-height: var(--fjpn-leading-tight);
	color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================
 * PREFERS-REDUCED-MOTION
 * Redundante com a regra global de base.css (escopo *), mantida aqui
 * também porque a animação de blob é definida neste arquivo — cada
 * seção com animação própria neutraliza a sua explicitamente.
 * ========================================================== */

@media (prefers-reduced-motion: reduce) {
	.fjpn-sobre__blob {
		animation: none;
	}
}