/* =============================================================
 * tde-overrides.css
 * Ajustes visuais aplicados sobre o style.css do template original.
 * Carregado por functions.php após o responsive.css para ter
 * prioridade sem precisar de !important onde possível.
 * ============================================================= */

/* -------------------------------------------------------------
 * 1) Sidebar MS / Brasil (e outros usos de .popular-post-two)
 *    O template original usa imagens praticamente quadradas nas
 *    tabs. Quando a imagem destacada do post tem proporção 16:9
 *    ou retrato, ela "estica" o card e gera um braço extra no
 *    layout. Aqui forçamos o thumb para um quadrado fixo.
 * ------------------------------------------------------------- */
.popular-post-two {
    align-items: flex-start;
}
.popular-post-two .thumb {
    flex: 0 0 100px;
    width: 100px !important;
    height: 100px !important;
    overflow: hidden;
    border-radius: 6px;
}
.popular-post-two .thumb a,
.popular-post-two .thumb img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.popular-post-two .thumb img {
    object-fit: cover;
    object-position: center;
}

/* Cards "popular-post" (não-two) também — para a coluna lateral
   manter altura previsível com qualquer imagem destacada. */
.popular-post .thumb {
    overflow: hidden;
    border-radius: 6px;
}
.popular-post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* -------------------------------------------------------------
 * 2) Listagem de notícias / falecimento / notas — quando o post
 *    NÃO tem imagem destacada, o conteúdo ocupa 100% da coluna.
 *    Cada template adiciona a classe .no-thumb no .weekly-post-item
 *    quando ele renderiza sem .weekly-post-thumb.
 * ------------------------------------------------------------- */
.weekly-post-item.no-thumb {
    grid-template-columns: 1fr !important;   /* anula o 2-col do template */
    display: block;                          /* fallback se não for grid  */
}
.weekly-post-item.no-thumb .weekly-post-content {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
}

/* -------------------------------------------------------------
 * 3) Página de Contato — o email usa <a href="mailto:"> e o
 *    template estiliza links com cor de destaque (amarelo).
 *    Aqui voltamos para a cor normal de texto, mantendo
 *    apenas o cursor de link no hover.
 * ------------------------------------------------------------- */
.contact-info-item .content p a,
.contact-info-item .content p a:link,
.contact-info-item .content p a:visited {
    color: inherit;
    text-decoration: none;
}
.contact-info-item .content p a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------
 * 4) Embed do flipbook (Issuu / FlipHTML5) na single de
 *    Jornal Digital. Mantém proporção legível no desktop e
 *    full-width no mobile.
 * ------------------------------------------------------------- */
.tde-flip-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0 0 30px;
    background: #000;
    overflow: hidden;
}
.tde-flip-embed iframe,
.tde-flip-embed embed,
.tde-flip-embed object {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* -------------------------------------------------------------
 * 5) Estado vazio mais visível para listagens
 * ------------------------------------------------------------- */
.tde-empty-state {
    padding: 60px 20px;
    text-align: center;
    background: #f6f6f6;
    border: 1px dashed #ddd;
    border-radius: 8px;
    color: #666;
    font-size: 16px;
}

/* -------------------------------------------------------------
 * 6) Botão da rádio (.tde-radio-button via [tde_radio] /
 *    template-parts/radio-button.php)
 * ------------------------------------------------------------- */
.tde-radio-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #ffd400;
    color: #1a1a1a !important;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: filter .2s ease;
}
.tde-radio-button:hover {
    filter: brightness(.95);
    color: #000 !important;
    text-decoration: none;
}
.tde-radio-button img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Cursor de "click" em qualquer link que dispare o popup */
a.tde-radio-popup { cursor: pointer; }


/* =============================================================
 * ETAPA 2 — Listagens / Cards
 * ============================================================= */

/* -------------------------------------------------------------
 * 7) Reforço do "card sem thumb" — ocupa 100% da coluna.
 *    A classe .no-thumb é adicionada nos templates de listagem
 *    quando has_post_thumbnail() é falso.
 * ------------------------------------------------------------- */
