/* ============================================================
   GEA Fixes - correzioni di impaginazione post-migrazione J3->J5
   Caricato dal plugin "System - GEA Fixes" (media/, fuori dal
   template): NON viene sovrascritto dai salvataggi delle opzioni
   template ne dagli aggiornamenti Helix, e vince sui conflitti
   grazie a !important sulle regole chiave.
   Versionato via filemtime dal plugin -> niente hard refresh.
   ============================================================ */

/* 1) Linea blu decorativa .title::after del tema, che colpiva le
      celle "Titolo" della tabella Pubblicazioni (jResearch). */
td.title::after {
	content: none !important;
}

/* 2) Card dei moduli "elenco-prodotti" (Applicazioni TMS, opzioni
      prodotto, accessori...): alla loro larghezza Bootstrap nativa
      (col-md-3 = 25%) e solo CENTRATE. NON allargate col flex-grow,
      che allungava le pagine a 2 card. Identico con 2, 3 o 4 card. */
.elenco-prodotti .row {
	justify-content: center !important;
}
.elenco-prodotti h2,
.elenco-pubblicazioni h2 {
	margin: 0 15px 22px !important;
}

/* 3) Griglie legacy Bootstrap 3 (colonne senza wrapper .row): in BS3
      flottavano affiancate, in BS5 si impilano. Ripristina il float
      SOLO dove le colonne non sono gia' dentro un .row flex (dentro
      un flex il float e' ignorato -> le griglie corrette non si
      toccano). */
.com-content-article__body > [class*="col-md-"],
.com-content-article__body > [class*="col-sm-"],
.com-content-article__body > [class*="col-lg-"],
.article-details [class*="col-md-"],
.article-details [class*="col-sm-"],
.article-details [class*="col-lg-"],
.mod-custom > [class*="col-md-"],
.mod-custom > [class*="col-sm-"],
.mod-custom > [class*="col-lg-"] {
	float: left;
}
.com-content-article__body::after,
.article-details .article-body::after,
.mod-custom::after {
	content: "";
	display: block;
	clear: both;
}

/* 4) Immagini dei contenuti: proporzioni sempre corrette. Con
      width/height reali negli attributi (aggiunti in DB) il browser
      riserva lo spazio ed evita i salti di layout in caricamento. */
.com-content-article__body img,
.article-details img,
#sp-component img {
	max-width: 100% !important;
	height: auto !important;
}

/* 5) Blocchi full-width (row con un col-md-12): resi "flow-root" invece di "flex".
      Nei contenuti legacy l'immagine ha spesso float:left messo a mano; con la
      row in flex il float resta confinato e sotto il testo breve si crea un
      grande vuoto. In flow-root il testo scorre accanto all'immagine E il float
      viene CONTENUTO dentro la sua row: cosi' un'immagine alta 400px non "sfora"
      piu' sotto, evitando che le row successive (flex) vengano spinte di lato e
      appaiano scentrate/schiacciate a destra. Le griglie (col-md-3/4/6) NON hanno
      col-md-12, quindi restano flex e affiancate. (:has supportato da tutti i
      browser moderni; se assente, la regola e' semplicemente ignorata.) */
.com-content-article__body .row:has(> [class*="col-md-12"]),
.article-details .row:has(> [class*="col-md-12"]) {
	display: flow-root;
}

/* 5b) Sicurezza: ogni row dei contenuti parte sotto eventuali float che
       sfuggono da blocchi precedenti (immagini con float:left inline messo a
       mano nei vecchi articoli). Non tocca le colonne affiancate, che stanno
       DENTRO una singola row flex, non su row separate. */
.com-content-article__body .row,
.article-details .row {
	clear: both;
}

/* 5c) MEDIA-OBJECT per i blocchi "hero" legacy: immagine float:left alta (es.
       400px) con accanto POCO testo, dove il testo si incollava in alto e sotto
       restava un grande vuoto bianco. Qui immagine e testo diventano due colonne
       flex CENTRATE verticalmente: la scatola e' alta quanto l'immagine, senza
       vuoto, e il testo e' allineato a meta' immagine.
       GUARDIA :not(:has(> p:nth-of-type(3))) -> scatta solo se il col ha
       l'immagine e AL MASSIMO un paragrafo di testo. I blocchi con molto testo
       (3+ paragrafi) restano a flow-root/float e il testo scorre attorno
       all'immagine, comportamento corretto quando il testo e' abbondante.
       SOLO da >=992px (desktop vero): sotto questa soglia (mobile E tablet) si
       impila -> immagine sopra, testo sotto (regola 5d qui sotto), come si
       aspetta un utente da mobile. L'affiancamento immagine|testo avviene solo
       quando c'e' davvero spazio orizzontale. */
