/*
 * LabService - i contenuti convertiti da WPBakery e Muffin.
 *
 * Il convertitore scrive elementi di Elementor con queste classi: sezioni,
 * righe e colonne con le stesse larghezze di prima, e i pezzi ricorrenti
 * (riquadri, righe con pulsante, loghi, griglie di articoli). I valori
 * vengono dagli stili calcolati della produzione, letti il 24/09/2026.
 */

/* --------------------------------------------------------- Elementor 4 */

/* Gli stili di base dei blocchi atomici stanno in un @layer (inc/elementor.php)
   e perdono contro ".e-con { display: var(--display) }" di Elementor, che per
   i blocchi atomici non ha la variabile: senza queste due righe diventavano
   "inline", e sezioni e colonne perdevano padding e larghezza. */
.e-flexbox-base {
	--display: flex;
}

.e-div-block-base {
	--display: block;
}

/* Il padding di partenza di .e-con (10px da --container-default-padding-*)
   non c'era nel sito: blocchi e sezioni partono da zero, come in BeTheme. */
.e-flexbox-base,
.e-div-block-base {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
}

/* ---------------------------------------------------------------- sezioni */

/* Una sezione: il contenuto largo come la griglia di BeTheme. */
.ls-sezione {
	width: 100%;
	padding-block: 40px 10px;
	/* La griglia di BeTheme (1220px) con le colonne rientrate di 12px. */
	padding-inline: max(20px, calc((100% - var(--ls-contenitore)) / 2 + 12px));
}

/* Le righe di WPBakery: niente padding di partenza (lo davano i loro stili
   vc_custom), 30px sopra la prima come il #Content di BeTheme, e 35px sotto
   ogni testo come .wpb_content_element. */
.ls-sezione--vc {
	padding-block: 0;
}

/* In WPBakery tra una colonna e l'altra ci sono 30px (15px per lato). */
.ls-sezione--vc .ls-riga {
	--ls-spazio-colonne: 30px;
}

/* Il #Content di BeTheme aveva 30px sopra: vale per la prima sezione di ogni
   pagina (non per i riquadri della home, che salgono sull'apertura). */
.elementor > .ls-sezione:first-child:not(.ls-riquadri-home) {
	margin-top: 30px;
}

.ls-sezione--vc .elementor-widget-text-editor {
	margin-bottom: 35px;
}

/* WPBakery: l'ultimo elemento di un testo senza margine sotto (.wpb_text_column :last-child). */
.ls-sezione--vc .elementor-widget-text-editor > :last-child {
	margin-bottom: 0;
}

/* In WPBakery lo spazio lo davano i pezzi (35px sotto i testi), non le colonne. */
.ls-sezione--vc .ls-col {
	margin-bottom: 0;
}

/* Le classi di BeTheme rimaste nei testi: il colore del tema e l'evidenziato. */
.themecolor {
	color: var(--ls-accento);
}

.ls-evidenza {
	padding: 0 5px;
	background: var(--ls-accento);
	color: #fff;
}

/* Il pulsante "ESPLORA" dei riquadri sta sopra il link che copre il riquadro. */
.ls-riquadro__pulsante {
	position: relative;
	z-index: 1;
	margin-top: 20px;
}

/* Le classi "nascondi" del CSS personalizzato di BeTheme: nei Contatti
   nascondevano colonne e righe (le regioni dei commerciali) senza toglierle. */
.customHideThis,
.customHideRow {
	display: none !important;
}

/* La riga di una voce quando non e' la forma "testo + Vai" (un gruppo, o una
   voce con un secondo pulsante): stessa linea sotto. */
.ls-riga.customRowContainer {
	margin-bottom: 35px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ededed;
}

/* Le righe "stretch" di WPBakery: lo sfondo prende tutta la larghezza. */
.ls-sezione--piena {
	padding-inline: 0;
}

/* ------------------------------------------------------- righe e colonne */

/* Le colonne di prima: una frazione della riga, con 2% di spazio tra una e
   l'altra. La formula tiene conto dello spazio, cosi' 3/4 + 1/4 fanno una
   riga intera come in WPBakery. Sotto i 768px ogni colonna va a capo. */
.ls-riga {
	--ls-spazio-colonne: 2%;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--ls-spazio-colonne);
	padding: 0;
	width: 100%;
}