.weekly-post-item.no-thumb,
.weekly-post-four.no-thumb {
    grid-template-columns: 1fr !important;   /* anula 2-col */
    display: block !important;               /* fallback */
}
.weekly-post-item.no-thumb .weekly-post-thumb,
.weekly-post-four.no-thumb .weekly-post-thumb {
    display: none !important;
}
.weekly-post-item.no-thumb .weekly-post-content,
.weekly-post-four.no-thumb .weekly-post-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* -------------------------------------------------------------
 * 8) Limitação de linhas dos títulos dos cards
 *    Mantém o HTML completo mas exibe só N linhas com "…".
 * ------------------------------------------------------------- */

/* Cards grandes da home / listagens (.weekly-post / .post-title) — 3 linhas */
.weekly-post-content .post-title,
.weekly-post-three .post-title,
.banner-post-content .post-title,
.featured-post-content .post-title,
.overlay-post-content .post-title,
.overlay-post-content-two .post-title,
.overlay-post-content-five .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar (popular-post / hot-post) — 2 linhas (espaço apertado) */
.popular-post .post-title,
.popular-post-two .post-title,
.hot-post-item .post-title,
.so-post-content .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Excerpt (resumo) — 2 linhas em qualquer card */
.weekly-post-content > p,
.weekly-post-three .weekly-post-content > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------------
 * 9) Imagem placeholder (quando o post não tem imagem destacada).
 *    Os templates passam a chamar tde_post_thumbnail_or_placeholder()
 *    em vez do <img src=".../temp-video.jpg">.
 *    Aqui só damos um leve ajuste de "object-fit" pra cobrir.
 * ------------------------------------------------------------- */
.tde-thumb-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #f4f4f4;
}


/* -------------------------------------------------------------
 * 10) Preloader fail-safe puro CSS
 *     Garante que mesmo sem JS o preloader some após 5s.
 *     O JS de tde-preloader-safety.js esconde antes via DOMContentLoaded.
 * ------------------------------------------------------------- */
@keyframes tde-preloader-fade {
    0%, 90% { opacity: 1; visibility: visible; pointer-events: auto; }
    100%    { opacity: 0; visibility: hidden;  pointer-events: none; }
}
#preloader {
    animation: tde-preloader-fade 5s ease forwards;
}


/* =============================================================
 * ETAPA 4 — Vídeos
 * ============================================================= */

/* -------------------------------------------------------------
 * 11) Embed de vídeo responsivo no single de vídeo (single-videos.php).
 *     O wrapper é gerado pelo filter tde_video_thumbnail_html quando
 *     o post tem o custom field "video_embed_url".
 *     Mantém proporção 16:9 e ocupa 100% da coluna em qualquer tela.
 * ------------------------------------------------------------- */
.tde-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 30px;
    background: #000;
    overflow: hidden;
    border-radius: 8px;
}
.tde-video-embed__inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.tde-video-embed iframe,
.tde-video-embed embed,
.tde-video-embed object,
.tde-video-embed video {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

/* -------------------------------------------------------------
 * 12) Iframes dentro do conteúdo (the_content) — YouTube/Vimeo
 *     embedados via oEmbed pelo editor, ou colados como <iframe>.
 *     Garante que sempre fiquem responsivos no mobile.
 * ------------------------------------------------------------- */
.tde-post-content iframe[src*="youtube.com"],
.tde-post-content iframe[src*="youtu.be"],
.tde-post-content iframe[src*="vimeo.com"],
.tde-post-content iframe[src*="dailymotion.com"],
.tde-post-content .wp-block-embed iframe,
.tde-post-content .wp-block-embed__wrapper iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 20px 0;
    border: 0;
}

/* Bloco oEmbed do Gutenberg — wrapper já tem .wp-block-embed */
.tde-post-content .wp-block-embed,
.tde-post-content .wp-block-embed__wrapper {
    width: 100%;
    margin: 20px 0;
}

/* -------------------------------------------------------------
 * 13) Listagem de vídeos (page-videos.php) — thumbs com proporção
 *     consistente 16:9 (formato natural de vídeo).
 * ------------------------------------------------------------- */
