/* GAV-01 · Gaveta de revelação — reescrita do original do 21st.dev sem React.
   Cabeçalho com ícone, título, resumo e seta; o corpo abre animando grid-rows 0fr → 1fr e as
   linhas entram escalonadas a 75 ms (o JS numera cada linha em --i).

   Três decisões que o original não tem, e que foram pagas em produção:

   1. O padrão do CSS é ABERTA, e quem fecha é o JS. Se o script não chegar, a falha ABRE em vez
      de esconder o conteúdo. (Antes era o contrário, com um html.no-js reabrindo — mas qualquer
      script que rodasse tirava o no-js, e um JS que estourasse antes deste deixava o conteúdo
      inacessível.)
   2. Sem `overflow: hidden` no cartão (o original tem): recortava o anel de foco do cabeçalho,
      que fica 3 px para fora. Quem recorta o corpo na animação é o .c-gaveta__dentro.
   3. O primeiro fechamento não anima. Como ela nasce aberta, o fechar inicial é uma mudança de
      estado como outra e o navegador a animava — medido no Chromium: o corpo aparecia com ~554 px
      e descia por 0,5 s a cada carregamento. O JS põe .c-gaveta--sem-transicao, fecha, força o
      recálculo e tira a classe no quadro seguinte. */
.c-gaveta--sem-transicao, .c-gaveta--sem-transicao * { transition: none !important; }

.c-gaveta {
  --c-gav-superficie: #141414;
  --c-gav-superficie-2: #1f1f1f;
  --c-gav-linha: rgba(235, 235, 235, .12);
  --c-gav-tinta: #ebebeb;
  --c-gav-tinta-2: #a8a8a8;
  --c-gav-tinta-3: #6a6a6a;
  --c-gav-raio: 24px;
  --c-gav-curva: cubic-bezier(.4, 0, .2, 1);

  border: 1px solid var(--c-gav-linha);
  border-radius: var(--c-gav-raio);
  background: var(--c-gav-superficie);
  transition: border-radius .5s var(--c-gav-curva);
}
.c-gaveta[data-aberta="false"] { border-radius: 16px; }

.c-gaveta__cabecalho {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--c-gav-tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.c-gaveta__icone {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c-gav-superficie-2);
  color: var(--c-gav-tinta-2);
}
.c-gaveta__icone svg { width: 22px; height: 22px; }
.c-gaveta__textos { flex: 1; min-width: 0; display: grid; }
.c-gaveta__titulo { font-size: 1rem; font-weight: 600; line-height: 1.3; }
/* fechada, o resumo aparece: até três linhas de 1,35 (em telas estreitas ele quebra em duas) */
.c-gaveta__resumo {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--c-gav-tinta-2);
  transition: opacity .5s var(--c-gav-curva), max-height .5s var(--c-gav-curva), margin-top .5s var(--c-gav-curva);
}
.c-gaveta[data-aberta="false"] .c-gaveta__resumo { opacity: 1; max-height: 4.05em; margin-top: 2px; }
.c-gaveta__seta { flex: none; width: 20px; height: 20px; color: var(--c-gav-tinta-3); transform: rotate(0deg); transition: transform .5s var(--c-gav-curva); }
.c-gaveta[data-aberta="false"] .c-gaveta__seta { transform: rotate(180deg); }

.c-gaveta__corpo { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .5s var(--c-gav-curva), opacity .5s var(--c-gav-curva); }
.c-gaveta[data-aberta="false"] .c-gaveta__corpo { grid-template-rows: 0fr; opacity: 0; }
/* a visibilidade acompanha a altura: entra na hora ao abrir (atraso 0) e só sai no fim da animação
   ao fechar (atraso .5s), porque a transição que vale é a do estado de DESTINO */
.c-gaveta__dentro { overflow: hidden; padding: 0 16px; transition: visibility 0s linear 0s; }
.c-gaveta[data-aberta="false"] .c-gaveta__dentro { visibility: hidden; transition-delay: .5s; }
.c-gaveta .c-tabela, .c-gaveta .c-lista-linhas { margin-bottom: 8px; }

/* as linhas entram escalonadas ao abrir (75 ms por linha, --i do JS); ao fechar, sem atraso — e o
   atraso mora no estado de destino, que é o ABERTO. `transform` em <tr> não é confiável no Safari:
   a opacidade vai na linha e o deslize nas células. */
.c-gaveta .c-tabela tr { opacity: 1; transition: opacity .5s var(--c-gav-curva), background-color .2s ease; transition-delay: calc(var(--i, 0) * 75ms); }
.c-gaveta .c-tabela th, .c-gaveta .c-tabela td { transform: none; transition: transform .5s var(--c-gav-curva); transition-delay: calc(var(--i, 0) * 75ms); }
.c-gaveta .c-lista-linhas li { opacity: 1; transform: none; transition: opacity .5s var(--c-gav-curva), transform .5s var(--c-gav-curva); transition-delay: calc(var(--i, 0) * 75ms); }
.c-gaveta[data-aberta="false"] .c-tabela tr, .c-gaveta[data-aberta="false"] .c-lista-linhas li { opacity: 0; transition-delay: 0s; }
.c-gaveta[data-aberta="false"] .c-tabela th, .c-gaveta[data-aberta="false"] .c-tabela td,
.c-gaveta[data-aberta="false"] .c-lista-linhas li { transform: translateY(16px); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .c-gaveta, .c-gaveta * { transition: none !important; }
}