/* ================================================================
   Grid de Notícias Avançado – news-grid.css
   ================================================================ */

.eng-news-grid-widget *,
.eng-news-grid-widget *::before,
.eng-news-grid-widget *::after {
    box-sizing: border-box;
}

.eng-news-grid-widget {
    --eng-primary:    #0073aa;
    --eng-accent:     #005f8d;
    --eng-text:       #1e1e1e;
    --eng-muted:      #6b7280;
    --eng-border:     #e5e7eb;
    --eng-bg:         #ffffff;
    --eng-radius:     12px;
    --eng-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --eng-shadow-md:  0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    --eng-shadow-lg:  0 10px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
    --eng-transition: 0.28s cubic-bezier(.4,0,.2,1);
    font-family: inherit;
    color: var(--eng-text);
}

/* ── Busca ──────────────────────────────────────────────────────── */
.eng-search-wrap { margin-bottom: 20px; }

.eng-search {
    display: flex;
    align-items: center;
    background: var(--eng-bg);
    border: 1.5px solid var(--eng-border);
    border-radius: 50px;
    padding: 0 16px;
    gap: 8px;
    transition: border-color var(--eng-transition), box-shadow var(--eng-transition);
}
.eng-search:focus-within {
    border-color: var(--eng-primary);
    box-shadow: 0 0 0 3px rgba(0,115,170,.15);
}
.eng-search__icon  { color: var(--eng-muted); flex-shrink:0; display:flex; }
.eng-search__input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 12px 0; font-size: .95rem; color: var(--eng-text); min-width: 0;
}
.eng-search__input::placeholder { color: var(--eng-muted); }
.eng-search__clear {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--eng-muted); border-radius: 50%; display: flex; flex-shrink: 0;
    transition: color var(--eng-transition), background var(--eng-transition);
}
.eng-search__clear:hover { color: var(--eng-text); background: var(--eng-border); }
.eng-search__results-count { margin-top: 8px; font-size: .85rem; color: var(--eng-muted); min-height: 1.2em; }

/* ═══════════════════════════════════════════════════════════════════
   FILTRO DE CATEGORIAS (Abas / Pílulas / Botões)
═══════════════════════════════════════════════════════════════════ */
.eng-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 28px;
    align-items: stretch;
}

.eng-filter__btn {
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    transition: all var(--eng-transition);
    white-space: nowrap;
    font-family: inherit;
    background: none;
    border: none;
}

/* ── Abas ─────────────────────────────────────────────────────── */
.eng-filter--tabs {
    border-bottom: 2px solid var(--eng-border);
    gap: 0;
    margin-bottom: 28px;
}
.eng-filter--tabs .eng-filter__btn {
    padding: 10px 20px;
    color: var(--eng-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    background: transparent;
    font-weight: 500;
    position: relative;
    transition: color var(--eng-transition), border-color var(--eng-transition);
}
.eng-filter--tabs .eng-filter__btn:hover {
    color: var(--eng-primary);
}
.eng-filter--tabs .eng-filter__btn.is-active {
    color: var(--eng-primary);
    border-bottom-color: var(--eng-primary);
    font-weight: 700;
}

/* ── Pílulas ──────────────────────────────────────────────────── */
.eng-filter--pills {
    gap: 8px;
    border-bottom: none;
}
.eng-filter--pills .eng-filter__btn {
    background: var(--eng-border);
    border: none;
    padding: 7px 18px;
    border-radius: 50px;
    color: var(--eng-text);
    margin-bottom: 0;
}
.eng-filter--pills .eng-filter__btn:hover {
    background: color-mix(in srgb, var(--eng-primary) 15%, transparent);
    color: var(--eng-primary);
}
.eng-filter--pills .eng-filter__btn.is-active {
    background: var(--eng-primary);
    color: #fff;
}

/* ── Botões ───────────────────────────────────────────────────── */
.eng-filter--buttons {
    gap: 8px;
    border-bottom: none;
}
.eng-filter--buttons .eng-filter__btn {
    background: var(--eng-bg);
    border: 1.5px solid var(--eng-border);
    padding: 7px 18px;
    border-radius: var(--eng-radius);
    color: var(--eng-text);
    margin-bottom: 0;
}
.eng-filter--buttons .eng-filter__btn:hover,
.eng-filter--buttons .eng-filter__btn.is-active {
    background: var(--eng-primary);
    border-color: var(--eng-primary);
    color: #fff;
}

.eng-filter--loading { pointer-events:none; opacity:.6; }

/* ═══════════════════════════════════════════════════════════════════
   GRID BASE
═══════════════════════════════════════════════════════════════════ */
.eng-grid {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
    position: relative;
    min-height: 100px;
}
.eng-grid--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.6);
    border-radius: var(--eng-radius);
    backdrop-filter: blur(2px);
    z-index: 2;
}
.eng-no-posts {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--eng-muted);
    padding: 40px;
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT: GRID (padrão — 3 colunas iguais)
═══════════════════════════════════════════════════════════════════ */
.eng-layout-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT: PORTAL (destaque grande + 4 menores à direita)

   Estrutura HTML gerada:
   <div class="eng-grid eng-layout-portal">
       <article class="eng-card eng-card--featured">…</article>
       <div class="eng-portal-secondary">
           <article class="eng-card">…</article> × N
       </div>
   </div>
