/* ==========================================================================
   site-versus.css: versus: duas escolhas, linha por linha.
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

/* ── Versus: duas escolhas, linha por linha ───────────────────────────── */
/* Estilos da secao 'versus' (app/views/site/sections/versus.php). A tabela
   compare, logo acima, compara PLANOS: N colunas montadas do banco. Esta
   compara DUAS escolhas do produto (hoje as duas conexoes de WhatsApp) com os
   valores escritos no conteudo, porque "grupos: nao" nao esta em tabela
   nenhuma do banco.
   O verde do "tem" e fixo, como na compare-table: a cor da marca pinta botao e
   selo, e num white-label de marca vermelha o check de "tem" se lia como sinal
   de erro. */
.st-versus { --ok: #15803d; }

.st-versus__table { width: 100%; border-collapse: collapse; font-size: 14px; }

.st-versus__table th,
.st-versus__table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

/* vertical-align: top (e nao middle) porque uma coluna tem a linha pequena em
   duas linhas e a outra em uma: centralizadas, as duas colunas comecavam em
   alturas diferentes e o par deixava de se ler como par. */
.st-versus__table thead th {
  background: var(--bg-page);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

/* A coluna da capacidade e a larga; as duas respostas dividem o resto em
   partes iguais. Sem largura declarada, "Com modelo aprovado, um número por
   vez" alargava a coluna da direita e as duas colunas paravam de se ler como
   par. */
.st-versus__corner { width: 38%; }

.st-versus__head { width: 31%; }

.st-versus__col { display: flex; align-items: center; gap: 10px; }

.st-versus__tile {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
}

.st-versus__tile svg { width: 16px; height: 16px; }

.st-versus__col-title { display: block; font-size: 15px; font-weight: 500; color: var(--text-1); }

.st-versus__col-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--text-muted);
}

.st-versus__label { font-weight: 400; color: var(--text-1-soft); }

.st-versus__cell { color: var(--text-muted); }

.st-versus__yes { color: var(--ok); display: inline-flex; }

.st-versus__yes svg { width: 15px; height: 15px; }

.st-versus__no { color: var(--text-ghost); }

/* O nome da coluna vive DENTRO da celula o tempo todo (e texto no HTML, nao
   'content' de CSS): e assim que o leitor de tela le "Pelo QR code: Tem"
   quando a tabela vira lista no celular. Na tela ele so aparece abaixo de
   560px. */
.st-versus__cell-col {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.st-versus__note { margin-top: 16px; font-size: 13px; line-height: 19px; color: var(--text-muted); }
.st-versus__note a { color: var(--text-1); text-decoration: underline; text-underline-offset: 2px; }
.st-versus__note a:hover { color: var(--primary-text); }

@media (max-width: 768px) {
  .st-versus__table { font-size: 13px; }
  .st-versus__table th,
  .st-versus__table td { padding: 11px 8px; }
  .st-versus__col-title { font-size: 14px; }
  /* O tile de 32px come a largura que as duas colunas de resposta precisam. */
  .st-versus__tile { display: none; }
}

/* Em 390px uma tabela de tres colunas ou perde texto ou faz a pagina rolar de
   lado. Aqui cada linha vira um cartao: o nome da capacidade em cima e as duas
   respostas embaixo, lado a lado, com o nome da coluna em cada uma. Os
   role="..." escritos no HTML seguram a semantica de tabela que o
   display:block derruba. */
@media (max-width: 560px) {
  .st-versus__table,
  .st-versus__table thead,
  .st-versus__table tbody,
  .st-versus__table tr,
  .st-versus__table th,
  .st-versus__table td { display: block; }
  .st-versus__table thead tr,
  .st-versus__table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-versus__table tbody tr { gap: 0 10px; }
  /* A legenda do topo fica com o nome de cada coluna e nada mais: a linha
     pequena ("pelo QR code, também chamada de API não oficial") em 160px
     virava sete linhas de duas palavras. Ela continua no texto da seção. */
  .st-versus__table .st-versus__col { display: block; }
  .st-versus__table .st-versus__col-sub { display: none; }
  /* Os seletores desta faixa levam .st-versus__table na frente de proposito:
     sem ele, "display: none" da esquina e o padding das celulas perdiam para
     a regra .st-versus__table th, que e mais especifica, e a tabela voltava a
     desenhar tres colunas espremidas em 390px. */
  .st-versus__table .st-versus__corner { display: none; }
  .st-versus__table thead tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  /* width: auto desfaz os 31% do desktop: com largura declarada a celula
     deixa de esticar na malha e o fundo da legenda parava onde o texto
     acabava. */
  .st-versus__table thead th { width: auto; padding: 12px; border-bottom: 0; }
  .st-versus__table tbody tr {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
  }
  .st-versus__table .st-versus__label {
    grid-column: 1 / -1;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-1);
  }
  .st-versus__table .st-versus__cell { padding: 10px 0 0; border-bottom: 0; }
  .st-versus__cell-col {
    position: static;
    display: block;
    width: auto; height: auto;
    margin: 0 0 4px;
    overflow: visible;
    clip-path: none;
    font-size: 11px;
    color: var(--text-faint);
  }
  .st-versus__val { display: block; }
}