/* =========================================================================
   PSQ - correzioni responsive (mobile)
   Questo file viene caricato per ultimo (vedi PublicShellHeadAssets.razor),
   quindi può sovrascrivere tema Porto e demo senza modificarli.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Homepage / sezione finale "Competenza e professionalità."
   La scritta-watermark di ".custom-el-9" è in "white-space: nowrap" e, con il
   font-size in clamp(), esce dal viewport: allargava il documento a 441px su
   uno schermo da 360px (413px di testo a 28px). Il taglio è già previsto dal
   tema ("text-overflow: ellipsis"), ma senza "overflow" il testo non veniva
   contenuto. Chiudendolo qui l'elemento decorativo non genera più overflow.
   ------------------------------------------------------------------------- */
.custom-el-9 {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Utility responsive mancante: come ".border-radius-2" (16px = var(--border-radius2x))
   ma applicata solo da lg in su. Serve ai box colorati a piena larghezza su mobile.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.border-radius-lg-2 {
		border-radius: var(--border-radius2x) !important;
	}
}

@media (max-width: 991.98px) {

	/* ---------------------------------------------------------------------
	   Galleria "Chi siamo" (4 foto)
	   Il tema la realizza come 4 colonne flex ("flex: 1") alte 415px: su un
	   telefono ogni foto finisce larga 45-53px, quindi diventano 4 strisce
	   verticali in cui non si riconosce nulla. Sotto lg la si trasforma in
	   una normale griglia 2x2 con le immagini in "object-fit: cover".
	   --------------------------------------------------------------------- */
	.custom-gallery-1 {
		flex-wrap: wrap;
		gap: 12px;
	}

	.custom-gallery-1 > div,
	.custom-gallery-1 > div:hover {
		flex: 0 0 calc(50% - 6px);
		height: 150px;
	}

	.custom-gallery-1 > div img {
		position: static;
		transform: none;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---------------------------------------------------------------------
	   Sezione "Cosa dicono i nostri clienti"
	   Le 3 stelle decorative sono in posizione assoluta (right 8% / top 15%)
	   e su desktop stanno nello spazio vuoto a destra del titolo. Su mobile
	   quello spazio non esiste: finivano sopra l'h2 e il paragrafo
	   introduttivo. Sotto lg si nascondono.
	   --------------------------------------------------------------------- */
	.custom-el-8 {
		display: none;
	}

	/* Sotto lg le frecce del carosello sono nascoste dal tema e i dots erano
	   disattivati ("dots: false"): si vedeva solo la 1a testimonianza e nulla
	   indicava che ce ne fossero altre 2. I dots sono ora attivati nel markup
	   e stilizzati qui per essere ben visibili. */
	.custom-owl-carousel-1 .owl-dots {
		margin-top: 24px !important;
	}

	.custom-owl-carousel-1 .owl-dots .owl-dot span {
		width: 10px;
		height: 10px;
		margin: 5px 5px;
		background-color: var(--grey-600);
	}

	.custom-owl-carousel-1 .owl-dots .owl-dot.active span,
	.custom-owl-carousel-1 .owl-dots .owl-dot:hover span {
		background-color: var(--primary);
	}

	/* ---------------------------------------------------------------------
	   Card dei 4 tab della home (Formazione / Analisi / Servizi / Consulenza).
	   Lo scope .custom-el-1 serve a non toccare gli altri .tabs del sito.
	   --------------------------------------------------------------------- */

	/* Il tema mette la barra dei tab SOTTO il pannello, e il pannello è alto
	   ~630px: toccando una tab la parte che cambia restava fuori dallo
	   schermo. Sotto lg la barra va sopra il pannello ("order"), come nella
	   convenzione mobile; su desktop non cambia nulla. */
	.custom-el-1 .tabs {
		display: flex;
		flex-direction: column;
	}

	.custom-el-1 .tabs > .nav-tabs {
		order: 0;
		border-top: 0 !important;
		border-bottom: 1px solid var(--grey-400);
		padding-top: 0 !important;
		padding-bottom: 1rem;
		margin-bottom: 1.5rem;
	}

	.custom-el-1 .tabs > .tab-content {
		order: 1;
		border-radius: 4px;
	}

	/* Etichette della barra tab più compatte (erano text-5 = 1.5em, ~19.5px). */
	.custom-el-1 .tabs > .nav-tabs .nav-link {
		font-size: 1.2em !important;
		padding-top: .55rem;
		padding-bottom: .55rem;
	}

	/* Le icone avevano text-5, cioè 1.5em *rispetto al link*: con il font del
	   link ridotto andavano ricalcolate sullo stesso corpo del testo. */
	.custom-el-1 .tabs > .nav-tabs .nav-link i {
		font-size: 1em !important;
		top: 4px !important; /* il markup ha "top-8", tarato sul font grande */
	}

	/* Cerchi decorativi: 150+180px con -40px di sovrapposizione occupavano
	   290px su ~270px disponibili, sforando il pannello da entrambi i lati.
	   Ridotti e riportati dentro il pannello. */
	.custom-el-1 .custom-el-2 {
		width: 120px;
		height: 120px;
		min-width: 120px;
		min-height: 120px;
	}

	.custom-el-1 .custom-el-3 {
		width: 150px;
		height: 150px;
		min-width: 150px;
		min-height: 150px;
		margin-left: -34px;
		margin-top: -12px;
		/* L'icona decorativa interna è 110x110: nel cerchio ridotto sbordava
		   sotto il bordo. Il clip la riporta dentro il cerchio. */
		overflow: hidden;
	}

	/* ...ma il "check" decorativo (un segno di spunta al 30% di opacità) a
	   110px in un cerchio da 150px risulta tagliato a metà e sembra un difetto:
	   su mobile lo si toglie, resta la didascalia. */
	.custom-el-1 .custom-el-3 > .p-absolute > span.p-absolute {
		display: none;
	}

	/* La didascalia dentro il cerchio grande era larga solo 90px (metà
	   cerchio: "left: 50%" + larghezza shrink-to-fit) e andava a capo su 5
	   righe strettissime, sbordando dal cerchio. */
	.custom-el-1 .custom-el-3 > .p-absolute {
		width: 86%;
		font-size: 13px;
		line-height: 1.35;
	}

	/* In 3 pannelli su 4 la didascalia ha ".line-height-1" (troppo stretta
	   su più righe). */
	.custom-el-1 .custom-el-3 > .p-absolute .line-height-1 {
		line-height: 1.35 !important;
	}
}

/* -------------------------------------------------------------------------
   Card delle news: il riquadro della data è decorativo e sta sopra al
   "::after" di .stretched-link, creando una zona non cliccabile. Lo si fa
   attraversare dai click, così tutta la card è cliccabile.
   ------------------------------------------------------------------------- */
#news .post-date {
	pointer-events: none;
}

