/* =========================================================
   TAB CHI SIAMO — CSS COMPLETO (pills + indicator che scorre)
   REQUISITI:
   - barra grigia arrotondata
   - nessun padding sulla barra e sui tab (indicator attaccato ai bordi)
   - effetto "stisciata" fluida: indicator che scivola
   - colore tab non attive = colore tema della tab attiva (variabile)
   - pannelli: solo 1 visibile alla volta
   ========================================================= */

/* ====== BASE / VARIABILI ====== */
.tabcs-wrap{
  width: 100%;

  --tabcs-tabs-bg: #DCDEE1;        /* grigio barra label */
  --tabcs-theme: #1e00c3;          /* aggiornato via JS quando cambi tab */
  --tabcs-inactive-color: #1e00c3; /* uguale al tema corrente */
}

/* ====== TABS BAR (NO PADDING, indicator attaccato ai bordi) ====== */
.tabcs-tabs{
  display: flex;
  align-items: stretch;            /* i bottoni occupano tutta l’altezza */
  justify-content: space-between;
  gap: 0;                          /* tab attaccate */

  background: var(--tabcs-tabs-bg);
  border-radius: 999px;

  padding: 0;                      /* ✅ nessun padding */
  position: relative;
  overflow: hidden;                /* indicator resta dentro la pill */
  z-index: 2;

  height: 50px;                    /* ✅ altezza barra: regola se serve */
}

/* Indicator che “scivola” (stisciata) */
.tabcs-indicator{
  position: absolute;
  top: 0;                          /* ✅ attaccato ai bordi */
  left: 0;                         /* ✅ attaccato ai bordi */
  height: 100%;                    /* ✅ piena altezza */
  width: 0px;
  border-radius: 999px;

  background: var(--tabcs-theme);
  opacity: 0;

  transform: translateX(0);

  transition:
    transform 420ms cubic-bezier(.22,.61,.36,1),
    width 420ms cubic-bezier(.22,.61,.36,1),
    background-color 240ms linear,
    opacity 120ms linear;

  z-index: 0;
}

/* init senza animazione (evita “salto” al primo render) */
.tabcs-indicator.is-skip{
  transition: none !important;
}

/* Tab button: NO PADDING, centratura via flex */
.tabcs-tab{
  flex: 1;
  text-align: center;

  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  font-weight: 700;
  font-size: 20px;
  line-height: 1;

  padding: 0;                      /* ✅ nessun padding */
  margin: 0;

  height: 100%;                    /* ✅ piena altezza della barra */
  border-radius: 999px;

  /* ✅ regola colore: non attive = tema corrente */
  color: var(--tabcs-inactive-color);
  opacity: 1;

  position: relative;
  z-index: 1;                      /* sopra l’indicator */

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tab attiva: solo testo bianco (background lo fa l’indicator) */
.tabcs-tab.is-active{
  color: #fff;
  background: transparent;
}

/* ====== PANELS ====== */
.tabcs-panels{
  margin-top: 14px;
}

/* Un solo pannello visibile */
.tabcs-panel{
  display: none !important;
  color: #fff;

  border-radius: 25px;
  overflow: hidden;

  position: relative;
  height: 500px;

  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;

  /* transizione pannello (morbida) */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.tabcs-panel.is-active{
  display: block !important;
  opacity: 1;
  transform: translateY(0);
}

/* forza testo bianco (temi WP spesso sovrascrivono h/p) */
.tabcs-panel,
.tabcs-panel *{
  color: #fff;
}

.tabcs-panel__inner{
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 18px;
  padding: 0;
  height: 100%;
  align-items: center;
}

.tabcs-title{
  margin: 0 0 14px 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
}

.tabcs-copy{
  padding: 42px 44px;  /* qui metti il padding che avevi prima */
  height: 100%;        /* ✅ così si allunga in verticale */
  display: flex;
  flex-direction: column;
  justify-content: center; /* testo centrato verticalmente come mockup */
}


.tabcs-desc{
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.92;
  max-width: 100%;
}

.tabcs-desc p{
  margin: 0 0 10px 0;
}

/* colonna destra solo per “respiro” sull'immagine */
.tabcs-media{
  min-height: 170px;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 900px){
  .tabcs-tabs{
    height: 48px;                 /* barra più bassa su mobile */
  }

  .tabcs-tab{
    font-size: 14px;
  }

  .tabcs-panel__inner{
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }

  .tabcs-panel{
    background-position: center bottom;
    background-size: cover;
    height: auto;
    min-height: 420px;
  }

  .tabcs-title{
    font-size: 26px;
  }
}

/* Nasconde l’indicator finché non è pronto (evita “blob” iniziale) */
.tabcs-wrap:not(.is-ready) .tabcs-indicator{
  opacity: 0 !important;
  width: 0 !important;
  transform: translateX(0) !important;
}

/* Quando pronto, lo facciamo vedere (width/transform li imposta il JS) */
.tabcs-wrap.is-ready .tabcs-indicator{
  opacity: 1;
}

/* Colonna destra: contenitore immagine */
.tabcs-media{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* spinge a destra */
  pointer-events: none;
}
/* Immagine: blend screen */
.tabcs-media__img{
  width: 130% !important;
  max-width: 130% !important;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 1;
  display: block;
  position: relative;
  right: -50px;
  bottom: -40px;
}



@media (max-width: 767px){
.tabcs-copy {
    padding: 42px 10px;
  }
  .tabcs-tabs{
    justify-content: flex-start;   /* non più space-between */
    overflow: auto;              /* ✅ abilita scroll orizzontale */
    white-space: nowrap;
   margin-bottom: 1rem;
	  	background: transparent;
   scrollbar-color: #1e00c3 #f1f1f1;
  }

 

  .tabcs-tab{
    flex: 0 0 auto;                /* ✅ larghezza automatica */
    padding: 0 22px;               /* spazio interno ora necessario */
    font-size: 14px;
  }

  /* Indicator continua a funzionare */
  .tabcs-indicator{
    border-radius: 999px;
  }

}