/**
 * Pagina "Confronto a tabella" (page-templates/confronto-tabella.php).
 * Estende .btc-bonus-tabella (già in components.css, invariato) con:
 * intestazioni cliccabili per l'ordinamento, colonna Operatore fissa a
 * sinistra durante lo scorrimento orizzontale da mobile, e il box "Come
 * leggere questo confronto".
 */

.btc-confronto-tabella-wrap {
	overflow-x: auto;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--color-border);
	-webkit-overflow-scrolling: touch;
}
.btc-confronto-tabella { border: none; }

/* Intestazioni ordinabili: un <button> dentro ogni <th>, così il clic
   funziona anche da tastiera senza codice aggiuntivo (elemento nativo
   focus/Invio/Spazio già gestiti dal browser). */
.btc-confronto-tabella th button {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font: inherit;
	color: inherit;
	white-space: nowrap;
}
.btc-confronto-tabella th button:focus-visible {
	outline: 2px solid var(--color-action-primary);
	outline-offset: 2px;
	border-radius: 2px;
}
.btc-confronto-tabella th button::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--color-text-muted);
	opacity: 0.4;
	flex-shrink: 0;
}
.btc-confronto-tabella th[aria-sort="ascending"] button::after {
	opacity: 1;
	border-top: none;
	border-bottom: 5px solid var(--color-action-primary);
}
.btc-confronto-tabella th[aria-sort="descending"] button::after {
	opacity: 1;
	border-top-color: var(--color-action-primary);
}

/* Colonna Operatore fissa a sinistra: sia l'intestazione sia la cella riga
   (<th scope="row">) restano visibili durante lo scorrimento orizzontale,
   utile soprattutto da mobile dove la tabella è più larga dello schermo.
   Una larghezza minima fissa (invece di lasciarla determinata dal
   contenuto, come farebbe normalmente una tabella) evita che una colonna
   "sticky" si sovrapponga al testo della colonna successiva quando cambia
   riga per riga in base a quanto è lungo il nome dell'operatore. */
.btc-confronto-tabella th:first-child,
.btc-confronto-tabella td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 200px;
	max-width: 200px;
}
.btc-confronto-tabella tbody th:first-child {
	background: var(--color-bg-surface);
	box-shadow: 1px 0 0 var(--color-border);
}
.btc-confronto-tabella thead th:first-child {
	z-index: 2;
	background: var(--color-bg-page);
	box-shadow: 1px 0 0 var(--color-border);
}
.btc-confronto-tabella .btc-bonus-tabella-operatore span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Celle di testo libero (es. contribuzione/requisiti di giocata, spesa
   necessaria): larghezza minima e testo che va a capo normalmente, invece
   di forzare colonne strette a comprimersi in un'unica riga illeggibile. */
.btc-confronto-cella-testo { min-width: 200px; white-space: normal; }

.btc-confronto-link-recensione { font-size: 12px; white-space: nowrap; }

/* Testo del link diverso da desktop ("Recensione", per non tagliare la
   colonna) e da mobile ("Leggi la recensione", dove c'è tutto lo spazio di
   una card a larghezza piena) — un solo markup, l'altro testo è solo
   nascosto via CSS, mai duplicato o generato via JS. */
.btc-confronto-link-testo-mobile { display: none; }

/* Menu "Ordina per": sostituisce le intestazioni cliccabili da mobile
   (nascosto da desktop, dove restano le intestazioni della tabella). */
.btc-confronto-ordina-per-wrap { display: none; }

/* Box "Come leggere questo confronto": stesso linguaggio visivo già usato
   per "In pratica" nell'accordion bonus (sfondo pagina, bordo a sinistra
   verde, nessun colore acceso). */
.btc-confronto-come-leggere {
	background: var(--color-bg-page);
	border-left: 3px solid var(--color-action-primary);
	border-radius: var(--radius-sm);
	padding: var(--space-4);
	margin-top: var(--space-6);
}
.btc-confronto-come-leggere-label {
	font-size: 11px; font-weight: 500; color: var(--color-text-muted);
	margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.02em;
}
.btc-confronto-come-leggere p:last-child { margin: 0; font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }

@media (max-width: 480px) {
	.btc-confronto-tabella th,
	.btc-confronto-tabella td { padding: 10px 12px; }
}

/* Da mobile (sotto i 768px) la tabella non scorre più in orizzontale: ogni
   riga diventa una card verticale. Il markup resta lo stesso <table> di
   sempre (semantico, invariato) — qui viene solo ridisegnato visivamente:
   niente overflow-x, l'intestazione lascia il posto al menu "Ordina per"
   qui sopra, e ogni <tr> diventa una colonna flessibile in cui l'ordine
   visivo delle celle (operatore+punteggio in cima, poi le coppie
   etichetta/valore, poi il link) è deciso dalla proprietà "order", non
   dall'ordine nel DOM — così lo stesso markup serve identico anche da
   desktop, dove l'ordine reale delle colonne conta invece davvero. */