@media (min-width: 992px) {
.com-content-article__body .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))),
.article-details .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))) {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}
.com-content-article__body .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))) > p,
.article-details .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))) > p {
	margin: 0;
}
/* Colonna immagine: si rimpicciolisce fino a max 42% della larghezza cosi'
   sui monitor stretti/tablet il testo mantiene sempre ~metA' spazio e non si
   spreme in colonna sottile. Sui monitor larghi l'immagine resta alla sua
   dimensione naturale (400px < 42%), come prima. */
.com-content-article__body .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))) > p:has(img),
.article-details .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))) > p:has(img) {
	flex: 0 1 auto;
	max-width: 42%;
}
/* Colonna testo: prende lo spazio restante e va allineata a SINISTRA. Molti
   contenuti hanno text-align:justify inline che, in una colonna stretta,
   produce enormi spazi tra le parole: qui lo forziamo a sinistra. */
.com-content-article__body .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))) > p:not(:has(img)),
.article-details .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))) > p:not(:has(img)) {
	flex: 1 1 0;
	min-width: 0;
	text-align: left !important;
}
.com-content-article__body .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))) img[style*="float"],
.article-details .row > [class*="col-md-12"]:has(> p > img[style*="float"]):not(:has(> p:nth-of-type(3))) img[style*="float"] {
	float: none !important;
	margin: 0 !important;
}
} /* @media min-width:992px */

/* 5d) IMPILAMENTO su mobile e tablet (<992px): i contenuti legacy hanno le
       immagini con float:left inline, quindi anche su schermi stretti il testo
       tentava di infilarsi ACCANTO all'immagine invece di andarci sotto. Qui
       togliamo il float e rendiamo l'immagine un blocco a se': risultato ->
       IMMAGINE SOPRA, TESTO SOTTO, come ci si aspetta da mobile. Vale per tutte
       le immagini flottate dei contenuti (non solo i blocchi hero), perche' su
       mobile impilare e' sempre il comportamento corretto. */
@media (max-width: 991.98px) {
	.com-content-article__body [class*="col-md-12"] > p > img[style*="float"],
	.com-content-article__body > p > img[style*="float"],
	.article-details [class*="col-md-12"] > p > img[style*="float"],
	.article-details .article-body > p > img[style*="float"] {
		float: none !important;
		display: block;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 1rem !important;
	}
	/* nei blocchi con immagine, testo a sinistra: il justify inline lasciava
	   spazi enormi tra le parole anche impilato su mobile. */
	.com-content-article__body [class*="col-md-12"]:has(> p > img[style*="float"]) > p,
	.article-details [class*="col-md-12"]:has(> p > img[style*="float"]) > p {
		text-align: left !important;
	}
}

/* 6) Modulo "iscriviti alla newsletter e seguici sui social" in cima alle
      pagine: i 4 bottoni (newsletter/Instagram/LinkedIn/Facebook) usano
      "d-grid ... d-md-flex". Da >=768px (d-md-flex) stanno in riga e piccoli;
      su MOBILE resta solo .d-grid -> bottoni impilati a piena larghezza (barre
      blu giganti) e la regola #4 (height:auto su #sp-component img) gonfia
      l'icona alla dimensione intrinseca del PNG (256px). Effetto collaterale:
      il layout-shift di quei bottoni enormi fa "scrollare da solo" verso l'alto.
      Su mobile forziamo il gruppo in riga con icone piccole 30px. Solo <768px:
      su desktop si lascia il comportamento originale (d-md-flex, allineato a dx). */
@media (max-width: 767.98px) {
	#sp-component .mod-custom .d-grid:has(a[href*="instagram"], a[href*="voxmail"], a[href*="linkedin"], a[href*="facebook"]) {
		display: flex !important;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: center;
	}
	#sp-component .mod-custom .d-grid:has(a[href*="instagram"], a[href*="voxmail"], a[href*="linkedin"], a[href*="facebook"]) .btn img {
		width: 30px !important;
		height: 30px !important;
		max-width: none !important;
	}
}

