/* 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: #0a0a1a;
}

.blog-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 18px 46px;
    color: #fff;
}

/* 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: #a78bfa;
    background: rgba(167, 139, 250, .15);
    border: 1px solid rgba(167, 139, 250, .3);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

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

.blog-head p {
    color: rgba(255, 255, 255, .7);
    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: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: all .15s;
}

.cat-pill:hover {
    border-color: rgba(167, 139, 250, .45);
    color: #a78bfa;
}

.cat-pill.active {
    background: rgba(167, 139, 250, .15);
    border-color: rgba(167, 139, 250, .3);
    color: #a78bfa;
}

/* 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: #1e293b;
}

.principal.noimg {
    background: linear-gradient(135deg, #312e81, #4c1d95);
}

.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: linear-gradient(135deg, #667eea, #764ba2);
    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: rgba(255, 255, 255, .7);
    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: #1e293b;
    flex-shrink: 0;
}

.slide.noimg {
    background: linear-gradient(135deg, #764ba2, #667eea);
}

.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;
    background: rgba(167, 139, 250, .15);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, .3);
    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: rgba(255, 255, 255, .7);
    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: rgba(255, 255, 255, .7);
    flex-wrap: wrap;
}

.slide-meta .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
}

.car-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(10, 10, 26, .55);
    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: #a78bfa;
    border-color: #a78bfa;
}

.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: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: all .2s;
    border: none;
    padding: 0;
}

.car-dot.active {
    background: #a78bfa;
    width: 22px;
    border-radius: 5px;
}

/* ---- Seção título ---- */
.sec-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    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: rgba(30, 41, 59, .7);
    border: 1px solid rgba(255, 255, 255, .08);
    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(167, 139, 250, .3);
    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(102, 126, 234, .25), rgba(118, 75, 162, .25));
    color: rgba(255, 255, 255, .15);
    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: #a78bfa;
    background: rgba(167, 139, 250, .15);
    padding: 3px 10px;
    border-radius: 12px;
}

.h-date {
    font-size: .76rem;
    color: rgba(255, 255, 255, .55);
}

.h-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 6px;
}

.h-card-excerpt {
    font-size: .88rem;
    color: rgba(255, 255, 255, .7);
    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: rgba(255, 255, 255, .6);
}

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

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h-card-read {
    color: #a78bfa;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ---- Empty ---- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, .55);
}

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

.empty-back {
    display: inline-block;
    margin-top: 10px;
    color: #a78bfa;
    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 rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .7);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: all .15s;
}

.pag:hover,
.pag.active {
    background: rgba(167, 139, 250, .15);
    border-color: rgba(167, 139, 250, .3);
    color: #a78bfa;
}

.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: rgba(30, 41, 59, .7);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 18px;
}

.side-h {
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 13px;
}

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

.side-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: .9rem;
    outline: none;
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.side-search input::placeholder {
    color: rgba(255, 255, 255, .4);
}

.side-search input:focus {
    border-color: rgba(167, 139, 250, .45);
}

.side-search button {
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    width: 40px;
    cursor: pointer;
}

.s-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: .88rem;
}

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

.s-cat:hover {
    color: #a78bfa;
}

.s-cat .cnt {
    font-size: .74rem;
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    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 rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: .86rem;
}

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

.pill:hover {
    color: #a78bfa;
}

.pill .pv {
    font-size: .76rem;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
}

.s-item {
    display: block;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: 9px;
    text-decoration: none;
    transition: all .2s;
}

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

.s-item:hover {
    border-color: rgba(167, 139, 250, .28);
    background: rgba(167, 139, 250, .08);
}

.s-item .t {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1.35;
}

.s-item:hover .t {
    color: #a78bfa;
}

.s-item .m {
    display: flex;
    gap: 10px;
    font-size: .73rem;
    color: rgba(255, 255, 255, .55);
    flex-wrap: wrap;
}

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

.tags a {
    font-size: .76rem;
    color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    padding: 7px 12px;
    text-decoration: none;
    transition: all .2s;
}

.tags a:hover {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, .32);
    background: rgba(167, 139, 250, .15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   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: rgba(255, 255, 255, .06);
    border: 1px solid rgba(167, 139, 250, .35);
    border-radius: 14px;
}

.busca-topo > i { color: #a78bfa; flex: none; }

.busca-topo input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: .95rem;
    padding: 11px 0;
}

.busca-topo input::placeholder { color: rgba(255, 255, 255, .42); }

.busca-topo button {
    flex: none;
    border: 0;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    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: rgba(255, 255, 255, .45); font-weight: 600; }

.etapa-pill {
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: color .15s, border-color .15s, background-color .15s;
}

.etapa-pill:hover { color: #a78bfa; border-color: rgba(167, 139, 250, .45); }
.etapa-pill.on { background: rgba(167, 139, 250, .15); border-color: rgba(167, 139, 250, .35); color: #a78bfa; }

/* ---- 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: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.trilho-nome i { color: var(--cor, #a78bfa); }

.trilho-todos {
    font-size: .8rem;
    font-weight: 700;
    color: #a78bfa;
    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(167, 139, 250, .5) transparent;
}

.trilho-pista::-webkit-scrollbar { height: 7px; }
.trilho-pista::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 99px; }
.trilho-pista::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, .45); border-radius: 99px; }

.mini {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: rgba(30, 41, 59, .7);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .2s, border-color .2s;
}

.mini:hover { transform: translateY(-3px); border-color: rgba(167, 139, 250, .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(102, 126, 234, .28), rgba(118, 75, 162, .28));
    color: rgba(255, 255, 255, .22);
    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: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini:hover .mini-t { color: #a78bfa; }
.mini-m { font-size: .7rem; color: rgba(255, 255, 255, .5); }

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

.migalhas a { color: #a78bfa; 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(167, 139, 250, .45);
    border-radius: 12px;
    color: #a78bfa;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s, border-color .18s;
}

.indice-link:hover { background: rgba(167, 139, 250, .12); border-color: rgba(167, 139, 250, .7); }

/* ---- Página /blog/todos ---- */
.indice-conta { color: rgba(255, 255, 255, .55); 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 rgba(255, 255, 255, .1);
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
}

.indice-mes h2 span {
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .06);
    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(167, 139, 250, .09); }

.indice-mes li a {
    color: rgba(255, 255, 255, .86);
    text-decoration: none;
    font-size: .89rem;
    font-weight: 600;
    line-height: 1.45;
}

.indice-mes li:hover a { color: #a78bfa; }

.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: #a78bfa;
    background: rgba(167, 139, 250, .13);
    padding: 2px 9px;
    border-radius: 11px;
    white-space: nowrap;
}

.indice-dia {
    font-size: .74rem;
    color: rgba(255, 255, 255, .42);
    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; }