/* ===========================================================================
   FAVORITOS — pages/favoritos.php
   ---------------------------------------------------------------------------
   MEDIDO em sites.whmsam.com.br/Desenvolvimento/ICI/favoritos.php
   (2026-08-21, viewport 1440):

     área de conteúdo ... padding 50px em cima, 60px embaixo
     título centrado .... y=278, 20px/700 em #fae002, margem inferior 15px
     "Imóveis para
      Locação" .......... y=348, 20px/700 em #fae002, margem 48px / 16px
     trilha ............. y=386; cards em x=68, 398 e 728 — passo de 330px,
                          card de 314 com 8px de folga de cada lado
     frase de vazio ..... 16px/400 em #272727

   O fundo da página (#fafafa) já vem de --cor-fundo-pagina no style.css e
   bate com o rgb(250,250,250) da referência.

   O card de imóvel e a faixa "Ficou com alguma dúvida?" são componentes
   compartilhados e moram no style.css.
   =========================================================================== */
.favoritos {
    padding: 50px 0 60px;
}

/* Os dois trechos ficam na MESMA LINHA porque na referência os dois <span>
   são `display: inline` — lê como frase corrida, e é o que está no ar.
   Na referência isto é um <h2> e a página não tem <h1>; aqui é <h1> com a
   mesma aparência (ver o comentário em favoritos.php). */
.favoritos__titulo {
    margin: 0 0 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: var(--cor-primaria);
}

.favoritos__titulo-principal,
.favoritos__titulo-apoio {
    display: inline;
}

.favoritos__secao {
    margin: 48px 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: var(--cor-escura);
}

/* Passo de 330px = 4 colunas em 1320. Com menos de 4 favoritos as colunas que
   faltam ficam vazias e o card NÃO estica — é o mesmo comportamento da
   vitrine da home, e é o que a referência faz (lá são slots de slick). */
.favoritos__trilha {
    display: flex;
    flex-wrap: wrap;
}

.favoritos__item {
    flex: 0 0 25%;
    padding: 8px;
    min-width: 0;
}

/* A FRASE FICA CENTRADA NA LINHA INTEIRA, e aqui há uma divergência de
   propósito: na referência ela sai presa numa caixa de 330px à esquerda,
   porque o `width:100%` do style inline resolve contra a trilha do slick e
   não contra a linha. O resultado lá é uma frase quebrada em duas linhas,
   encostada na esquerda de uma faixa de 1320px. Texto igual, posição
   corrigida — ver a lista de divergências no BRIEFING §14. */
.favoritos__vazio {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 400;
    text-align: center;
    color: #272727;
}

@media (max-width: 1199px) {
    .favoritos__item {
        flex-basis: 33.3333%;
    }
}

@media (max-width: 991px) {
    .favoritos__item {
        flex-basis: 50%;
    }
}

/* No celular a página inteira vai para o meio (pedido do cliente em
   2026-08-25). O título e as frases de "nenhum favorito" já eram centrados;
   faltavam os títulos de seção, que ficavam encostados à esquerda e deixavam
   a coluna torta. */
@media (max-width: 767px) {
    .favoritos__secao {
        text-align: center;
    }
}

@media (max-width: 575px) {
    .favoritos__item {
        flex-basis: 100%;
    }
}