@media (max-width: 767px) {
	.btc-confronto-link-testo-desktop { display: none; }
	.btc-confronto-link-testo-mobile { display: inline; }

	.btc-confronto-ordina-per-wrap {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-bottom: var(--space-4);
	}
	.btc-confronto-ordina-per-label { font-size: 13px; color: var(--color-text-secondary); flex-shrink: 0; }
	.btc-confronto-ordina-per {
		flex: 1 1 auto;
		height: 40px;
		padding: 0 var(--space-3);
		border: 0.5px solid var(--color-border-strong);
		border-radius: var(--radius-sm);
		background: var(--color-bg-surface);
		color: var(--color-text-primary);
		font-size: 13px;
		font-family: var(--font-body);
	}

	.btc-confronto-tabella-wrap { overflow-x: visible; border: none; border-radius: 0; }
	.btc-confronto-tabella { min-width: 0; border: none; }
	.btc-confronto-tabella thead { display: none; }
	.btc-confronto-tabella tbody { display: block; }

	/* Annulla la colonna Operatore "fissa" da desktop — da mobile non c'è
	   più nulla da tenere fisso, la card scorre in verticale come tutto il
	   resto della pagina. Il selettore ripete "tbody" (non solo
	   ":first-child") per pareggiare la specificità della regola
	   box-shadow/background di più sopra, altrimenti quella resterebbe più
	   specifica e continuerebbe a vincere anche qui dentro la media query
	   (bug osservato: la linea verticale del box-shadow restava visibile
	   sulla card anche dopo aver azzerato qui sotto un ":first-child"
	   generico, meno specifico). */
	.btc-confronto-tabella tbody th:first-child,
	.btc-confronto-tabella td:first-child {
		position: static;
		min-width: 0;
		max-width: none;
		box-shadow: none;
	}

	.btc-confronto-tabella tr {
		display: flex;
		flex-wrap: wrap;
		background: var(--color-bg-surface);
		border: 0.5px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-4);
		margin-bottom: var(--space-3);
	}

	/* Tutte le celle diventano blocchi a larghezza piena di norma (ogni
	   coppia etichetta/valore sulla propria riga): l'operatore, il
	   punteggio e il link sono le tre eccezioni gestite sotto. */
	.btc-confronto-tabella th,
	.btc-confronto-tabella td {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--space-3);
		width: 100%;
		flex: 0 0 100%;
		position: static;
		min-width: 0;
		max-width: none;
		padding: 8px 0;
		border-bottom: 0.5px solid var(--color-border);
		background: none;
		box-shadow: none;
		white-space: normal;
		text-align: left;
		order: 3;
		overflow: hidden;
	}
	.btc-confronto-tabella tr > :last-child { border-bottom: none; }

	/* Etichetta a sinistra (dall'attributo data-label già presente su ogni
	   cella, usato finora solo come fallback accessibile), valore a
	   destra — stesso linguaggio delle griglie dati già usate altrove nel
	   tema (es. .btc-bonus-accordion-griglia-riga). Di norma sulla stessa
	   riga (flex-wrap: nowrap qui sopra): se assets/js/confronto-sort.js
	   misura che etichetta+valore non ci stanno affiancati (scrollWidth >
	   clientWidth, quale che sia il motivo — etichetta lunga, valore
	   lungo, o entrambi), aggiunge .btc-confronto-cella--impilata, che
	   sposta il valore sotto, allineato a sinistra. Stessa regola,
	   automatica, per ogni cella di ogni card — non più una lista fissa di
	   colonne "lunghe". */
	.btc-confronto-tabella td[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		color: var(--color-text-secondary);
		flex-shrink: 0;
	}
	.btc-confronto-tabella td[data-label]:not([data-label=""]) { text-align: right; }

	.btc-confronto-tabella td.btc-confronto-cella--impilata {
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 4px;
		text-align: left;
	}
	.btc-confronto-tabella td.btc-confronto-cella--impilata::before { color: var(--color-text-muted); font-size: 12px; }

	/* Riga 1 della card: operatore a sinistra, punteggio (se presente)
	   accanto a destra, nessuna etichetta ripetuta (il nome basta da solo),
	   nessun bordo interno perché è l'intestazione della card. */
	.btc-confronto-tabella th[scope="row"] {
		order: 1;
		flex: 1 1 auto;
		width: auto;
		padding: 0 0 var(--space-3);
		margin-bottom: var(--space-3);
		border-bottom: 0.5px solid var(--color-border);
	}
	.btc-confronto-tabella th[scope="row"] .btc-bonus-tabella-operatore span { white-space: normal; }
	.btc-confronto-tabella .btc-confronto-cella-punteggio {
		order: 2;
		flex: 0 0 auto;
		width: auto;
		padding: 0 0 var(--space-3);
		margin-bottom: var(--space-3);
		border-bottom: 0.5px solid var(--color-border);
	}
	.btc-confronto-tabella .btc-confronto-cella-punteggio::before { content: none; }

	/* Link alla recensione: sempre per ultimo, a larghezza piena, un'area
	   di tocco ampia e comoda invece di un piccolo link inline. */
	.btc-confronto-tabella .btc-confronto-cella-link {
		order: 99;
		border-bottom: none;
		padding-top: var(--space-2);
	}
	.btc-confronto-tabella .btc-confronto-link-recensione {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 44px;
		align-items: center;
		border: 0.5px solid var(--color-border-strong);
		border-radius: var(--radius-sm);
		font-size: 13px;
	}
}