/* Estilos PÚBLICOS do blog, compartilhados por /blog, /blog/assunto/{slug} e
   /blog/todos.

   Era um Blog.razor.css isolado (scoped). Virou global em 05/08/2026 porque o
   CSS isolado do Blazor só vale pro componente dono: as páginas novas de hub e
   índice reusam .blog-wrap, .cat-bar, .h-card e .paginacao e nasceriam sem
   estilo nenhum. Carregado no App.razor. */

/* Paleta igual ao blog.css do legado (--bg-dark/--bg-card/--purple/--primary-gradient).
   .blog-fundo preenche 100% do espaço de conteúdo (já exclui a barra lateral,
   que fica fora deste container) — o conteúdo continua centrado em 1200px dentro. */
.blog-fundo {
    width: 100%;
    background: var(--gp-papel);
}

.blog-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 18px 46px;
    color: var(--gp-tinta);
}

/* Cabeçalho */
.blog-head {
    text-align: center;
    margin-bottom: 28px;
}

.blog-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--gp-vermelho);
    background: rgba(31, 111, 214, .10);
    border: 1px solid rgba(31, 111, 214, .30);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.blog-head h1 {
    font-size: clamp(1.7rem, 6vw, 2.6rem);
    font-weight: 800;
    color: var(--gp-tinta);
    margin: 0 0 8px;
}

.blog-head p {
    color: var(--gp-tinta-media);
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto;
}

/* Cat-bar */
.cat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 28px;
}

.cat-pill {
    font-size: .85rem;
    font-weight: 600;
    color: var(--gp-tinta-media);
    background: var(--gp-papel-claro);
    border: 1px solid var(--gp-linha);
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: all .15s;
}

.cat-pill:hover {
    border-color: rgba(31, 111, 214, .45);
    color: var(--gp-vermelho);
}

.cat-pill.active {
    background: rgba(31, 111, 214, .10);
    border-color: rgba(31, 111, 214, .30);
    color: var(--gp-vermelho);
}

/* Grid principal + sidebar */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Destaque: principal ---- */
.sec-destaque {
    margin-bottom: 36px;
}

.principal {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    min-height: 340px;
    text-decoration: none;
    margin-bottom: 22px;
    background: var(--gp-capa);
}

.principal.noimg {
    background: var(--gp-capa-alta);
}

.principal img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.principal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 8, 20, .95) 0%, rgba(8, 8, 20, .5) 50%, rgba(8, 8, 20, .12) 100%);
}

.principal-content {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px;
    color: #fff;
    max-width: 840px;
}

.badge-principal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--gp-vermelho-fundo);
    padding: 5px 12px;
    border-radius: 7px;
    margin-bottom: 12px;
}

.principal-title {
    font-size: clamp(1.3rem, 5vw, 2.2rem);
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 10px;
}

.principal-excerpt {
    font-size: .95rem;
    color: var(--gp-creme-suave);
    margin-bottom: 12px;
    max-width: 640px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Carrossel (um slide por vez, com setas e bolinhas — igual ao legado) ---- */
.carrossel {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    touch-action: pan-y;
}

.carrossel-track {
    display: flex;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.slide {
    position: relative;
    display: block;
    min-width: 100%;
    height: 260px;
    text-decoration: none;
    color: #fff;
    background: var(--gp-capa);
    flex-shrink: 0;
}

.slide.noimg {
    background: var(--gp-vermelho-fundo);
}

.slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 8, 20, .94) 0%, rgba(8, 8, 20, .5) 48%, rgba(8, 8, 20, .12) 100%);
}

.slide-content {
    position: absolute;
    inset: auto 0 0 0;
    padding: 20px 22px;
    max-width: 760px;
}