.ls-col {
	--ls-w: 1;
	flex: 0 0 calc(var(--ls-w) * (100% + var(--ls-spazio-colonne)) - var(--ls-spazio-colonne));
	min-width: 0;
	padding: 0;
	margin-bottom: 30px;
}

.ls-col--1-1 { --ls-w: 1; }
.ls-col--5-6 { --ls-w: 0.8333; }
.ls-col--3-4 { --ls-w: 0.75; }
.ls-col--2-3 { --ls-w: 0.6667; }
.ls-col--3-5 { --ls-w: 0.6; }
.ls-col--1-2 { --ls-w: 0.5; }
.ls-col--2-5 { --ls-w: 0.4; }
.ls-col--1-3 { --ls-w: 0.3333; }
.ls-col--1-4 { --ls-w: 0.25; }
.ls-col--1-5 { --ls-w: 0.2; }
.ls-col--1-6 { --ls-w: 0.1667; }

@media (max-width: 767px) {
	.ls-col {
		flex-basis: 100%;
	}
}

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

.ls-testo--centro {
	text-align: center;
}

.ls-testo--destra {
	text-align: right;
}

.ls-allinea--centro {
	display: flex;
	justify-content: center;
}

.ls-allinea--destra {
	display: flex;
	justify-content: flex-end;
}

/* Lo spazio vuoto di BeTheme ([divider height="20"]). */
.ls-spazio {
	display: block;
	width: 100%;
}

/* Il separatore di Muffin: una linea sottile, arancione se "colore del tema". */
.ls-separatore {
	width: 100%;
	height: 0;
	margin-block: 20px;
	border-top: 1px solid var(--ls-linea);
}

.ls-separatore--tema {
	border-top-color: var(--ls-accento);
}

/* Le liste con la spunta di BeTheme (ul.list_check, li.list_check dentro
   ul.list_mixed): 10px sopra e sotto ogni voce, e in list_mixed una linea
   sottile tra una voce e l'altra. */
.ls-spunta,
.list_check li,
li.list_check {
	position: relative;
	margin: 0;
	padding: 10px 0 10px 30px;
	list-style: none;
}

.list_check,
.list_mixed {
	margin-left: 0 !important;
	padding-left: 0;
	list-style: none;
}

.list_mixed > li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ls-spunta::before,
.list_check li::before,
li.list_check::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 15px;
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--ls-titoli);
	border-bottom: 2px solid var(--ls-titoli);
	transform: rotate(45deg);
}

.ls-titolo-decorato {
	position: relative;
	padding-bottom: 20px;
	text-align: center;
}

.ls-titolo-decorato--linea::after {
	content: "";
	display: block;
	width: 80px;
	height: 3px;
	margin: 15px auto 0;
	background: var(--ls-accento);
}

/* --------------------------------------------------------------- pulsanti */

/* Il pulsante "warning" di WPBakery com'era sul sito: trasparente, bordo
   arancio-giallo da 2px, testo arancione in grassetto. */
a.ls-pulsante.ls-pulsante--linea,
.ls-pulsante--linea {
	padding: 14px 20px;
	border: 2px solid #ff9900;
	background: transparent;
	color: var(--ls-accento);
	font-size: 14px;
	font-weight: 700;
}

a.ls-pulsante.ls-pulsante--linea:hover,
.ls-pulsante--linea:hover {
	border-color: #ff9900;
	background: #ff9900;
	color: #fff;
}

/* L'unico pulsante verde (la demo di Clarity), "success" in WPBakery. */
a.ls-pulsante.ls-pulsante--verde,
.ls-pulsante--verde {
	background: #6dab3c;
	color: #fff;
}

a.ls-pulsante.ls-pulsante--verde:hover,
.ls-pulsante--verde:hover {
	background: #5a9331;
	color: #fff;
}

a.ls-pulsante.ls-pulsante--grande,
.ls-pulsante.ls-pulsante--grande {
	padding: 18px 30px;
	font-size: 17px;
	font-weight: 700;
}

.ls-pulsante--blocco {
	display: block;
	width: 100%;
	text-align: center;
}

/* --------------------------------------------------- componente: riquadro */

/* Il riquadro "hover color" di Muffin: bianco, al passaggio del mouse
   azzurro chiaro. Tutto il riquadro e' il link. */
