/* ── AiSummary Widget ("Riassumi questo articolo con:") ── */

.avacy-ai-summary {
	box-sizing: border-box;
}

.avacy-ai-summary__label {
	margin: 0 0 0.75em;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.3;
	font-weight: 600;
	font-size: 15px;
}

/* Icona sparkles decorativa prima del testo. Il sito converte l'<i> Font
   Awesome in <svg><path fill="currentColor">...</path></svg> via JS: niente
   <i>/::before nel DOM finale, quindi il fill va sul path SVG, referenziando
   il <linearGradient> nascosto emesso dal widget (vedi class-aisummary.php). */
.avacy-ai-summary__sparkle {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 1;
}

.avacy-ai-summary__sparkle svg,
.avacy-ai-summary__sparkle svg path {
	fill: url(#avacy-ai-summary-sparkle-gradient);
}

/* Desktop: riga da 4 a larghezza uguale. */
.avacy-ai-summary__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.avacy-ai-summary__item {
	margin: 0;
	padding: 0;
	display: flex;
}

/* I bottoni si leggono come utility, non come CTA: outline, non pieni. */
.avacy-ai-summary__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px; /* target touch AA */
	padding: 10px 14px;
	border: 1px solid #c9cfdb;
	border-radius: 10px;
	background-color: transparent;
	color: #1f2a44;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.avacy-ai-summary__btn:hover,
.avacy-ai-summary__btn:focus-visible {
	background-color: #f4f6fb;
	border-color: #1f2a44;
}

/* Focus visibile da tastiera (contrasto AA). */
.avacy-ai-summary__btn:focus-visible {
	outline: 2px solid #1f2a44;
	outline-offset: 2px;
}

.avacy-ai-summary__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 18px; /* dimensione icona Font Awesome (default, override dal controllo) */
}

/* Logo caricato come SVG (reso inline da Elementor). */
.avacy-ai-summary__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor; /* logo monocromo, segue il colore del bottone */
}

/* Icona Font Awesome (default/fallback). */
.avacy-ai-summary__icon i {
	display: block;
	line-height: 1;
	font-size: inherit;
}

/* Logo caricato come immagine (PNG/SVG dalla Media Library).
   Doppio vincolo: l'altezza segue "Dimensione logo/icona", la larghezza è
   limitata da "Larghezza massima logo" — così un PNG grande o un wordmark
   molto largo non sfonda il bottone. `contain` evita la deformazione. */
.avacy-ai-summary__logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 1em;
	max-width: 24px; /* default, override dal controllo del widget */
	object-fit: contain;
}

.avacy-ai-summary__name {
	white-space: nowrap;
}

/* Segnaposto mostrato solo in editor fuori dal contesto post. */
.avacy-ai-summary--empty {
	padding: 1.5rem;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	color: #646970;
	font-style: italic;
}

/* Mobile: griglia 2×2 sotto 768px. */
@media ( max-width: 767px ) {
	.avacy-ai-summary__list {
		grid-template-columns: repeat(2, 1fr);
	}
}