.weekly-post-three .weekly-post-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.weekly-post-three .weekly-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Aplica a proporção 16:9 só na grade de vídeos para não impactar
   listagens de notícias que já têm proporções definidas. */
body.post-type-archive-videos .weekly-post-three .weekly-post-thumb,
body.page-template-page-videos .weekly-post-three .weekly-post-thumb,
.tde-videos-grid .weekly-post-three .weekly-post-thumb {
    aspect-ratio: 16 / 9;
}
body.post-type-archive-videos .weekly-post-three .weekly-post-thumb img,
body.page-template-page-videos .weekly-post-three .weekly-post-thumb img,
.tde-videos-grid .weekly-post-three .weekly-post-thumb img {
    position: absolute;
    inset: 0;
}

/* -------------------------------------------------------------
 * 14) Ícone de "play" sobreposto na thumb da listagem de vídeos.
 *     Pequeno detalhe visual que ajuda o usuário a identificar
 *     que aquele card é um vídeo, não uma matéria comum.
 * ------------------------------------------------------------- */
body.post-type-archive-videos .weekly-post-three .weekly-post-thumb::after,
body.page-template-page-videos .weekly-post-three .weekly-post-thumb::after,
.tde-videos-grid .weekly-post-three .weekly-post-thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    background: rgba(0, 0, 0, .7);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M8 5v14l11-7z'/></svg>");
    background-repeat: no-repeat;
    background-position: 56% center;
    background-size: 28px 28px;
    pointer-events: none;
    transition: transform .2s ease, background-color .2s ease;
}
body.post-type-archive-videos .weekly-post-three:hover .weekly-post-thumb::after,
body.page-template-page-videos .weekly-post-three:hover .weekly-post-thumb::after,
.tde-videos-grid .weekly-post-three:hover .weekly-post-thumb::after {
    background-color: #ffd400;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M8 5v14l11-7z'/></svg>");
    transform: scale(1.05);
}

/* -------------------------------------------------------------
 * 13a) Slide do card grande da home (.tde-home-slide)
 *
 *      Antes do Slick inicializar, mostra só o primeiro item para
 *      evitar "Flash Of Unstyled Content". Depois que o slick-initialized
 *      é aplicado, todos os slides ficam visíveis (controlados pelo slick).
 * ------------------------------------------------------------- */
.tde-home-slide {
    position: relative;
}
.tde-home-slide:not(.slick-initialized) > .tde-home-slide__item:not(:first-child) {
    display: none;
}

/* Dots no formato de tracinhos brancos, canto inferior direito do slide
   (mesmo padrão do template Zaira). */
.tde-home-slide .slick-dots {
    position: absolute;
    right: 30px;
    bottom: 28px;
    z-index: 5;
    display: flex !important;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: auto;
}
.tde-home-slide .slick-dots li {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
}
.tde-home-slide .slick-dots li button {
    display: block;
    width: 22px;
    height: 3px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .5);
    text-indent: -9999px;
    cursor: pointer;
    border-radius: 2px;
    transition: width .25s ease, background .25s ease;
}
.tde-home-slide .slick-dots li button:hover {
    background: rgba(255, 255, 255, .8);
}
.tde-home-slide .slick-dots li.slick-active button {
    width: 36px;
    background: #fff;
}
.tde-home-slide .slick-dots li button::before { content: none; }

@media (max-width: 575px) {
    .tde-home-slide .slick-dots {
        right: 16px;
        bottom: 14px;
    }
    .tde-home-slide .slick-dots li button       { width: 16px; }
    .tde-home-slide .slick-dots li.slick-active button { width: 26px; }
}

/* -------------------------------------------------------------
 * 13c) Banners horizontais — centralizar na linha
 *
 *      Os banners de propaganda (slot home_topo, home_meio,
 *      home_conteudo, single_topo) renderizam um <img> dentro
 *      de .ad-banner-area > .ad-banner-img. Por padrão a imagem
 *      ficava alinhada à esquerda; aqui forçamos a centralização
 *      independente do tamanho da imagem.
 * ------------------------------------------------------------- */