/* I riquadri della home: nella sezione "no-margin-h" di Muffin le colonne
   stanno attaccate; il pulsante in fondo, alla stessa altezza in tutti. */
.no-margin-h .ls-riga {
	--ls-spazio-colonne: 0px;
}

.ls-riquadro > .ls-riquadro__pulsante {
	margin-top: auto;
}

.ls-riquadro {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 40px 30px;
	background: #fff;
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.ls-riquadro:hover {
	background: #d5eef4;
	text-decoration: none;
}

.ls-riquadro__icona img,
img.ls-riquadro__icona {
	max-height: 80px;
	width: auto;
	margin: 0 auto 15px;
}

.ls-riquadro__titolo {
	margin-bottom: 15px;
	font-size: var(--ls-h4-size);
	line-height: var(--ls-h4-lh);
	font-weight: var(--ls-h4-peso);
	color: var(--ls-titoli);
}

.ls-riquadro__testo {
	font-size: 14px;
	line-height: 23px;
	color: #9baebb;
}

/* I riquadri della home: salgono sulla foto della testata, con i bordi
   azzurri di prima (CSS personalizzato di BeTheme, #homepage_boxes). */
.ls-riquadri-home .ls-riquadro {
	border-bottom: 2px solid #cdd7dd;
	border-right: 1px solid #e4ecee;
}

.ls-riquadri-home .ls-col:first-child .ls-riquadro {
	border-left: 1px solid #e4ecee;
}

.ls-riquadri-home .ls-riquadro:hover {
	border-bottom-color: #59bed7;
}

@media (min-width: 768px) {
	.ls-riquadri-home {
		position: relative;
		z-index: 20;
		margin-top: -100px;
	}
}

/* ------------------------------------------ componente: riga con pulsante */

/* Le righe di Strumenti e delle famiglie: testo a sinistra, "Vai" a destra,
   una linea grigia sotto (customRowContainer). */
.ls-riga-pulsante {
	display: flex;
	align-items: flex-start;
	gap: 2%;
	margin-bottom: 35px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ededed;
}

.ls-riga-pulsante__testo {
	flex: 1 1 auto;
	min-width: 0;
}

.ls-riga-pulsante__testo p:last-child,
.ls-sezione--vc .ls-riga-pulsante__testo .elementor-widget-text-editor {
	margin-bottom: 0;
}

/* Le classi delle voci di Strumenti in WPBakery (CSS personalizzato di BeTheme):
   voce e titolo di un gruppo in grassetto, sottovoce normale.
   Con .elementor-widget: l'Editor di testo prende il peso dal Kit (post-N.css). */
.ls-riga-pulsante__voce,
.customRow,
.customSubrowParent,
.elementor-widget.customRow,
.elementor-widget.customSubrowParent {
	font-weight: 700;
}

.ls-riga-pulsante__azione {
	flex: 0 0 24.5%;
}

.ls-riga-pulsante__azione .ls-pulsante {
	display: block;
	width: 100%;
	text-align: center;
}

@media (max-width: 767px) {
	.ls-riga-pulsante {
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
	}
}

/* ------------------------------------------------------- vetrina e card */

.ls-vetrina {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--ls-titoli);
	color: #fff;
	text-decoration: none;
}

.ls-vetrina img {
	display: block;
	width: 100%;
	opacity: 0.7;
	transition: transform 0.4s ease;
}

.ls-vetrina:hover img {
	transform: scale(1.05);
}

.ls-vetrina__testi {
	padding: 20px;
}

.ls-vetrina__occhiello {
	margin: 0 0 5px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.8);
}

.ls-vetrina__titolo {
	margin: 0;
	color: #fff;
}

.ls-card {
	height: 100%;
	padding: 25px;
	background: #fff;
	border: 1px solid var(--ls-linea);
}

/* ------------------------------------------------------ griglia articoli */

.ls-articoli {
	display: grid;
	grid-template-columns: repeat(var(--ls-articoli-colonne, 2), minmax(0, 1fr));
	gap: 30px;
}

@media (max-width: 767px) {
	.ls-articoli {
		grid-template-columns: 1fr;
	}
}

.ls-articoli__voce {
	display: flex;
	flex-direction: column;
	gap: 15px;
	background: #fff;
}