.slide-cat {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    /* fica SOBRE a foto do carrossel (fundo escuro): pílula de creme, igual à do
       hero. O vermelho a 10% sobre escuro dava 2,80:1 — medido em produção. */
    background: var(--gp-creme-tenue);
    color: var(--gp-creme);
    border: 1px solid var(--gp-creme-linha);
    padding: 3px 11px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.slide-title {
    font-size: clamp(1.05rem, 4vw, 1.5rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 8px;
    color: #fff;
}

.slide-excerpt {
    font-size: .88rem;
    color: var(--gp-creme-suave);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slide-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    color: var(--gp-creme-suave);
    flex-wrap: wrap;
}

.slide-meta .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gp-tinta-fraca);
}

.car-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--gp-linha);
    background: rgba(36, 29, 25, .60);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: all .2s;
}

.car-btn:hover {
    background: var(--gp-vermelho);
    border-color: var(--gp-vermelho);
}

.car-prev {
    left: 12px;
}

.car-next {
    right: 12px;
}

.car-dots {
    position: absolute;
    bottom: 14px;
    right: 20px;
    display: flex;
    gap: 7px;
    z-index: 3;
}

.car-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gp-tinta-fraca);
    cursor: pointer;
    transition: all .2s;
    border: none;
    padding: 0;
}

.car-dot.active {
    background: var(--gp-vermelho);
    width: 22px;
    border-radius: 5px;
}

/* ---- Seção título ---- */
.sec-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gp-tinta);
    margin: 8px 0 18px;
}

/* ---- Cards ---- */
.cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.h-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    background: var(--gp-papel-claro);
    border: 1px solid var(--gp-linha);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.h-card:hover {
    border-color: rgba(31, 111, 214, .30);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

@media (max-width: 560px) {
    .h-card {
        grid-template-columns: 1fr;
    }
}

.h-card-img,
.h-card-img-ph {
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
}

.h-card-img-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(31, 111, 214, .25), rgba(67, 73, 184, .25));
    color: var(--gp-linha);
    font-size: 2.2rem;
}

.h-card-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
}

.h-card-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.h-cat {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--gp-vermelho);
    background: rgba(31, 111, 214, .10);
    padding: 3px 10px;
    border-radius: 12px;
}

.h-date {
    font-size: .76rem;
    color: var(--gp-tinta-fraca);
}

.h-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gp-tinta);
    line-height: 1.3;
    margin-bottom: 6px;
}

.h-card-excerpt {
    font-size: .88rem;
    color: var(--gp-tinta-media);
    line-height: 1.55;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.h-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--gp-tinta-media);
}

.who {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gp-vermelho-fundo);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h-card-read {
    color: var(--gp-vermelho);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ---- Empty ---- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gp-tinta-fraca);
}

.empty-state i {
    font-size: 2.4rem;
    margin-bottom: 12px;
    display: block;
    opacity: .4;
}

.empty-back {
    display: inline-block;
    margin-top: 10px;
    color: var(--gp-vermelho);
    font-weight: 600;
    text-decoration: none;
}

/* ---- Paginação ---- */
.paginacao {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}

.pag {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--gp-linha);
    background: var(--gp-papel-claro);
    color: var(--gp-tinta-media);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: all .15s;
}

.pag:hover,
.pag.active {
    background: rgba(31, 111, 214, .10);
    border-color: rgba(31, 111, 214, .30);
    color: var(--gp-vermelho);
}

.pag.reticencias {
    border: none;
    background: transparent;
    pointer-events: none;
}

/* ---- Sidebar ---- */
.blog-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 20px;
}

.side-box {
    background: var(--gp-papel-claro);
    border: 1px solid var(--gp-linha);
    border-radius: 16px;
    padding: 18px;
}

.side-h {
    font-size: .95rem;
    font-weight: 800;
    color: var(--gp-tinta);
    margin-bottom: 13px;
}

.side-search {
    display: flex;
    gap: 6px;
}

.side-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--gp-linha);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: .9rem;
    outline: none;
    background: var(--gp-papel-claro);
    color: var(--gp-tinta);
}

