@use "../../core/variables" as *;
@use "../../core/mixins" as *;

// =============================================================
// Page d'accueil — liste des articles
// =============================================================
// Les styles de structure des cartes sont dans components/_card.scss.
// Ce fichier surcharge uniquement les éléments spécifiques au contexte blog.

// Lien d'action "Lire la suite →" — élément BEM dédié plutôt qu'un sélecteur
// descendant sur <a>, pour respecter BEM et éviter les collisions de styles
.card__actions-link {
    font-size: $font-size-sm;
    color: $color-primary;
    text-decoration: none;

    @include interactive-transition;

    &:hover {
        text-decoration: underline;
    }

    &:focus-visible {
        @include focus-ring;
        border-radius: $radius-sm;
    }
}

// =============================================================
// Barre de filtre par catégorie
// =============================================================

// Conteneur de la liste de liens de filtre
.category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-sm;
    margin-bottom: $spacing-lg;
    padding-bottom: $spacing-md;
    border-bottom: 1px solid $color-border;
}

// Lien de filtre individuel
.category-filter__item {
    padding: $spacing-xs $spacing-sm;
    border-radius: $radius-sm;
    font-size: $font-size-sm;
    text-decoration: none;
    color: $color-text-muted;
    border: 1px solid $color-border;

    @include interactive-transition;

    &:hover {
        color: $color-primary;
        border-color: $color-primary;
    }

    &:focus-visible {
        @include focus-ring;
    }
}

// État actif — catégorie sélectionnée
.category-filter__item--active {
    color: $color-primary;
    border-color: $color-primary;
    font-weight: $font-weight-bold;
}