.ls-articoli__testo {
	padding: 20px 20px 0;
}

.ls-articoli__titolo {
	font-size: 20px;
	line-height: 26px;
}

.ls-articoli__titolo a {
	color: var(--ls-titoli);
}

.ls-articoli__data {
	font-size: 13px;
	color: var(--ls-nota);
}

.ls-articoli__immagine img {
	display: block;
	width: 100%;
}

/* Il carosello della home: quattro per volta, gli altri scorrendo di lato. */
.ls-articoli--carosello {
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-auto-columns: calc((100% - 3 * 30px) / 4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 10px;
}

.ls-articoli--carosello .ls-articoli__voce {
	gap: 0;
	background: none;
	scroll-snap-align: start;
}

.ls-articoli--carosello .ls-articoli__immagine img {
	aspect-ratio: 960 / 750;
	object-fit: cover;
}

.ls-articoli--carosello .ls-articoli__data {
	margin: 15px 0 5px;
	font-size: 12px;
	color: var(--ls-nota);
}

.ls-articoli--carosello .ls-articoli__titolo {
	font-size: var(--ls-h4-size);
	line-height: var(--ls-h4-lh);
	font-weight: var(--ls-h4-peso);
}

@media (max-width: 767px) {
	.ls-articoli--carosello {
		grid-template-columns: none;
		grid-auto-columns: 80%;
	}
}

/* ---------------------------------------------------------- loghi clienti */

/* Come i "clients" di Muffin: celle alte 75px, il logo al massimo 55px. */
.ls-clienti {
	display: grid;
	grid-template-columns: repeat(var(--ls-clienti-per-riga, 5), minmax(0, 1fr));
	gap: 20px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
}

@media (max-width: 767px) {
	.ls-clienti {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ls-clienti__voce,
.ls-clienti__voce a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 75px;
}

.ls-clienti__voce {
	padding: 10px 15px;
}

.ls-clienti__voce img {
	max-height: 55px;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Il riquadro e' cliccabile tutto: il link del titolo si allarga su tutta la
   superficie. Un blocco-link intero dentro un componente non si poteva
   rendere diverso per ogni istanza, il link del titolo si'. */
.ls-riquadro {
	position: relative;
}

.ls-riquadro__titolo a {
	color: inherit;
	text-decoration: none;
}

.ls-riquadro__titolo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ls-grigio img,
img.ls-grigio {
	filter: grayscale(1);
}

.ls-testo--giustificato {
	text-align: justify;
}

/* ------------------------------------------------------------------ moduli */

/* I moduli di Contact Form 7. Le classi "column one-second / one" le usavano
   con la griglia di BeTheme: qui una griglia a due colonne, come il modulo di
   form.weevo.it che il modulo Contatti sostituisce. */
.wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
}

.wpcf7-form p {
	margin: 0;
}

.wpcf7-form > *,
.wpcf7-form .column.one,
.wpcf7-form .wpcf7-response-output {
	grid-column: 1 / -1;
}

.wpcf7-form > .column.one-second {
	grid-column: auto;
}

.wpcf7-form > p:empty,
.wpcf7-form > br,
.wpcf7-form > .hidden-fields-container {
	display: none;
}

@media (max-width: 767px) {
	.wpcf7-form {
		grid-template-columns: 1fr;
	}
}

.wpcf7-form label {
	display: block;
	font-size: 13px;
	color: var(--ls-titoli);
}

/* Il modulo Contatti riprende quello di form.weevo.it: etichette in grassetto
   e pulsante centrato. Gli altri moduli come in BeTheme. */
[id^="wpcf7-f5-"] .wpcf7-form label {
	font-weight: 700;
}

[id^="wpcf7-f5-"] .wpcf7-form .column.one:has(input[type="submit"]) {
	text-align: center;
}

.wpcf7-form input:not([type="checkbox"], [type="radio"], [type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 9px 12px;
	border: 1px solid var(--ls-linea);
	border-radius: var(--ls-raggio);
	background: #fff;
	font: inherit;
	font-weight: 400;
	color: var(--ls-testo);
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: 2px solid var(--ls-accento);
	outline-offset: 0;
	border-color: var(--ls-accento);
}

.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox {
	font-size: 13px;
}

.wpcf7-form input[type="submit"] {
	padding: 12px 20px;
	border: 0;
	border-radius: var(--ls-raggio);
	background: var(--ls-accento);
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
	background: var(--ls-accento-scuro);
}

/* Contact Form 7 lo disattiva finche' non si accetta la privacy: sbiadito. */
.wpcf7-form input[type="submit"]:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Il campo trappola dell'antispam (inc/moduli.php): fuori dallo schermo. */
.wpcf7-form .ls-trappola {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------- timeline */

/* La storia dell'azienda (timeline di Muffin): una linea verticale con un
   pallino arancione per tappa. Sui telefoni tutto a destra della linea; dai
   768px le tappe si alternano, con l'anno dall'altra parte sopra un riquadro
   rigato, come in BeTheme. */
.ls-timeline {
	position: relative;
	margin: 0;
	padding: 9px 0 0;
	list-style: none;
}

.ls-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 31px;
	width: 1px;
	background: var(--ls-linea);
}

.ls-timeline__voce {
	position: relative;
	margin: 0;
	padding: 0 0 25px 80px;
}

.ls-timeline__voce::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 24px;
	width: 7px;
	height: 7px;
	border: 4px solid var(--ls-accento);
	border-radius: 50%;
	background: var(--ls-fondo);
}

.ls-timeline__anno {
	margin: 0 0 5px;
	font-family: var(--ls-font-testo);
	font-size: 30px;
	line-height: 35px;
	color: var(--ls-titoli);
}

.ls-timeline__titolo {
	margin: 0 0 15px;
	font-size: 30px;
	line-height: 35px;
	font-weight: 300;
}

.ls-timeline__testo {
	font-size: 15px;
	line-height: 23px;
}

@media (min-width: 768px) {
	.ls-timeline::before {
		left: 50%;
	}

	.ls-timeline__voce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
		padding: 0 0 40px;
	}

	.ls-timeline__voce::before {
		left: calc(50% - 7px);
	}

	.ls-timeline__anno,
	.ls-timeline__corpo {
		grid-row: 1;
	}

	/* Il riquadro rigato sotto l'anno. */
	.ls-timeline__anno::after {
		content: "";
		display: block;
		height: calc(100% - 55px);
		min-height: 60px;
		margin-top: 20px;
		background: repeating-linear-gradient(-45deg, #f2f2f2 0 2px, transparent 2px 6px);
	}

	.ls-timeline__voce:nth-child(odd) .ls-timeline__anno {
		grid-column: 1;
		text-align: right;
	}

	.ls-timeline__voce:nth-child(odd) .ls-timeline__corpo {
		grid-column: 3;
	}

	.ls-timeline__voce:nth-child(even) .ls-timeline__corpo {
		grid-column: 1;
		text-align: right;
	}

	.ls-timeline__voce:nth-child(even) .ls-timeline__anno {
		grid-column: 3;
	}
}


/* --------------------------------------------------------------- pulsanti */

/* I colori dei pulsanti di WPBakery fuori dalle pagine Strumenti: "warning"
   e' l'ambra, "grey" il grigio; staccati da quello che segue di 22px. */
a.ls-pulsante.ls-pulsante--ambra,
.ls-pulsante--ambra {
	background: #ffa319;
	color: #fff;
}

a.ls-pulsante.ls-pulsante--ambra:hover,
.ls-pulsante--ambra:hover {
	background: #f59200;
	color: #fff;
}

a.ls-pulsante.ls-pulsante--grigio,
.ls-pulsante--grigio {
	background: #ebebeb;
	color: #666;
}

.ls-pulsante--vc {
	margin-bottom: 22px;
}

/* Il triangolo davanti ai titoli dei link ([icon type="icon-googleplay"]). */
.ls-triangolo {
	color: #000;
}

/* ---------------------------------------------------------------- immagini */

/* L'immagine di Elementor 4 esce sempre intera: la misura scelta in WPBakery
   o in Muffin diventa una larghezza massima. */
/* img.… per battere ".elementor img { max-width: 100% }" di Elementor. Come
   in WordPress la misura e' un riquadro: non si ingrandisce mai. */
img.ls-img--thumbnail { max-width: min(150px, 100%); max-height: 150px; }
img.ls-img--medium { max-width: min(300px, 100%); max-height: 300px; }
img.ls-img--large { max-width: min(1024px, 100%); max-height: 1024px; }

img.ls-img--thumbnail,
img.ls-img--medium,
img.ls-img--large {
	width: auto;
	height: auto;
}

/* Il titolo dei blocchi immagine e video di WPBakery (wpb_heading). */
.ls-titolo-blocco {
	margin-bottom: 15px;
}

/* Il video di YouTube in un riquadro 16:9. */
.ls-video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: 35px;
}

.ls-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* L'hoverbox di WPBakery: l'immagine sbiadita con il titolo sopra; al
   passaggio del mouse il retro con testo e pulsante. */
.ls-hoverbox {
	position: relative;
	display: grid;
	overflow: hidden;
}

.ls-hoverbox > * {
	grid-area: 1 / 1;
}

.ls-hoverbox__immagine {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

.ls-hoverbox__titolo {
	align-self: center;
	margin: 0;
	padding: 20px;
	text-align: center;
}

.ls-hoverbox__retro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 15px;
	padding: 20px;
	background: rgba(252, 252, 252, 0.95);
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ls-hoverbox:hover .ls-hoverbox__retro,
.ls-hoverbox:focus-within .ls-hoverbox__retro {
	opacity: 1;
}

/* ------------------------------------------------- articoli: stile classico */

/* Il blog "classic" di BeTheme: immagine incorniciata a sinistra, titolo
   grande e sottile, riassunto, "Leggi tutto" a destra. */
.ls-articoli--classico {
	display: block;
}

.ls-classico {
	display: grid;
	grid-template-columns: 36% minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-bottom: 40px;
	background: none;
}

.ls-classico__immagine img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 440 / 325;
	object-fit: contain;
	object-position: left top;
	border: 1px solid var(--ls-linea);
	background: #fff;
}

.ls-classico__titolo {
	margin: 0 0 15px;
	font-size: 40px;
	line-height: 44px;
	font-weight: 300;
}

.ls-classico__titolo a {
	color: var(--ls-titoli);
}

.ls-classico__altro {
	display: block;
	padding-top: 10px;
	border-top: 1px solid var(--ls-linea);
	color: var(--ls-nota);
	text-align: right;
}

@media (max-width: 767px) {
	.ls-classico {
		grid-template-columns: 1fr;
		gap: 15px;
	}
}

/* --------------------------------------------------- articoli: le tessere */

/* La griglia "basicGrid_TextFirst" di WPBakery: tessere quadrate grigio
   scuro; al passaggio del mouse compare l'immagine dell'articolo. */
.ls-articoli--tessere .ls-articoli__voce {
	display: block;
	aspect-ratio: 1;
	background: #2d2d2d var(--ls-foto, none) center / cover no-repeat;
}

.ls-articoli__tessera {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 0 15px;
	background: #2d2d2d;
	color: #fff;
	text-decoration: none;
	transition: opacity 0.4s ease;
}

.ls-articoli__tessera:hover {
	opacity: 0;
	text-decoration: none;
}

.ls-articoli--tessere .ls-articoli__titolo {
	font-family: var(--ls-font-titoli-piccoli);
	font-size: 24px;
	line-height: 1.3;
	font-weight: 300;
	color: #fff;
}

.ls-articoli__linea {
	display: block;
	width: 50%;
	margin: 20px 0;
	border-top: 2px solid #fff;
}

.ls-articoli--tessere .ls-articoli__estratto {
	font-size: 15px;
	line-height: 23px;
	color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------ gli archivi */

/* /news/ e le categorie: elenco a sinistra, barra laterale a destra. */
.ls-archivio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: 40px;
}

@media (max-width: 1023px) {
	.ls-archivio {
		grid-template-columns: 1fr;
	}
}

.ls-archivio__titoletto {
	font-size: 24px;
	line-height: 25px;
}

.ls-archivio__laterale .search-form {
	margin-bottom: 20px;
}

.ls-archivio__laterale input[type="search"] {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--ls-linea);
	border-radius: var(--ls-raggio);
}

