/**
 * Il blocco "Support us".
 *
 * I colori arrivano dalle variabili del tema, ognuna col suo ripiego: sotto
 * un tema che non le definisce il blocco resta leggibile invece di sparire in
 * un riquadro trasparente con del testo trasparente sopra.
 *
 * I badge sono monocromi come la riga dei social del tema, non nei colori dei
 * marchi. Due ragioni: il nero attuale di Patreon su un fondo scuro non si
 * vedrebbe, e badge tutti uguali reggono l'aggiunta del terzo e del quarto
 * senza diventare un semaforo. Il colore lo mette il passaggio del mouse.
 */

.igd-support {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 32px 0;
	padding: 20px 24px;
	border-left: 3px solid var(--orange, #ff6600);
	border-radius: var(--radius, 6px);
	background: var(--secondary, #1f262c);
}

/* min-width: 0 perche' il testo e' un figlio flex: senza, si rifiuta di
   stringersi sotto la larghezza della sua riga piu' lunga e spinge i badge
   fuori dal riquadro. */

.igd-support__intro {
	flex: 1 1 260px;
	min-width: 0;
}

.igd-support__title {
	margin: 0 0 4px;
	color: var(--white, #fff);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.igd-support__text {
	margin: 0;
	color: var(--soft, #ccc);
	font-size: 14px;
	line-height: 1.5;
}

.igd-support__badges {
	display: flex;
	flex-wrap: wrap;
	flex: 0 1 auto;
	gap: 10px;
}

.igd-support__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--grey, #333);
	border-radius: var(--radius, 6px);
	background: var(--back, #171a1f);
	color: var(--white, #fff);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

/* Il colore anche su :focus-visible e non solo su :hover: chi arriva col
   tabulatore deve vedere dov'e' quanto chi ci passa sopra col mouse. */

.igd-support__badge:hover,
.igd-support__badge:focus-visible {
	border-color: var(--orange, #ff6600);
	background: var(--primary, #252d34);
	color: var(--orange, #ff6600);
}

.igd-support__icon {
	display: block;
	flex: none;
}

/* Sul telefono i badge vanno a riempire la riga: due bottoni stretti in fondo
   a un articolo letto col pollice si sbagliano, uno largo no. */

@media (max-width: 600px) {
	.igd-support {
		padding: 18px;
	}

	.igd-support__badges {
		flex: 1 1 100%;
	}

	.igd-support__badge {
		flex: 1 1 100%;
		justify-content: center;
	}
}