.ad-banner-area .ad-banner-img,
.ad-banner-area .ad-banner-img-two {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.ad-banner-area .ad-banner-img a,
.ad-banner-area .ad-banner-img-two a {
    display: inline-block;
    max-width: 100%;
}
.ad-banner-area .ad-banner-img img,
.ad-banner-area .ad-banner-img-two img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* -------------------------------------------------------------
 * Banners VERTICAIS na sidebar (.sidebar-img)
 *
 * Os banners renderizados em sidebar-img (single_sidebar_1,
 * home_sidebar_1, home_sidebar_2) devem ocupar 100% da largura
 * da coluna automaticamente, sem depender do tamanho original
 * da imagem cadastrada. Mantém proporção (height: auto).
 * ------------------------------------------------------------- */
.sidebar-widget .sidebar-img,
.sidebar-img {
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}
.sidebar-widget .sidebar-img a,
.sidebar-img a {
    display: block;
    width: 100%;
}
.sidebar-widget .sidebar-img img,
.sidebar-img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover;
}

/* -------------------------------------------------------------
 * 13d) Listagens horizontais (.weekly-post-four)
 *
 *      Usado em Notícias, Falecimento, Notas, Turismo e Colunistas.
 *      Layout 2-col: thumb à esquerda + conteúdo à direita.
 *
 *      Padroniza a proporção das thumbs (3:2) e usa object-fit
 *      cover pra centralizar imagens de qualquer tamanho original
 *      sem distorcer. Resultado: grid uniformemente alinhado.
 * ------------------------------------------------------------- */
.weekly-post-four .weekly-post-thumb {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 6px;
}
.weekly-post-four .weekly-post-thumb > a:not(.post-tag) {
    display: block;
    width: 100%;
    height: 100%;
}
.weekly-post-four .weekly-post-thumb img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Reforço pro card SEM thumb ocupar 100% da linha.
   O tema base define .weekly-post-item como display:flex com gap:40px e
   .weekly-post-thumb com width:440px fixo — quando escondemos o thumb,
   o .weekly-post-content fica com largura intrínseca (não 100%).
   Aqui forçamos display:block no container e width:100% no conteúdo,
   neutralizando o flex layout original. */
.weekly-post-item.no-thumb,
.weekly-post-four.no-thumb,
.weekly-post-item.weekly-post-four.no-thumb,
.tde-card-fullwidth {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
}
.weekly-post-item.no-thumb > .weekly-post-thumb,
.weekly-post-four.no-thumb > .weekly-post-thumb,
.weekly-post-item.weekly-post-four.no-thumb > .weekly-post-thumb,
.tde-card-fullwidth > .weekly-post-thumb {
    display: none !important;
}
/* O .weekly-post-content do tema é display:flex column. Preservamos isso
   mas forçamos largura 100% e tiramos qualquer indentação herdada. */
.weekly-post-item.no-thumb > .weekly-post-content,
.weekly-post-four.no-thumb > .weekly-post-content,
.weekly-post-item.weekly-post-four.no-thumb > .weekly-post-content,
.tde-card-fullwidth > .weekly-post-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* -------------------------------------------------------------
 * Imagem destacada NO SINGLE (.blog-details-thumb)
 *
 * O tema base força altura fixa 450px com object-fit:cover,
 * o que recorta imagens verticais e distorce o foco. Aqui
 * desligamos o cover e deixamos altura automática (proporção
 * original da imagem) — fica 100% de largura e altura natural.
 *
 * Só vale no single (essa classe só existe no single.php).
 * As listagens continuam com object-fit:cover (padronização
 * de grid).
 * ------------------------------------------------------------- */
.blog-details-thumb {
    text-align: center;
}
.blog-details-thumb img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: unset !important;
    object-position: unset !important;
    display: block;
    margin: 0 auto;
}

