/* ------------------------------------------------------------------
   Ajustes do tema que NÃO existem na LP estática.
   Arquivo separado de propósito: assets/css/style.css continua sendo
   cópia byte a byte da LP original, o que mantém simples ressincronizar
   os dois. Este aqui carrega em todas as telas, logo depois dele.
------------------------------------------------------------------ */

/* O menu ganhou o item "Blog" (7 links). Entre o fim do menu mobile (900px)
   e ~1050px a soma logo + links não cabe na largura do container, e os
   últimos itens vazavam para fora da tela. Aperta o espaçamento nessa faixa. */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav { gap: 20px; }
  .nav a { font-size: 14px; }
}

/* ------------------------------------------------------------------
   Seção "Últimos posts" da home (template-parts/ultimos-posts.php).
   Segue a linguagem da LP: fundo claro entre a seção branca de
   diferenciais e o CTA em gradiente, cards iguais aos de clientes.
------------------------------------------------------------------ */
.latest-posts{padding:95px 0;background:var(--fundo)}
.latest-posts-header{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:45px}
.latest-posts-header .section-title{margin-bottom:0}
.latest-posts-all{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;color:var(--destaque);font-size:15px;font-weight:700;white-space:nowrap}
.latest-posts-all:hover{color:var(--hover)}

.latest-posts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.latest-post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--borda);border-radius:17px;overflow:hidden;box-shadow:0 9px 25px rgba(18,61,99,.06);transition:.25s}
.latest-post-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,61,99,.13)}
.latest-post-thumb{display:block;aspect-ratio:16/10;background:var(--claro);overflow:hidden}
.latest-post-thumb img{width:100%;height:100%;object-fit:cover}
.latest-post-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--destaque);font-size:30px}
.latest-post-body{flex:1;display:flex;flex-direction:column;padding:20px}
.latest-post-date{display:flex;align-items:center;gap:8px;color:var(--cinza);font-size:12px;font-weight:600}
.latest-post-date i{color:var(--destaque)}
.latest-post-title{margin:10px 0 18px;color:var(--escuro);font-size:17px;line-height:1.4;font-weight:700}
.latest-post-card:hover .latest-post-title a{color:var(--destaque)}
.latest-post-link{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--destaque);font-size:14px;font-weight:700}

@media(max-width:900px){.latest-posts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){
  .latest-posts{padding:75px 0}
  .latest-posts-header{display:block}
  .latest-posts-header .section-title{margin-bottom:14px}
  .latest-posts-grid{grid-template-columns:1fr;gap:16px}
}

