/* Modulo con Reusable Block - mobile first */

.mod-res-block {
	background-color: var(--color-beige-ultra-light);
	padding: 50px 20px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	margin-top: 50px;
}

/* se è in blocco content default width annullo i padding e i margin*/
.g-cols.content-default-width .mod-res-block {
    padding: 0;
    margin:0;
}

.mod-res-block-title {
	margin: 0 0 24px 0;
}

.mod-res-block-subtitle {
	margin: 0 0 24px 0;
}
.mod-res-block-content {
	display: flex;
	flex-direction: column; /* mobile: blocco sempre in alto */
	gap: 24px;
}

.mod-res-block-at-none .mod-res-block-content {
	flex-direction: column; /* nessun blocco: solo contenuto */
}

.mod-res-block-blocco,
.mod-res-block-txt {
	min-width: 0;
}

.mod-res-block-blocco img {
	transform: scale(1.1);
}

/* Mobile: contenuto scrollabile oltre 350px */
.mod-res-block-txt {
	max-height: 350px;
	overflow-y: auto;
    padding-right: 20px;
    width: calc(100% + 10px);
}

/*stile scrollbar*/
/* Chrome/Safari/Edge — scrollbar a 2px */
.mod-res-block-txt::-webkit-scrollbar {
    width: 2px;
}
/* the progress bar of the scrollbar. */
.mod-res-block-txt::-webkit-scrollbar-track {
    background: var(--color-testa-di-moro-25);
    border-radius: 30px;
    /*border-right:2px solid #fff;
    border-left:2px solid #fff;*/
}
/* the draggable scrolling handle */
.mod-res-block-txt::-webkit-scrollbar-thumb {
	background: var(--color-testa-di-moro);
	border-radius: 30px;
} 

/* Firefox e browser che non supportano ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
	.mod-res-block-txt {
		scrollbar-width: thin;
		scrollbar-color: var(--color-testa-di-moro) var(--color-testa-di-moro-25);
	}
}

@media (max-width: 768px) {
    /*colonne stacked sempre da mobile*/
    .mod-res-block {
        box-shadow: 150px 0 var(--color-beige-ultra-light), -150px 0 var(--color-beige-ultra-light);
    }
}

@media (min-width:769px) and (max-width: 991px) {
    /*ombra solo se il modulo è in colonna da 12 - full width*/
    .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper > .mod-res-block {
        box-shadow: 150px 0 var(--color-beige-ultra-light), -150px 0 var(--color-beige-ultra-light);
    }
}


/* Desktop: layout secondo la posizione scelta */
@media (min-width: 992px) {
    .mod-res-block {
        padding: 70px;
    }

	.mod-res-block-txt {
		max-height: none;
		overflow-y: visible;
        width: 100%;
	}

	/* Default desktop (vale per top/bottom: in colonna è ininfluente) */
	.mod-res-block-blocco,
	.mod-res-block-txt {
		flex: 1 1 0;
	}

	/* Posizione laterale: blocco fisso a 1/3, contenuto prende il resto */
	.mod-res-block-at-left  .mod-res-block-blocco,
	.mod-res-block-at-right .mod-res-block-blocco {
		flex: 0 0 calc((100% - 24px) / 3);
	}
	.mod-res-block-at-left  .mod-res-block-txt,
	.mod-res-block-at-right .mod-res-block-txt {
		flex: 1 1 0;
	}

	.mod-res-block-at-left   .mod-res-block-content { flex-direction: row; gap:40px; }
	.mod-res-block-at-right  .mod-res-block-content { flex-direction: row-reverse; gap:40px; }
	.mod-res-block-at-top    .mod-res-block-content,
	.mod-res-block-at-bottom .mod-res-block-content { flex-direction: column; }	
}
@media (min-width: 1025px) {
    .mod-res-block {
        padding: 90px;
    }
    
    /*attivo separazione colonne*/
    .mod-res-block-txt-cols-2 { column-count: 2; column-gap: 24px; }
    
    /*il testo a 3 colonne è possibile solo quando disegno è sopra o sotto (altrimenti si stringe troppo!)*/
	.mod-res-block-txt-cols-3 { column-count: 3; column-gap: 24px; }
    .mod-res-block-at-left .mod-res-block-txt-cols-3 { column-count: 2; }
    .mod-res-block-at-right .mod-res-block-txt-cols-3 { column-count: 2; }
    
	/* Se dentro il content ci sono elementi alti (immagini grandi, blocchi con
	   display: flex, ecc.) il bilanciamento delle colonne può dare risultati
	   strani. Se capita, aggiungere break-inside: avoid; su immagini e blocchi
	   figli per evitare che vengano spezzati a metà. */ 
}
@media (min-width: 1367px) {
    .mod-res-block-txt-cols-2 { column-gap: 48px; }    
	.mod-res-block-txt-cols-3 { column-gap: 48px; }
}