/* JLCasino — drobečková navigace, jediný tvar pro celý web.
   ---------------------------------------------------------------------------
   Značí ji includes/components/breadcrumbs.php (<ol> / <li>), plus dvě starší
   ploché varianty bez seznamu: .review-breadcrumb (recenze, delší články)
   a .blog-breadcrumbs (blogový článek). Všechny tři sdílejí jeden zápis tady,
   aby se drobečky nesázely na třech místech třemi způsoby — duplicitní bloky
   v pages/page-recenze.css a pages/page-blog-article.css jsou proto pryč.

   Drobečky nejsou pilulky ani čipy: je to jeden řádek sazby s oddělovačem.
   Hierarchii nese váha a velikost, ne barva (DESIGN-JLCASINO.md, Typografie),
   takže tady není zelená vůbec — zelenou si šetří nadpis a tlačítko.
   Odkaz se pozná podtržením vlásečnicí, ne obarvením. */

.breadcrumbs,
.review-breadcrumb,
.blog-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0 0 24px;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--kt-ink-2);
}

/* Reset <ol>/<li> — seznam se sází jako řádek, ne jako odrážky. */
.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.breadcrumbs a,
.review-breadcrumb a,
.blog-breadcrumbs a {
    color: var(--kt-ink-2);
    text-decoration: underline;
    text-decoration-color: var(--kt-line-2);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible,
.review-breadcrumb a:hover,
.review-breadcrumb a:focus-visible,
.blog-breadcrumbs a:hover,
.blog-breadcrumbs a:focus-visible {
    color: var(--kt-ink);
    text-decoration-color: var(--kt-ink-2);
}

/* Oddělovač je jen znak, ne prvek. Nesmí se dát vybrat ani přečíst nahlas. */
.breadcrumbs-sep,
.bc-sep {
    color: var(--kt-line-2);
    user-select: none;
}

/* Poslední článek je cíl, proto plná barva a vyšší váha, ne jiný odstín. */
.breadcrumbs-current,
.bc-current {
    color: var(--kt-ink);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .breadcrumbs a,
    .review-breadcrumb a,
    .blog-breadcrumbs a { transition: none; }
}