@media (min-width: 992px) {
	.custom-owl-carousel-1 .owl-dots {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Galleria "Chi siamo" - altezza foto nella fascia tablet. Va DOPO il blocco
   max-width:991.98px qui sopra: stessa specificità, vince l'ultima regola.
   Con 2 colonne da ~350px le foto a 150px diventano strisce orizzontali.
   ------------------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991.98px) {
	.custom-gallery-1 > div,
	.custom-gallery-1 > div:hover {
		height: 220px;
	}
}

/* -------------------------------------------------------------------------
   Home - immagine decorativa della hero (bg-2.png ... bg-7.png).
   Il click che la fa scorrere è in js/custom.js: qui solo l'affordance.
   ------------------------------------------------------------------------- */
.psq-bg-cycle {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.psq-bg-cycle:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -4px;
}

/* =========================================================================
   HEADER - navigazione principale (vale per tutto il sito).
   Le 7 voci non stanno su una riga fra 992px e ~1459px: al menu servono
   793px (725px sotto i 1200px) mentre il container ne mette a disposizione
   736px (616px sotto i 1200px). Il risultato era che "Notizie" andava a capo
   e usciva di ~105px sotto l'header, finendo sopra la hero.
   Si riducono le spaziature SOLO in quella fascia; da 1460px il container
   passa a 1420px e le spaziature tornano quelle del tema.
   ========================================================================= */

/* Fascia 992-1199px: container 960px, servono ~110px in meno. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	/* "theme.css" mette margin-left: 2px su ogni voce */
	#header .header-nav-main nav > ul > li {
		margin-left: 0;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a {
		padding: 0 .1rem;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a span {
		padding: 10px 10px;
	}

	/* Il caret del dropdown sta dentro il padding destro dello span:
	   padding-right - gap di 5px. Va riallineato insieme al padding. */
	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) a span {
		padding-right: 28px;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) a.dropdown-toggle:after {
		margin-left: -23px;
	}
}

/* Fascia 1200-1459px: container 1140px, servono ~57px in meno. */
@media (min-width: 1200px) and (max-width: 1459.98px) {
	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a {
		padding: 0 .25rem;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a span {
		padding: 10px 16px;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) a span {
		padding-right: 31px;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) a.dropdown-toggle:after {
		margin-left: -26px;
	}
}