/**
 * Tabs — aspetto. COPIA NOSTRA, indipendente da Elementor.
 *
 * PROVENIENZA: elewidget/assets/css/tabs.css, 241 righe. Copiato una volta, non
 * collegato: elewidget è congelato (07-piano-widget.md).
 *
 * LO SCOPE. Tutto prefissato `.se-gjs-page`, che esiste sia sul frontend sia nel canvas
 * dell'editor. Un foglio solo, caricato nei due posti.
 *
 * ⚠ COSA È STATO LASCIATO FUORI, e perché
 *
 *   `.e-con` — sono i container di Elementor. Il pannello di una scheda qui è un normale
 *   contenitore del builder, non un container di Elementor: quelle regole non farebbero
 *   match e la variabile `--display` da cui dipendono non esisterebbe.
 *
 *   `.tabs-scroll-button` — le due frecce che scorrevano la barra quando le schede non ci
 *   stavano. Portavano dietro del comportamento (misurare `scrollWidth`, accendere e
 *   spegnere i pulsanti, scorrere) per risolvere un problema che qui si risolve
 *   lasciando ANDARE A CAPO le schede: `flex-wrap: wrap` invece di `overflow-x: auto`.
 *   La barra nascondeva anche la scrollbar nativa, quindi senza le frecce su un telefono
 *   non sarebbe rimasto nessun modo visibile di raggiungere le schede in fondo.
 *
 *   `.tab-pane-inner`, `.tab-pane-image` — l'impaginato interno fisso del widget, testo a
 *   sinistra e immagine a destra. Qui dentro la scheda ci va quello che ci mette l'autore,
 *   in colonne che sono quelle del builder: un impaginato deciso dal componente sarebbe
 *   proprio quello che questo blocco non deve fare.
 */

.se-gjs-page .tabs-container {
	width: 100%;
	padding: 1rem;
	border-radius: 20px;
}

.se-gjs-page .tabs-header-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	margin-bottom: 20px;
}

/* La riga tratteggiata sotto le schede è di QUESTO elemento, non del contenitore: nel
   riferimento arriva da bordo a bordo mentre le schede stanno in mezzo. */
.se-gjs-page .tabs-header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	border-bottom: 2px dashed #ceeaff;
	padding-bottom: 10px;
	flex: 1;
	justify-content: center;
}

.se-gjs-page .tab-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	padding: 2px 10px;
	font-size: 15px;
	font-weight: 500;
	color: #666;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	border-radius: 5px;
	white-space: nowrap;
	cursor: pointer;
}

.se-gjs-page .tab-button:focus,
.se-gjs-page .tab-button:hover {
	outline: none;
	color: #333;
	border: 2px solid #b0d6f2;
	background-color: #fff;
}

.se-gjs-page .tab-button.active {
	border: 2px solid #b0d6f2;
	background-color: #fff;
	color: #333;
}

