/* ============================================================
   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; }
.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;
}
.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; }
}