/* =====================================================================
   UPDATES.CSS
   Stili aggiuntivi per: sezione clienti (nastro a scorrimento continuo)
   e gallerie progetti/render (sostituiscono i vecchi swiper a scheda).
   File separato dal tema originale per isolare le modifiche ed essere
   facilmente individuabile/rimovibile in futuro.
   ===================================================================== */

/* ---------- CLIENTS MARQUEE ---------- */

.clients-marquee-wrap{
	width:100%;
	height:100%;
	max-width:1100px;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.clients-marquee-wrap h3{
	text-align:center;
	font-size:45px;
	line-height:45px;
	margin-bottom:16px;
	font-weight:700;
}

.clients-marquee-wrap p.sub{
	text-align:center;
	color:rgba(255,255,255,.6);
	font-size:16px;
	max-width:480px;
	margin:0 auto 50px;
}

.marquee-track{
	overflow:hidden;
	mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	margin-bottom:36px;
}
.marquee-track:last-child{ margin-bottom:0; }

.marquee-row{
	display:flex;
	width:max-content;
	gap:60px;
	align-items:center;
}

.marquee-row img{
	height:32px;
	width:auto;
	max-width:140px;
	object-fit:contain;
	filter:grayscale(1) invert(1);
	opacity:.55;
	transition:opacity .35s ease, filter .35s ease;
	user-select:none;
}
.marquee-row img:hover{
	opacity:1;
	filter:none;
}

.marquee-track.dir-left .marquee-row{
	animation:marqueeLeft 38s linear infinite;
}
.marquee-track.dir-right .marquee-row{
	animation:marqueeRight 34s linear infinite;
}
.marquee-track:hover .marquee-row{
	animation-play-state:paused;
}
@keyframes marqueeLeft{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}
@keyframes marqueeRight{
	from{ transform:translateX(-50%); }
	to{ transform:translateX(0); }
}

/* ---------- PORTFOLIO / RENDER GALLERIES ---------- */
/* Sostituisce .swiper.swiper-portfolio come "slot" nel flex del genitore
   .portfolio, quindi mantiene le stesse dimensioni (100% x 100vh). */

.modern-gallery-slot{
	width:100%;
	height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:relative;
}

.modern-gallery{
	display:flex;
	gap:28px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	padding:10px 250px 26px 60px;
	scrollbar-width:none;
}
.modern-gallery::-webkit-scrollbar{ display:none; }

.modern-gallery .g-card{
	scroll-snap-align:start;
	flex:0 0 auto;
	width:380px;
	border-radius:16px;
	overflow:hidden;
	background:#151515;
	border:1px solid #232323;
	transition:transform .3s ease, border-color .3s ease;
	text-decoration:none;
	color:#fff;
	display:block;
}
.modern-gallery .g-card:hover{
	transform:translateY(-6px);
	border-color:#333;
}

.modern-gallery .g-thumb{
	height:250px;
	overflow:hidden;
	position:relative;
}
.modern-gallery .g-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}
.modern-gallery .g-card:hover .g-thumb img{
	transform:scale(1.06);
}
.modern-gallery .g-tag{
	position:absolute;
	top:16px;
	left:16px;
	background:rgba(11,11,11,.72);
	color:#3fd370;
	font-size:12px;
	padding:5px 12px;
	border-radius:20px;
	border:1px solid rgba(1,157,61,.45);
}

.modern-gallery .g-thumb.icon-thumb{
	display:flex;
	align-items:center;
	justify-content:center;
	background:#1a1a1a;
}
.modern-gallery .g-thumb.icon-thumb img{
	width:96px;
	height:96px;
	flex:none;
}
.modern-gallery .g-card:hover .g-thumb.icon-thumb img{
	transform:scale(1.08);
}
.modern-gallery .g-play{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
}
.modern-gallery .g-play span{
	width:56px;
	height:56px;
	border-radius:50%;
	background:rgba(1,157,61,.85);
	display:flex;
	align-items:center;
	justify-content:center;
}
.modern-gallery .g-play svg{ width:20px; height:20px; margin-left:3px; }

.modern-gallery .g-body{
	padding:22px 24px 26px;
}
.modern-gallery .g-body h4{
	font-size:19px;
	font-weight:600;
	margin:0 0 10px;
	font-family:'Livvic', sans-serif;
}
.modern-gallery .g-body p{
	font-size:14px;
	line-height:1.55;
	color:rgba(255,255,255,.6);
	margin:0 0 16px;
}
.modern-gallery .g-link{
	font-size:13px;
	color:#fff;
	display:inline-flex;
	align-items:center;
	gap:6px;
	border-bottom:1px solid #019d3d;
	padding-bottom:3px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
	.modern-gallery-slot{
		height:auto;
		padding:70px 0;
	}

	/* Sul sito, sotto i 1024px, lo scorrimento di pagina torna verticale
	   (su desktop invece è orizzontale): le gallerie qui sotto seguono
	   la stessa logica, diventando elenchi verticali di card impilate,
	   invece di righe con scorrimento orizzontale al loro interno. */
	.modern-gallery{
		display:block;
		overflow-x:visible;
		overflow-y:visible;
		scroll-snap-type:none;
		padding:10px 24px 0;
	}
	.modern-gallery .g-card{
		width:100%;
		margin-bottom:22px;
	}
	.modern-gallery .g-card:last-child{
		margin-bottom:0;
	}

	/* I titoli dei pannelli (Approfondisci, Alcuni render, Sicurezza e
	   ambiente...) su desktop sono verticali e a capo singolo; su mobile
	   tornano orizzontali ma ereditavano ancora "white-space:nowrap" dal
	   tema, che li faceva uscire dal bordo sui titoli più lunghi. */
	.custom-title h3{
		white-space:normal;
		padding:0 24px;
	}

	.clients-marquee-wrap h3{ font-size:32px; line-height:1.2; }
}
@media (max-width:600px){
	.modern-gallery .g-thumb{ height:190px; }
}

/* ---------- FIX: email spostata subito dopo il menu, non più all'estrema
   destra dove ora si trova il selettore lingua ---------- */
header .header-inner{
	justify-content: flex-start !important;
}
header .header-inner .mail{
	margin-left: 40px;
}

/* ---------- FIX: indirizzo nel footer/copyright non deve restare su una riga sola ---------- */
.copyright-address{
	white-space: normal !important;
	max-width: 260px;
	line-height: 1.4 !important;
}

.contact .boxes > div > div p {
	max-width: 260px;
	white-space: normal;
	word-wrap: break-word;
}

.info-panel{
	display:flex;
	gap:18px;
	align-items:flex-start;
	background:#151515;
	border:1px solid #232323;
	border-radius:14px;
	padding:24px 26px;
	margin:28px 0;
}
.info-panel .info-icon{
	width:50px;
	height:50px;
	border-radius:50%;
	background:#019d3d;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:none;
}
.info-panel .info-icon i{
	color:#fff;
	font-size:20px;
}
.info-panel .info-body h4{
	margin:0 0 10px;
	font-size:18px;
	font-weight:600;
	color:#fff;
}
.info-panel .info-body p{
	margin:0;
	font-size:15px;
	line-height:1.6;
	color:rgba(255,255,255,.75);
}
@media (max-width:600px){
	.info-panel{ flex-direction:column; }
}