═══════════════════════════════════════════════════════════════════ */
.eng-layout-portal {
    grid-template-columns: 3fr 2fr;
    align-items: stretch;
}
/* O destaque ocupa só a primeira célula (coluna 1) */
.eng-layout-portal > .eng-card--featured {
    grid-column: 1;
    grid-row: 1;
}
.eng-layout-portal > .eng-card--featured .news-thumb {
    height: 360px;
}
.eng-layout-portal > .eng-card--featured .news-title {
    font-size: 1.25rem;
}

/* Coluna secundária: grid interno 2x2 */
.eng-portal-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-content: start;
}
.eng-portal-secondary .eng-card .news-thumb {
    height: 130px;
}
.eng-portal-secondary .eng-card .news-title {
    font-size: .9rem;
}
.eng-portal-secondary .eng-card .news-excerpt {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT: LISTA (imagem + texto lado a lado)
═══════════════════════════════════════════════════════════════════ */
.eng-layout-list {
    grid-template-columns: 1fr;
}
.eng-layout-list .eng-card--horizontal {
    flex-direction: row;
}
.eng-layout-list .eng-card--horizontal .news-thumb {
    width: 260px;
    min-width: 260px;
    height: auto;
    min-height: 160px;
    flex-shrink: 0;
}
.eng-layout-list .eng-card--horizontal .eng-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT: MAGAZINE (destaque esquerda + sidebar direita)

   Estrutura HTML gerada:
   <div class="eng-grid eng-layout-magazine">
       <article class="eng-card eng-card--featured">…</article>
       <div class="eng-magazine-sidebar">
           <article class="eng-card eng-card--compact">…</article> × N
       </div>
   </div>
═══════════════════════════════════════════════════════════════════ */
.eng-layout-magazine {
    grid-template-columns: 3fr 2fr;
    align-items: start;
}
.eng-layout-magazine > .eng-card--featured {
    grid-column: 1;
    grid-row: 1;
}
.eng-layout-magazine > .eng-card--featured .news-thumb {
    height: 300px;
}

.eng-magazine-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Cards compactos na sidebar: horizontal mini */
.eng-magazine-sidebar .eng-card--compact {
    flex-direction: row;
    min-height: 0;
}
.eng-magazine-sidebar .eng-card--compact .news-thumb {
    width: 110px;
    min-width: 110px;
    height: 84px;
    flex-shrink: 0;
}
.eng-magazine-sidebar .eng-card--compact .eng-card__body {
    padding: 12px 14px;
    gap: 4px;
}
.eng-magazine-sidebar .eng-card--compact .news-title {
    font-size: .85rem;
}
.eng-magazine-sidebar .eng-card--compact .news-excerpt,
.eng-magazine-sidebar .eng-card--compact .news-meta__author {
    display: none;
}
.eng-magazine-sidebar .eng-card--compact .news-meta {
    font-size: .75rem;
}
.eng-magazine-sidebar .eng-card--compact .news-readmore {
    font-size: .78rem;
}

/* ═══════════════════════════════════════════════════════════════════
   CARD (base — compartilhado por todos os layouts)
═══════════════════════════════════════════════════════════════════ */
.eng-card {
    background: var(--eng-bg);
    border-radius: var(--eng-radius);
    overflow: hidden;
    border: 1px solid var(--eng-border);
    box-shadow: var(--eng-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--eng-transition), box-shadow var(--eng-transition);
}

.eng-hover-lift .eng-card:hover  { transform: translateY(-5px); box-shadow: var(--eng-shadow-lg); }
.eng-hover-glow .eng-card:hover  { box-shadow: 0 0 0 3px var(--eng-primary), var(--eng-shadow-md); }
.eng-hover-border .eng-card:hover{ border-color: var(--eng-primary); box-shadow: var(--eng-shadow-md); }

/* ═══════════════════════════════════════════════════════════════════
   THUMB (container de imagem)
═══════════════════════════════════════════════════════════════════ */
.news-thumb {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--eng-border);
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────
   LINK do thumb: zeramos tudo para que o Elementor/tema não injete
   background, border-radius, ou display:block + width:100% nele
────────────────────────────────────────────────────────────────── */
.eng-news-grid-widget .news-thumb .news-thumb__link,
.eng-news-grid-widget .news-thumb .news-thumb__link:hover,
.eng-news-grid-widget .news-thumb .news-thumb__link:focus,
.eng-news-grid-widget .news-thumb .news-thumb__link:visited {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    color: inherit !important;
}
.eng-news-grid-widget .news-thumb .news-thumb__link::before,
.eng-news-grid-widget .news-thumb .news-thumb__link::after {
    display: none !important;
}

.news-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--eng-transition), filter var(--eng-transition);
    border-radius: 0 !important;
}