.ls-archivio__categorie {
	margin: 0;
	padding: 15px 20px;
	list-style: none;
	background: var(--ls-accento);
}

.ls-archivio__categorie li {
	padding: 6px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.ls-archivio__categorie a {
	color: #fff;
}

/* Le pagine numerate a quadratini di BeTheme. */
.ls-archivio .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 20px;
}

.ls-archivio .page-numbers {
	display: inline-block;
	min-width: 36px;
	padding: 6px 10px;
	border-radius: var(--ls-raggio);
	background: #f7f7f7;
	color: var(--ls-testo);
	text-align: center;
}

.ls-archivio .page-numbers.current {
	background: var(--ls-accento);
	color: #fff;
}

/* -------------------------------------------- elenchi con icona di BeTheme */

/* [list icon="icon-check" title="Prezzo"]: spunta arancione grande a
   sinistra, titolo e testo a destra (testo a 18px, CSS delle pagine Knauer). */
.ls-lista {
	display: flex;
	gap: 20px;
	margin-bottom: 45px;
}

.ls-lista__icona {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	transform: scale(1.2);
}

.ls-lista__icona::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 3px;
	width: 13px;
	height: 26px;
	border-right: 5px solid var(--ls-accento);
	border-bottom: 5px solid var(--ls-accento);
	transform: rotate(45deg);
}