/* -------------------------------------------------------------
 * Card SEM imagem destacada — markup próprio independente.
 *
 * Usado em /colunistas/ (e potencialmente em outros lugares) pra
 * cards de post sem foto. Como NÃO usa as classes .weekly-post-*
 * do tema base, evita totalmente o conflito com o display:flex e
 * width:440px do .weekly-post-thumb. Largura 100% nativa.
 * ------------------------------------------------------------- */
.tde-card-no-thumb {
    display: block;
    width: 100%;
    margin-bottom: 40px;
    padding: 0;
}
.tde-card-no-thumb .post-tag {
    display: inline-block;
    margin-bottom: 12px;
}
.tde-card-no-thumb .post-title {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 15px;
}
.tde-card-no-thumb .blog-post-meta {
    margin-bottom: 15px;
    text-align: left !important;
    width: 100%;
}
.tde-card-no-thumb .blog-post-meta .list-wrap {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    text-align: left !important;
}
.tde-card-no-thumb .blog-post-meta .list-wrap li {
    text-align: left !important;
    margin: 0 15px 0 0;
}
.tde-card-no-thumb p {
    margin-bottom: 20px;
}
.tde-card-no-thumb .view-all-btn .link-btn {
    font-weight: 600;
}

/* =============================================================
 * 13z) PADRONIZAÇÃO MÍNIMA DE IMAGENS DESTACADAS
 *
 *      Garante apenas que QUALQUER imagem destacada do tema
 *      use object-fit: cover (centralizada, sem distorcer).
 *      NÃO força aspect-ratio nos containers — cada classe
 *      do tema já tem suas próprias regras de tamanho.
 *
 *      As proporções padronizadas (Cadernos 16:9, Notícias 3:2,
 *      Turismo 16:9, etc.) ficam nas regras específicas mais
 *      abaixo neste arquivo. Aqui só tratamos o "como a imagem
 *      preenche o espaço já reservado pelo tema".
 * ============================================================= */
.weekly-post-thumb img,
.banner-post-thumb img,
.banner-post-thumb-four img,
.banner-post-thumb-seven img,
.overlay-post-thumb img,
.overlay-post-thumb-two img,
.overlay-post-thumb-two-slide img,
.overlay-post-thumb-five img,
.featured-post-thumb img,
.horizontal-post-thumb img,
.horizontal-post-thumb-three img,
.hot-post-thumb img,
.so-post-thumb img,
.popular-post .thumb img,
.popular-post-two .thumb img {
    object-fit: cover;
    object-position: center;
}

/* Mini-grid "Notícias Mais Lidas" no menu mobile (offcanvas) — agora
   populado dinamicamente com posts em vez dos placeholders fixos do
   template original. Cada item fica quadrado com object-fit cover. */
.offCanvas-instagram li {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
}
.offCanvas-instagram li a,
.offCanvas-instagram li img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
.offCanvas-instagram li a {
    transition: opacity .2s ease;
}
.offCanvas-instagram li a:hover {
    opacity: .85;
}


/* -------------------------------------------------------------
 * 13e) Bloco Turismo na home (.tde-turismo-grid)
 *
 *      Mesma técnica de Cadernos/Vídeos: padroniza thumbs com
 *      proporção 16:9 + object-fit cover, evitando que imagens
 *      verticais "estiquem" o card e desalinhem o grid.
 * ------------------------------------------------------------- */
/* Padroniza TODOS os blocos da home com cards .weekly-post-three
   (Esporte, Turismo, etc.) — proporção uniforme 16:9 + cover.
   Imagens verticais/altas eram a causa do "card esticado" — agora
   são forçadas a caber no aspect-ratio 16:9 com crop centralizado.

   !important + body como prefixo: garantem prioridade sobre regras
   do tema base e do filemtime cache. */