.side-search input::placeholder {
    color: var(--gp-tinta-fraca);
}

.side-search input:focus {
    border-color: rgba(31, 111, 214, .45);
}

.side-search button {
    border: none;
    border-radius: 10px;
    background: var(--gp-vermelho-fundo);
    color: #fff;
    width: 40px;
    cursor: pointer;
}

.s-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gp-linha);
    color: var(--gp-tinta-media);
    text-decoration: none;
    font-size: .88rem;
}

.s-cat:last-child {
    border-bottom: none;
}

.s-cat:hover {
    color: var(--gp-vermelho);
}

.s-cat .cnt {
    font-size: .74rem;
    color: var(--gp-tinta-fraca);
    background: var(--gp-papel-claro);
    border: 1px solid var(--gp-linha);
    border-radius: 999px;
    padding: 1px 9px;
    min-width: 30px;
    text-align: center;
}

.pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gp-linha);
    color: var(--gp-tinta-media);
    text-decoration: none;
    font-size: .86rem;
}

.pill:last-child {
    border-bottom: none;
}

.pill:hover {
    color: var(--gp-vermelho);
}

.pill .pv {
    font-size: .76rem;
    color: var(--gp-tinta-fraca);
    white-space: nowrap;
}

.s-item {
    display: block;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--gp-papel-claro);
    border: 1px solid var(--gp-papel-claro);
    margin-bottom: 9px;
    text-decoration: none;
    transition: all .2s;
}

.s-item:last-child {
    margin-bottom: 0;
}

.s-item:hover {
    border-color: rgba(31, 111, 214, .28);
    background: rgba(31, 111, 214, .08);
}

.s-item .t {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--gp-tinta);
    margin-bottom: 5px;
    line-height: 1.35;
}

.s-item:hover .t {
    color: var(--gp-vermelho);
}

.s-item .m {
    display: flex;
    gap: 10px;
    font-size: .73rem;
    color: var(--gp-tinta-fraca);
    flex-wrap: wrap;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tags a {
    font-size: .76rem;
    color: var(--gp-tinta-media);
    background: var(--gp-papel-claro);
    border: 1px solid var(--gp-linha);
    border-radius: 999px;
    padding: 7px 12px;
    text-decoration: none;
    transition: all .2s;
}

.tags a:hover {
    color: var(--gp-vermelho);
    border-color: rgba(31, 111, 214, .32);
    background: rgba(31, 111, 214, .10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   db/199 — navegação nova: busca no topo, etapas, trilhos, migalhas e índice.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Busca grande no topo (a da sidebar continua existindo) ---- */
.busca-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto 18px;
    padding: 4px 6px 4px 16px;
    background: var(--gp-papel-claro);
    border: 1px solid rgba(31, 111, 214, .35);
    border-radius: 14px;
}

.busca-topo > i { color: var(--gp-vermelho); flex: none; }

.busca-topo input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--gp-tinta);
    font-size: .95rem;
    padding: 11px 0;
}

.busca-topo input::placeholder { color: var(--gp-tinta-fraca); }

.busca-topo button {
    flex: none;
    border: 0;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--gp-vermelho-fundo);
    cursor: pointer;
}

.busca-topo button:hover { filter: brightness(1.12); }

/* ---- Contagem dentro da pílula de assunto ---- */
.cat-pill b {
    font-weight: 700;
    opacity: .55;
    margin-left: 5px;
    font-variant-numeric: tabular-nums;
}

.cat-pill i { margin-right: 4px; opacity: .8; }

/* ---- Barra de etapas ---- */
.etapa-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: -14px 0 26px;
}

.etapa-rot { font-size: .78rem; color: var(--gp-tinta-fraca); font-weight: 600; }

.etapa-pill {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gp-tinta-media);
    background: var(--gp-linha);
    border: 1px solid var(--gp-linha);
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: color .15s, border-color .15s, background-color .15s;
}

