/* ============================================================
   FJLS - Equipes de governanca
   [equipe param="..." layout="grid|lado" foto="sim|nao" resumo="150"]

   O circulo, o preto e branco e o tamanho da foto sao feitos aqui,
   nunca na imagem. A foto acompanha a largura da coluna: quanto
   menos itens na linha, maior ela fica.
   ============================================================ */

.fjls-eq {
	--fjls-eq-dark: var(--ft-dark, #001645);
	--fjls-eq-blue: var(--ft-blue, #0066D5);
	--fjls-eq-borda: #D7DCE6;
	--fjls-eq-gap-x: clamp(26px, 3.2vw, 48px);
	--fjls-eq-gap-y: clamp(38px, 4.4vw, 64px);
	--fjls-eq-foto-max: 200px;

	/* escala unica de espacamento vertical do cartao:
	   1 = nome -> pilula, 2 = pilula -> bio -> Leia mais,
	   3 = foto -> texto,  4 = titulo -> lista */
	--fjls-eq-esp-1: 7px;
	--fjls-eq-esp-2: 13px;
	--fjls-eq-esp-3: 18px;
	--fjls-eq-esp-4: 30px;

	/* escala tipografica: acompanha a largura da pagina (clamp) e a
	   quantidade de colunas (blocos --c1..--c4 abaixo), do mesmo jeito
	   que a foto. Menos itens na linha = texto maior. */
	--fjls-eq-fs-titulo: clamp(20px, 1.55vw, 27px);
	--fjls-eq-fs-nome: clamp(16.5px, 1.15vw, 19.5px);
	--fjls-eq-fs-pilula: clamp(11.5px, .72vw, 13px);
	--fjls-eq-fs-bio: clamp(13.8px, .92vw, 15.5px);
	--fjls-eq-fs-mais: clamp(13px, .85vw, 14.5px);

	font-family: var(--ft-font-reg, inherit);
}

/* o Divi aplica padding-bottom em h1-h6 e p; dentro do componente
   quem controla o ritmo e a escala acima, entao zeramos os dois.
   O :where() mantem a especificidade em zero: sem ele este reset
   ganharia das classes do proprio componente e comeria as margens. */
.fjls-eq :where(h2, h3, p, ul, ol),
.fjls-eq-modal :where(h2, p, ul, ol) {
	margin: 0;
	padding: 0;
}

.fjls-eq__titulo {
	margin: 0 0 var(--fjls-eq-esp-4);
	font-family: var(--ft-font-bold, inherit);
	font-size: var(--fjls-eq-fs-titulo);
	font-weight: 900;
	line-height: 1.22;
	color: var(--ft-royal, #002E80);
}

.fjls-eq__lista {
	display: grid;
	gap: var(--fjls-eq-gap-y) var(--fjls-eq-gap-x);
	grid-template-columns: minmax(0, 1fr);
}

.fjls-eq--c2 .fjls-eq__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fjls-eq--c3 .fjls-eq__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fjls-eq--c4 .fjls-eq__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* foto e tipografia por quantidade de colunas */
.fjls-eq--c1 {
	--fjls-eq-foto-max: 240px;
	--fjls-eq-fs-nome: clamp(19px, 1.5vw, 25px);
	--fjls-eq-fs-bio: clamp(15px, 1.05vw, 17px);
}

.fjls-eq--c2 {
	--fjls-eq-foto-max: 232px;
	--fjls-eq-fs-nome: clamp(18px, 1.35vw, 23px);
	--fjls-eq-fs-bio: clamp(14.5px, 1vw, 16.5px);
}

.fjls-eq--c3 {
	--fjls-eq-foto-max: 196px;
	--fjls-eq-fs-nome: clamp(16.5px, 1.15vw, 20px);
	--fjls-eq-fs-bio: clamp(14px, .92vw, 15.5px);
}

.fjls-eq--c4 {
	--fjls-eq-foto-max: 164px;
	--fjls-eq-fs-nome: clamp(15.5px, 1vw, 18px);
	--fjls-eq-fs-pilula: clamp(11px, .68vw, 12.5px);
	--fjls-eq-fs-bio: clamp(13.5px, .85vw, 14.8px);
}

.fjls-eq--lado {
	--fjls-eq-foto-max: 250px;
	--fjls-eq-fs-nome: clamp(19px, 1.5vw, 26px);
	--fjls-eq-fs-bio: clamp(14.5px, 1vw, 16.5px);
}

.fjls-eq__pessoa {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: var(--fjls-eq-esp-3);
	min-width: 0;
}

.fjls-eq--lado .fjls-eq__pessoa {
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

/* ---------- avatar ---------- */

.fjls-eq__avatar {
	flex: 0 0 auto;
	container-type: inline-size;
	width: 104px;
	width: clamp(100px, 66%, var(--fjls-eq-foto-max, 196px));
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #E7EBF2;
	display: grid;
	place-items: center;
}

/* as iniciais vao num span porque um elemento nao consulta o proprio
   container: o cqi so resolve certo a partir de um filho */
.fjls-eq__ini {
	font-family: var(--ft-font-bold, inherit);
	font-size: 30px;
	font-size: 27cqi;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .02em;
	color: rgba(0, 22, 69, .46);
	user-select: none;
}

.fjls-eq__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	filter: grayscale(1);
}

/* sem foto: so o circulo cheio, sem contorno */
.fjls-eq__avatar--iniciais {
	background: #E7EBF2;
}

.fjls-eq--lado .fjls-eq__avatar {
	width: 184px;
	width: clamp(128px, 38%, var(--fjls-eq-foto-max, 250px));
}

/* ---------- texto ---------- */

.fjls-eq__corpo {
	min-width: 0;
}

.fjls-eq__nome {
	margin: 0;
	font-family: var(--ft-font-bold, inherit);
	font-size: var(--fjls-eq-fs-nome);
	font-weight: 900;
	line-height: 1.28;
	color: var(--fjls-eq-dark);
}

.fjls-eq--lado .fjls-eq__nome {
	max-width: 15ch;
}

.fjls-eq__pilula {
	display: inline-block;
	max-width: 100%;
	margin-top: var(--fjls-eq-esp-1);
	padding: .34em .8em;
	border: 1px solid var(--fjls-eq-borda);
	border-radius: 6px;
	background: #fff;
	font-size: var(--fjls-eq-fs-pilula);
	font-weight: 700;
	line-height: 1.35;
	color: var(--fjls-eq-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* resumo: texto corrido, sem formatacao, cortado no PHP.
   padding:0 anula o padding-bottom que o Divi joga em todo <p>. */
.fjls-eq__bio {
	margin-top: var(--fjls-eq-esp-2);
	font-size: var(--fjls-eq-fs-bio);
	line-height: 1.45;
	color: var(--fjls-eq-dark);
}

/* sem pilula a bio encosta no nome: precisa do respiro maior */
.fjls-eq__nome + .fjls-eq__bio {
	margin-top: var(--fjls-eq-esp-3);
}

/* minibio completa: so alimenta o modal */
.fjls-eq__bio-full {
	display: none;
}

.fjls-eq__mais {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--fjls-eq-esp-2);
	padding: 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	font-family: inherit;
	font-size: var(--fjls-eq-fs-mais, 14px);
	font-weight: 700;
	color: var(--fjls-eq-blue);
	cursor: pointer;
	transition: border-color .2s ease;
}

.fjls-eq__mais:hover,
.fjls-eq__mais:focus-visible {
	border-bottom-color: var(--fjls-eq-blue);
	background: none;
}

.fjls-eq__mais:focus-visible {
	outline: 2px solid var(--fjls-eq-blue);
	outline-offset: 3px;
	border-radius: 2px;
}

.fjls-eq__mais svg {
	width: 12px;
	height: 12px;
}

.fjls-eq__aviso {
	padding: 12px 16px;
	border-left: 3px solid var(--ft-orange, #FF5F00);
	background: #FFF6F0;
	font-size: 14px;
}

/* ---------- modal ---------- */

.fjls-eq-modal {
	--fjls-eq-esp-1: 7px;
	--fjls-eq-esp-2: 13px;
	--fjls-eq-dark: var(--ft-dark, #001645);
	--fjls-eq-borda: #D7DCE6;
	--fjls-eq-fs-pilula: clamp(11.5px, .72vw, 13px);
	width: min(620px, calc(100vw - 40px));
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--fjls-eq-dark);
	box-shadow: 0 30px 80px rgba(0, 22, 69, .28);
	overflow: visible;
	opacity: 0;
	transform: translateY(10px) scale(.985);
	transition: opacity .24s ease, transform .24s ease;
}

.fjls-eq-modal.is-open {
	opacity: 1;
	transform: none;
}

.fjls-eq-modal::backdrop {
	background: rgba(0, 22, 69, 0);
	transition: background .24s ease;
}

.fjls-eq-modal.is-open::backdrop {
	background: rgba(0, 22, 69, .55);
}

.fjls-eq-modal__in {
	padding: 34px 36px 36px;
}

.fjls-eq-modal__top {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 36px 20px 0;
}

.fjls-eq-modal .fjls-eq__avatar {
	width: 84px;
}

.fjls-eq-modal__nome {
	font-family: var(--ft-font-bold, inherit);
	font-size: clamp(19px, 1.4vw, 23px);
	font-weight: 900;
	line-height: 1.25;
	color: var(--ft-royal, #002E80);
}

.fjls-eq-modal__top .fjls-eq__pilula {
	margin-top: var(--fjls-eq-esp-1, 7px);
}

.fjls-eq-modal__bio {
	max-height: 52vh;
	overflow-y: auto;
	font-size: clamp(14.5px, 1.02vw, 16.5px);
	line-height: 1.58;
	color: var(--fjls-eq-dark);
}

.fjls-eq-modal__bio p,
.fjls-eq-modal__bio ul,
.fjls-eq-modal__bio ol {
	margin: 0 0 .85em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.fjls-eq-modal__bio ul,
.fjls-eq-modal__bio ol {
	padding-left: 1.2em;
}

.fjls-eq-modal__bio > :first-child {
	margin-top: 0;
}

.fjls-eq-modal__bio > :last-child {
	margin-bottom: 0;
}

.fjls-eq-modal__fechar {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(0, 22, 69, .1);
	border-radius: 50%;
	background: #fff;
	color: var(--ft-royal, #002E80);
	cursor: pointer;
}

.fjls-eq-modal__fechar:hover {
	background: #F2F4F8;
}

/* ---------- responsivo ---------- */

@media (max-width: 980px) {
	.fjls-eq--c3 .fjls-eq__lista,
	.fjls-eq--c4 .fjls-eq__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fjls-eq--c3 { --fjls-eq-foto-max: 210px; }
	.fjls-eq--c4 { --fjls-eq-foto-max: 190px; }
}

@media (max-width: 780px) {
	.fjls-eq--lado .fjls-eq__lista,
	.fjls-eq--lado.fjls-eq--c2 .fjls-eq__lista,
	.fjls-eq--lado.fjls-eq--c3 .fjls-eq__lista,
	.fjls-eq--lado.fjls-eq--c4 .fjls-eq__lista {
		grid-template-columns: minmax(0, 1fr);
	}

	.fjls-eq--lado .fjls-eq__pessoa {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.fjls-eq--lado .fjls-eq__avatar {
		width: clamp(120px, 34%, 180px);
	}

	.fjls-eq--lado .fjls-eq__nome {
		max-width: none;
	}
}

@media (max-width: 540px) {
	.fjls-eq__lista,
	.fjls-eq--c2 .fjls-eq__lista,
	.fjls-eq--c3 .fjls-eq__lista,
	.fjls-eq--c4 .fjls-eq__lista {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px 0;
	}

	.fjls-eq,
	.fjls-eq--c1,
	.fjls-eq--c2,
	.fjls-eq--c3,
	.fjls-eq--c4,
	.fjls-eq--lado {
		--fjls-eq-foto-max: 136px;
		--fjls-eq-fs-titulo: 21px;
		--fjls-eq-fs-nome: 17.5px;
		--fjls-eq-fs-pilula: 12px;
		--fjls-eq-fs-bio: 14.5px;
		--fjls-eq-fs-mais: 14px;
	}

	.fjls-eq__avatar,
	.fjls-eq--lado .fjls-eq__avatar {
		width: clamp(104px, 38%, var(--fjls-eq-foto-max, 136px));
	}

	.fjls-eq__titulo {
		margin-bottom: 24px;
	}

	.fjls-eq__pessoa {
		gap: 16px;
	}

	.fjls-eq__pilula {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.fjls-eq-modal__in {
		padding: 28px 22px 26px;
	}

	.fjls-eq-modal__top {
		gap: 14px;
		margin-right: 32px;
	}

	.fjls-eq-modal .fjls-eq__avatar {
		width: 68px;
	}

	.fjls-eq-modal__bio {
		max-height: 62vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fjls-eq__mais,
	.fjls-eq-modal,
	.fjls-eq-modal::backdrop {
		transition: none;
	}

	.fjls-eq-modal {
		transform: none;
	}
}