/* ============================================================================
   TOCA DO JACARÉ — correções de auditoria (jul/2026)
   Carregado DEPOIS de base/layout/components: só ajusta pontos específicos,
   sem reescrever o design existente.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. GRADES SEM ÓRFÃO
   As experiências (7 itens) ficavam 3+3+1, deixando dois terços de linha vazia.
   auto-fit distribui conforme o espaço e fecha a última linha.
   ------------------------------------------------------------------------- */
@media (min-width: 620px) {
  .grade-experiencias {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
}
@media (min-width: 1000px) {
  .grade-experiencias {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  }
}
/* Item sozinho na última linha vira DESTAQUE horizontal: ocupa a linha inteira
   com a foto ao lado do texto — em vez de sobrar meia linha vazia, e sem que a
   imagem estique até 800px de altura. */
@media (min-width: 1000px) {
  .grade-experiencias > .exp:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .grade-experiencias > .exp:last-child:nth-child(3n + 1) .exp__botao {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .grade-experiencias > .exp:last-child:nth-child(3n + 1) .exp__midia { height: 100%; aspect-ratio: auto; }
  .grade-experiencias > .exp:last-child:nth-child(3n + 1) .exp__midia img {
    height: 100%; min-height: 260px; max-height: 340px; object-fit: cover;
  }
  .grade-experiencias > .exp:last-child:nth-child(3n + 1) .exp__corpo {
    justify-content: center;      /* texto centrado verticalmente ao lado da foto */
    gap: .7rem;
    padding: 2rem 2.2rem;
    max-width: 48ch;
  }
  /* no card em destaque o texto não estica: o link fica logo abaixo dele */
  .grade-experiencias > .exp:last-child:nth-child(3n + 1) .exp__corpo .exp__texto { flex: 0 0 auto; }
  .grade-experiencias > .exp:last-child:nth-child(3n + 1) .exp__corpo .exp__link { margin-top: .4rem; }
  .grade-experiencias > .exp:last-child:nth-child(3n + 1) .exp__titulo { font-size: 1.6rem; }
}
@media (min-width: 620px) and (max-width: 999px) {
  .grade-experiencias > .exp:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
  .grade-experiencias > .exp:last-child:nth-child(2n + 1) .exp__midia img { max-height: 300px; object-fit: cover; }
}
/* o mesmo para o mural da comunidade */
.mural__grade {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
@media (min-width: 560px) {
  .mural__grade > :last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   2. PLAYER FIXO NÃO COBRE MAIS O CONTEÚDO
   Ele flutua sobre a página; sem folga no rodapé, tapava os últimos itens
   (no celular chegava a cobrir a faixa de números logo abaixo do hero).
   ------------------------------------------------------------------------- */
body:has(.player.is-visivel) { padding-bottom: 92px; }
@media (max-width: 620px) {
  body:has(.player.is-visivel) { padding-bottom: 104px; }
  /* no celular ele encolhe e encosta na direita: deixa a coluna de leitura livre */
  .player {
    bottom: .75rem;
    left: auto; right: .75rem;
    transform: translateY(140%);
    width: min(300px, calc(100vw - 1.5rem));
    padding-block: .5rem;
  }
  .player.is-visivel { transform: translateY(0); }
  .player__info small { display: none; }
}
/* navegador sem :has() — folga permanente, custo visual baixo */
@supports not selector(:has(*)) {
  body { padding-bottom: 92px; }
}

/* ---------------------------------------------------------------------------
   3. CABEÇALHO NO CELULAR
   "Toca do Jacaré / RIO ARAGUAIA · DESDE 2005" ocupava quase toda a largura e
   encostava nos botões. Reduz a marca e devolve respiro.
   ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .marca__selo { height: 34px; }
  .marca__texto strong { font-size: .98rem; }
  .marca__texto small { font-size: .58rem; letter-spacing: .12em; }
  .marca { gap: .5rem; }
}
@media (max-width: 380px) {
  .marca__texto small { display: none; }   /* em telas muito estreitas, só o nome */
}

/* ---------------------------------------------------------------------------
   4. ALVOS DE TOQUE
   Links de texto do rodapé/menu ficavam abaixo dos 44px recomendados.
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .rodape a,
  .nav a,
  .link-botao {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   5. FOCO VISÍVEL CONSISTENTE (navegação por teclado)
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--dourado, #ffc63d);
  outline-offset: 3px;
  border-radius: 4px;
}