.eng-img-zoom  .eng-card:hover .news-thumb__img { transform: scale(1.07); }
.eng-img-slide .eng-card:hover .news-thumb__img { transform: scale(1.05) translateX(4px); }
.eng-img-dim   .eng-card:hover .news-thumb__img { filter: brightness(.85); }

/* ═══════════════════════════════════════════════════════════════════
   BADGE DE CATEGORIA (overlay sobre a imagem)

   CORREÇÃO REAL DO BUG:
   O Elementor e o tema Hello Elementor forçam em todo <a>:
       display: block; width: 100%; background-color: [cor-primária];
   Isso transformava o badge em um retângulo azul cobrindo a imagem.

   Solução:
   - .news-cat-overlay-link  →  é o <a>; recebe ALL overrides para
     ficar completamente invisível e posicionado.
   - .news-category--overlay →  é o <span> interno; carrega o visual
     do badge. O tema não estiliza <span> diretamente, então é seguro.
═══════════════════════════════════════════════════════════════════ */
.eng-news-grid-widget .news-thumb .news-cat-overlay-link,
.eng-news-grid-widget .news-thumb .news-cat-overlay-link:hover,
.eng-news-grid-widget .news-thumb .news-cat-overlay-link:focus,
.eng-news-grid-widget .news-thumb .news-cat-overlay-link:visited {
    /* Posicionamento absoluto do badge */
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 3 !important;
    /* Zeramos tudo que o tema/Elementor pode injetar no <a> */
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 24px) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    line-height: 0 !important;   /* colapsa o <a> ao tamanho do <span> */
    font-size: 0 !important;
    color: transparent !important;
}
.eng-news-grid-widget .news-thumb .news-cat-overlay-link::before,
.eng-news-grid-widget .news-thumb .news-cat-overlay-link::after {
    display: none !important;
}

