/* Jenia Tabs — layout 2 colonne con hover + scroll driven switching. */

.jenia-tabs {
  --jew-tabs-icon-size: 192px;
  --jew-tabs-icon-gap: 20px;  /* distanza fra icone e dot/linea */
  --jew-tabs-line-thick: 1px; /* spessore linea (asse gestito per breakpoint) */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 60px;
  min-height: 520px;
  width: 100%;
  box-sizing: border-box;
}

/* ============ Titoli ============ */
.jenia-tabs__titles {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* spaziatura uniforme sull'altezza totale */
  align-items: flex-start;
  gap: 10px;
}

.jenia-tabs__title {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  transition:
    color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.45s ease,
    opacity 0.45s ease;
  position: relative;
  line-height: 1.2;
  font-weight: 600;
}

.jenia-tabs__title:hover {
  color: rgba(255, 255, 255, 0.75);
}

.jenia-tabs__title.is-active {
  color: #ffffff;
  transform: translateX(4px);
}

/* Focus visibile per accessibilità */
.jenia-tabs__title:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============ Stage (colonna destra) ============ */
.jenia-tabs__stage {
  position: relative;
  height: 100%;
  min-height: inherit;
  display: block;
}

/* Linea verticale fissa: va dal primo dot al secondo,
   con uno stacco di --jew-tabs-icon-gap dalle icone. */
.jenia-tabs__line {
  position: absolute;
  left: 50%;
  top: calc(var(--jew-tabs-icon-size) + var(--jew-tabs-icon-gap));
  bottom: calc(var(--jew-tabs-icon-size) + var(--jew-tabs-icon-gap));
  width: var(--jew-tabs-line-thick);
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.9;
}

/* Dot in cima e in fondo alla linea */
.jenia-tabs__dot {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

.jenia-tabs__dot--top    { top: calc(var(--jew-tabs-icon-size) + var(--jew-tabs-icon-gap)); }
.jenia-tabs__dot--bottom { top: calc(100% - var(--jew-tabs-icon-size) - var(--jew-tabs-icon-gap)); }

/* ============ Pannelli (le immagini per singola tab) ============ */
.jenia-tabs__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.jenia-tabs__panel.is-active {
  opacity: 1;
}

/* Icone: top in alto, bottom in basso, centrati orizzontalmente */
.jenia-tabs__icon {
  position: absolute;
  left: 50%;
  width: var(--jew-tabs-icon-size);
  height: var(--jew-tabs-icon-size);
  object-fit: contain;
  transform: translate(-50%, 0) translateY(0);
  transition:
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
  z-index: 2;
  opacity: 0;
}

.jenia-tabs__icon--top {
  top: 0;
  transform: translate(-50%, -14px);
}

.jenia-tabs__icon--bottom {
  bottom: 0;
  transform: translate(-50%, 14px);
}

/* Stato attivo: icone in posizione finale + opacità piena */
.jenia-tabs__panel.is-active .jenia-tabs__icon--top {
  transform: translate(-50%, 0);
  opacity: 1;
}

.jenia-tabs__panel.is-active .jenia-tabs__icon--bottom {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ============ Mobile — Opzione B: stage orizzontale ============
   Le due icone passano da verticale (top/bottom) a orizzontale
   (sinistra/destra), con la linea orizzontale al centro.
   Sotto, la lista dei titoli come scroll-driver. */
@media (max-width: 767px) {
  /* NB: !important qui è intenzionale. I controlli Elementor iniettano
     regole con selettore {{WRAPPER}} .jenia-tabs che hanno specificity
     (0,2,0) — più alta della stylesheet — e sovrascriverebbero i
     breakpoint mobile altrimenti. */
  .jenia-tabs {
    --jew-tabs-icon-size: 96px;      /* icone più compatte su mobile */
    --jew-tabs-icon-gap: 16px;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .jenia-tabs__titles {
    justify-content: flex-start;
    gap: 16px;
    order: 1;
  }

  /* Stage: alto solo quanto un'icona, a tutta larghezza */
  .jenia-tabs__stage {
    order: 0;
    height: var(--jew-tabs-icon-size);
    min-height: var(--jew-tabs-icon-size);
    width: 100%;
    overflow: hidden; /* safety: nessuna icona deborda */
  }

  /* Linea orizzontale a mezza altezza, fra le due icone */
  .jenia-tabs__line {
    top: 50%;
    bottom: auto;
    left: calc(var(--jew-tabs-icon-size) + var(--jew-tabs-icon-gap));
    right: calc(var(--jew-tabs-icon-size) + var(--jew-tabs-icon-gap));
    width: auto;
    height: var(--jew-tabs-line-thick);
    transform: translateY(-50%);
  }

  /* Dot agli estremi orizzontali della linea */
  .jenia-tabs__dot--top {
    top: 50%;
    left: calc(var(--jew-tabs-icon-size) + var(--jew-tabs-icon-gap));
    transform: translate(-50%, -50%);
  }
  .jenia-tabs__dot--bottom {
    top: 50%;
    left: auto;
    right: calc(var(--jew-tabs-icon-size) + var(--jew-tabs-icon-gap));
    transform: translate(50%, -50%);
  }

  /* Icone: la "top" diventa sinistra, la "bottom" diventa destra.
     Stessa grammatica di crossfade + micro-slide, solo asse ruotato. */
  .jenia-tabs__icon {
    left: auto; /* neutralizza il centraggio desktop */
  }
  .jenia-tabs__icon--top {
    top: 50%;
    left: 0;
    bottom: auto;
    transform: translate(-14px, -50%); /* slide-in da sinistra */
  }
  .jenia-tabs__icon--bottom {
    top: 50%;
    right: 0;
    left: auto;
    bottom: auto;
    transform: translate(14px, -50%); /* slide-in da destra */
  }

  .jenia-tabs__panel.is-active .jenia-tabs__icon--top {
    transform: translate(0, -50%);
    opacity: 1;
  }
  .jenia-tabs__panel.is-active .jenia-tabs__icon--bottom {
    transform: translate(0, -50%);
    opacity: 1;
  }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .jenia-tabs__title,
  .jenia-tabs__panel,
  .jenia-tabs__icon {
    transition: none !important;
  }
}