/* Banner parallax interno: breadcrumb mobile al posto del secondo logo */

.pagina-banner-spacer,
.dettaglio-banner-spacer {
    height: 60px;
}

/* Desktop: banda grigia più alta sotto l'header (solo spacer, breadcrumb nel contenuto) */
@media (min-width: 992px) {
    .pagina-banner-spacer,
    .dettaglio-banner-spacer {
        height: 88px;
    }

    .pagina-banner-top,
    .dettaglio-banner-top {
        min-height: 88px;
    }
}

.pagina-banner-top,
.dettaglio-banner-top {
    padding: 0;
}

.pagina-banner-breadcrumb {
    position: relative;
    z-index: 1;
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.pagina-banner-breadcrumb .breadcrumb {
    width: 100%;
    padding: 0;
}

.pagina-banner-breadcrumb .breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    gap: 0;
}

.pagina-banner-breadcrumb .breadcrumb li {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1.45;
}

.pagina-banner-breadcrumb .breadcrumb ul > li:after {
    padding: 0 10px;
    font-size: 5px;
    opacity: 0.45;
}

.pagina-banner-breadcrumb .breadcrumb a {
    font-weight: 500;
}

.pagina-banner-breadcrumb .breadcrumb li.active {
    font-weight: 600;
}

.pagina-banner-breadcrumb .breadcrumb li.active u {
    text-underline-offset: 3px;
}

/* Allineamento orizzontale breadcrumb ↔ contenuto sotto (mobile) */
@media (max-width: 767.98px) {
    :root {
        --pagina-gutter-x: 16px;
    }

    .pagina-banner-top > .container {
        padding-left: var(--pagina-gutter-x);
        padding-right: var(--pagina-gutter-x);
    }

    /* La row Bootstrap ha margini negativi: senza reset le briciole risultano più a sinistra del testo */
    .pagina-banner-top > .container > .row.pagina-banner-breadcrumb {
        margin-left: 0;
        margin-right: 0;
    }

    .pagina-banner-top > .container > .row.pagina-banner-breadcrumb > .col-12 {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .pagina-banner-breadcrumb .breadcrumb,
    .pagina-banner-breadcrumb .breadcrumb ul {
        padding-left: 0;
        margin-left: 0;
    }
}