/* =========================================================
   BREADCRUMBS – KONECNA VRSTVA
   Nacita se po hlavnim style.css a po navigaci.
   Obsahuje pouze drobeckovou a souvisejici rychlou navigaci.
   ========================================================= */

/* Pozicni kontext pro breadcrumbs umistene uvnitr hero. */
.destination-country-hero,
.inspiration-article-hero {
    position: relative;
}

.msn-breadcrumbs {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 7px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.msn-breadcrumbs::-webkit-scrollbar {
    display: none;
}

.msn-breadcrumbs > * {
    flex: 0 0 auto;
}

.msn-breadcrumbs a {
    text-decoration: none;
}

/* Kontinent a zeme: breadcrumbs dole primo ve fotografii hero. */
.msn-hero-breadcrumbs-section {
    position: absolute;
    z-index: 12;
    right: 5vw;
    bottom: 24px;
    left: 5vw;
    color: rgba(255, 255, 255, .76);
    pointer-events: none;
}

.msn-hero-breadcrumbs {
    color: rgba(255, 255, 255, .76);
    pointer-events: auto;
}

.msn-hero-breadcrumbs a,
.msn-hero-breadcrumbs span,
.msn-hero-breadcrumbs .is-current {
    color: rgba(255, 255, 255, .76);
    text-decoration: none;
}

.msn-hero-breadcrumbs a:hover,
.msn-hero-breadcrumbs a:focus-visible {
    color: #fff;
}

/* Kontinent pouziva schvalenou editorialni osu 1480 px / 38 px. */
@media (min-width: 761px) {
    .destination-continent-page .msn-hero-breadcrumbs-section {
        right: max(38px, calc((100vw - 1480px) / 2));
        left: max(38px, calc((100vw - 1480px) / 2));
    }

    .destination-continent-page .msn-hero-breadcrumbs {
        max-width: 1480px;
    }
}

/* Zajezd a detail clanku: samostatny svetly radek pod hero. */
.msn-trip-breadcrumbs-section {
    position: relative;
    z-index: 4;
    width: 100%;
    padding: 15px 5vw;
    border-top: 1px solid #d9d4ca;
    border-bottom: 1px solid #d9d4ca;
    background: #f5f3ee;
}

.msn-trip-breadcrumbs,
.msn-trip-breadcrumbs a,
.msn-trip-breadcrumbs span,
.msn-trip-breadcrumbs .cesta-breadcrumb-current,
.msn-trip-breadcrumbs .cesta-breadcrumb-text {
    min-width: auto;
    overflow: visible;
    color: #6d6962;
    text-decoration: none;
    text-overflow: clip;
}

.msn-trip-breadcrumbs a:hover,
.msn-trip-breadcrumbs a:focus-visible {
    color: #141414;
}

.inspiration-article-breadcrumbs-section .msn-breadcrumbs {
    max-width: 1480px;
}

@media (max-width: 760px) {
    .msn-hero-breadcrumbs-section {
        right: 20px;
        bottom: 16px;
        left: 20px;
    }

    .msn-trip-breadcrumbs-section {
        padding: 13px 20px;
    }

    .msn-breadcrumbs {
        gap: 6px;
        font-size: 12px;
    }

    /* Detail clanku: dlouhy aktualni nazev se zkrati bez pretoku viewportu. */
    .inspiration-article-breadcrumbs-section {
        overflow: hidden;
    }

    .inspiration-article-breadcrumbs {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .inspiration-article-breadcrumbs .is-current {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* =========================================================
   DETAIL CESTY – RYCHLA NAVIGACE NA STEJNE OSE JAKO BREADCRUMBS
   Vnejsi odsazeni patri radku, vnitrni kontejner se uz znovu neodsazuje.
   ========================================================= */
main.single-cesta .cesta-subnav {
    padding-right: 5vw;
    padding-left: 5vw;
}

main.single-cesta .cesta-subnav-inner {
    width: 100%;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

@media (max-width: 760px) {
    main.single-cesta .cesta-subnav {
        padding-right: 20px;
        padding-left: 20px;
    }
}