.etapa-pill:hover { color: var(--gp-vermelho); border-color: rgba(31, 111, 214, .45); }
.etapa-pill.on { background: rgba(31, 111, 214, .10); border-color: rgba(31, 111, 214, .35); color: var(--gp-vermelho); }

/* ---- Trilhos horizontais: o coração da navegação nova ---- */
.trilhos { display: flex; flex-direction: column; gap: 30px; margin-bottom: 38px; }

.trilho { display: flex; flex-direction: column; gap: 12px; }

.trilho-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.trilho-nome {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--gp-tinta);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.trilho-nome i { color: var(--cor, var(--gp-vermelho)); }

.trilho-todos {
    font-size: .8rem;
    font-weight: 700;
    color: var(--gp-vermelho);
    text-decoration: none;
    white-space: nowrap;
}

.trilho-todos:hover { text-decoration: underline; }

/* Rolagem horizontal com encaixe: no celular vira carrossel de arrastar. */
.trilho-pista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 190px;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(31, 111, 214, .5) transparent;
}

.trilho-pista::-webkit-scrollbar { height: 7px; }
.trilho-pista::-webkit-scrollbar-track { background: var(--gp-papel-claro); border-radius: 99px; }
.trilho-pista::-webkit-scrollbar-thumb { background: rgba(31, 111, 214, .45); border-radius: 99px; }

.mini {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--gp-papel-claro);
    border: 1px solid var(--gp-linha);
    border-radius: 13px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .2s, border-color .2s;
}

.mini:hover { transform: translateY(-3px); border-color: rgba(31, 111, 214, .35); }

.mini-capa {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
    flex: none;
}

.mini-capa-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(31, 111, 214, .28), rgba(67, 73, 184, .28));
    color: var(--gp-linha);
    font-size: 1.7rem;
}

.mini-txt { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px 13px; }

.mini-t {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.34;
    color: var(--gp-tinta);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini:hover .mini-t { color: var(--gp-vermelho); }
.mini-m { font-size: .7rem; color: var(--gp-tinta-fraca); }

/* ---- Migalhas (breadcrumb visível dos hubs) ---- */
.migalhas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: .8rem;
    color: var(--gp-tinta-fraca);
}

.migalhas a { color: var(--gp-vermelho); text-decoration: none; font-weight: 600; }
.migalhas a:hover { text-decoration: underline; }

/* ---- Link do índice completo ---- */
.indice-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 26px;
    padding: 11px 20px;
    border: 1px dashed rgba(31, 111, 214, .45);
    border-radius: 12px;
    color: var(--gp-vermelho);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s, border-color .18s;
}

.indice-link:hover { background: rgba(31, 111, 214, .12); border-color: rgba(31, 111, 214, .7); }

/* ---- Página /blog/todos ---- */
.indice-conta { color: var(--gp-tinta-fraca); font-size: .85rem; margin: 0 0 12px; }

.indice { display: flex; flex-direction: column; gap: 26px; }

.indice-mes h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gp-linha);
    font-size: .95rem;
    font-weight: 800;
    color: var(--gp-tinta);
}

.indice-mes h2 span {
    font-size: .7rem;
    font-weight: 700;
    color: var(--gp-tinta-fraca);
    background: var(--gp-papel-claro);
    border-radius: 999px;
    padding: 1px 10px;
    font-variant-numeric: tabular-nums;
}

.indice-mes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.indice-mes li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 8px;
    border-radius: 8px;
}

.indice-mes li:hover { background: rgba(31, 111, 214, .09); }

.indice-mes li a {
    color: var(--gp-tinta);
    text-decoration: none;
    font-size: .89rem;
    font-weight: 600;
    line-height: 1.45;
}

.indice-mes li:hover a { color: var(--gp-vermelho); }

.indice-meta { display: flex; align-items: center; gap: 10px; flex: none; }

