/* ===========================================================================
   Regole GLOBALI moduli progetto
   =========================================================================== */
:root{
	/* larghezza elementi */
	--az-width-small: 40%;
	--az-width-medium: 60%;
	--az-width-large: 80%;
	--az-width-full: 100%;
	
  /* padding laterali (desktop / tablet / mobile) */
  --az-pad-desktop: 105px;
  --az-pad-tablet: 52px;
  --az-pad-mobile: 24px;

  /* gap base tra elementi interni ai moduli */
  --az-gap: 24px;
  
  /* spacing moduli */
  --az-spacing-extrasmall: 16px;
  --az-spacing-small: 24px;
  --az-spacing-medium: 32px;
  --az-spacing-large: 52px;
  --az-spacing-extralarge: 100px;
  
  /* layout moduli */
  --az-column-100: 1fr;
  --az-column-50-50: 1fr 1fr;
  --az-column-20-80: 1fr 3fr;
  --az-column-80-20: 3fr 1fr;
    --az-column-60-40: 2fr 1fr;
      --az-column-40-60: 1fr 2fr;
  
  /* posizionamenti in griglia */
  --az-grid-column-positioning-1: 1;
  --az-grid-column-positioning-2: 2;
}

/* wrapper di tutti i moduli reso in shortcode */
.az-progetto-moduli{
  display:block;
  padding-left: var(--az-pad-desktop);
  padding-right: var(--az-pad-desktop);
  margin-bottom: var(--az-spacing-small);
  margin-top: var(--az-spacing-small);
}
@media (max-width: 991.98px){
  .az-progetto-moduli{
    padding-left: var(--az-pad-tablet);
    padding-right: var(--az-pad-tablet);
  }
}
@media (max-width: 575.98px){
  .az-progetto-moduli{
    padding-left: var(--az-pad-mobile);
    padding-right: var(--az-pad-mobile);
  }
}

/* Tipografia paragrafo (vale per tutti i moduli) */
.az-mod{padding: calc(var(--az-spacing-small)/2) 0px}

