/* ==========================================================================
   Maqvel - ajustes proprios (nao editar style.css do template)
   ========================================================================== */

/* PROBLEMA: o painel .gallery_hover fica em position:absolute cobrindo o card
   inteiro. Com opacity:0 ele continua capturando cliques, entao a foto (que
   esta por baixo, dentro do <a>) nunca recebia o clique.
   SOLUCAO: o painel deixa de interceptar o mouse; so os controles dentro dele
   voltam a ser clicaveis. O efeito de hover continua igual, porque quem
   dispara e o :hover do elemento PAI. */
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover {
  pointer-events: none;
}

.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_button,
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover a {
  pointer-events: auto;
}

/* o link da foto ocupa todo o card, para o clique valer na area inteira */
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner > a {
  display: block;
}

/* deixa claro que a foto e clicavel */
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner > a,
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner > a img {
  cursor: pointer;
}

/* ==========================================================================
   06/08/2026 - painel de hover dos veiculos (home)
   ========================================================================== */

/* PROBLEMA: o .gallery_hover "centralizava" o conteudo com
   padding-top: calc(50% - 70px), que depende da LARGURA do card. Como a altura
   do card acompanha a proporcao da foto, nos cards mais baixos o conteudo
   estourava a caixa e o botao "Saiba mais" saia cortado (overflow:hidden).
   SOLUCAO: centralizar de verdade com flexbox. */
@media (min-width: 600px) {
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0;
  }

  /* o template reservava 30px embaixo do titulo; com o flexbox isso vira
     espaco perdido que empurra o botao para fora da caixa */
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover h4 {
    padding-bottom: 8px;
  }

  /* sem isso o botao esticaria de ponta a ponta (padrao do flex-item em coluna) */
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_button {
    align-self: center;
  }
}

/* Cards estreitos (600-991px): o card fica com ~190-240px de altura e o texto
   quebra em mais linhas. Aqui tudo encolhe e a descricao fica limitada a
   2 linhas. Os !important sao para vencer os style="" que estao no HTML. */
@media (min-width: 600px) and (max-width: 991px) {
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover {
    padding: 5px 0;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover h4 {
    font-size: 11px;
    line-height: 1.2;
    padding-bottom: 4px;
    margin: 0 6px 3px !important;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_description {
    font-size: 10px;
    line-height: 1.15 !important;
    margin: 0 6px 3px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul {
    margin: 0 6px 3px !important;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul li {
    font-size: 10px;
    line-height: 1.2;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul li strong {
    font-size: 1.1em !important;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_button {
    font-size: 10px;
    margin: 3px 6px 0 !important;
    padding: 3px 8px !important;
  }
}

/* 600-767px: nao cabe a descricao; sobra o essencial (titulo, preco, botao) */
@media (min-width: 600px) and (max-width: 767px) {
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover .facility_description {
    display: none;
  }
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover ul li {
    font-size: 9px;
  }
}

/* Abaixo de 600px o card tem menos de ~190px de altura e nem o essencial cabe:
   esconde o painel, como o template ja fazia abaixo de 500px. A foto inteira
   continua sendo link para a pagina do veiculo. */
@media (max-width: 599px) {
  .our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner .gallery_hover {
    display: none;
  }
}

/* ==========================================================================
   08/08/2026 - H1 da home
   ==========================================================================
   A home nao tinha nenhum H1 (o template so usava h2/h3). O titulo da secao
   de veiculos passou a ser o H1 da pagina: "Caminhoes e maquinas 0 km a venda".
   As regras abaixo replicam exatamente o que o template aplicava ao h2 dentro
   de .tittle, para que o visual continue igual ao das outras secoes. */
.tittle h1 {
  font: 400 24px "Oswald", sans-serif;
  color: #222222;
  padding-top: 90px;
  position: relative;
}

.tittle h1:after {
  content: "";
  position: absolute;
  background: #f6b60b;
  height: 5px;
  width: 60px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -30px;
}

/* a secao de veiculos tem fundo escuro; o texto do titulo e branco */
.our_services_area .tittle h1 {
  color: #fff;
}

/* As 12 fotos originais dos cards sao 1080x1080 (quadradas) e rendem cards de
   mesma altura. As fotos do Atego e do 560R vieram do anuncio, com outra
   proporcao, e quebravam o alinhamento da grade (500px e 339px contra 380px).
   Forcar 1:1 com object-fit nao altera nada nas quadradas e regulariza as novas. */
.our_services_area .portfolio_inner_area .portfolio_item .single_facilities .single_facilities_inner > a img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* ==========================================================================
   08/08/2026 - links de consorcio no pre-rodape
   ==========================================================================
   O template pinta link de rodape com o azul padrao do Bootstrap (#337ab7),
   que destoa da marca. Estes dois links usam o laranja da Maqvel - o mesmo
   #f6b60b ja aplicado nos destaques do site e no credito do rodape. */
.footer_area .footer_about.quick .my_address a {
  color: #f6b60b;
}

.footer_area .footer_about.quick .my_address a:hover,
.footer_area .footer_about.quick .my_address a:focus {
  color: #fff;
  text-decoration: underline;
}