.etj-sectors{
  /* ---- COLORI: globali del tema (Opzioni tema UiCore → Colori globali). Il valore dopo la virgola è solo di riserva. ---- */
  --etj-primary:var(--e-global-color-uicore_primary,#DC0711);        /* rosso: eyebrow, voce attiva, pulsanti */
  --etj-headline:var(--e-global-color-uicore_headline,#524E4A);      /* titolo e voci dell'elenco */
  --etj-text:var(--e-global-color-uicore_dark,#000000);              /* paragrafi; sfondo pulsanti al passaggio */
  --etj-white:var(--e-global-color-uicore_white,#FFFFFF);            /* box bianco, testo pulsanti */
  --etj-tint:var(--e-global-color-uicore_accent,rgba(67,91,210,.05));/* azzurrino: sfondo sezione e voce attiva */
  --etj-muted:var(--e-global-color-sepeqwp,#858585);                 /* numeri 01–05 */
  --etj-navy:var(--e-global-color-l7db7qc,#0F102A);                  /* fondo area immagine finché è vuota */
  --etj-line:var(--ui-border-color,#EBEBEB);                         /* righe tra le voci */

  --etj-radius:15px;      /* raggio del box bianco e dei pulsanti */
  --etj-radius-inner:10px;/* raggio del riquadro azzurrino della voce attiva */
  --etj-line-gap:5px;     /* distanza del riquadro azzurrino dalla riga sopra */
  --etj-speed:.2s;        /* durata transizioni (lineari) */
  --etj-pad:80px;         /* stesso margine interno dei container boxed del sito */

  container-type:inline-size;
  position:relative;
  overflow:hidden;
  background:var(--etj-tint);
  color:var(--etj-text);
  font-family:inherit;
  text-align:left;
}
.etj-sectors *,
.etj-sectors *::before,
.etj-sectors *::after{box-sizing:border-box;}

/* Dentro un container flex di Elementor il widget Shortcode prende la larghezza del suo contenuto, e questo blocco
   (che usa container-type) da solo non ne dichiara: senza questa regola il widget resta largo 0. */
.etj-sectors{width:100%;}
.elementor-widget-shortcode:has(.etj-sectors){width:100%;max-width:100%;}

.etj-sectors .etj-sectors__grid{
  display:grid;
  grid-template-columns:48% 52%;
  align-items:stretch;
  min-height:850px;
}

/* ---- colonna sinistra: allineata al bordo del contenuto boxed del sito (95% / max 1440px + 80px) ---- */
.etj-sectors .etj-sectors__left{
  position:relative;
  z-index:2;
  padding:80px 55px 80px 0;
  padding-left:calc((100vw - min(95vw,1440px)) / 2 + var(--etj-pad));
  padding-left:calc((100cqw - min(95cqw,1440px)) / 2 + var(--etj-pad));
}

/* eyebrow, titolo e paragrafo: stesse misure delle altre sezioni dello staging */
.etj-sectors .etj-sectors__eyebrow{
  display:block;
  margin:0 0 10px;
  color:var(--etj-primary);
  font-size:15px;
  font-weight:600;
  line-height:18px;
  letter-spacing:-0.405px;
  text-transform:uppercase;
}
.etj-sectors .etj-sectors__title{
  margin:0 0 20px;
  padding:0;
  color:var(--etj-headline);   /* dimensione, peso e interlinea arrivano dal titolo del tema (H1 di default, vedi tag_titolo) */
}
.etj-sectors p.etj-sectors__lead{
  margin:0;
  padding:0;
  color:var(--etj-text);       /* dimensione e interlinea arrivano dal paragrafo del tema */
}

/* ---- box bianco con l'elenco ---- */
.etj-sectors .etj-sectors__box{
  margin:30px 0 0;
  padding:15px;
  border-radius:var(--etj-radius);
  background:var(--etj-white);
}
.etj-sectors .etj-sectors__list{display:flex;flex-direction:column;}

/* ---- scroll interno: parte quando i settori sono più di quelli visibili (attributo visibili="5" dello shortcode).
        L'altezza esatta la calcola lo script e la scrive in --etj-list-max; 420px è solo la riserva. ---- */
.etj-sectors .etj-sectors__list.is-scrollable{
  --etj-list-peek:26px;        /* quanto si intravede della voce successiva, come invito a scorrere */
  position:relative;
  max-height:var(--etj-list-max,420px);
  margin-right:-10px;          /* la barra di scorrimento sta nel margine interno del box, le voci non si restringono */
  padding-right:10px;
  overflow-x:hidden;
  overflow-y:auto;
  overflow-anchor:none;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--etj-muted) transparent;
}
.etj-sectors .etj-sectors__list.is-scrollable .etj-sectors__row{flex:0 0 auto;}
.etj-sectors .etj-sectors__list.is-scrollable::-webkit-scrollbar{width:6px;}
.etj-sectors .etj-sectors__list.is-scrollable::-webkit-scrollbar-track{background:transparent;}
.etj-sectors .etj-sectors__list.is-scrollable::-webkit-scrollbar-thumb{border-radius:6px;background:var(--etj-muted);}
/* sfumatura in basso finché ci sono altre voci da scorrere */
.etj-sectors .etj-sectors__list.is-scrollable:not(.is-at-end){
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent 100%);
}
.etj-sectors .etj-sectors__row{
  padding:0 15px;
  border-bottom:1px solid var(--etj-line);
  background-color:transparent;
  margin-top:0;
  transition:background-color var(--etj-speed) linear, margin-top var(--etj-speed) linear;
}
.etj-sectors .etj-sectors__row:last-child{border-bottom-color:transparent;}
.etj-sectors .etj-sectors__row.is-active{
  border-bottom-color:transparent;
  border-radius:var(--etj-radius-inner);
  background-color:var(--etj-tint);
}
.etj-sectors .etj-sectors__row.is-active:not(:first-child){margin-top:var(--etj-line-gap);}

.etj-sectors button.etj-sectors__tab,
.etj-sectors button.etj-sectors__tab:hover,
.etj-sectors button.etj-sectors__tab:focus{
  -webkit-appearance:none;
  appearance:none;
  display:flex;
  align-items:center;
  gap:17px;
  width:100%;
  margin:0;
  padding:19px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--etj-headline);
  font-family:inherit;
  font-size:var(--uicore-typography--h5-s,18px);
  font-weight:var(--uicore-typography--h5-w,700);
  line-height:1.2;
  letter-spacing:-0.027em;
  text-align:left;
  text-transform:none;
  text-decoration:none;
  cursor:pointer;
  transform:none;
  transition:color var(--etj-speed) linear;
  -webkit-tap-highlight-color:transparent;
}
.etj-sectors button.etj-sectors__tab[aria-selected="true"]{color:var(--etj-primary);}
.etj-sectors button.etj-sectors__tab:focus{outline:none;}
.etj-sectors button.etj-sectors__tab:focus-visible{outline:2px solid var(--etj-primary);outline-offset:-2px;border-radius:8px;}
.etj-sectors .etj-sectors__num{
  flex:0 0 20px;
  color:var(--etj-muted);
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:normal;
  transition:color var(--etj-speed) linear;
}
.etj-sectors button.etj-sectors__tab[aria-selected="true"] .etj-sectors__num{color:var(--etj-primary);}

/* dettaglio della voce: si apre e si chiude in altezza, senza scatto */
.etj-sectors .etj-sectors__detail{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  visibility:hidden;
  transition:grid-template-rows var(--etj-speed) linear, opacity var(--etj-speed) linear, visibility 0s linear var(--etj-speed);
}
.etj-sectors .etj-sectors__row.is-active .etj-sectors__detail{
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
.etj-sectors .etj-sectors__detail-clip{min-height:0;overflow:hidden;}
.etj-sectors .etj-sectors__detail-body{padding:0 0 20px 37px;}
.etj-sectors .etj-sectors__detail-body p{
  margin:0 0 16px;
  padding:0;
  color:var(--etj-text);
}

/* ---- pulsanti: come i pulsanti Elementor del sito ---- */
.etj-sectors a.etj-sectors__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border:2px solid var(--etj-primary);
  border-radius:var(--etj-radius);
  background:var(--etj-primary);
  color:var(--etj-white);
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1;
  letter-spacing:normal;
  text-decoration:none;
  text-transform:none;
  transition:background-color .3s, border-color .3s, color .3s;
}
.etj-sectors a.etj-sectors__btn:hover,
.etj-sectors a.etj-sectors__btn:focus-visible{
  border-color:var(--etj-text);
  background:var(--etj-text);
  color:var(--etj-white);
}
.etj-sectors a.etj-sectors__btn:focus-visible{outline:2px solid var(--etj-primary);outline-offset:2px;}
.etj-sectors a.etj-sectors__btn--sm{padding:10px 20px;font-size:15px;}
.etj-sectors a.etj-sectors__all{margin-top:40px;gap:10px;}   /* 10px tra testo e freccia */
.etj-sectors svg.etj-sectors__btn-icon{                      /* Font Awesome solid "arrow-right", come sui pulsanti del sito */
  flex:0 0 auto;
  width:1em;
  height:1em;
  fill:currentColor;
}

/* ---- colonna destra: immagini sovrapposte dentro la sagoma curva ---- */
.etj-sectors .etj-sectors__panel{
  position:relative;
  min-width:0;
  min-height:100%;
  overflow:hidden;
  background:var(--etj-navy);
  -webkit-clip-path:url(#etj-sectors-curve);
  clip-path:url(#etj-sectors-curve);
}
.etj-sectors img.etj-sectors__img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  border:0;
  border-radius:0;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity var(--etj-speed) linear;
}
.etj-sectors img.etj-sectors__img.is-active{opacity:1;}
/* carosello: dissolvenza più lenta di quella delle voci */
.etj-sectors [data-etj-carousel] img.etj-sectors__img{transition:opacity var(--etj-fade,.8s) linear;}
.etj-sectors img.etj-sectors__img:not([src]),
.etj-sectors img.etj-sectors__img[src=""]{visibility:hidden;}  /* finché l'URL è vuoto resta il fondo */

/* ---- tablet e mobile: prima la colonna dei settori, sotto l'immagine con la sagoma ---- */
@media (max-width:1024px){
  .etj-sectors{--etj-pad:40px;}
  .etj-sectors .etj-sectors__grid{display:flex;flex-direction:column;min-height:0;}
  .etj-sectors .etj-sectors__left{
    padding-top:60px;
    padding-bottom:40px;
    padding-right:calc((100vw - min(95vw,1440px)) / 2 + var(--etj-pad));
    padding-right:calc((100cqw - min(95cqw,1440px)) / 2 + var(--etj-pad));
  }
  .etj-sectors .etj-sectors__panel{
    min-height:480px;
    -webkit-clip-path:url(#etj-sectors-curve-top);
    clip-path:url(#etj-sectors-curve-top);
  }
}

/* ---- solo mobile ---- */
@media (max-width:767px){
  .etj-sectors{--etj-pad:20px;}
  .etj-sectors .etj-sectors__left{padding-top:50px;padding-bottom:35px;}
  .etj-sectors .etj-sectors__box{margin-top:25px;}
  .etj-sectors a.etj-sectors__all{margin-top:30px;}
  .etj-sectors .etj-sectors__panel{min-height:380px;}
}

@media (prefers-reduced-motion:reduce){
  .etj-sectors{--etj-speed:0s;--etj-fade:0s;}
  .etj-sectors a.etj-sectors__btn{transition:none;}
}