/* ==========================================================================
   Indices — a chamada da home para /tabelas-praticas.

   Cartao branco sobre o palco, na mesma gramatica da secao Empresa:
   cabecalho numerado, manifesto a esquerda e, a direita, o quadro com os
   seis numeros do ano como atalhos. Cada numero e um cartao afundado que
   abre a tabela certa; o vermelho aparece so no fio do cabecalho e no
   destaque de hover.
   ========================================================================== */

.indices__card {
  display: grid;
  gap: var(--section-gap);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Cabecalho editorial
   -------------------------------------------------------------------------- */
.indices__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.indices__meta {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Manifesto + quadro
   -------------------------------------------------------------------------- */
.indices__grid {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.8vw, 3.5rem);
  align-items: start;
}

.indices__manifesto {
  display: grid;
  gap: clamp(1.125rem, 0.8rem + 1.6vw, 2rem);
  min-width: 0;
}

.indices__headline {
  margin-left: -0.035em; /* alinhamento optico da haste */
}

.indices__prose {
  display: grid;
  gap: clamp(0.75rem, 0.6rem + 0.7vw, 1.125rem);
  max-width: 46ch;
}

.indices__lead {
  font-size: var(--fs-lead-lg);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: pretty;
}

.indices__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(0.25rem, 1vw, 0.625rem);
}

/* --------------------------------------------------------------------------
   Quadro — a afordancia, os atalhos e a data de conferencia
   -------------------------------------------------------------------------- */
.indices__board {
  display: grid;
  gap: 0.875rem;
  min-width: 0;
}

/* A mesma dica do indice de servicos: diz o que fazer antes de tentar. */
.indices__note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-50);
}

.indices__note-mark {
  width: 0.375rem;
  height: 0.375rem;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
}

.indices__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.tile {
  position: relative;
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: clamp(0.875rem, 0.7rem + 0.8vw, 1.25rem);
  padding-right: 2.75rem;
  border-radius: var(--radius-panel);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--ink);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.tile__k {
  font-size: var(--fs-micro);
  line-height: 1.35;
  color: var(--ink-50);
  transition: color var(--dur-base) var(--ease-out);
}

.tile__v {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: var(--fw-display-strong);
  line-height: 1.1;
  letter-spacing: calc(-0.035em * var(--track-display));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tile__arrow {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.tile__arrow svg {
  width: 0.625rem;
  height: 0.625rem;
}

.tile__arrow path {
  stroke: var(--ink-50);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-base) var(--ease-out);
}

/* Sob o ponteiro o cartao vira o bloco escuro: e o mesmo gesto do sumario e
   dos atalhos do site inteiro. */
@media (hover: hover) {
  .tile:hover {
    background: var(--surface-ink);
    border-color: var(--surface-ink);
    color: var(--on-ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .tile:hover .tile__k {
    color: var(--on-ink-muted);
  }

  .tile:hover .tile__arrow {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    transform: translateX(2px);
  }

  .tile:hover .tile__arrow path {
    stroke: #fff;
  }
}

.tile:focus-visible {
  outline-offset: 3px;
}

.indices__updated {
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-30);
}

/* --------------------------------------------------------------------------
   Tablet: tres colunas de atalhos
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .indices__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Desktop: manifesto a esquerda, quadro em duas colunas a direita
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .indices__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 5rem);
  }

  .indices__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }
}

/* Celular estreito: uma coluna, e cada atalho vira linha (rotulo a
   esquerda, numero a direita) para a lista nao ficar comprida. */
@media (max-width: 22.5rem) {
  .indices__tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.75rem;
    padding-block: 0.75rem;
  }

  .tile__arrow {
    top: 50%;
    transform: translateY(-50%);
  }

  .tile:hover .tile__arrow {
    transform: translateY(-50%) translateX(2px);
  }
}