/*
  CSS DO TEMA — o que o site GANHOU depois da conversão.

  ⚠️ ESTE É O ÚNICO CSS ESCRITO À MÃO NESTE TEMA, e a separação é o ponto.
  As folhas irmãs (`home.css`, `pagina.css`, `servico.css`, `contato.css`,
  `indice-servicos.css`) são COPIADAS do build Astro aprovado por
  `pnpm wp:asante:sync` — elas reproduzem o site que foi aprovado, e mexer nelas
  à mão faria a paridade parar de provar o que promete. Este arquivo é outra
  coisa: desenho NOVO, pedido depois, e por isso mora fora do que o sync
  sobrescreve.

  Ele consome os tokens que já existem (`--e-*`, `--fs-*`, `--acao`,
  `--fundo-creme`, `--raio-redondo`): nada de px solto, nada de cor crua.

  Entra DEPOIS das folhas sincronizadas (ver `asante_assets()`), então pode
  refinar o que elas declaram sem precisar de `!important`.
*/

/* =========================================================================
 * CONTATOS — telefone, e-mail e endereço da página de contato
 *
 * Substitui dois botões laranja lado a lado e uma linha de endereço solta. O
 * problema não era a cor: era não haver hierarquia. Três informações de
 * naturezas diferentes (duas acionáveis, uma de referência) tinham o mesmo
 * peso, e o endereço — a mais longa — era a menor da tela.
 *
 * O padrão de rótulo pequeno em caixa-alta sobre valor grande já existia na
 * folha aprovada (`.contato__diretos`); aqui ele ganha o ícone e o respiro que
 * faltavam, e o endereço deixa de ser nota de rodapé.
 * ====================================================================== */

.contatos {
  display: grid;
  gap: var(--e-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contatos__item {
  display: grid;
  /* ícone à esquerda ocupando as duas linhas; rótulo em cima do valor */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--e-4);
  row-gap: var(--e-1);
  align-items: start;
}

.contatos__icone {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--raio-redondo);
  background: var(--fundo-creme);
  color: var(--acao);
}

.contatos__icone svg {
  width: 1.375rem;
  height: 1.375rem;
}

.contatos__rotulo {
  font-size: var(--fs-14);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.contatos__valor {
  font-size: var(--fs-23);
  font-weight: var(--peso-forte);
  line-height: 1.3;
  color: var(--acao);
  text-decoration: none;
  /* Endereço e e-mail longos não podem empurrar a coluna. */
  overflow-wrap: anywhere;
}

a.contatos__valor:hover {
  text-decoration: underline;
}

/*
  O endereço não é link, e por isso não é laranja: nesta paleta o laranja
  promete um destino. Fica na tinta do corpo, um degrau abaixo no peso — mesma
  família, hierarquia honesta.
*/
.contatos__valor--texto {
  color: var(--tinta);
  font-weight: var(--peso-semi);
  font-size: var(--fs-20);
}

@media (max-width: 34rem) {
  .contatos {
    gap: var(--e-5);
  }
  .contatos__icone {
    width: 2.5rem;
    height: 2.5rem;
  }
  .contatos__valor {
    font-size: var(--fs-20);
  }
  .contatos__valor--texto {
    font-size: var(--fs-16);
  }
}


/* =========================================================================
 * MEDIDA DE LEITURA nas seções SEM foto
 *
 * Quando a seção tem foto, a coluna de texto ocupa ~52% e a linha sai com uns
 * 60 caracteres — confortável. Sem foto, o mesmo bloco herda a largura inteira
 * do container: medido em 1280, 1052px de linha, **cerca de 130 caracteres**.
 * O olho perde o começo da linha seguinte muito antes disso.
 *
 * Não é caso novo — a página de Driving and Forklift Trucks já era assim, por
 * não ter foto de corpo. As seções que o folheto do service user trouxe só
 * tornaram o problema frequente o bastante para ser conserto.
 *
 * O limite é em `ch` de propósito: ele acompanha o corpo do texto, então não
 * volta a apertar nem a alargar quando a escala tipográfica mudar.
 * ====================================================================== */

.texto-imagem__grade:not(.texto-imagem--com-foto) .texto-imagem__texto {
  max-width: 68ch;
}

/*
  A banda de cor tem o mesmo problema com um agravante: a coluna do texto é
  fixada em `grid-column: 2` (ou 1, conforme o lado da foto), então sem mídia
  metade da faixa fica VAZIA — não é linha comprida, é buraco. Aqui o texto
  volta a atravessar a faixa e ganha a mesma medida de leitura.
*/
.banda__interno.banda--sem-foto .banda__coluna {
  grid-column: 1 / -1;
  max-width: 68ch;
}