/* O SPAN é quem carrega toda a aparência visual do badge */
.eng-news-grid-widget .news-category--overlay {
    display: inline-flex !important;
    align-items: center;
    background: var(--eng-primary) !important;
    color: #fff !important;
    font-size: .72rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 4px 10px;
    border-radius: 50px;
    line-height: 1.4 !important;
    white-space: nowrap;
    pointer-events: none;  /* o <a> pai já gerencia o clique */
    transition: background var(--eng-transition);
}
.eng-news-grid-widget .news-thumb .news-cat-overlay-link:hover .news-category--overlay {
    background: var(--eng-accent) !important;
}

/* ── Body ────────────────────────────────────────────────────────── */
.eng-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

/* ── Categoria (sem imagem) ────────────────────────────────────── */
.news-category { margin: 0; }
.news-category__link {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--eng-primary);
    text-decoration: none;
    transition: color var(--eng-transition);
}
.news-category__link:hover { color: var(--eng-accent); }

/* ── Título ─────────────────────────────────────────────────────── */
.news-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.news-title a {
    color: var(--eng-text);
    text-decoration: none;
    transition: color var(--eng-transition);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-title a:hover { color: var(--eng-primary); }

/* ── Resumo ─────────────────────────────────────────────────────── */
.news-excerpt {
    font-size: .88rem;
    color: var(--eng-muted);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ── Meta ───────────────────────────────────────────────────────── */
.news-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .8rem;
    color: var(--eng-muted);
    margin-top: auto;
}
.news-meta__date,
.news-meta__author {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.news-meta svg { flex-shrink: 0; opacity: .7; }

/* ── Leia mais ──────────────────────────────────────────────────── */
.news-readmore {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--eng-primary);
    text-decoration: none;
    transition: color var(--eng-transition), gap var(--eng-transition);
    align-self: flex-start;
}
.news-readmore:hover { color: var(--eng-accent); gap: 9px; }
.news-readmore svg   { transition: transform var(--eng-transition); }
.news-readmore:hover svg { transform: translateX(3px); }

/* ── Seções ─────────────────────────────────────────────────────── */
.eng-section { margin-bottom: 48px; }
.eng-section__title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--eng-border);
    color: var(--eng-text);
    position: relative;
}
.eng-section__title::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 50px; height: 2px;
    background: var(--eng-primary);
}

/* ── Load More ──────────────────────────────────────────────────── */
.eng-loadmore-wrap { text-align: center; padding: 8px 0 16px; }
.eng-loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--eng-primary);
    color: #fff;
    border: 2px solid var(--eng-primary);
    border-radius: 50px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--eng-transition), color var(--eng-transition), transform var(--eng-transition), box-shadow var(--eng-transition);
    font-family: inherit;
}
.eng-loadmore-btn:hover {
    background: var(--eng-accent);
    border-color: var(--eng-accent);
    transform: translateY(-2px);
    box-shadow: var(--eng-shadow-md);
}
.eng-loadmore-btn:active  { transform: translateY(0); }
.eng-loadmore-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.eng-loadmore-btn__spinner { display: none; }
.eng-loadmore-btn.is-loading .eng-loadmore-btn__text    { display: none; }
.eng-loadmore-btn.is-loading .eng-loadmore-btn__spinner { display: flex; }

/* ── Paginação ──────────────────────────────────────────────────── */
.eng-pagination-wrap { margin: 16px 0; display: flex; justify-content: center; }
.eng-pagination-wrap .page-numbers {
    display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center;
}
.eng-pagination-wrap .page-numbers a,
.eng-pagination-wrap .page-numbers span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px; font-size: .9rem; font-weight: 600;
    text-decoration: none; transition: all var(--eng-transition);
    color: var(--eng-text); background: var(--eng-bg); border: 1.5px solid var(--eng-border);
}
.eng-pagination-wrap .page-numbers a:hover,
.eng-pagination-wrap .page-numbers .current {
    background: var(--eng-primary); border-color: var(--eng-primary); color: #fff;
}
.eng-pagination-wrap .page-numbers .dots { border: none; background: none; width: auto; padding: 0 4px; }

