/* ===== AZ Social — i tre riquadri con l'ultimo post =====

   Stanno in fondo alla pagina, sotto la striscia dei loghi. Tre in fila su
   schermo largo, uno sotto l'altro sul telefono, e ciascuno sviluppato in
   orizzontale: foto a sinistra, testo a destra.

   IL FILO CHE TIENE INSIEME IL PIE' DI PAGINA. Il titolino ripete lo
   stesso trattamento della striscia dei loghi — corsivo nero fra due
   filetti chiusi da un punto #067781 — e l'invito "Vedi il post" usa lo
   stesso verde-azzurro. Sono due blocchi diversi ma dello stesso pie' di
   pagina: se ognuno parlasse la sua lingua sembrerebbero due pezzi
   incollati. */

.az-soc{
	--az-soc-raggio: 16px;
	--az-soc-bordo: #e8ebec;
	--az-soc-casa: #067781;
	--az-soc-foto: clamp(132px, 13vw, 190px);

	width:100%;
	/* 1280 come la barra sopra: ferma a 1080 sembrava rientrata rispetto
	   alla striscia dei loghi, che occupa tutta la larghezza. Il tetto
	   serve comunque: oltre, tre riquadri diventano larghi e vuoti. */
	max-width:1280px;
	margin:0 auto;
	box-sizing:border-box;
}
.az-soc *{ box-sizing:border-box; }

/* ---------------------------------------------------------------- il titolo */

/* Stesso trattamento del titolino della striscia dei loghi: due filetti
   che sfumano verso l'esterno, chiusi verso il testo dal punto di casa.
   Il colore e' sempre #067781 e a sfumare e' solo la trasparenza; il capo
   trasparente e' la stessa tinta ad alfa zero e non `transparent`, che in
   certi motori sfuma passando per il grigio. */