.ls-lista__corpo {
	padding-top: 12px;
}

.ls-lista__titolo {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 26px;
}

.ls-lista__testo,
.ls-lista__testo p {
	font-size: 18px;
}

/* feature_box di Muffin: immagine a sinistra, testo a destra, senza bordo. */
.ls-affiancato {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 5px 20px;
	align-items: start;
}

.ls-affiancato > :first-child {
	grid-row: span 2;
	max-width: 170px;
}

/* ----------------------------------------------- timeline: come BeTheme */

.ls-timeline__voce::before {
	background: var(--ls-fondo);
}

.ls-timeline__testo {
	line-height: 31px;
	background-image: repeating-linear-gradient(transparent 0 30px, #ececec 30px 31px);
}

/* I loghi dei partner stanno in tessere grigio chiaro con un'ombra leggera
   (clients di Muffin), 20px l'una dall'altra. */
.ls-clienti {
	gap: 20px;
}

.ls-clienti__voce {
	background: transparent;
}

/* La ricerca nella barra laterale degli archivi. */
.ls-archivio__laterale .search-form {
	display: flex;
	gap: 5px;
}

.ls-archivio__laterale .search-form label {
	flex: 1;
}

.ls-archivio__laterale .search-submit {
	padding: 9px 12px;
	border: 0;
	border-radius: var(--ls-raggio);
	background: var(--ls-pulsante);
	color: var(--ls-pulsante-testo);
	cursor: pointer;
}

/* La riga con pulsante come le colonne 3/4 + 1/4 di WPBakery: 30px tra le
   due, il pulsante largo quanto la colonna da 1/4 (200px, non 220). */
.ls-riga-pulsante {
	gap: 30px;
}

.ls-riga-pulsante__azione {
	flex: 0 0 calc((100% + 30px) / 4 - 30px);
}

/* Le sezioni "dark" di Muffin: i titoli bianchi, anche quelli arancioni. */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .themecolor {
	color: #fff;
}

/* I riquadri della home arrivano fino al bordo della griglia. */
.ls-sezione.ls-riquadri-home {
	padding-inline: max(20px, calc((100% - var(--ls-contenitore)) / 2));
}

/* Il modulo Contatti: pulsante pieno in maiuscolo, come form.weevo.it. */
[id^="wpcf7-f5-"] .wpcf7-form input[type="submit"] {
	font-weight: 700;
	text-transform: uppercase;
}

[id^="wpcf7-f5-"] .wpcf7-form input[type="submit"]:disabled {
	opacity: 1;
}

/* Timeline: il pallino con due trattini ai lati sulla linea. */
.ls-timeline__titolo {
	margin-bottom: 5px;
}

@media (min-width: 768px) {
	.ls-timeline__voce {
		padding-bottom: 25px;
	}

	.ls-timeline__voce::after {
		content: "";
		position: absolute;
		top: 17px;
		left: calc(50% - 20px);
		width: 40px;
		border-top: 1px solid var(--ls-accento);
	}

	.ls-timeline__voce::before {
		z-index: 1;
	}
}

/* Le didascalie delle immagini di BeTheme ([image caption=""]). */
.ls-figura {
	margin: 0 0 15px;
}

.ls-figura figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--ls-nota);
}