/* ── Scroll infinito ────────────────────────────────────────────── */
.eng-infinite-sentinel { height: 60px; display: flex; align-items: center; justify-content: center; }
.eng-infinite-spinner { color: var(--eng-muted); opacity: 0; transition: opacity .3s; }
.eng-infinite-sentinel.is-visible .eng-infinite-spinner { opacity: 1; }

/* ── Animações de entrada ───────────────────────────────────────── */
.eng-anim-fade  .eng-card.eng-entering { animation: engFadeIn  .4s  ease both; }
.eng-anim-slide .eng-card.eng-entering { animation: engSlideUp .45s ease both; }
.eng-anim-scale .eng-card.eng-entering { animation: engScale   .4s  ease both; }
@keyframes engFadeIn  { from{opacity:0}          to{opacity:1}          }
@keyframes engSlideUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes engScale   { from{opacity:0;transform:scale(.93)}       to{opacity:1;transform:scale(1)}      }
.eng-card.eng-entering:nth-child(2){animation-delay:.05s}
.eng-card.eng-entering:nth-child(3){animation-delay:.10s}
.eng-card.eng-entering:nth-child(4){animation-delay:.15s}
.eng-card.eng-entering:nth-child(5){animation-delay:.20s}
.eng-card.eng-entering:nth-child(6){animation-delay:.25s}

/* ── Skeleton loader ────────────────────────────────────────────── */
.eng-skeleton { border-radius: var(--eng-radius); overflow: hidden; border: 1px solid var(--eng-border); background: var(--eng-bg); }
.eng-skeleton__thumb,
.eng-skeleton__line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: engSkeleton 1.4s infinite;
    border-radius: 4px;
}
.eng-skeleton__thumb { height: 200px; border-radius: 0; }
.eng-skeleton__body  { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.eng-skeleton__line  { height: 14px; }
.eng-skeleton__line--short  { width: 40%; }
.eng-skeleton__line--medium { width: 70%; }
.eng-skeleton__line--title  { height: 18px; }
@keyframes engSkeleton {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

.eng-end-message { text-align:center; color: var(--eng-muted); font-size:.9rem; padding:16px; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVO
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .eng-layout-grid    { grid-template-columns: repeat(2, 1fr); }
    .eng-layout-portal  { grid-template-columns: 1fr 1fr; }
    .eng-layout-magazine{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .eng-layout-grid,
    .eng-layout-portal,
    .eng-layout-magazine { grid-template-columns: 1fr; }

    .eng-layout-portal > .eng-card--featured .news-thumb { height: 220px; }
    .eng-portal-secondary { grid-template-columns: 1fr 1fr; }

    .eng-layout-list .eng-card--horizontal { flex-direction: column; }
    .eng-layout-list .eng-card--horizontal .news-thumb { width: 100%; min-width: 0; height: 180px; }

    .eng-filter--tabs .eng-filter__btn { padding: 8px 12px; font-size: .82rem; }
    .eng-filter--pills { gap: 6px; }
    .eng-section__title { font-size: 1.15rem; }
}

@media (max-width: 480px) {
    .eng-portal-secondary { grid-template-columns: 1fr; }
    .eng-loadmore-btn { width:100%; justify-content:center; }

    .eng-magazine-sidebar .eng-card--compact .news-thumb { width: 90px; min-width: 90px; height: 72px; }
}

/* ── Dark mode ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .eng-news-grid-widget {
        --eng-text:   #f3f4f6;
        --eng-muted:  #9ca3af;
        --eng-border: #374151;
        --eng-bg:     #1f2937;
    }
    .eng-skeleton__thumb,
    .eng-skeleton__line {
        background: linear-gradient(90deg, #2d3748 25%, #374151 50%, #2d3748 75%);
        background-size: 200% 100%;
    }
}

/* ── Acessibilidade ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .eng-news-grid-widget *,
    .eng-news-grid-widget *::before,
    .eng-news-grid-widget *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}