.az-soc-titolo{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:nowrap;
	gap:clamp(10px, 2vw, 20px);

	text-align:center;
	font-size:clamp(1.15rem, 2vw, 1.5rem);
	font-weight:800;
	font-style:italic;
	line-height:1.2;
	color:#000;
	margin:0 0 26px;
}
.az-soc-titolo::before,
.az-soc-titolo::after{
	content:'';
	flex:1 1 0;
	min-width:0;
	max-width:150px;
	height:9px;
	background-repeat:no-repeat;
}
.az-soc-titolo::before{
	background-image:
		radial-gradient(circle at calc(100% - 4.5px) 50%, #067781 4.5px, transparent 4.6px),
		linear-gradient(to right, rgba(6,119,129,0), #067781);
	background-size:100% 100%, calc(100% - 12px) 2px;
	background-position:0 0, 0 50%;
}
.az-soc-titolo::after{
	background-image:
		radial-gradient(circle at 4.5px 50%, #067781 4.5px, transparent 4.6px),
		linear-gradient(to left, rgba(6,119,129,0), #067781);
	background-size:100% 100%, calc(100% - 12px) 2px;
	background-position:0 0, 100% 50%;
}

/* ---------------------------------------------------------------- la fila */

/* TRE colonne, scritte tre. `repeat(auto-fit, minmax(...))` sembra piu'
   furbo e qui sbagliava: in 1280px ci faceva stare quattro colonne, e i
   tre riquadri si sistemavano in tre caselle su quattro, sbilanciati a
   sinistra. `auto-fit` serve quando gli elementi sono un numero variabile;
   qui sono tre e resteranno tre. */
.az-soc-riga{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:20px;
	align-items:stretch;
}
@media (max-width:900px){
	.az-soc-riga{ grid-template-columns:minmax(0, 1fr); gap:14px; }
}

/* ---------------------------------------------------------------- il riquadro */

/* Ogni rete porta il suo colore in una variabile, e da li' se lo prendono
   il filo in cima, il nome e la tinta di fondo della foto. Scriverlo una
   volta sola vuol dire che cambiando idea sul colore di una rete si tocca
   una riga, non cinque sparse. */
.az-soc-facebook  { --rete:#1877f2; }
.az-soc-instagram { --rete:#d6266c; }
.az-soc-linkedin  { --rete:#0a66c2; }

.az-soc-scheda{
	display:grid;
	grid-template-columns:var(--az-soc-foto) minmax(0, 1fr);
	grid-template-areas:
		"foto cima"
		"foto testo"
		"foto vai";
	grid-template-rows:auto 1fr auto;
	min-height:172px;

	text-decoration:none;
	color:inherit;
	background:#fff;
	border:1px solid var(--az-soc-bordo);
	border-radius:var(--az-soc-raggio);
	overflow:hidden;
	/* Un'ombra appena percettibile gia' a riposo: senza, tre rettangoli
	   bianchi su fondo bianco sembrano disegnati sulla pagina invece che
	   posati sopra. Con l'ombra diventano oggetti, e il sollevarsi al
	   passaggio del mouse ha un senso. */
	box-shadow:0 1px 2px rgba(16,32,38,.05);
	transition:transform .3s cubic-bezier(.2,.7,.3,1),
	           box-shadow .3s ease,
	           border-color .3s ease;
}

/* Il filo colorato in cima: dice di che rete si tratta prima ancora che
   si legga il nome. Tre pixel bastano — la fascia piena che c'era prima
   pesava piu' del contenuto che doveva annunciare. */
.az-soc-scheda::before{
	content:'';
	grid-column:1 / -1;
	grid-row:1;
	height:3px;
	margin:-1px -1px 0;
	background:var(--rete);
	align-self:start;
	z-index:1;
}
.az-soc-instagram::before{
	background:linear-gradient(90deg, #833ab4 0%, #e1306c 55%, #f77737 100%);
}

.az-soc-scheda.az-soc-senza-foto{
	grid-template-columns:minmax(0, 1fr);
	grid-template-areas: "cima" "testo" "vai";
}
.az-soc-cima  { grid-area:cima; }
.az-soc-foto  { grid-area:foto; }
.az-soc-testo { grid-area:testo; }
.az-soc-vai   { grid-area:vai; }

@media (hover: hover){
	.az-soc-scheda:hover{
		transform:translateY(-4px);
		box-shadow:0 14px 30px rgba(16,32,38,.12);
		border-color:#dde2e4;
	}
}
.az-soc-scheda:focus-visible{ outline:2px solid var(--az-soc-casa); outline-offset:3px; }

/* ---------------------------------------------------------------- la riga in cima */

.az-soc-cima{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px;
	padding:16px 18px 8px;
}

/* Il nome della rete: nel suo colore, senza pastiglia.

   Prima era una pastiglia piena, e prima ancora una fascia larga tutta la
   colonna. Ogni volta il colore prendeva piu' spazio di quanto meritasse:
   il protagonista e' il post, non l'etichetta che dice da dove viene. Il
   filo in cima basta a segnalare la rete; qui serve solo il nome, e il
   colore lo lega al filo senza aggiungere peso. */
.az-soc-targa{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:var(--rete);
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.07em;
	text-transform:uppercase;
	line-height:1;
	white-space:nowrap;
}
.az-soc-icona{
	width:15px; height:15px;
	fill:currentColor;
	flex:none;
	display:block;
}

/* Quando e' uscito: piccolo e grigio, si legge solo se lo si cerca. E'
   un'informazione di contorno e non deve competere col testo del post. */
.az-soc-quando{
	font-size:.72rem;
	color:#98a0a4;
	white-space:nowrap;
	flex:none;
}

/* ---------------------------------------------------------------- la foto */

/* Il fondo prende una goccia del colore della rete invece di essere
   grigio: l'immagine si vede intera, quindi un po' di fondo attorno si
   vede sempre, e tanto vale che quel fondo dica qualcosa. `color-mix`
   tiene il colore in un posto solo; se un browser non lo conosce resta il
   grigino della riga prima, che va benissimo lo stesso. */
.az-soc-foto{
	position:relative;
	overflow:hidden;
	background:#f4f6f7;
	background:color-mix(in srgb, var(--rete) 6%, #fff);
	line-height:0;
}

/* `contain` e non `cover`: l'immagine si vede INTERA.

   Con `cover` riempiva il riquadro tagliando quello che avanzava, e nei
   post social quello che avanza e' quasi sempre del testo: sparivano
   mezzo titolo e il logo. Qui l'immagine e' l'informazione, non una
   decorazione, e va mostrata tutta.

   Il piccolo raggio e lo stacco dai bordi la fanno sembrare posata nel
   riquadro invece che incastrata a forza. */
.az-soc-foto img{
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	object-fit:contain;
	padding:12px;
	border-radius:10px;
	display:block;
	transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
@media (hover: hover){
	.az-soc-scheda:hover .az-soc-foto img{ transform:scale(1.045); }
}

/* ---------------------------------------------------------------- il testo */

/* Tagliato a TRE righe, sempre.

   Il taglio nel testo lo fa gia' il server a 95 caratteri, ma la lunghezza
   in caratteri non dice quante righe verranno: una parola lunga o uno
   schermo stretto e diventano quattro, e cresce solo quel riquadro. Con il
   limite a tre righe i tre restano alti uguali qualunque cosa ci sia
   scritto dentro. */
.az-soc-testo{
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
	padding:2px 18px 12px;
	font-size:.92rem;
	line-height:1.5;
	color:#2b3336;
}

/* L'invito, separato da un filo sottile: chiude il riquadro e dice che
   li' sotto l'informazione e' finita e comincia l'azione. */
.az-soc-vai{
	display:block;
	margin:0 18px;
	padding:11px 0 14px;
	border-top:1px solid #eff1f2;
	font-size:.8rem;
	font-weight:700;
	letter-spacing:.01em;
	color:var(--az-soc-casa);
	align-self:end;
}
.az-soc-vai::after{
	content:' \2192';
	display:inline-block;
	transition:transform .25s ease;
}
@media (hover: hover){
	.az-soc-scheda:hover .az-soc-vai::after{ transform:translateX(4px); }
}

/* ---------------------------------------------------------------- telefono */

@media (max-width:700px){
	.az-soc{ --az-soc-raggio:14px; --az-soc-foto:118px; }
	.az-soc-scheda{ min-height:138px; }
	.az-soc-cima{ padding:13px 14px 6px; }
	.az-soc-testo{ -webkit-line-clamp:2; font-size:.88rem; padding:2px 14px 10px; }
	.az-soc-vai{ margin:0 14px; padding:9px 0 12px; }
	.az-soc-foto img{ padding:9px; }
	.az-soc-titolo{ margin-bottom:20px; }
	.az-soc-titolo::before,
	.az-soc-titolo::after{ max-width:52px; }
}

@media (prefers-reduced-motion: reduce){
	.az-soc-scheda, .az-soc-foto img, .az-soc-vai::after{ transition:none; }
	.az-soc-scheda:hover{ transform:none; }
	.az-soc-scheda:hover .az-soc-foto img{ transform:none; }
	.az-soc-scheda:hover .az-soc-vai::after{ transform:none; }
}