/* 7) Bottoni nei .button-container (es. "Contattaci" su Dove siamo, oltre ai CTA
      prodotto): il template li rende display:flex ma alcuni (classe div-toggler)
      restano con justify-content:normal -> il testo, pur avendo text-align:center
      inline, si allinea a SINISTRA perche' nel flex il text-align non centra gli
      item. Forziamo il centraggio del contenuto. I CTA prodotto sono gia' centrati
      quindi non cambiano. */
.com-content-article__body .button-container a,
.article-details .button-container a {
	justify-content: center !important;
	align-items: center !important;
	text-align: center;
}

/* 8) Voci di sinistra dei mega menu (Prodotti/Applicazioni): il template dava
      12px di padding verticale al link e, con l'icona da 32px, le voci risultavano
      alte e "ariose" (troppo spazio sopra/sotto). Riduciamo il padding verticale
      per voci piu' compatte. Solo desktop (>=992px): sotto e' il menu hamburger,
      altra struttura. Selettore per classe -> vale per entrambi i mega menu. */
@media (min-width: 992px) {
	.megadropdown .navtabs > .item > a {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
}

/* 9) Card dei moduli griglia prodotto (.elenco-prodotti / .f-patologie): le
      immagini sono forzate a un box fisso 303x150 e, con object-fit di default
      (fill), venivano DEFORMATE/schiacciate (un 400x400 stirato a 2:1). Con
      object-fit:cover riempiono il box mantenendo le proporzioni (leggero
      ritaglio, nessuna deformazione). Se si preferisce mostrare il prodotto
      intero senza ritaglio, usare 'contain' (lascia spazi ai lati). */
.elenco-prodotti img,
.f-patologie img {
	object-fit: cover;
}
/* 9b) Su MOBILE la card e' a piena larghezza ma l'immagine restava a larghezza
       fissa (~300px) e allineata a sinistra -> sembrava "scentrata". Su <768px
       facciamo riempire l'immagine alla card (centrata, prodotto intero). Il
       desktop resta con la griglia a immagini fisse. */
@media (max-width: 767.98px) {
	.elenco-prodotti img,
	.f-patologie img {
		width: 100% !important;
		height: auto !important;
	}
}

/* 10) Titoli dei riquadri (carosello categorie sopra l'hero, .bannerinnerswiper):
       erano a 30px fissi -> nelle card da ~266px i titoli lunghi (es. "Quantitative
       Sensory Testing (QST)") andavano a capo su 4 righe e diventavano troppo alti,
       specie a larghezze un po' ridotte. Font responsivo (clamp) che scende sui
       monitor stretti e limita l'altezza del titolo. */
.bannerinnerswiper .dataslidebox h1,
.bannerinnerswiper .dataslidebox h2,
.bannerinnerswiper .dataslidebox h3 {
	font-size: clamp(18px, 1.5vw, 28px) !important;
	line-height: 1.2 !important;
}

/* 11) Card "Corsi e congressi" (.corsidata) e "News e articoli" (.newshortdata):
       il titolo è sovrapposto in basso sull'immagine, ma i titoli lunghi si
       allungavano verso l'alto coprendo troppa immagine e "andando sopra" ad essa.
       Limitiamo il titolo a 2 righe con ellissi -> box uniforme, il testo non
       risale piu' sull'immagine. Il titolo completo resta nella pagina collegata. */
.corsidata h1, .corsidata h2, .corsidata h3, .corsidata h4,
.newshortdata h1, .newshortdata h2, .newshortdata h3, .newshortdata h4 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 12) Card "Corsi e congressi": le immagini avevano altezze diverse (proporzioni
       diverse) -> card disallineate; e il box titolo aveva min-height:150px che
       copriva ~73% dell'immagine. Uniformiamo l'altezza immagine (cards allineate)
       e togliamo il min-height del box, che cosi' si adatta al testo (titolo 2
       righe + data) e copre meno -> si vede molta piu' foto. */
.corsimainbox img {
	height: 210px !important;
	width: 100% !important;
	object-fit: cover !important;
}
.corsidata {
	min-height: 0 !important;
	height: auto !important;
}