/*
 * Widget "Reconhecimento" (Elementor).
 *
 * Os tamanhos dos logos vêm do cadastro (--brc-rec-h por logo, conforme a cota)
 * e são multiplicados pela escala responsiva (--brc-rec-scale) do widget: no
 * celular todos encolhem por igual e a hierarquia entre as cotas se mantém.
 * Cores e tipografia ficam nos controles do Elementor.
 */
.brc-rec {
	--brc-rec-justify: center; /* left | center (controle Alinhamento) */
	--brc-rec-intro-mx: auto;
	--brc-rec-section-gap: 72px;
	--brc-rec-logo-gap: 32px;
	--brc-rec-scale: 1;
	--brc-rec-name-cols: 3;
	display: flex;
	flex-direction: column;
	gap: var(--brc-rec-section-gap);
	min-width: 0;
}

.brc-rec__sec { min-width: 0; }

.brc-rec__head {
	margin: 0 0 28px;
	text-align: var(--brc-rec-justify);
}
.brc-rec__title { margin: 0; line-height: 1.25; }
.brc-rec__intro {
	max-width: 68ch;
	margin: 10px 0 0;
	line-height: 1.55;
}
/* Centralizado, o texto de abertura também fica no meio da coluna. */
.brc-rec__intro { margin-inline: var(--brc-rec-intro-mx, auto); }

/* ---- Logos ---- */
.brc-rec__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--brc-rec-justify);
	align-items: center;
	gap: var(--brc-rec-logo-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.brc-rec__logos + .brc-rec__logos { margin-top: var(--brc-rec-logo-gap); }

.brc-rec__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.brc-rec__logo-link,
.brc-rec__logo-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}
.brc-rec__logo-link { border-radius: 6px; text-decoration: none; }
.brc-rec__logo-link:focus-visible { outline: 2px solid #1d3260; outline-offset: 4px; }

/* Duas classes: o Elementor tem ".elementor img { height: auto }", que vence
 * uma classe só e deixava o logo no tamanho natural do arquivo. */
.brc-rec .brc-rec__img {
	display: block;
	width: auto;
	max-width: min(100%, 360px);
	height: calc(var(--brc-rec-h, 80px) * var(--brc-rec-scale));
	object-fit: contain;
}

/* Organização sem arquivo de logo: o nome ocupa o lugar, na mesma altura. */
.brc-rec__logo-text {
	display: inline-flex;
	align-items: center;
	min-height: calc(var(--brc-rec-h, 80px) * var(--brc-rec-scale));
	padding: 0 6px;
	font-weight: 600;
	font-size: clamp(15px, calc(var(--brc-rec-h, 80px) * var(--brc-rec-scale) * 0.24), 26px);
	line-height: 1.2;
	color: #1d3260;
	text-align: center;
	overflow-wrap: anywhere;
}

.brc-rec__desc {
	margin: 0;
	max-width: 260px;
	text-align: var(--brc-rec-justify);
	line-height: 1.45;
}

/* Logos em tons de cinza (controle do widget), cor ao passar o mouse/focar. */
.brc-rec-mono-yes .brc-rec .brc-rec__img { filter: grayscale(1); opacity: 0.8; transition: filter 0.2s ease, opacity 0.2s ease; }
.brc-rec-mono-yes .brc-rec .brc-rec__logo-link:hover .brc-rec__img,
.brc-rec-mono-yes .brc-rec .brc-rec__logo-link:focus-visible .brc-rec__img { filter: none; opacity: 1; }

/* ---- Listas de nomes (Access Contributors e anteriores) ---- */
.brc-rec__names {
	display: grid;
	grid-template-columns: repeat(var(--brc-rec-name-cols), minmax(0, 1fr));
	gap: 12px 32px;
	max-width: 1100px;
	margin: 0 var(--brc-rec-intro-mx, auto);
	padding: 0;
	list-style: none;
}
.brc-rec__names li {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid rgba(29, 50, 96, 0.12);
	min-width: 0;
	overflow-wrap: anywhere;
}
.brc-rec__years { white-space: nowrap; }
.brc-rec__name-link { color: inherit; text-decoration: none; }
.brc-rec__name-link:hover .brc-rec__name { text-decoration: underline; text-underline-offset: 3px; }
.brc-rec__name-link:focus-visible { outline: 2px solid #1d3260; outline-offset: 3px; border-radius: 4px; }

.brc-rec__empty {
	margin: 0;
	padding: 18px;
	border: 1px dashed #c9d1de;
	border-radius: 8px;
	color: #4d4d4d;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.brc-rec-mono-yes .brc-rec .brc-rec__img { transition: none; }
}