/* ==========================================================================
   overrides.css — correções pontuais carregadas DEPOIS de app.css
   (app.css é o bundle compilado/minificado; não editar diretamente)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Home > carrossel "Blog": cards com altura consistente.
   Antes o template imprimia o corpo COMPLETO do post ({!! description !!}),
   estourando a altura. Agora usa o resumo; aqui garantimos clamp + cards
   de mesma altura com a imagem alinhada embaixo.
   -------------------------------------------------------------------------- */
.home__blog__itens .swiper-slide {
    height: auto;
}
.home__blog__item {
    height: 100%;
}
.home__blog__item__textContain {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.home__blog__item__titulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home__blog__item__description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 24px;
    max-height: 96px;
    margin-bottom: 28px;
}
.home__blog__item__button {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   2) Header do blog: linha de categorias quebrando no topo.
   O tema define .headerBlog__menu__item (usado no <nav> E em cada <a>) com
   margin-right:0, deixando os itens colados/quebrando feio. Damos espaçamento
   e mantemos cada item numa linha só.
   -------------------------------------------------------------------------- */
nav.headerBlog__menu__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
}
nav.headerBlog__menu__item > a.headerBlog__menu__item {
    margin: 0;
    white-space: nowrap;
    line-height: 1.2;
}

/* --------------------------------------------------------------------------
   3) Botão/link "Visite nosso site" quebrando em duas linhas.
   -------------------------------------------------------------------------- */
.headerBlog__social__site {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4) Paginação padrão (blogPaginate): separador "..." não deve parecer botão.
   -------------------------------------------------------------------------- */
.pagination__box__item--dots {
    pointer-events: none;
    border: none;
    cursor: default;
}

/* --------------------------------------------------------------------------
   5) Destaques do blog: a imagem tem largura/altura fixas (20.625rem x
   15.625rem) no app.css, então sem object-fit a foto estica/distorce.
   Recorta preservando proporção.
   -------------------------------------------------------------------------- */
.blog__main__highlights__container__posts--image img {
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   6) page-header: cor de fundo de segurança (vinho da identidade) ATRÁS do
   banner. O título é branco; se a imagem do banner faltar/404 (era o caso de
   /contato, cujo bannerFaleConosco.png foi restaurado), o branco ficava sobre
   fundo branco e sumia. Com o fundo vinho da marca o título segue legível
   mesmo sem imagem — e quando a imagem carrega ela cobre a cor.
   -------------------------------------------------------------------------- */
.page-header {
    background-color: #8a1538;
}

/* --------------------------------------------------------------------------
   7) /contato: subir o formulário (menos respiro acima da seção e abaixo do
   subtítulo "Para dúvidas ou sugestões...").
   -------------------------------------------------------------------------- */
.contato {
    padding-top: 40px;
}
.contato__title {
    margin-bottom: 36px;
}

/* --------------------------------------------------------------------------
   8) /produtos: menu "Filtrar Por" deve listar 1 item por linha. O app.css
   define .submenu com column-count:2 / grid de 2 colunas; forçamos coluna
   única no contexto da página de produtos (especificidade .produtos .submenu).
   -------------------------------------------------------------------------- */
.produtos .submenu {
    grid-template-columns: 1fr;
    column-count: 1;
    -moz-columns: auto;
}