/* ------------------------------------------------- Guia de AEO (paginas/guia_aeo.py) */

/* A linha do autor: a foto redonda, o nome e, nos capítulos, o número e o tempo de leitura. */
.guia-autor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; line-height: 20px; letter-spacing: -0.17px; color: var(--texto-2); }
.guia-autor img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--linha); }
.guia-autor strong { font-weight: 500; color: var(--texto); }
.guia-autor-sep { color: var(--texto-3); }
.guia-topo { padding-bottom: 64px; }

/* O índice: um cartão por capítulo, duas colunas, com as linhas internas tracejadas. Só texto
   (16/10: as mini telas que os cartões tiveram por um dia saíram, a pedido dele). */
/* minmax(0, 1fr): a coluna não cresce com o conteúdo e a página não passa da tela no celular */
.guia-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--linha); }
.guia-cap { display: flex; flex-direction: column; gap: 8px; min-height: 220px; padding: 32px; border-bottom: 1px dashed var(--linha); transition: background-color .15s; }
.guia-cap:nth-child(odd) { border-right: 1px dashed var(--linha); }
.guia-cap:nth-last-child(-n+2):nth-child(odd), .guia-cap:last-child { border-bottom: 0; }
a.guia-cap:hover { background: var(--superficie); }
a.guia-cap:hover .bloco-link-seta { color: var(--texto); transform: translateX(2px); }
.guia-cap-num { margin-bottom: auto; padding-bottom: 32px; font-size: 13px; line-height: 18px; color: var(--texto-3); }
.guia-cap .cartao-mais { margin-top: 8px; }
.guia-cap-breve .t-h5, .guia-cap-breve .texto { opacity: .55; }
.guia-cap-tag { align-self: flex-start; margin-top: 8px; padding: 2px 8px; border: 1px solid var(--linha); border-radius: 999px; font-size: 12px; line-height: 18px; color: var(--texto-3); }

/* As figuras do capítulo: telas da Bases com dados simulados da Lumora (fotografadas na 8777, ver
   paginas/guia_aeo.py). Ocupam a coluna inteira, sem o limite de 720 px do texto, para a letra da
   tela não encolher demais; clicar abre a imagem no tamanho real. */
.prosa > .guia-fig { max-width: none; margin: 32px 0; }
.guia-fig a { display: block; padding: 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo); }
.guia-fig a:hover { border-color: #3A3A3F; }
.guia-fig img { display: block; width: 100%; height: auto; border-radius: 6px; }
.guia-fig figcaption { max-width: 720px; margin-top: 10px; font-size: 13px; line-height: 20px; letter-spacing: -0.1px; color: var(--texto-3); }
.guia-fig-num { color: var(--texto-2); font-weight: 500; }

/* Dentro do capítulo: o quadro de exemplo, o bloco da Bases e a navegação para o próximo. */
.prosa .guia-quadro { margin: 24px 0; padding: 16px 20px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); }
.prosa .guia-quadro p { margin: 0; }
.prosa .guia-quadro p + p { margin-top: 8px; }
.prosa .guia-quadro-tit, .prosa .guia-bases-tit { font-size: 13px; line-height: 18px; letter-spacing: 0; color: var(--texto-3); }
.prosa .guia-quadro .guia-quadro-tit { margin-bottom: 6px; }
/* Os quadros em destaque (pedido dele em 15/10), com as cores do DS e o desenho do pf-alert do produto
   (borda e fundo na cor, título colorido): azul para o exemplo, laranja para o aviso (um limite, um
   cuidado). O texto vai na cor da borda, cheia (a borda é a mesma cor a 38%): pedido dele em 15/10.
   Contraste medido sobre o fundo tingido: azul 6,6:1 e laranja 7,6:1 (o mínimo para texto é 4,5:1). */
.prosa .guia-exemplo { border-color: color-mix(in srgb, var(--acao), transparent 62%); background: color-mix(in srgb, var(--acao-fundo), transparent 34%); }
.prosa .guia-aviso { border-color: color-mix(in srgb, var(--aviso), transparent 62%); background: color-mix(in srgb, var(--aviso-fundo), transparent 34%); }
.prosa .guia-exemplo { color: var(--acao); }
.prosa .guia-aviso { color: var(--aviso); }
.prosa .guia-exemplo strong, .prosa .guia-aviso strong { color: inherit; font-weight: 600; }
.prosa .guia-exemplo .guia-quadro-tit { color: var(--acao); font-weight: 500; }
.prosa .guia-aviso .guia-quadro-tit { color: var(--aviso); font-weight: 500; }
.prosa .guia-bases { margin-top: 56px; padding: 24px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
.prosa .guia-bases p { margin-bottom: 0; }
.prosa .guia-bases .guia-bases-tit { margin-bottom: 8px; }
.prosa .guia-bases .botoes { margin-top: 20px; }
.prosa .guia-bases .btn { text-decoration: none; }
/* o `.prosa a` pinta todo link de branco: o botão claro precisa do texto escuro de volta */
.prosa .guia-bases .btn-claro { color: var(--fundo); }
.prosa .guia-prox { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; margin-top: 32px; }
.prosa .guia-prox a { text-decoration: none; }
.prosa .guia-prox-todos { align-self: center; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.prosa .guia-prox-todos:hover { color: var(--texto); }
.prosa .guia-prox-item { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 16px 20px; border: 1px solid var(--linha); border-radius: 10px; text-align: right; }
.prosa a.guia-prox-item:hover { background: var(--superficie); }
.prosa .guia-prox-rot { font-size: 13px; line-height: 18px; color: var(--texto-3); }
.prosa .guia-prox-tit { font-size: 16px; line-height: 24px; color: var(--texto); }
.prosa .guia-prox-breve .guia-prox-tit { opacity: .55; }
.prosa .guia-prox-breve .guia-cap-tag { align-self: flex-end; }

@media (max-width: 767px) {
  .guia-topo { padding-bottom: 40px; }
  .guia-fig a { padding: 8px; border-radius: 10px; }
  .guia-caps { grid-template-columns: minmax(0, 1fr); }
  .guia-cap:nth-child(odd) { border-right: 0; }
  .guia-cap:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px dashed var(--linha); }
  .guia-cap { min-height: 0; padding: 24px 16px; }
  .guia-cap-num { padding-bottom: 16px; }
  .prosa .guia-bases { margin-top: 40px; padding: 20px 16px; }
  .prosa .guia-prox { flex-direction: column-reverse; }
  .prosa .guia-prox-todos { align-self: flex-start; }
  .prosa .guia-prox-item { align-items: flex-start; text-align: left; }
  .prosa .guia-prox-breve .guia-cap-tag { align-self: flex-start; }
}