@import url(reset.css);

/* =========================================================
   PÁGINA DO BLOG — MOBILE
========================================================= */

@media (max-width: 1200px) {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #ffffff;
    }

    main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* =========================================================
       1. HERO BANNER — "Blog"
    ========================================================= */

    .principal {
        position: relative !important;
        width: 100% !important;
        height: 390px !important;
        margin: 72px 0 0 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }

    .principal .img {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .principal .img img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 25% !important;
        display: block !important;
    }

    .principal .img::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(
            180deg,
            rgba(17, 34, 64, 0.15) 0%,
            rgba(17, 34, 64, 0.45) 40%,
            rgba(17, 34, 64, 0.85) 75%,
            rgba(17, 34, 64, 0.98) 100%
        ) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .principal .conteudo {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        z-index: 2 !important;
        padding: 0 20px 28px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .principal .conteudo h2 {
        margin: 0 0 10px 0 !important;
        color: #ffffff !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 1.65rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        letter-spacing: -0.3px !important;
    }

    .principal .conteudo p {
        max-width: 330px !important;
        margin: 0 auto !important;
        color: #ffffff !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.84rem !important;
        line-height: 1.45 !important;
        font-weight: 400 !important;
        text-align: center !important;
        opacity: 0.95 !important;
    }

    /* =========================================================
       2. EM DESTAQUE
    ========================================================= */

    .destaque {
        width: 100% !important;
        min-height: unset !important;
        padding: 32px 20px 24px 20px !important;
        box-sizing: border-box !important;
        display: block !important;
        background: #ffffff !important;
    }

    .destaque .conteudos {
        width: 100% !important;
        max-width: 100% !important;
        min-height: unset !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Título Mobile acima da imagem */
    .destaque .titulo-mobile-destaque {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #112240 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        text-align: left !important;
        line-height: 1.2 !important;
    }

    .destaque .titulo-mobile-destaque::before {
        content: "•" !important;
        color: #112240 !important;
        font-size: 1.3rem !important;
        line-height: 1 !important;
    }

    .destaque .conteudo .titulo-desktop-destaque {
        display: none !important;
    }

    /* Imagem do destaque */
    .destaque .imagem {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 16px 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        display: block !important;
    }

    .destaque .imagem img {
        width: 100% !important;
        height: 230px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        display: block !important;
    }

    /* Conteúdo textual do destaque */
    .destaque .conteudo {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .destaque .conteudo h3 {
        margin: 0 0 6px 0 !important;
        color: #112240 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    .destaque .conteudo span {
        margin: 0 0 12px 0 !important;
        color: #64748b !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.8rem !important;
        font-style: italic !important;
        display: block !important;
        text-align: left !important;
    }

    .destaque .conteudo p {
        max-width: 100% !important;
        margin: 0 0 14px 0 !important;
        color: #334155 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        font-weight: 400 !important;
        text-align: left !important;
    }

    .destaque .conteudo a {
        color: #112240 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.86rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-block !important;
    }

    /* =========================================================
       3. PESQUISA & FILTROS
    ========================================================= */

    .noticias {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 20px 48px 20px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    .filtro {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin: 0 0 24px 0 !important;
    }

    /* Linha de pesquisa */
    .pesquisa {
        width: 100% !important;
        height: 46px !important;
        border-radius: 50px !important;
        background: #ffffff !important;
        border: 1.5px solid #d1d5db !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        padding: 3px 4px 3px 14px !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    .pesquisa input {
        flex: 1 !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        color: #112240 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.86rem !important;
        padding: 0 8px !important;
    }

    .pesquisa input::placeholder {
        color: #94a3b8 !important;
    }

    .pesquisa button {
        width: auto !important;
        height: 38px !important;
        padding: 0 18px !important;
        border-radius: 50px !important;
        background: #112240 !important;
        color: #ffffff !important;
        border: none !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.82rem !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        transition: 0.2s ease !important;
    }

    .pesquisa button img {
        width: 12px !important;
        height: 12px !important;
        object-fit: contain !important;
        filter: brightness(0) invert(1) !important;
    }

    /* Linha do filtro */
    .filtro-linha {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .label-filtro {
        color: #112240 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
    }

    .select-personalizado {
        flex: 1 !important;
        width: auto !important;
        height: 40px !important;
    }

    .select-personalizado select {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50px !important;
        border: 1.5px solid #d1d5db !important;
        background: #ffffff !important;
        padding: 0 20px !important;
        color: #112240 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.86rem !important;
        outline: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23112240' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        cursor: pointer !important;
    }

    /* =========================================================
       4. GRELHA DE NOTÍCIAS (2x2 — 4 POR VEZ)
    ========================================================= */

    .livros {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .livros .lista-livros {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(0, auto) !important;
        gap: 14px 12px !important;
        width: 100% !important;
        margin: 0 0 28px 0 !important;
        align-items: stretch !important;
    }

    .livros .lista-vazia {
        grid-column: 1 / -1;
        margin: 0;
        padding: 22px 12px;
        color: #112240;
        text-align: center;
        line-height: 1.45;
    }

    /* Card individual da notícia */
    .livros .livro {
        width: 100% !important;
        background: #ffffff !important;
        border: 1px solid #e9ecef !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    /* Ocultar cards fora da página ativa */
    .livros .livro.oculto {
        display: none !important;
    }

    /* Fallback imediato: no mobile apenas 4 artigos aparecem por vez se JS não tiver carregado */
    .livros:not(.js-paginacao-ativa) .lista-livros .livro:nth-child(n+5) {
        display: none !important;
    }

    .livros .livro:hover {
        transform: none !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    }

    /* Imagem do card */
    .livros .livro > img {
        width: 100% !important;
        height: 115px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 11px 11px 0 0 !important;
        margin: 0 !important;
    }

    /* Data e Categoria */
    .livros .livro .categoriaAno {
        margin: 0 !important;
        padding: 0 !important;
    }

    .livros .livro .categoriaAno p {
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.68rem !important;
        color: #64748b !important;
        font-style: italic !important;
        margin: 8px 8px 4px 8px !important;
        line-height: 1.2 !important;
    }

    /* Conteúdo textual do card */
    .livros .livro .conteudo {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
    }

    /* Título do artigo */
    .livros .livro h4 {
        color: #112240 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin: 0 8px 6px 8px !important;
        text-align: left !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Descrição do artigo */
    .livros .livro .conteudo p {
        color: #475569 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        margin: 0 8px 10px 8px !important;
        text-align: left !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Link "Ler Artigo..." */
    .livros .livro a {
        color: #112240 !important;
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        margin: auto 8px 12px 8px !important;
        display: inline-block !important;
    }

    .livros .livro a img {
        display: none !important;
    }

    /* =========================================================
       5. PAGINAÇÃO
    ========================================================= */

    .paginacao {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 28px auto 20px auto !important;
        gap: 12px !important;
    }

    .contador-paginacao {
        font-family: var(--fonte-principal, 'Montserrat', sans-serif) !important;
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        color: #112240 !important;
        text-align: center !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .paginacao-botoes {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .paginacao button {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        border: none !important;
        outline: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background-color: #112240 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .paginacao button:disabled {
        background-color: #d9d9d9 !important;
        opacity: 1 !important;
        cursor: default !important;
        transform: none !important;
    }

    .paginacao button:not(:disabled):hover {
        transform: scale(1.05) !important;
        background-color: #182e4e !important;
    }

    .paginacao button img {
        width: 10px !important;
        height: 10px !important;
        object-fit: contain !important;
        display: block !important;
        filter: brightness(0) invert(1) !important;
        transition: transform .3s ease !important;
    }

    /* Seta anterior aponta para a esquerda (como no desktop) */
    .paginacao .pagina-anterior img,
    .pagina-anterior img {
        transform: rotate(180deg) !important;
    }

    /* Seta próxima aponta para a direita (como no desktop) */
    .paginacao .pagina-proxima img,
    .pagina-proxima img {
        transform: rotate(0deg) !important;
    }
}


/* =====================================================
   MOBILE — IMAGENS E VÍDEOS DO CONTEÚDO
===================================================== */


/* =====================================================
   IMAGENS
===================================================== */

.conteudo img {
    width: 100%;
    max-width: 100%;

    height: auto;

    display: block;
    margin: 0 auto;

    border-radius: 6px;

    object-fit: contain;
}


/* =====================================================
   VÍDEOS DO QUILL / YOUTUBE
===================================================== */

.conteudo iframe.ql-video {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    aspect-ratio: 16 / 9 !important;

    display: block !important;

    margin: 8px auto !important;
    padding: 0 !important;

    border: 1px solid #F36D53 !important;
    border-radius: 10px !important;

    background: #000;

    overflow: hidden;
}


/* =====================================================
   VÍDEO HTML5
===================================================== */

.conteudo video {
    width: 100%;
    max-width: 100%;

    height: auto;

    display: block;

    margin: 20px auto 8px;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    background: #000;

    border: 1px solid #F36D53;
    border-radius: 10px;
}