/* ==========================================================================
   Barra de logótipos de financiamento
   PRR + República Portuguesa + UE / NextGenerationEU

   Ficheiro: dist/css/financing-logos.css
   Cópia em: src/sass/_financing-logos.scss  (para sobreviver a um rebuild)

   Usa os tokens do tema definidos em :root — --s (30px), --block-padding,
   --white, --black, --grey, --lightgrey.

   Regras que vêm do manual, não do gosto:
   - Os três logótipos com a mesma altura visual.
   - Nenhum distorcido: height fixa, width auto.
   - Zona de respeito à volta do conjunto e entre logótipos.
   - Fundo branco. Nunca sobre imagem ou cor saturada.
   ========================================================================== */

.financing {
	/* Altura visual comum aos três logótipos. Tudo o resto deriva daqui. */
	--financing-logo-h: 60px;

	/* Fundo transparente, sem filete: o bloco não deve destacar-se.
	   O bloco não adiciona padding próprio. */
	padding: 0;
	background-color: transparent;

	/* As secções têm margem --s4 (120px) e as adjacentes colapsam para a maior.
	   Aproxima-se da secção anterior (text-block) com margem-top negativa:
	   120 - 60 = ~60px. E deixa um pouco mais de ar até à seguinte (Eventos):
	   --s5 = 150px em vez de 120. */
	margin-top: calc(var(--s2) * -1);
	margin-bottom: var(--s5);
}

.financing-inner {
	/* Mesma caixa da coluna de texto (.text-block > div). */
	width: var(--content-width);
	padding: 0 var(--block-padding);
	margin: 0 auto;
	text-align: center;
}

/* --- Logótipos ----------------------------------------------------------- */

.financing-list {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between; /* ocupam a largura da coluna de texto */
	gap: var(--s2); /* zona de respeito mínima entre logótipos */

	margin: 0;
	padding: 0;
	list-style: none;
}

.financing-item {
	display: flex;
	align-items: center;
	height: var(--financing-logo-h);
}

/* A regra que impede a distorção. Não remover.
   Depende de o SVG ter viewBox — sem ele, não escala. */
.financing-item svg {
	display: block;
	height: 100%;
	width: auto;
	max-width: 100%;
}

/* --- Nota e link --------------------------------------------------------- */

.financing-note {
	max-width: 70ch;
	margin: 0 auto var(--s); /* acima dos logos: separa-se por baixo */

	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--grey);
}

.financing-note a {
	color: inherit;
	border-bottom: 1px solid var(--lightgrey);
}

.financing-note a:hover {
	border-bottom-color: var(--black);
}

/* Link opcional reduzido à seta ↗ (a mesma do footer/contactos): neutro em
   PT/EN. Fica inline, anexado ao fim da frase de financiamento. O texto
   localizado vive no aria-label/title do <a>. */
.financing-link {
	display: inline-flex;
	align-items: center;
	margin-left: 0.35em;
	vertical-align: middle;

	font-size: 1.1em; /* relativo ao texto da nota */
	line-height: 1;
	color: var(--black);

	transition: color 0.2s ease, transform 0.2s ease;
}

.financing-link:hover {
	color: var(--ocp-color);
	transform: translate(2px, -2px); /* acompanha a direção da seta */
}

.financing-link:focus-visible,
.financing-note a:focus-visible {
	outline: 2px solid var(--black);
	outline-offset: 3px;
}

/* --- Responsivo ---------------------------------------------------------- */

@media only screen and (max-width: 1100px) {
	.financing {
		--financing-logo-h: 48px;
	}

	.financing-list {
		gap: var(--s1-1\2 );
	}
}

/* Abaixo dos 700px os três lado a lado ficam ilegíveis. Empilham-se. */
@media only screen and (max-width: 700px) {
	.financing {
		--financing-logo-h: 44px;
	}

	.financing-list {
		flex-flow: column nowrap;
		gap: var(--s1-1\2 );
	}

	.financing-item {
		height: auto;
	}

	.financing-item svg {
		height: var(--financing-logo-h);
	}
}

/* --- Impressão ----------------------------------------------------------- */

@media print {
	.financing {
		padding: var(--s) 0;
		border: none;
		break-inside: avoid;
	}
}