/* Agência Mestre · Comentários do post (decisão R1; template-parts/post/comentarios.php, inc/comentarios.php).
   O protótipo não tem o bloco: só componentes e tokens do site.css (rule-top, t-h3, tag, link-arrow, pager, campos e botões
   do formulário). Nenhuma fonte, cor ou tamanho novo; sem max-width em texto. Celular primeiro: 320px e cresce.
   Carregado só no post com comentário ou aberto, depois do site.css e do wp.css. */

.comments{--av:2rem;--av-gap:.75rem;margin-top:var(--s5)}

/* lugar do bloco no post: no HTML ele vem depois da lateral (single.php). Abaixo de 1100px, uma coluna: autor, newsletter e
   os comentários no fim (com 162 comentários a newsletter descia 57 mil px). A partir de 1100px, na coluna do texto, logo
   abaixo da caixa do autor, e o sumário fixo continua ao lado dele. O respiro acima é o --s5 de sempre: a grade já põe o
   gap (3rem numa coluna, 2,5rem entre as linhas no desktop) */
.post-layout>.comments{margin-top:calc(var(--s5) - 3rem)}
@media (min-width:1100px){
  .post-layout>.comments{grid-column:1;grid-row:3;margin-top:calc(var(--s5) - 2.5rem)}
  .post-layout:has(>.comments)>.toc{grid-row:2/span 2}
}

/* título à esquerda, link à direita na mesma linha (regra do design system); "Comentar" desce até o formulário */
.comments__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem}
/* a medida do nome na caixa do autor, logo acima (protótipo: font-size:1.25rem) */
.comments__title{font-size:1.25rem}
.comments__jump{font-size:var(--fs-small)}
.comments__jump svg{transform:rotate(90deg)}
@media (hover:hover){.comments__jump:hover svg{transform:rotate(90deg) translateX(3px)}}

/* lista: cada comentário abre com a régua fina; foto à esquerda, texto na coluna */
.comments__list,.comments__list .children{list-style:none}
.comments__list{margin-top:1.25rem}
.comments__body{display:grid;grid-template-columns:var(--av) minmax(0,1fr);column-gap:var(--av-gap);padding-block:1.25rem;border-top:1px solid var(--line)}
.comments__body--sem-foto{grid-template-columns:minmax(0,1fr)}
.comments__avatar{width:var(--av);height:var(--av);border-radius:50%;filter:grayscale(1);background:var(--tone)}
.comments__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .625rem;line-height:1.35}
.comments__name{font-weight:700;overflow-wrap:anywhere}
.comments__meta .tag{align-self:center}
.comments__date,.comments__edit{font-size:var(--fs-xs);color:var(--grey)}
.comments__edit a{color:inherit;text-underline-offset:.2em}
/* comentário de quem acabou de enviar, antes da aprovação: o aviso na etiqueta .chip, para não se confundir com o texto */
.comments__pending{margin-top:.6rem;line-height:1.4}

/* texto de quem comentou: o tamanho do corpo e a cor de leitura (comentários de até 6 mil caracteres) */
.comments__text{margin-top:.5rem;line-height:1.65;color:var(--text);overflow-wrap:anywhere}
.comments__text>*+*{margin-top:.75em}
.comments__text :is(strong,b){font-weight:700;color:var(--ink)}
.comments__text a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--grey);text-decoration-thickness:1px;text-underline-offset:.22em}
.comments__text a:hover{text-decoration-color:var(--ink)}
/* listas em comentários antigos (escritos no painel): o marcador fica dentro da coluna do texto, como no .entry */
.comments__text :is(ul,ol){padding-left:1.4em}
.comments__text li+li{margin-top:.35em}
.comments__text blockquote{padding-left:1rem;border-left:1px solid var(--ink);color:var(--mid)}
.comments__text code{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:.88em;background:var(--tone);padding:.1em .35em}

/* "Responder": o desenho do .link-arrow, sem seta, com a área de toque de 44px */
.comments__reply{margin-top:.75rem;font-size:var(--fs-small)}
.comments .comments__reply a{position:relative;display:inline-block;color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.1em}
.comments .comments__reply a::before{content:"";position:absolute;inset:-.75rem -.5rem}

/* respostas: recuo com a régua fina à esquerda. No celular, recuo curto e só até o 3º nível (a coluna não aperta); a
   resposta mais funda segue alinhada à de cima, em ordem de data (opção de hoje: até 5 níveis) */
.comments__list .children{padding-left:.875rem;border-left:1px solid var(--line)}
@media (max-width:639px){.comments__list .children .children .children{padding-left:0;border-left:0}}

/* páginas de comentários (só com a opção ligada): a .pager do site.css */
.comments__pager{margin-top:var(--s3)}

/* formulário */
.comments__respond{--fbd:var(--ink);--fbg:var(--surface)}
.comments__list~.comments__respond{margin-top:var(--s4);border-top:2px solid var(--ink);padding-top:1.25rem}
.comments__form{display:grid;gap:1.25rem;margin-top:1rem}
.comments__form .gform_validation_errors{margin-bottom:0}
/* campo com erro: a borda vermelha vem do wp.css (base), que vale para todo formulário com a marcação do GF */
.comments__form .gform_footer{margin-top:.25rem}
.comments__form .btn{width:100%}
.comments__notes a{color:var(--ink);text-underline-offset:.2em}
.comments__cancel{display:block;font-size:var(--fs-small);font-weight:500;letter-spacing:0}
.comments__cancel a{position:relative;display:inline-block;margin-top:.5rem;color:var(--ink);text-underline-offset:.2em}
.comments__cancel a::before{content:"";position:absolute;inset:-.75rem -.5rem}
.comments p.akismet_comment_form_privacy_notice{margin-top:1rem;font-size:var(--fs-xs);line-height:1.5;color:var(--grey)}
.comments p.akismet_comment_form_privacy_notice a{color:inherit;text-underline-offset:.2em}

/* resposta no lugar: o comment-reply leva o formulário para baixo do comentário */
.comments__item .comments__respond{padding-block:1.25rem;border-top:1px solid var(--line)}
.comments__item .comments__form{margin-top:.75rem}

@media (min-width:640px){
  .comments{--av:2.5rem;--av-gap:1rem}
  .comments__body{padding-block:1.5rem}
  /* a régua da conversa passa no meio da foto e a resposta começa na coluna do texto de cima */
  .comments__list .children{margin-left:calc(var(--av)/2);padding-left:calc(var(--av)/2 + var(--av-gap) - 1px)}
  .comments__item .comments__respond{margin-left:calc(var(--av) + var(--av-gap))}

  /* nome e e-mail lado a lado, rótulo e campo alinhados nas duas colunas (subgrid, como o .form-card). Duas linhas, não
     três: a mensagem de erro entra no .ginput_container (tema-comentarios.js), senão a linha vazia do erro somava mais
     um espaço de 1,25rem embaixo dos dois campos */
  .comments__form{grid-template-columns:1fr 1fr;column-gap:1rem}
  .comments__form>*{grid-column:1/-1}
  .comments__form>.comments__field--half{grid-column:auto;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  .comments__form>.comments__field--half .gfield_label{align-self:end}
  .comments__form .btn{width:auto}
}
@supports not (grid-template-rows:subgrid){
  @media (min-width:640px){.comments__form>.comments__field--half{display:block;grid-row:auto;align-self:end}}
}