/* =========================================================
   SerformanceP — ÍNDICE DE ARTISTAS (plugin Acervo 1.22)
   /artistas/, /pais/…/ e /estado/…/. Usa as peças da home de
   edição (topo, título, faixa preta) e só acrescenta aqui o
   que é do índice, com prefixo sp-ia-.
   ========================================================= */

/* ---------- abertura ---------- */
.sp-ia-cab { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-e4); padding: var(--sp-e6) 0 var(--sp-e5); }
.sp-ed .sp-ia-numeros { margin: 0; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }

/* ---------- filtros ---------- */
.sp-ia-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-e4); padding-top: var(--sp-e5); border-top: 3px solid var(--sp-tinta); }
.sp-ia-campo { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; max-width: 320px; min-width: 0; }
.sp-ia-campo label { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.sp-ed .sp-ia-campo select {
	-webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; margin: 0; padding: 10px 40px 10px 14px;
	border: 2px solid var(--sp-tinta); border-radius: 0; color: var(--sp-tinta); font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3;
	background: var(--sp-papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C90619' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
	cursor: pointer;
}
.sp-ed .sp-ia-campo select:hover { border-color: var(--sp-destaque); }
.sp-ia-campo select:focus-visible { outline: 3px solid var(--sp-foco); outline-offset: 2px; }
.sp-ed .sp-ia-filtrar {
	min-height: 48px; padding: 10px 22px; border: 2px solid var(--sp-tinta); border-radius: 0; background: var(--sp-tinta); color: var(--sp-papel);
	font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.sp-ed .sp-ia-filtrar:hover { background: var(--sp-destaque); border-color: var(--sp-destaque); }
.sp-ia-filtrar:focus-visible { outline: 3px solid var(--sp-foco); outline-offset: 3px; }
.sp-ia-filtros--js .sp-ia-filtrar { display: none; }

/* ---------- filtros aplicados ---------- */
.sp-ed .sp-ia-chips { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-e2) var(--sp-e3); margin: var(--sp-e4) 0 0; padding: 0; }
.sp-ed .sp-ia-chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px 4px 14px; background: var(--sp-tinta); color: var(--sp-papel);
	font-size: .875rem; font-weight: 700; line-height: 1.2; text-decoration: none;
}
.sp-ia-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 1.125rem; line-height: 1; }
.sp-ed .sp-ia-chip:hover { background: var(--sp-destaque); color: var(--sp-papel); }
.sp-ia-chip:focus-visible, .sp-ia-limpar:focus-visible { outline: 3px solid var(--sp-foco); outline-offset: 3px; }
.sp-ed .sp-ia-limpar { font-size: .875rem; font-weight: 700; color: var(--sp-tinta); text-decoration: underline; text-decoration-color: var(--sp-destaque);
	text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sp-ed .sp-ia-limpar:hover { background: var(--sp-destaque); color: var(--sp-papel); text-decoration-color: var(--sp-papel); }

/* ---------- resultado e letras ---------- */
.sp-ia-resultado { padding-top: var(--sp-e7); }
.sp-ed .sp-ia-resultado__titulo { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.sp-ia-resultado__n { color: var(--sp-destaque); }

.sp-ed .sp-ia-letras ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: var(--sp-e4) 0 0; padding: 0; }
.sp-ed .sp-ia-letras a, .sp-ia-letras span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 4px;
	font-size: .875rem; font-weight: 800; line-height: 1; text-decoration: none;
}
.sp-ed .sp-ia-letras a { border: 2px solid var(--sp-tinta); color: var(--sp-tinta); }
.sp-ed .sp-ia-letras a:hover { background: var(--sp-destaque); border-color: var(--sp-destaque); color: var(--sp-papel); }
.sp-ia-letras a:focus-visible { outline: 3px solid var(--sp-foco); outline-offset: 2px; }
.sp-ia-letras span { border: 2px solid var(--sp-mudo-claro); color: var(--sp-mudo-medio); }

.sp-ia-grupo { padding-top: var(--sp-e7); scroll-margin-top: var(--sp-e4); }
.sp-ed .sp-ia-letra { display: flex; align-items: center; gap: var(--sp-e4); margin: 0 0 var(--sp-e5); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.sp-ia-letra::after { content: ""; flex: 1; height: 3px; background: var(--sp-tinta); }

/* ---------- grade de cards ---------- */
.sp-ed .sp-ia-grade { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-e5) var(--sp-e4); margin: 0; padding: 0; }
@media (min-width: 600px) { .sp-ed .sp-ia-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sp-ed .sp-ia-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-e6) var(--sp-e5); } }
@media (min-width: 1100px) { .sp-ed .sp-ia-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.sp-ia-card { min-width: 0; }
.sp-ed .sp-ia-card__link { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--sp-tinta); text-decoration: none; }
.sp-ia-card__link:focus-visible { outline: 3px solid var(--sp-foco); outline-offset: 4px; }
.sp-ia-card__foto { position: relative; aspect-ratio: 1 / 1; margin-bottom: 4px; overflow: hidden; background: var(--sp-mudo-claro); }
.sp-ia-card__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sp-ia-card__link:hover .sp-ia-card__foto img { transform: scale(1.04); }
.sp-ia-card__foto .sp-avatar { height: 100%; }
.sp-ia-card__nome { font-size: 1rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance; }
.sp-ia-card__link:hover .sp-ia-card__nome { text-decoration: underline; text-decoration-color: var(--sp-destaque); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sp-ia-card__local { font-size: .8125rem; font-weight: 600; line-height: 1.35; }

/* régua de edições: 10 blocos por linha, sempre na mesma ordem */
.sp-ia-regua { container-type: inline-size; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin-top: 4px; }
.sp-ia-b {
	display: flex; align-items: center; justify-content: center; aspect-ratio: 7 / 6; min-width: 0;
	border: 1px solid var(--sp-mudo-medio); background: var(--sp-papel); color: var(--sp-mudo-medio);
	font-size: 9px; font-size: clamp(7px, 4.6cqi, 11px); font-weight: 800; font-style: normal; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.sp-ia-b--sim { background: var(--sp-tinta); border-color: var(--sp-tinta); color: var(--sp-papel); }
.sp-ia-b--filtro { background: var(--sp-destaque); border-color: var(--sp-destaque); }
@media (max-width: 599px) { .sp-ia-regua { gap: 2px; } }

/* ---------- vazio ---------- */
.sp-ia-vazio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-e4); padding-top: var(--sp-e5); }
.sp-ed .sp-ia-vazio p { margin: 0; font-size: 1.125rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .sp-ia-card__foto img { transition: none; } }