/* Team - schede dei membri.
   L'aspetto (forma della foto, separatori, caratteri, colori, pulsanti, allineamento) lo decide il tema
   con le sue regole per .Team e .gpCol-4; qui solo la disposizione e quel che serve se il tema non lo dà. */

/* righe flessibili: qualunque numero di membri, schede della stessa larghezza, centrate */
.Team.tm-team{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:stretch}
.Team.tm-team:before,.Team.tm-team:after{display:none!important}
.Team.tm-team > .tm-membro.gpCol-4{float:none!important;display:flex;flex-direction:column;box-sizing:border-box;min-width:0}
.Team.tm-team.tm-col-2 > .tm-membro.gpCol-4{width:50%!important;flex:0 0 50%}
.Team.tm-team.tm-col-3 > .tm-membro.gpCol-4{width:33.3333%!important;flex:0 0 33.3333%}
.Team.tm-team.tm-col-4 > .tm-membro.gpCol-4{width:25%!important;flex:0 0 25%}
/* il sito allineato a sinistra: schede e titoli a sinistra; centrato: tutto centrato */
.Sinistra .Team.tm-team{justify-content:flex-start!important}
/* separatore del tema solo tra le schede, non dopo l'ultima */
.Team.tm-team > .tm-membro:last-child{border-right-color:transparent!important}

/* tablet: 2 per riga */
@media(min-width:768px) and (max-width:1199px){
	.Team.tm-team:is(.tm-col-3,.tm-col-4) > .tm-membro.gpCol-4{width:50%!important;flex:0 0 50%}
}
/* telefono: una sotto l'altra, senza separatori verticali, foto non enorme */
@media(max-width:767px){
	/* stessa forza delle regole per 2/3/4 colonne, altrimenti sul telefono restavano affiancate */
	.Team.tm-team:is(.tm-col-2,.tm-col-3,.tm-col-4) > .tm-membro.gpCol-4{width:100%!important;flex:0 0 100%;max-width:480px;border-right:0!important;margin:0 auto 44px!important;padding-left:15px;padding-right:15px}
	.Team.tm-team > .tm-membro:last-child{margin-bottom:0!important}
}

