/* ============================================================
   Blocos da home (Configuracoes > Blocos da Home)
   Quatro formatos: destaque, duas colunas, carrossel e lista.
   As cores vem da categoria e de Configuracoes > Cores.
   ============================================================ */

.hb { padding: 34px 0; }
/* linha horizontal separando um bloco do outro, na largura do conteudo */
.hb + .hb { padding-top: 0; }
.hb + .hb > .container {
    border-top: 1px solid var(--color-border-light, #E5E7EB);
    padding-top: 38px;
}

.hb-titulo {
    font-family: var(--font-family-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-text-dark);
    margin: 0 0 20px;
}

.hb-data {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--color-text-light, #6B7280);
}

/* ---------- Formato: DESTAQUE ---------- */
.hb-destaque {
    background: var(--color-bg-gray, #F3F4F6);
}

.hb-destaque-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.1fr;
    gap: 20px;
    align-items: start;
}

.hb-cap {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-dark, #111);
}
.hb-cap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hb-cap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .15) 55%, transparent 100%);
}
.hb-cap-g { height: 500px; }
.hb-cap-m { height: 240px; }

.hb-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 15px;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 2px solid rgba(255, 255, 255, .2);
    /* o brilho acompanha a cor da categoria, em vez de um vermelho fixo:
       o selo verde de Esportes nao combinaria com halo vermelho */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--badge-cor, #C91212) 60%, transparent);
}

.hb-cap-txt {
    /* texto claro sobre foto escura: sem isso o antialiasing por subpixel
       colore as bordas das letras em telas LCD */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 20px;
    color: #fff;
}
.hb-cap-txt h2,
.hb-cap-txt h3 {
    margin: 0 0 8px;
    font-family: var(--font-family-heading);
    line-height: 1.22;
    color: #fff;
}
.hb-cap-g .hb-cap-txt h2 { font-size: 1.75rem; }
.hb-cap-m .hb-cap-txt h3 { font-size: 1.05rem; }

/* Destaque principal: so o card GRANDE muda a cor do titulo, como no site
   antigo. Os secundarios seguem brancos de proposito - e o contraste entre os
   dois que marca qual e a manchete.
   O seletor e preso ao .hb-principal: assim, se outro bloco usar .hb-cap-g em
   outro contexto, ele nao herda o verde sem querer.
   A sombra vem junto porque o verde claro sobre foto clara perde legibilidade. */