/* ------------------------------------------------------------------
   Mobile: centralização dos títulos e dos cards de serviço.

   A LP já centraliza hero, clientes, processo, CTA, rodapé e a coluna de
   contato nessa largura — estes blocos tinham ficado de fora. Usamos o mesmo
   corte de 900px em que a LP passa para o tratamento mobile.
------------------------------------------------------------------ */
@media (max-width: 900px) {

  /* Card "Solicite um Orçamento" do hero (selo + título; campos seguem à esquerda) */
  .hero-form-card > .form-badge{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
  .hero-form-card > h2{text-align:center}

  /* Sobre a TecMaster: rótulo, título e parágrafos. A lista de checks continua
     alinhada à esquerda — mesmo tratamento que a LP dá aos itens do hero, que
     ficam à esquerda mesmo com o texto acima centralizado. */
  .about-text{text-align:center}

  /* Serviços: cabeçalho da seção e o conteúdo de cada card (ícone incluído) */
  .services-header{display:block;text-align:center}
  .services-header .section-description{margin-left:auto;margin-right:auto}
  .service-card{align-items:center;text-align:center}

  /* Segmentos */
  .segments-header{text-align:center}
  .segments-header .section-description{margin-left:auto;margin-right:auto}

  /* Diferenciais: cabeçalho e cards. No card, o ícone sai da lateral e vai para
     cima do texto — o "flex:0 0 43px" original passaria a valer como altura,
     então volta para auto e a altura fixa de 43px do próprio ícone é quem manda. */
  .differentials .container > .section-tag,
  .differentials .container > .section-title{text-align:center}
  .differential-card{flex-direction:column;align-items:center;gap:14px;text-align:center}
  .differential-card i{flex:0 0 auto}

  /* Como funciona: o número (bloco de 50px) e o texto do card.
     O card não é flex, então o número centraliza por margem automática. */
  .process-card{text-align:center}
  .process-number{margin-left:auto;margin-right:auto}

  /* Formulário da seção de contato */
  .contact-form > h3,
  .contact-form > p{text-align:center}

  /* Seção "Últimos posts" (do tema) */
  .latest-posts-header{text-align:center}
  .latest-posts-all{justify-content:center}
}

/* No celular (mesmo corte de 650px que a LP usa para serviços, segmentos,
   diferenciais e processo) os 4 cards de números empilham numa coluna só.
   Entre 651px e 900px continuam 2 por linha, como na LP original.
   O separador vertical entre os cards vira horizontal; o último card já é
   zerado pelo ".stat-card:last-child{border:0}" do style.css. */
@media (max-width: 650px) {
  .stats-grid{grid-template-columns:1fr}
  .stat-card{border-right:0;border-bottom:1px solid var(--borda)}
}

/* ------------------------------------------------------------------
   Desktop largo: nos cards de serviço o título sai de baixo do ícone e vai
   para o lado dele, centralizado na mesma linha. Descrição e link seguem
   ocupando a largura toda, abaixo.

   Por que 1180px e não 901px: o container é min(1180px, 100% - 40px) e os
   cards são 3 por linha. A 1440px sobram 246px ao lado do ícone — cabe o
   título maior ("Recuperação e manutenção") com 17px. A 1024px sobrariam
   180px, o que exigiria ~13px de fonte, e a 901px só 139px (~10px): abaixo
   de 1180px o empilhado original continua sendo a melhor leitura.

   A fonte cai de 21px para 15–17px conforme a largura, para o título não
   quebrar em duas linhas.
------------------------------------------------------------------ */
@media (min-width: 1180px) {
  .service-card{
    display:grid;
    grid-template-columns:55px minmax(0,1fr);
    grid-template-rows:auto auto 1fr;
    column-gap:16px;
    align-items:start;
  }
  .service-icon{grid-column:1;grid-row:1;align-self:center;margin-bottom:0}
  .service-card h3{
    grid-column:2;grid-row:1;align-self:center;
    margin-bottom:0;
    font-size:clamp(15px,1.2vw,17px);
    line-height:1.25;
    text-wrap:balance;   /* se um título novo e mais longo precisar quebrar, quebra equilibrado */
  }
  .service-card p{grid-column:1/-1;grid-row:2;margin-top:23px}
  /* justify-self alinha na horizontal; align-self:start impede que a linha 1fr
     empurre o link de volta para o rodapé do card. */
  .service-link{grid-column:1/-1;grid-row:3;justify-self:end;align-self:start}
}

/* ------------------------------------------------------------------
   Card de serviço: acompanha o conteúdo em vez dos 300px fixos,
   e o link sobe para logo abaixo da descrição (à direita no desktop,
   centralizado no mobile).

   O vão que aparecia entre a descrição e o link vinha de duas regras do
   style.css somadas: ".service-card{min-height:300px}" e
   ".service-link{margin-top:auto}", que empurrava o link para o fundo do card.
   Os cards de uma mesma linha continuam com a mesma altura — quem iguala é o
   próprio grid, não a altura mínima.
------------------------------------------------------------------ */
.service-card{min-height:0}
.service-link{margin-top:0}

/* Entre 901px e 1179px o card ainda é flex em coluna: aí quem alinha o link
   na horizontal é o align-self (eixo transversal), não o justify-self. */
@media (min-width: 901px) and (max-width: 1179px) {
  .service-link{align-self:flex-end}
}

/* ------------------------------------------------------------------
   Cabeçalho de "Nossos serviços" no desktop: rótulo, título e descrição
   empilhados, um abaixo do outro — como nas outras seções da LP.

   Antes o .services-header era flex com a descrição ao lado do título
   (justify-content:space-between), e ela ainda caía 20px abaixo da base do
   título, porque o align-items:flex-end alinha as CAIXAS e a caixa da
   esquerda termina com a margem do .section-title.

   De quebra isso resolve a quebra do título: ao lado da descrição sobravam
   só 762px e "pisos e revestimentos" partia no meio; ocupando a largura
   toda (1180px) o título cabe inteiro em uma linha, já que precisa de 1036px.
------------------------------------------------------------------ */
@media (min-width: 901px) {
  .services-header{display:block}
  /* text-wrap:balance é rede de segurança: se um título maior precisar de duas
     linhas, elas saem equilibradas em vez de deixar uma palavra sozinha. */
  .services-header .section-title{text-wrap:balance}
}