.se-gjs-page .tab-icon {
	width: 23px;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.se-gjs-page .tab-icon svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Una scheda senza icona: il contenitore resta nel markup ma non deve prendersi i suoi
   23px, o le etichette risulterebbero disallineate fra chi ce l'ha e chi no. */
.se-gjs-page .tab-icon:empty {
	display: none;
}

.se-gjs-page .tabs-content {
	position: relative;
	padding: 0 1rem;
}

/* Una scheda alla volta. Il pannello attivo lo sceglie il comportamento
   (assets/js/widgets/tabs.js) mettendo `tab-active`. */
.se-gjs-page .tabs-content > .tab-pane {
	display: none;
}

.se-gjs-page .tabs-content > .tab-pane.tab-active {
	display: block;
}

/* Finché il comportamento non ha attivato il blocco vale il primo pannello: evita il
   lampo iniziale e tiene leggibile la pagina anche se il JS non parte affatto. */
.se-gjs-page .tabs-container:not(.tabs-activated) .tabs-content > .tab-pane:first-child {
	display: block;
}

.se-gjs-page .tab-pane.slide-in-right {
	animation: se-tabs-da-destra 0.35s ease-out;
}

.se-gjs-page .tab-pane.slide-in-left {
	animation: se-tabs-da-sinistra 0.35s ease-out;
}

@keyframes se-tabs-da-destra {
	from { opacity: 0; transform: translateX(60px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes se-tabs-da-sinistra {
	from { opacity: 0; transform: translateX(-60px); }
	to   { opacity: 1; transform: translateX(0); }
}

@media screen and (max-width: 768px) {
	.se-gjs-page .tab-button {
		padding: 12px 15px;
		font-size: 14px;
	}
}

/* ==========================================================================
   SOLO NELL'EDITOR — `.se-gjs-canvas`
   ==========================================================================
   Nel canvas si vede UNA scheda alla volta, come sul sito, e si sceglie cliccando la
   scheda nella barra. Il comportamento del sito qui non gira — nel canvas non c'è — e
   ce lo mette components/tabs.js, che aggiunge `se-tab-vista` al pannello scelto.

   La classe la scrive DIRETTAMENTE sull'elemento del canvas e non sul componente: è uno
   stato di lavorazione, non contenuto. Passando dal componente finirebbe nel markup
   salvato, e la scheda che si stava guardando diventerebbe quella aperta sul sito.

   All'inizio non l'ha nessuno: valgono i due ripieghi qui sotto, prima la scheda che il
   markup dichiara attiva e poi la prima. Sono scritti con `:has()` sul contenitore, cioè
   «finché nessuno ha scelto»: senza, il ripiego resterebbe acceso ANCHE dopo la scelta e
   si vedrebbero due pannelli insieme.

   Il nome della scheda si stampa sopra il suo pannello con `attr()`, quindi senza
   aggiungere un solo nodo al markup: dice quale scheda si sta riempiendo, e resta utile
   anche una alla volta perché la barra è in cima e il contenuto può essere lungo.
   ========================================================================== */

/* ⚠ `.tabs-container` è NELLA CATENA di tutte e tre le regole qui sotto, e non è
   prolissità: senza, il selettore vale (0,3,0) e PERDE contro la regola del sito
   `.se-gjs-page .tabs-content > .tab-pane.tab-active`, che vale (0,4,0). Il primo
   pannello — l'unico che nasce con `tab-active` — restava acceso qualunque scheda si
   scegliesse, e se ne vedevano due insieme. Con la classe in più si pareggia a (0,4,0)
   e vince l'ordine, che qui è dalla nostra parte: questa sezione viene dopo.

   L'altra regola del sito che entrava in mezzo — quella su `:not(.tabs-activated)`, che
   tiene acceso il primo pannello finché il comportamento non è partito — nel canvas non
   fa più match, perché components/tabs.js mette `tabs-activated` sul contenitore appena
   lo disegna. Spenta alla radice invece che scavalcata a colpi di specificità. */
.se-gjs-canvas .tabs-container .tabs-content > .tab-pane {
	display: none;
}

.se-gjs-canvas .tabs-container .tabs-content > .tab-pane.se-tab-vista {
	display: block;
}

.se-gjs-canvas .tabs-container .tabs-content:not(:has(> .se-tab-vista)) > .tab-pane.tab-active,
.se-gjs-canvas .tabs-container .tabs-content:not(:has(> .se-tab-vista)):not(:has(> .tab-active)) > .tab-pane:first-child {
	display: block;
}

.se-gjs-canvas .tabs-content > .tab-pane::before {
	content: attr(data-nome);
	display: block;
	margin-bottom: .5rem;
	padding-bottom: .35rem;
	border-bottom: 1px dashed #d7dbe2;
	font: 600 11px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #9aa0a6;
}

/* La pastiglia bianca segue la scheda SCELTA nel canvas, non quella marcata `active` nel
   markup: sono due cose diverse — la prima è dove sto lavorando, la seconda è quale
   scheda si aprirà sul sito — e finché nessuno ha scelto coincidono. */
.se-gjs-canvas .tab-button.se-tab-scelta {
	border: 2px solid #b0d6f2;
	background: #fff;
	color: #333;
}

.se-gjs-canvas .tabs-header:not(:has(.se-tab-scelta)) .tab-button.active {
	border: 2px solid #b0d6f2;
	background: #fff;
	color: #333;
}

/* Nel canvas la barra è un comando, non una decorazione: il cursore lo deve dire. */
.se-gjs-canvas .tab-button {
	cursor: pointer;
}