.indice-cat {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--gp-vermelho);
    background: rgba(31, 111, 214, .13);
    padding: 2px 9px;
    border-radius: 11px;
    white-space: nowrap;
}

.indice-dia {
    font-size: .74rem;
    color: var(--gp-tinta-fraca);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .indice-mes li { flex-direction: column; gap: 4px; }
    .busca-topo { flex-wrap: wrap; }
    .busca-topo input { padding: 9px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mini, .mini:hover { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Correção de estouro horizontal (05/08/2026)

   Item de grid/flex nasce com min-width:auto — ele se recusa a ficar menor que
   o próprio conteúdo. Com isso o trilho (9 cards de 190px numa faixa rolável)
   inflava a coluna "1fr" do .blog-grid, que empurrava o .blog-wrap além dos
   1200px e criava barra horizontal NA PÁGINA INTEIRA em vez de rolar dentro do
   trilho. min-width:0 devolve a permissão de encolher — é a correção de raiz,
   não um overflow:hidden por cima.
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-grid > * { min-width: 0; }
.blog-main,
.trilhos,
.trilho,
.trilho-pista { min-width: 0; max-width: 100%; }

/* Card horizontal: a coluna de texto também precisa poder encolher, senão um
   título longo empurra o card inteiro pra fora. */
.h-card { min-width: 0; }
.h-card-body { min-width: 0; }
.h-card-title,
.h-card-excerpt { overflow-wrap: anywhere; }

/* Índice: título comprido numa linha flex fazia a mesma coisa. */
.indice-mes li { min-width: 0; }
.indice-mes li a { min-width: 0; overflow-wrap: anywhere; }

/* Sidebar: título de post sem espaços (slug, código) esticava a caixa. */
.blog-side { min-width: 0; }
.s-item .t,
.pill span { overflow-wrap: anywhere; }

/* Rede de segurança: se algum bloco novo escapar, ele é cortado no fundo do
   blog em vez de rolar o documento. `clip` (e não `hidden`) porque hidden
   viraria contêiner de rolagem e quebraria o position:sticky da sidebar. */
.blog-fundo { overflow-x: clip; }

/* Tom de fundo de cada pagina de tipo do blog. */
.blog-fundo.tema-assuntos { --gp-papel: #fbf6ec; --gp-papel-claro: #ffffff; --gp-linha: #e9dcc3; }
.blog-fundo.tema-bncc { --gp-papel: #e6d6b6; --gp-papel-claro: #fdf8ee; --gp-linha: #cdb68b; }
.blog-fundo.tema-conceitos { --gp-papel: #d9c3a0; --gp-papel-claro: #fbf4e7; --gp-linha: #bf9f70; }
.blog-fundo.tema-assunto-por-serie { --gp-papel: #eedcb6; --gp-papel-claro: #fffaf0; --gp-linha: #d6b77c; }
.blog-fundo.tema-pesquisa { --gp-papel: #e4e0d8; --gp-papel-claro: #fbfaf7; --gp-linha: #cbc3b4; }.blog-fundo.tema-infantil { --gp-papel: #f6e4c6; --gp-papel-claro: #fffbf2; --gp-linha: #e3c48f; }

/* Trilha e atalhos entre as secoes do blog. */
.secoes-nav { margin: 0 auto 18px; max-width: 980px; text-align: center; }
.secoes-trilha { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 10px; font-size: .86rem; color: var(--gp-tinta-suave, #6b5d52); }
.secoes-trilha li + li::before { content: "\203A"; margin-right: 6px; opacity: .6; }
.secoes-trilha a { color: inherit; text-decoration: none; }
.secoes-trilha a:hover { color: var(--gp-vermelho); text-decoration: underline; }
.secoes-trilha [aria-current] { font-weight: 700; color: var(--gp-tinta, #2b211b); }
.secoes-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; }
.secao-link { color: var(--gp-tinta-suave, #6b5d52); text-decoration: none; padding: 3px 2px; border-bottom: 2px solid transparent; }
.secao-link:hover { color: var(--gp-vermelho); }
.secao-link.atual { color: var(--gp-vermelho); font-weight: 700; border-bottom-color: var(--gp-vermelho); }

/* Capa do blog: uma porta para cada secao. */
.capa-secoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 8px 0 30px; }
.capa-secao { --c-fundo: #f4ecdd; --c-forte: #1857ad; background: var(--gp-papel-claro); border: 1px solid var(--gp-linha); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(60, 40, 20, .07); transition: transform .18s, box-shadow .18s; }
.capa-secao:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(60, 40, 20, .12); }
.capa-secao.tema-assuntos { --c-fundo: #fbf6ec; --c-forte: #9a5b2e; }
.capa-secao.tema-bncc { --c-fundo: #e6d6b6; --c-forte: #1857ad; }
.capa-secao.tema-conceitos { --c-fundo: #d9c3a0; --c-forte: #6e4a24; }
.capa-secao.tema-assunto-por-serie { --c-fundo: #eedcb6; --c-forte: #8a6a1f; }
.capa-secao.tema-pesquisa { --c-fundo: #e4e0d8; --c-forte: #5b5348; }
.capa-secao.tema-infantil { --c-fundo: #f6e4c6; --c-forte: #b4532a; }
.capa-secao-topo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 20px 22px; background: var(--c-fundo); color: inherit; text-decoration: none; }
.capa-secao-icone { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: var(--c-forte); color: #fff; }
.capa-secao-txt { display: flex; flex-direction: column; min-width: 0; }
.capa-secao-nome { font-size: 1.3rem; font-weight: 800; color: var(--gp-tinta, #2b211b); }
.capa-secao-desc { font-size: .9rem; color: var(--gp-tinta-suave, #6b5d52); }
.capa-secao-qtd { text-align: right; font-size: .8rem; color: var(--gp-tinta-suave, #6b5d52); line-height: 1.2; }
.capa-secao-qtd b { display: block; font-size: 1.25rem; color: var(--c-forte); }
.capa-secao-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 18px 6px; flex: 1; }
.capa-post { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.capa-post img, .capa-post-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--c-fundo); display: grid; place-items: center; font-size: 1.6rem; color: var(--c-forte); }
.capa-post-t { font-size: .86rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.capa-post:hover .capa-post-t { color: var(--gp-vermelho); }
.capa-secao-ver { display: block; padding: 12px 22px 18px; font-weight: 700; color: var(--c-forte); text-decoration: none; }
.capa-secao-ver:hover { text-decoration: underline; }
.capa-convite { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 30px; border-radius: 18px; background: #f7e4dc; border: 1px solid #e8c4b6; margin-bottom: 10px; }
.capa-convite h2 { margin: 0 0 4px; font-size: 1.35rem; }
.capa-convite p { margin: 0; color: var(--gp-tinta-suave, #6b5d52); }
.capa-convite-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.capa-btn { padding: 12px 20px; border-radius: 12px; background: var(--gp-vermelho); color: #fff; font-weight: 700; text-decoration: none; }
.capa-btn.sec { background: transparent; color: var(--gp-vermelho); border: 2px solid var(--gp-vermelho); }
@media (max-width: 860px) {
    .capa-secoes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .capa-secao-topo { grid-template-columns: auto 1fr; }
    .capa-secao-qtd { grid-column: 1 / -1; text-align: left; }
    .capa-secao-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
    .capa-post-t { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { .capa-secao { transition: none; } .capa-secao:hover { transform: none; } }
/* Selo "Blog GeraProva" maior e clicavel, leva a capa do blog. */
a.blog-kicker { font-size: 1.05rem; padding: 8px 20px; gap: 8px; text-decoration: none; transition: background-color .15s, color .15s; }
a.blog-kicker i { font-size: 1.15rem; }
a.blog-kicker:hover, a.blog-kicker:focus-visible { background: var(--gp-vermelho); color: #fff; }
.post-imprimir { margin: 4px 0 14px; }
@media print {
    header, footer, nav, aside, .post-imprimir, .post-cat, .post-meta,
    [class*="cta"], [class*="Cta"], [class*="compart"], [class*="coment"], .seo-depo,
    #components-reconnect-modal, .mud-snackbar-provider { display: none !important; }
    body { background: #fff !important; }
    .post-conteudo { font-size: 12pt; }
    .post-conteudo h3 { break-after: avoid; }
}

/* ===== Padrão visual GeraProva no blog (azul nuvem + hero do painel) — 28/10 ===== */
html, body, .gp-public-shell { background: linear-gradient(180deg, #f5faff 0%, #e7f1fc 100%) fixed !important; }
.blog-fundo, .blog-fundo.tema-assuntos, .blog-fundo.tema-bncc, .blog-fundo.tema-conceitos,
.blog-fundo.tema-assunto-por-serie, .blog-fundo.tema-pesquisa, .blog-fundo.tema-infantil {
    --gp-papel: #eef6ff; --gp-papel-claro: #ffffff; --gp-linha: #c4e1fa;
    background: transparent !important;
}
.blog-head {
    position: relative; overflow: hidden;
    padding: 24px 28px 22px 32px;
    border-radius: 8px 20px 20px 8px;
    border: 1px solid #1d4f91;
    background: linear-gradient(115deg, #e3f0fd 0%, #c3dcf7 50%, #9cc6f0 100%);
    box-shadow: 0 10px 26px -14px rgba(46, 130, 200, .45);
    color: #0f3557;
}
.blog-head::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; opacity: .35; pointer-events: none; background: repeating-linear-gradient(180deg, #fff 0 10px, transparent 10px 20px); }
.blog-head h1 { color: #0f3557; }
.blog-head p { color: rgba(15, 53, 87, .85); }
.secoes-trilha { color: #0f3557; }
.secoes-trilha a { color: #1857ad; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* Cartões de seção no padrão azul — 28/10 */
.capa-secao, .capa-secao.tema-assuntos, .capa-secao.tema-bncc, .capa-secao.tema-conceitos,
.capa-secao.tema-assunto-por-serie, .capa-secao.tema-pesquisa, .capa-secao.tema-infantil {
    --c-fundo: linear-gradient(115deg, #e3f0fd 0%, #c3dcf7 60%, #9cc6f0 100%);
    --c-forte: #1857ad;
    border-color: #c4e1fa;
    box-shadow: 0 6px 20px rgba(46, 130, 200, .12);
}
.capa-secao-topo { border-bottom: 1px solid #c4e1fa; }
.capa-secao-nome { color: #0f3557; }
.capa-secao-desc, .capa-secao-qtd { color: rgba(15, 53, 87, .8); }
/* Cartão "Questões resolvidas" na capa do blog */
.capa-questoes-busca { display: flex; flex-direction: column; gap: 8px; padding: 16px 22px 4px; }
.capa-questoes-busca textarea { width: 100%; padding: 10px 12px; border: 1px solid #c4e1fa; border-radius: 10px; font: inherit; resize: vertical; }
.capa-questoes-busca button { align-self: flex-start; padding: 10px 18px; border: 0; border-radius: 10px; background: #1857ad; color: #fff; font-weight: 700; cursor: pointer; }
.capa-secao.tema-questoes { grid-column: 1 / -1; }
@media (min-width: 900px) {
    .capa-secao.tema-questoes { display: grid; grid-template-columns: 1fr 1fr; }
    .capa-secao.tema-questoes .capa-secao-topo { grid-row: span 2; border-bottom: 0; border-right: 1px solid #c4e1fa; }
    .capa-secao.tema-questoes .capa-questoes-busca { padding-top: 20px; }
}