/* foto: quadrata (o nella forma del tema), che riempie il riquadro, col punto di fuoco scelto */
.tm-team .tm-foto .responsive_image_wrapper{display:block;position:relative;overflow:hidden;height:0;padding-top:100%}
.tm-team .tm-foto .tm-cornice{position:absolute;inset:0;display:block}
.tm-team .tm-foto img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;margin:0!important}
.tm-team .tm-iniziali{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-size:clamp(40px,6vw,80px);letter-spacing:.04em;color:var(--colore-cliente,#888);
	background:#f1f1f1;background:color-mix(in srgb,var(--colore-cliente,#888) 10%,#fff)}

/* testi: occupano lo spazio libero, così i pulsanti stanno tutti alla stessa altezza */
.tm-team .tm-corpo{flex:1 1 auto;display:flex;flex-direction:column}
.tm-team .tm-corpo > .gpclear{display:none}
.tm-team .tm-funzione{margin:0 0 1.2em!important}

/* misure più sobrie, uguali per tutti i temi: il tema dà carattere e colori, qui solo le proporzioni.
   Il nome resta un titolo, ma piccolo; funzione, recapiti e testo un po' sotto il testo normale del sito */
.jumbotron .tm-team .tm-nome,.tm-team .tm-nome{font-size:clamp(17px,.55vw + 13px,21px)!important;line-height:1.3!important;margin:0 0 .25em!important;letter-spacing:.01em}
.tm-team .tm-corpo{font-size:clamp(14px,.25vw + 12.5px,16px)}
.jumbotron .tm-team .tm-corpo :is(p,li,a:not(.simple-button-plugin),span,em,b,strong,ul,ol),.tm-team .tm-corpo :is(p,li,a:not(.simple-button-plugin),span,em,b,strong,ul,ol){font-size:inherit!important}
.tm-team .tm-funzione{font-size:1.02em!important;line-height:1.45!important;opacity:.85}
.tm-team .tm-corpo p,.tm-team .tm-corpo li{line-height:1.55!important}

/* recapiti: righe con l'icona in colonna, allineate tra loro; il gruppo segue l'allineamento del sito */
.tm-team .tm-recapiti-box{margin:0 0 1.3em}
.jumbotron .tm-team ul.tm-recapiti,.tm-team ul.tm-recapiti{display:inline-flex!important;flex-direction:column;align-items:flex-start;gap:.3em;
	list-style:none!important;margin:0!important;padding:0!important;text-align:left;max-width:100%}
.jumbotron .tm-team ul.tm-recapiti li,.tm-team ul.tm-recapiti li{display:flex;align-items:baseline;gap:.65em;margin:0!important;padding:0!important;list-style:none!important;min-width:0}
.tm-team ul.tm-recapiti li:before{display:none!important;content:none!important}
.tm-team ul.tm-recapiti i{flex:0 0 1.15em;width:1.15em;text-align:center;font-size:.95em;opacity:.9}
.tm-team ul.tm-recapiti a{text-decoration:none;overflow-wrap:anywhere}
@media(hover:hover){.tm-team ul.tm-recapiti a:hover{text-decoration:underline}}
.tm-team ul.tm-recapiti .tm-lingue span{opacity:.85}

/* testo scritto con l'editor: gli «a capo» restano anche se il tema azzera lo spazio tra i paragrafi */
.jumbotron .tm-team .tm-testo p,.tm-team .tm-testo p{margin:0 0 1em!important}
.tm-team .tm-testo :is(ul,ol){margin:0 0 1em!important;padding-left:1.3em!important}
.tm-team .tm-testo ul{list-style:square!important}
.tm-team .tm-testo ol{list-style:decimal!important}
.tm-team .tm-testo > :last-child{margin-bottom:0!important}
/* con il sito centrato l'elenco resta allineato a sinistra, ma centrato come blocco */
.Centrato .tm-team .tm-testo :is(ul,ol){display:inline-block;text-align:left}

/* pulsante del curriculum: disegnato dal tema (.PulsantiSito), sempre in fondo alla scheda */
.tm-team .tm-azioni{margin-top:auto!important;padding-top:1.6em}
.tm-team .tm-azioni a.simple-button-plugin{display:inline-block;width:auto!important;max-width:100%;text-decoration:none!important;margin:0!important}

/* ---------------------------------------------------------------------
   Gruppi: titolo come un normale h2 del sito, allineato come le schede
   --------------------------------------------------------------------- */
.tm-tutto .tm-gruppo{margin:0 0 calc(clamp(16px,var(--spazio-paragrafi,60px)*.4,30px));width:auto!important;max-width:none!important;float:none!important}
.tm-tutto .tm-gruppo h2{margin:0!important}
.Centrato .tm-tutto .tm-gruppo,.Centrato .tm-tutto .tm-gruppo h2{text-align:center!important}
.Sinistra .tm-tutto .tm-gruppo,.Sinistra .tm-tutto .tm-gruppo h2{text-align:left!important}

/* ---------------------------------------------------------------------
   Disposizione compatta: foto a sinistra, testi a destra (sempre a filo della foto)
   La foto è un ritratto 4:5; resta nella forma del tema (cerchio = rotonda, triangolo…)
   --------------------------------------------------------------------- */
.Team.tm-team.tm-compatta > .tm-membro.gpCol-4{flex-direction:row;align-items:flex-start;gap:clamp(16px,2vw,24px);border-right:0!important;margin-bottom:clamp(28px,3vw,44px)!important}
.tm-team.tm-compatta .tm-foto{flex:0 0 clamp(120px,42%,200px);width:clamp(120px,42%,200px)}
.Team.tm-team.tm-compatta .tm-foto .responsive_image_wrapper{padding-top:125%!important;margin-bottom:0!important}
.Tema3Cerchio .Team.tm-team.tm-compatta .tm-foto .responsive_image_wrapper{padding-top:100%!important}
.tm-team.tm-compatta .tm-iniziali{font-size:clamp(28px,3vw,44px)}
.Team.tm-team.tm-compatta .tm-corpo,.Team.tm-team.tm-compatta .tm-corpo :is(h3,p,div,ul,li){text-align:left!important}
.tm-team.tm-compatta .tm-corpo{flex:1 1 0;min-width:0;padding-top:.1em}
.tm-team.tm-compatta .tm-funzione{margin:0 0 1em!important}
.tm-team.tm-compatta .tm-recapiti-box{margin:0 0 1em}
.Team.tm-team.tm-compatta .tm-testo :is(ul,ol){display:block}
.tm-team.tm-compatta .tm-azioni{margin-top:0!important;padding-top:.3em}
@media(max-width:767px){
	.Team.tm-team.tm-compatta:is(.tm-col-2,.tm-col-3,.tm-col-4) > .tm-membro.gpCol-4{max-width:520px;margin:0 auto 32px!important}
	.tm-team.tm-compatta .tm-foto{flex-basis:clamp(110px,36%,150px);width:clamp(110px,36%,150px)}
}

/* ---------------------------------------------------------------------
   Colonne: una persona per riga, foto | nome, funzione e recapiti | testo.
   Il testo lungo ha tutta la sua colonna; sul telefono tutto in colonna.
   --------------------------------------------------------------------- */
.Team.tm-team:is(.tm-colonne,.tm-elenco){display:block!important}
.Team.tm-team:is(.tm-colonne,.tm-elenco) > .tm-membro.gpCol-4{width:100%!important;max-width:none!important;flex:none;float:none!important;display:flex;flex-direction:row;align-items:flex-start;
	gap:clamp(18px,2.4vw,36px);border-right:0!important;margin:0!important;padding:clamp(22px,2.6vw,36px) 0!important;border-top:1px solid rgba(0,0,0,.1)}
.Team.tm-team:is(.tm-colonne,.tm-elenco) > .tm-membro.gpCol-4:first-child{border-top:0;padding-top:0!important}
.Team.tm-team:is(.tm-colonne,.tm-elenco) .tm-corpo,.Team.tm-team:is(.tm-colonne,.tm-elenco) .tm-corpo :is(h3,p,div,ul,li){text-align:left!important}
.tm-team.tm-colonne .tm-foto{flex:0 0 clamp(130px,18%,220px);width:clamp(130px,18%,220px)}
.Team.tm-team.tm-colonne .tm-foto .responsive_image_wrapper{padding-top:125%!important;margin-bottom:0!important}
.tm-team.tm-colonne .tm-corpo{flex:1 1 0;min-width:0;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(18px,2.4vw,40px);align-items:start}
.tm-team.tm-colonne .tm-info .tm-azioni{margin-top:0!important;padding-top:.4em}
.tm-team.tm-colonne .tm-testo{padding-top:.2em}
/* senza testo l'informazione prende tutta la riga */
.tm-team.tm-colonne .tm-corpo:not(:has(.tm-testo)){grid-template-columns:1fr}
@media(max-width:991px){
	.tm-team.tm-colonne .tm-corpo{grid-template-columns:1fr}
}
@media(max-width:767px){
	.Team.tm-team.tm-colonne > .tm-membro.gpCol-4{flex-direction:column}
	.tm-team.tm-colonne .tm-foto{width:clamp(140px,50%,220px);flex-basis:auto}
}

/* ---------------------------------------------------------------------
   Elenco: righe come le notizie, foto piccola, recapiti su una riga, testo sotto
   --------------------------------------------------------------------- */
.tm-team.tm-elenco .tm-foto{flex:0 0 clamp(72px,9vw,110px);width:clamp(72px,9vw,110px)}
.Team.tm-team.tm-elenco .tm-foto .responsive_image_wrapper{margin-bottom:0!important}
.tm-team.tm-elenco .tm-iniziali{font-size:clamp(20px,2vw,30px)}
.tm-team.tm-elenco .tm-corpo{flex:1 1 0;min-width:0}
.tm-team.tm-elenco .tm-info{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.2em;row-gap:.2em;margin:0 0 .6em}
.tm-team.tm-elenco .tm-nome{margin:0!important}
.tm-team.tm-elenco .tm-funzione{margin:0!important}
.tm-team.tm-elenco .tm-funzione br{display:none}
.tm-team.tm-elenco .tm-recapiti-box{flex:1 1 100%;margin:.2em 0 0}
.jumbotron .tm-team.tm-elenco ul.tm-recapiti,.tm-team.tm-elenco ul.tm-recapiti{flex-direction:row;flex-wrap:wrap;column-gap:1.4em;row-gap:.2em}
.tm-team.tm-elenco .tm-azioni{flex:1 1 100%;margin-top:0!important;padding-top:.6em}
@media(max-width:767px){
	.tm-team.tm-elenco .tm-foto{flex-basis:64px;width:64px}
}