body .mining-post-area .weekly-post-three .weekly-post-thumb,
body .mining-post-wrap .weekly-post-three .weekly-post-thumb,
body .tde-turismo-grid .weekly-post-three .weekly-post-thumb,
body .tde-cadernos-grid .weekly-post-three .weekly-post-thumb,
body .tde-videos-grid .weekly-post-three .weekly-post-thumb {
    position: relative !important;
    display: block !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 8px;
}
body .mining-post-area .weekly-post-three .weekly-post-thumb > a:not(.post-tag),
body .mining-post-wrap .weekly-post-three .weekly-post-thumb > a:not(.post-tag),
body .tde-turismo-grid .weekly-post-three .weekly-post-thumb > a:not(.post-tag),
body .tde-cadernos-grid .weekly-post-three .weekly-post-thumb > a:not(.post-tag),
body .tde-videos-grid .weekly-post-three .weekly-post-thumb > a:not(.post-tag) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
body .mining-post-area .weekly-post-three .weekly-post-thumb img,
body .mining-post-wrap .weekly-post-three .weekly-post-thumb img,
body .tde-turismo-grid .weekly-post-three .weekly-post-thumb img,
body .tde-cadernos-grid .weekly-post-three .weekly-post-thumb img,
body .tde-videos-grid .weekly-post-three .weekly-post-thumb img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
body .mining-post-area .weekly-post-three .weekly-post-thumb .post-tag {
    z-index: 2;
}

/* -------------------------------------------------------------
 * Bloco Entretenimento na home
 *
 * Os 2 cards grandes (.overlay-post-five) e os 3 cards menores
 * (.horizontal-post-three) estavam com proporções diferentes —
 * agora ambos usam 16:9 com object-fit cover, padronizando o
 * grid igual ao original do Zaira.
 *
 * O título dos cards menores (.horizontal-post-content-three)
 * fica limitado a 2 linhas via line-clamp pra evitar cards de
 * alturas diferentes quando o título é muito longo.
 * ------------------------------------------------------------- */
body .trending-post-area-three .overlay-post-thumb-five,
body .trending-post-area-three .horizontal-post-thumb-three {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 8px;
}
body .trending-post-area-three .overlay-post-thumb-five > a,
body .trending-post-area-three .horizontal-post-thumb-three > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
body .trending-post-area-three .overlay-post-thumb-five img,
body .trending-post-area-three .horizontal-post-thumb-three img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Título dos 3 cards menores — limita a 2 linhas com "…" */
body .trending-post-area-three .horizontal-post-content-three .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tde-turismo-grid .weekly-post-three .weekly-post-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
}
.tde-turismo-grid .weekly-post-three .weekly-post-thumb > a:not(.post-tag) {
    display: block;
    width: 100%;
    height: 100%;
}
.tde-turismo-grid .weekly-post-three .weekly-post-thumb img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
.tde-turismo-grid .weekly-post-three .weekly-post-thumb .post-tag {
    z-index: 2;
}

/* -------------------------------------------------------------
 * 13b) Listagem de Cadernos — thumbs com proporção uniforme
 *
 *      Força todas as thumbs do grid de Cadernos a usar a mesma
 *      proporção (16:9) com object-fit: cover, garantindo grid
 *      visualmente alinhado mesmo com imagens de proporções
 *      diferentes (retrato, paisagem, quadrado).
 * ------------------------------------------------------------- */
.tde-cadernos-grid .weekly-post-three .weekly-post-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
}
.tde-cadernos-grid .weekly-post-three .weekly-post-thumb > a:not(.post-tag) {
    display: block;
    width: 100%;
    height: 100%;
}
.tde-cadernos-grid .weekly-post-three .weekly-post-thumb img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* O selo da categoria continua no canto superior esquerdo */
.tde-cadernos-grid .weekly-post-three .weekly-post-thumb .post-tag {
    z-index: 2;
}

/* -------------------------------------------------------------
 * 14b) Card de vídeo SEM imagem destacada
 *      Mantém a proporção 16:9 e o ícone de play, mas o fundo
 *      é transparente — não exibe placeholder de imagem feio.
 * ------------------------------------------------------------- */
