/* ==========================================================================
   seo-topics.css — "Assuntos mais buscados" (topo do rodapé global)
   Usa os tokens globais (tokens.css) para funcionar no tema claro e escuro.
   ========================================================================== */

.seo-topics {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 20px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(47, 85, 228, 0.08) 0%, transparent 55%),
    var(--card, #fff);
  box-shadow:
    0 0 0 1px var(--border, #e0e5eb),
    0 18px 40px -28px rgba(14, 16, 32, 0.35);
}
@media (min-width: 1024px) {
  .seo-topics { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); align-items: start; gap: 3rem; }
}

.seo-topics__intro { display: flex; gap: 1rem; align-items: flex-start; }
.seo-topics__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: #0b0c12;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(47, 85, 228, 0.7);
}
[data-theme="dark"] .seo-topics__icon { background: #fff; color: #0b0c12; }

.seo-topics__eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground, #6b7580);
  margin: 0 0 0.25rem;
}
.seo-topics__title {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--foreground, #1a2a3a);
}
.seo-topics__sub {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground, #6b7580);
  max-width: 22ch;
}

.seo-topics__groups { display: grid; gap: 1.75rem; }
@media (min-width: 640px) { .seo-topics__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.seo-topics__group-label {
  margin: 0 0 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border, #e0e5eb);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground, #6b7580);
}
.seo-topics__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }

.seo-topics__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline: -0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--foreground, #1a2a3a);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.seo-topics__check { flex-shrink: 0; display: inline-flex; color: #22c55e; }
.seo-topics__arrow {
  margin-left: auto;
  display: inline-flex;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
  color: var(--accent, #2f55e4);
}
.seo-topics__link:hover { background: var(--surface, #eef1f6); color: var(--accent, #2f55e4); }
[data-theme="dark"] .seo-topics__link:hover { background: rgba(255, 255, 255, 0.05); color: #aebfff; }
.seo-topics__link:hover .seo-topics__arrow { opacity: 1; transform: none; }
.seo-topics__link:focus-visible { outline: 2px solid var(--accent, #2f55e4); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .seo-topics__link, .seo-topics__arrow { transition: none; }
}