/**
 * Magazine — articles du blog Better World d'eat4good mélangés à ceux de /magazine
 * (templates/magazine/featured-better-world.php, card-better-world.php) et pastilles de
 * leurs catégories dans la barre de navigation (listing.php, filtre de magazines.js).
 * Complète magazines.css : mêmes cartes et même une, seules les pastilles changent.
 */

/* Pastilles sans lien (catégories d'eat4good : aucune page d'étiquette chez nous) */
.bs-mag span.bs-mag-pill {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--bs-green-tint-soft);
    font: 500 13px/16px var(--bs-font);
    color: var(--bs-ink);
}

/* Source de l'article : distingue les articles d'eat4good de ceux du magazine */
.bs-mag span.bs-mag-pill--source {
    background: var(--bs-green);
    color: #FFF;
}

/* L'attribut hidden (filtre par catégorie) ne l'emporte pas sur display: grid */
.bs-mag-featured[hidden] {
    display: none;
}

/* ---- Barre de navigation : catégories Better World ------------------- */

/* Repère avant les catégories d'eat4good, à la suite des étiquettes du magazine */
.bs-mag-pills__label {
    display: flex;
    align-items: center;
    padding: 0 4px 0 10px;
    font: 600 12px/16px var(--bs-font);
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bs-green);
}

.bs-mag .bs-mag-pills--nav a.bs-mag-pill--bw {
    border-color: var(--bs-green-tint);
}

.bs-mag .bs-mag-pills--nav a.bs-mag-pill--bw:hover {
    border-color: var(--bs-green);
}

.bs-mag .bs-mag-pills--nav a.bs-mag-pill--bw.is-active {
    border-color: var(--bs-green);
    background: var(--bs-green);
    color: #FFF;
}