.hb-principal .hb-cap-g .hb-cap-txt h2 {
    color: var(--hb-cor-manchete, #b6ff7f);
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.hb-cap-txt .hb-data { color: rgba(255, 255, 255, .85); }

.hb-secundarios { display: flex; flex-direction: column; gap: 20px; }

.hb-lateral {
    background: #fff;
    border: 1px solid var(--color-border-light, #E5E7EB);
    border-radius: 10px;
    padding: 18px;
    /* o grid usa align-items: start; aqui a coluna estica ate a altura das
       outras, para a caixa terminar na mesma linha do card ao lado */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    /* a caixa nao cresce alem da coluna: com 4 noticias a lista aperta um
       pouco em vez de empurrar a borda de baixo */
    overflow: hidden;
}

/* A lista fica com o que sobra depois do titulo e reparte entre as noticias.
   E isso que mantem a altura da caixa igual, com 3 ou com 4. */
.hb-lateral-itens {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
}

/* Com 4 noticias o espaco por item fica menor; a miniatura encolhe junto
   para o titulo nao ser cortado. */
.hb-lateral-itens[data-itens="4"] .hb-item { padding: 9px 0; gap: 11px; }
.hb-lateral-itens[data-itens="4"] .hb-item img { width: 74px; height: 55px; }
.hb-lateral-itens[data-itens="4"] .hb-item h4 { margin-bottom: 4px; font-size: .9rem; }

.hb-lateral-itens[data-itens="5"] .hb-item { padding: 7px 0; gap: 10px; }
.hb-lateral-itens[data-itens="5"] .hb-item img { width: 66px; height: 49px; }
.hb-lateral-itens[data-itens="5"] .hb-item h4 { margin-bottom: 3px; font-size: .88rem; }
.hb-lateral-titulo {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 3px solid;
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-dark);
}

/* ---------- Item de lista (usado em varios formatos) ---------- */
.hb-item {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    text-decoration: none;
    align-items: flex-start;
}
.hb-item + .hb-item { border-top: 1px solid var(--color-border-light, #E5E7EB); }
.hb-item img {
    width: 86px;
    height: 64px;
    flex: none;
    object-fit: cover;
    border-radius: 6px;
}
.hb-item h4 {
    margin: 0 0 6px;
    font-family: var(--font-family-heading);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
}
.hb-item:hover h4 { text-decoration: underline; }

.hb-item-card {
    background: #fff;
    border: 1px solid var(--color-border-light, #E5E7EB);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: box-shadow .2s;
}
.hb-item-card + .hb-item-card { border-top: 1px solid var(--color-border-light, #E5E7EB); }
.hb-item-card:hover { box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .25); }

/* ---------- Formato: DUAS COLUNAS ---------- */
.hb-duas-grid {
    display: grid;
    /* a 3a coluna estava com 264px e encolhia o banner (300px de original);
       0.82fr da ~330px e ele aparece em tamanho cheio */
    grid-template-columns: 1fr 1fr .82fr;
    gap: 26px;
    align-items: stretch;   /* as colunas acompanham a mais alta */
}

/* sem banner, a 3a coluna nao deve reservar espaco: as duas se abrem */
.hb-duas-sem-banner {
    grid-template-columns: 1fr 1fr;
}

/* A coluna vira flex e os cards dividem a altura em partes iguais: assim as
   duas colunas ficam alinhadas linha a linha, mesmo com titulos de tamanhos
   diferentes. */
.hb-coluna { display: flex; flex-direction: column; }
.hb-coluna-itens { display: flex; flex-direction: column; gap: 12px; }
.hb-coluna-itens .hb-item-card {
    margin-bottom: 0;
    /* altura FIXA (nao min-height): com min-height, uma foto em retrato
       esticava o card, porque a altura da imagem seguia a proporcao dela */
    height: 118px;
    /* sem padding: a miniatura encosta nas bordas do card. O padding volta
       so no texto, logo abaixo. */
    padding: 0;
    gap: 0;
    overflow: hidden;
    align-items: stretch;
}
.hb-coluna-itens .hb-item-card[hidden] { display: none; }

.hb-coluna-itens .hb-item-card img {
    width: 120px;
    height: 100%;          /* o card tem altura definida, entao 100% resolve */
    border-radius: 0;
    object-fit: cover;     /* recorta em vez de deformar */
}

.hb-coluna-itens .hb-item-card > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px;
}

/* titulo limitado a 3 linhas, senao um titulo longo estoura a altura fixa */
.hb-coluna-itens .hb-item-card h4 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Setas no fim do bloco */
.hb-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
}
.hb-nav[hidden] { display: none; }
.hb-nav-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: var(--color-bg-dark, #111);
    color: #fff;
    transition: background .2s, opacity .2s;
}
.hb-nav-btn:hover:not(:disabled) { background: var(--color-primary); }
.hb-nav-btn:disabled { opacity: .3; cursor: default; }
/* linha vertical separando o conteudo do banner */
.hb-banner {
    align-self: stretch;
    padding-left: 26px;
    border-left: 1px solid var(--color-border-light, #E5E7EB);
}
.hb-banner img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* ---------- Formato: CARROSSEL ---------- */
/* titulo a esquerda, setas a direita, na mesma linha */
.hb-carrossel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.hb-carrossel-topo .hb-titulo { margin-bottom: 0; }
.hb-carrossel-topo .hb-nav { margin-top: 0; }

.hb-carrossel-trilho {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.hb-card {
    background: #fff;
    border: 1px solid var(--color-border-light, #E5E7EB);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hb-card[hidden] { display: none; }
.hb-card-img { display: block; aspect-ratio: 16 / 10; }
.hb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-card-corpo { padding: 16px; }
.hb-card-cat {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.hb-card-corpo h3 {
    margin: 8px 0 10px;
    font-family: var(--font-family-heading);
    font-size: 1.1rem;
    line-height: 1.28;
}
.hb-card-corpo h3 a { color: var(--color-text-dark); text-decoration: none; }
.hb-card-corpo h3 a:hover { color: var(--color-primary); }
.hb-card-corpo p {
    margin: 0 0 12px;
    font-size: .85rem;
    color: var(--color-text-body);
    line-height: 1.55;
}

/* ---------- Formato: LISTA ---------- */
.hb-lista-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 26px;
}

/* ---------- Telas menores ---------- */
@media (max-width: 1100px) {
    .hb-destaque-grid { grid-template-columns: 1.4fr 1fr; }
    .hb-lateral { grid-column: 1 / -1; }
    .hb-duas-grid { grid-template-columns: 1fr 1fr; }
    .hb-banner {
        grid-column: 1 / -1;
        max-width: 420px;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--color-border-light, #E5E7EB);
        padding-top: 22px;
    }
}

@media (max-width: 760px) {
    .hb-destaque-grid,
    .hb-duas-grid { grid-template-columns: 1fr; }
    .hb-cap-g { height: 320px; }
    .hb-cap-m { height: 200px; }
    .hb-cap-g .hb-cap-txt h2 { font-size: 1.3rem; }
    .hb-titulo { font-size: 1.35rem; }

    /* ---------- Carrossel no celular ----------
       No computador sao 4 noticias lado a lado e as setas trocam de pagina.
       Essa mesma grade no celular espremia as 4 em ~90px cada: o titulo
       quebrava letra por letra e nao dava para ler nada.

       Aqui o trilho passa a DESLIZAR com o dedo, uma noticia por vez, que e
       o gesto que todo mundo ja espera num celular. A largura de 84% deixa
       aparecer um pedaco da proxima - e o que avisa que ha mais conteudo ao
       lado, sem precisar de seta. */
    .hb-carrossel-trilho {
        grid-auto-columns: 86%;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* cada noticia com a SUA altura. Sem isto a grade iguala todas pela
           mais alta, e as de texto curto ficam com um bloco branco embaixo -
           no computador passa, porque elas estao lado a lado e o alinhamento
           ate ajuda; no celular, com uma de cada vez, vira so espaco vazio. */
        align-items: start;
        /* o encaixe nao pode grudar na borda da tela */
        padding: 0 16px 4px;
        margin-left: -16px;
        margin-right: -16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .hb-carrossel-trilho::-webkit-scrollbar { display: none; }
    .hb-carrossel-trilho .hb-card { scroll-snap-align: center; }

    /* O JS esconde as noticias das outras paginas, que no computador e o que
       faz as setas trocarem de pagina. Deslizando nao ha paginas: tudo fica
       no trilho e quem anda e o dedo (ou as setas, ver o JS). */
    .hb-carrossel-trilho .hb-card[hidden] { display: flex; }

    .hb-card-corpo { padding: 14px; }
    .hb-card-corpo h3 { font-size: 1.05rem; }
    .hb-card-corpo p { margin-bottom: 10px; }

    /* As setas ficam no lugar de sempre, ao lado do titulo, e no celular
       passam UMA noticia por vez em vez de trocar de pagina. */
    .hb-carrossel-topo .hb-nav { gap: 8px; }
    .hb-carrossel-topo .hb-nav-btn { width: 38px; height: 38px; }

    /* Pontinhos: dizem em qual noticia a pessoa esta e quantas faltam.
       Deslizar sem isso nao avisa onde o conteudo termina. */
    .hb-pontos {
        display: flex; justify-content: center; align-items: center;
        gap: 7px; margin-top: 14px;
    }
    .hb-ponto {
        width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
        background: #CBD5E1; cursor: pointer; transition: all .2s;
    }
    .hb-ponto.ativo { width: 20px; border-radius: 999px; background: var(--color-primary, #E01B22); }
}