.az-mod p{
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: var(--e-global-typography-text-font-size, 14px);
  font-weight: var(--e-global-typography-text-font-weight, 400);
  line-height: var(--e-global-typography-text-line-height, 1.6);
  letter-spacing: var(--e-global-typography-text-letter-spacing, 1);
  color: var(--e-global-color-text, #282726);
  margin:0px;
}

.az-mod__media,
.az-mod__content{
  min-width: 0;
  width: 80%;
      height: 100%;
    display: flex;
    align-items: flex-end;
   
}

.az-mod__content{ padding: var(--az-spacing-medium) 0px;}

.az-imgtext__body{
  height: 100%;
  display: flex;
  align-items: flex-end;
  
}

.az-mod figure,
.az-mod .az-mod__media{
  /* display:block; */
  width:100%;
  margin:0; /* niente extra-margini sul figure */
}

/* Se uno dei due manca, l'altro resta comunque nella sua colonna */
.az-mod__content.is-empty,
.az-mod__media.is-empty{
  visibility: hidden;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.az-mod img{
  display:block;
  width:100%;           /* adatta alla larghezza del figure */
  max-width:100%;
  height:auto;          /* altezza in base alla larghezza imposta */
  margin: 0px;    /* top & bottom 24, centrata orizzontalmente */
  object-fit: contain;  /* nessun crop */
}

.az-mod__video{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  outline:none;
}


@media (max-width: 991.98px){
  .az-mod .az-mod__content{
    margin-block: calc(var(--az-spacing-extralarge) - var(--az-spacing-small)); /* top & bottom = 100 */
    height: auto;
    padding: 0px;
    width: 100%;
  }
 }

/* ===========================================================================
   Modulo immagine 50 + testo 50 / Modulo testo 50 + immagine 50
   =========================================================================== */

.az-mod--imgtext-5050 .az-mod__inner, .az-mod--textimg-5050 .az-mod__inner{
  display: grid;
  grid-template-columns: var(--az-column-50-50); /* rapporto 50/50 */
  align-items: center;
  gap: var(--az-gap); /* lo spazio tra le due metà */
}


.az-mod--imgtext-5050 .az-mod__media,.az-mod--textimg-5050 .az-mod__media{ margin:0; }
.az-mod--imgtext-5050 .az-mod__img, .az-mod--textimg-5050 .az-mod__img{ width:100%; }

.az-mod--imgtext-5050 .az-mod__content{ grid-column: var(--az-grid-column-positioning-2); }
.az-mod--imgtext-5050 .az-mod__media{   grid-column: var(--az-grid-column-positioning-1); }

.az-mod--textimg-5050 .az-mod__content{ grid-column: var(--az-grid-column-positioning-1); }
.az-mod--textimg-5050 .az-mod__media{   grid-column: var(--az-grid-column-positioning-2); }


/* Spaziatura verticale dei blocchi di TESTO su tablet e mobile */
@media (max-width: 991.98px){
    .az-mod--imgtext-5050 .az-mod__inner, .az-mod--textimg-5050 .az-mod__inner{
	    display: block;
    grid-template-columns: var(--az-column-100); /* stack tablet+mobile */
  }
}


/* ===========================================================================
   Modulo testo 20 + immagine 80
   =========================================================================== */
/* Forza le posizioni nel 20/80 */
.az-mod--text20img80 .az-mod__inner{
  display: grid;
  grid-template-columns: var(--az-column-20-80); /* 20% / 80% */
  align-items: center;
  gap: var(--az-gap);
}

.az-mod--text20img80 .az-mod__content{ grid-column: var(--az-grid-column-positioning-1); }
.az-mod--text20img80 .az-mod__media{   grid-column: var(--az-grid-column-positioning-2); }


/* Stack su tablet/mobile (ordine naturale) */
@media (max-width: 991.98px){
  .az-mod--text20img80 .az-mod__inner{
    grid-template-columns: var(--az-column-100);
  }
  .az-mod--text20img80 .az-mod__content,
  .az-mod--text20img80 .az-mod__media{
    grid-column: 1; /* entrambi full width, uno sotto l'altro */
  }
}


/* ===========================================================================
   Modulo immagine 80 + testo 20
   =========================================================================== */
/* Forza le posizioni nel 20/80 */
.az-mod--img80text20 .az-mod__inner{
  display: grid;
  grid-template-columns: var(--az-column-80-20); /* 20% / 80% */
  align-items: center;
  gap: var(--az-gap);
}

.az-mod--img80text20 .media_sx{ grid-column: var(--az-grid-column-positioning-1); }
.az-mod--img80text20 .media_dx{   grid-column: var(--az-grid-column-positioning-2); }


/* Stack su tablet/mobile (ordine naturale) */
@media (max-width: 991.98px){
  .az-mod--img80text20 .az-mod__inner{
    grid-template-columns: var(--az-column-100);
  }
  .az-mod--img80text20 .az-mod__content,
  .az-mod--img80text20 .az-mod__media{
    grid-column: 1; /* entrambi full width, uno sotto l'altro */
  }
}


/* ===========================================================================
   Modulo immagine 50 + immagine 50
   =========================================================================== */
/* Forza le posizioni nel 20/80 */
.az-mod--img50img50 .az-mod__inner{
  display: grid;
  grid-template-columns: var(--az-column-50-50); /* 50% / 50% */
  align-items: center;
  gap: var(--az-gap);
}

.az-mod--img50img50 .media_sx{ grid-column: var(--az-grid-column-positioning-1); }
.az-mod--img50img50 .media_dx{   grid-column: var(--az-grid-column-positioning-2); }


/* Stack su tablet/mobile (ordine naturale) */
@media (max-width: 991.98px){
.az-mod--img50img50 .az-mod__inner{
  grid-template-columns: var(--az-column-100); /* 100% */
}	
	
  .az-mod--img50img50 .az-mod__content,
  .az-mod--img50img50 .az-mod__media{
    grid-column: 1; /* entrambi full width, uno sotto l'altro */
  }
}

/* ===========================================================================
   Modulo immagine 80 + immagine 20
   =========================================================================== */
/* Forza le posizioni nel 20/80 */
.az-mod--img80img20 .az-mod__inner{
  display: grid;
  grid-template-columns: var(--az-column-60-40); /* 80% / 20% */
  align-items: center;
  gap: var(--az-gap);
}

.az-mod--img80img20 .media_sx{ grid-column: var(--az-grid-column-positioning-1); }
.az-mod--img80img20 .media_dx{   grid-column: var(--az-grid-column-positioning-2); }


/* Stack su tablet/mobile (ordine naturale) */
@media (max-width: 991.98px){
.az-mod--img80img20 .az-mod__inner{
  grid-template-columns: var(--az-column-100); /* 100% */
}	

.az-mod--img80img20 .media_dx{padding: var(--az-spacing-extralarge);}
	
  .az-mod--img80img20 .az-mod__content,
  .az-mod--img80img20 .az-mod__media{
    grid-column: 1; /* entrambi full width, uno sotto l'altro */
  }
}


/* ===========================================================================
   Modulo immagine 20 + immagine 80
   =========================================================================== */
/* Forza le posizioni nel 20/80 */
.az-mod--img20img80 .az-mod__inner{
  display: grid;
  grid-template-columns: var(--az-column-40-60); /* 80% / 20% */
  align-items: center;
  gap: var(--az-gap);
}

.az-mod--img20img80 .media_sx{ grid-column: var(--az-grid-column-positioning-1); }
.az-mod--img20img80 .media_dx{   grid-column: var(--az-grid-column-positioning-2); }


/* Stack su tablet/mobile (ordine naturale) */
@media (max-width: 991.98px){
.az-mod--img20img80 .az-mod__inner{
  grid-template-columns: var(--az-column-100); /* 100% */
}	

.az-mod--img20img80 .media_sx{padding: var(--az-spacing-extralarge);}
	
  .az-mod--img20img80 .az-mod__content,
  .az-mod--img20img80 .az-mod__media{
    grid-column: 1; /* entrambi full width, uno sotto l'altro */
  }
}


/* ===========================================================================
   Modulo immagine 100
   =========================================================================== */
/* Forza le posizioni nel 20/80 */
.az-mod--img100 .az-mod__inner{
  display: grid;
  grid-template-columns: var(--az-column-100); /* 100% */
  align-items: center;
  gap: var(--az-gap);
}

.az-mod--img100 .az-mod__media{ grid-column: var(--az-grid-column-positioning-1); }
.media100 {height: 90dvh;}
.az-mod .media100 img{
    height: 90dvh;
        object-fit: cover;
}


/* Stack su tablet/mobile (ordine naturale) */
@media (max-width: 991.98px){
.az-mod--img100 .az-mod__inner{
  grid-template-columns: var(--az-column-100); /* 100% */
}	
	
  .az-mod--img100 .az-mod__content,
  .az-mod--img100 .az-mod__media{
    grid-column: 1; /* entrambi full width, uno sotto l'altro */
  }
}

/* ===========================================================================
   Modulo testo 100
   =========================================================================== */
.az-mod--text100 .az-mod__inner{
  display: grid;
  grid-template-columns: var(--az-column-100); /* 100% */
  align-items: center;
  gap: var(--az-gap);
}

.az-mod--text100 .az-mod__content{ grid-column: var(--az-grid-column-positioning-1); padding: var(--az-spacing-extralarge) 0px; margin: 0 auto; width: var(--az-width-medium);}
.az-mod--text100 .az-mod__content p{text-align: center;}

/* Stack su tablet/mobile (ordine naturale) */
@media (max-width: 991.98px){
  .az-mod--text100 .az-mod__inner{
    grid-template-columns: var(--az-column-100);
  }
  
  .az-mod--text100 .az-mod__content p{text-align: left;}
  .az-mod--text100 .az-mod__content{width: var(--az-width-full);}

  .az-mod--text100 .az-mod__content{
    grid-column: 1; /* entrambi full width, uno sotto l'altro */
  }
}

/* ===========================================================================
   Modulo immagine 50 + immagine 50
   =========================================================================== */
/* Forza le posizioni nel 20/80 */
.az-mod--text50text50 .az-mod__inner{
  display: grid;
  grid-template-columns: var(--az-column-50-50); /* 50% / 50% */
  align-items: center;
  gap: var(--az-gap);
}

.az-mod--text50text50 .content_sx{ grid-column: var(--az-grid-column-positioning-1); }
.az-mod--text50text50 .content_dx{   grid-column: var(--az-grid-column-positioning-2); }


/* Stack su tablet/mobile (ordine naturale) */
@media (max-width: 991.98px){
.az-mod--text50text50 .az-mod__inner{
  grid-template-columns: var(--az-column-100); /* 100% */
}	
	
  .az-mod--text50text50 .az-mod__content,
  .az-mod--text50text50 .az-mod__media{
    grid-column: 1; /* entrambi full width, uno sotto l'altro */
  }
}