.weekly-post-three .weekly-post-thumb.tde-thumb-empty {
    background: transparent;
    aspect-ratio: 16 / 9;
}
.weekly-post-three .weekly-post-thumb.tde-thumb-empty > a:not(.post-tag) {
    display: block;
    width: 100%;
    height: 100%;
}
.tde-thumb-empty__inner {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* -------------------------------------------------------------
 * 14c) Elimina o "vazio embaixo da coluna do conteúdo".
 *
 *      Quando a sidebar (col-30) tem mais widgets que o
 *      conteúdo principal (col-70), o Bootstrap deixa as duas
 *      colunas com a mesma altura por padrão (align-items: stretch),
 *      criando um espaço vazio embaixo da coluna mais curta.
 *
 *      Aplicamos as três coisas que blindam isso:
 *      - align-items: flex-start em todo .row dentro do <main>
 *      - align-self: flex-start nas próprias .col-70/.col-30
 *      - height: auto pra anular qualquer min-height que o
 *        tema base possa ter aplicado nas seções.
 *
 *      Tudo com !important pra vencer qualquer regra herdada
 *      do style.css ou responsive.css originais.
 * ------------------------------------------------------------- */
main.fix .row,
main.fix .row.justify-content-center {
    align-items: flex-start !important;
}

main.fix .col-70,
main.fix .col-30 {
    align-self: flex-start !important;
    height: auto !important;
}

/* Reforço: nenhuma section da home/single deve ter min-height
   herdada que estique a coluna toda artificialmente. */
main.fix .blog-details-area,
main.fix .recent-post-area-two,
main.fix .mining-post-area,
main.fix .author-inner-wrap,
main.fix .recent-post-inner-wrap,
main.fix .mining-post-inner {
    min-height: 0 !important;
}


/* =============================================================
 * ETAPA 3 — Jornal Digital
 * ============================================================= */

/* -------------------------------------------------------------
 * 15) Botões reutilizáveis (.tde-btn) — usados nos cards e no
 *     viewer do single de Jornal Digital.
 * ------------------------------------------------------------- */
.tde-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    text-decoration: none !important;
    transition: filter .2s ease, background .2s ease, color .2s ease;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tde-btn i {
    font-size: 14px;
    line-height: 1;
}
.tde-btn--primary {
    background: #ffd400;
    color: #1a1a1a !important;
}
.tde-btn--primary:hover {
    filter: brightness(.95);
    color: #000 !important;
}
.tde-btn--ghost {
    background: transparent;
    color: #1a1a1a !important;
    border-color: #d6d6d6;
}
.tde-btn--ghost:hover {
    background: #f4f4f4;
    color: #000 !important;
}

/* -------------------------------------------------------------
 * 16) Card da listagem do Jornal Digital
 * ------------------------------------------------------------- */
.tde-jornal-card .tde-jornal-edition {
    background: #1a1a1a;
    color: #ffd400 !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 6px 10px;
    border-radius: 4px;
}
.tde-jornal-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* -------------------------------------------------------------
 * 17) Viewer do PDF/Flip no single + barra de ações
 * ------------------------------------------------------------- */
.tde-flip-embed--pdf {
    aspect-ratio: 4 / 5;        /* PDFs costumam ser retrato */
    background: #2a2a2a;
}
@media (min-width: 992px) {
    .tde-flip-embed--pdf {
        aspect-ratio: 16 / 11;  /* desktop usa proporção mais larga */
    }
}
.tde-flip-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 30px;
}
@media (max-width: 575px) {
    .tde-flip-actions .tde-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* =============================================================
 * ETAPA 5 — Cadernos (abas de filtro)
 * ============================================================= */

/* -------------------------------------------------------------
 * 18) Barra de abas no topo da página de Cadernos.
 *     Ativa a aba selecionada com fundo amarelo do tema.
 * ------------------------------------------------------------- */
.tde-cadernos-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 32px;
    padding: 0 12px;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 16px;
}
.tde-cadernos-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f4f4f4;
    color: #1a1a1a !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tde-cadernos-tab:hover {
    background: #ececec;
    color: #000 !important;
}
.tde-cadernos-tab.is-active {
    background: #ffd400;
    color: #1a1a1a !important;
}
.tde-cadernos-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: rgba(0, 0, 0, .08);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.tde-cadernos-tab.is-active .tde-cadernos-count {
    background: rgba(0, 0, 0, .15);
}