/* ==========================================================
   Você Sabia? - ajustes sobre o template (main.css)
   ========================================================== */

/* Paleta de 8 cores no mesmo tom pastel do template.
   Cada categoria recebe uma cor pelo id (id % 8). */
.vs-cor-0 { --vs-fundo: #fff4f4; --vs-icone: #fa5252; }
.vs-cor-1 { --vs-fundo: #eef5fa; --vs-icone: #269fff; }
.vs-cor-2 { --vs-fundo: #fcf4ff; --vs-icone: #d566ff; }
.vs-cor-3 { --vs-fundo: #fefaf0; --vs-icone: #dda10c; }
.vs-cor-4 { --vs-fundo: #f0fbf4; --vs-icone: #22a861; }
.vs-cor-5 { --vs-fundo: #fff0f8; --vs-icone: #e12a72; }
.vs-cor-6 { --vs-fundo: #eefbfb; --vs-icone: #12a5a5; }
.vs-cor-7 { --vs-fundo: #f3f1ff; --vs-icone: #6f5cf0; }
.vs-cor-todos { --vs-fundo: #f3f6f6; --vs-icone: #44566c; }

/* ---------- Filtro ---------- */
.vs-filtro {
    width: 100%;
    border: 2px solid transparent;
    background-color: var(--vs-fundo);
    text-align: left;
    cursor: pointer;
    align-items: center;
    transition: border-color .2s, transform .2s;
}
.vs-filtro:hover { transform: translateY(-2px); }
.vs-filtro:focus-visible { outline: 2px solid var(--vs-icone); outline-offset: 2px; }
.vs-filtro.ativo { border-color: var(--vs-icone); }

/* Versão compacta: 5 por linha no desktop */
.bostami-what-do-item.vs-filtro {
    height: 100%;
    margin-bottom: 0;
    padding: 12px 16px;
    border-radius: 10px;
}
.vs-filtro .text .title {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 22px;
}
.vs-filtro .text .vs-total {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: var(--body-text);
}

/* ---------- Grade de artigos ---------- */
.vs-artigo {
    background-color: var(--vs-fundo);
    height: calc(100% - 30px);
}
.vs-artigo .img {
    aspect-ratio: 16 / 10;
    background-color: rgba(0, 0, 0, .04);
}
.vs-artigo .img img { transition: transform .4s; }
.vs-artigo .blog-cetagory { color: var(--vs-icone); font-weight: 500; }
.vs-artigo .blog-title { margin-top: 8px; margin-bottom: 0; text-transform: none; }
.vs-artigo .blog-title a { color: inherit; }

/* ---------- Mensagens e "Carregar mais" ---------- */
.vs-mensagem {
    text-align: center;
    padding: 30px 15px;
    color: var(--body-text);
}
.vs-carregar {
    display: inline-block;
    min-width: 200px;
    height: 50px;
    padding: 0 30px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    background: linear-gradient(180deg, #fa5252 0%, #e12a72 100%);
    cursor: pointer;
    transition: opacity .2s;
}
.vs-carregar:hover { opacity: .9; }
.vs-carregar:disabled { opacity: .6; cursor: wait; }

/* ---------- Dentro do iframe do site ----------
   O template fixa o .page-wrapper em 100vh com rolagem própria; dentro do iframe
   ele precisa crescer com o conteúdo para o site ajustar a altura do iframe. */
.vs-iframe .page-wrapper {
    position: static;
    height: auto;
    width: auto;
    overflow: visible;
}