/* =========================================================
   COM_CASESOCB – Breadcrumb (ajuste para HTML do componente)
   HTML esperado:
   <nav class="casesocb-case__breadcrumb" ...>
     <ol class="mod-breadcrumbs breadcrumb ...">
       <li class="mod-breadcrumbs__item breadcrumb-item ...">...</li>
     </ol>
   </nav>

   Para sticky, aplique a classe:
   .casesocb-case__breadcrumb.is-sticky  (no próprio <nav>)
   e quando fixar:
   .casesocb-case__breadcrumb.is-sticky.is-fixed
   ========================================================= */

/* container do breadcrumb (componente) */
.com-casesocb-case .casesocb-case__breadcrumb{
    position: relative;
    width: 100%;
    z-index: 10; /* menor que header/megamenu */
    background: transparent;
    box-shadow: none;
    padding: 5px 0;
}

/* limita em 1370 igual seu padrão */
.com-casesocb-case .casesocb-case__breadcrumb .mod-breadcrumbs.breadcrumb{
    width: 100%;
    max-width: 1370px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;

    display: flex;
    align-items: center;
    gap: .25rem;

    background: transparent;
    border-radius: 0;
    margin-bottom: 0;

    font-family: var(--font-inter);
    font-size: 12px;
    line-height: 18px;
}

/* itens */
.com-casesocb-case .casesocb-case__breadcrumb .breadcrumb-item{
    font-weight: var(--weight-regular);
    color: var(--ocb-azul-marinho);
    max-width: 40vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* item ativo */
.com-casesocb-case .casesocb-case__breadcrumb .breadcrumb-item.active{
    color: var(--ocb-azul-ceu);
}

/* links */
.com-casesocb-case .casesocb-case__breadcrumb .breadcrumb-item a{
    color: var(--ocb-azul-marinho);
    text-decoration: none;
}

.com-casesocb-case .casesocb-case__breadcrumb .breadcrumb-item a:hover,
.com-casesocb-case .casesocb-case__breadcrumb .breadcrumb-item a:focus{
    text-decoration: underline;
}

/* separador entre itens (» por padrão bootstrap) */
.com-casesocb-case .casesocb-case__breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    float: left;
    padding-right: .5rem;
    color: var(--ocb-azul-marinho);
    content: var(--bs-breadcrumb-divider, "»");
}

/* =========================
   STICKY (opcional)
   - aplique .is-sticky no <nav>
   - quando fixar, adicione .is-fixed
   ========================= */

.com-casesocb-case .casesocb-case__breadcrumb.is-sticky{
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, padding .2s ease;
}

/* estado fixo */
.com-casesocb-case .casesocb-case__breadcrumb.is-sticky.is-fixed{
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    z-index: 900;

    background: var(--ocb-branco);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    border-bottom: 1px solid var(--ocb-azul-marinho);
    padding: 5px 0;

    animation: spFadeInDown .5s;
}

/* quando fixo, o fundo vem do <nav> */
.com-casesocb-case .casesocb-case__breadcrumb.is-sticky.is-fixed .mod-breadcrumbs.breadcrumb{
    background: transparent !important;
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 992px){
    .com-casesocb-case .casesocb-case__breadcrumb{
        display: none;
    }
}