slim-blog/assets/scss/components/_card.scss

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

// =============================================================
// Composant carte — générique
// =============================================================
// Définit deux blocs BEM :
//   .card-list  — conteneur de liste de cartes
//   .card       — carte individuelle (vignette + contenu)
// Aucune référence au domaine métier : les contenus spécifiques
// (extrait d'article, prix produit…) sont surchargés dans les
// fichiers de page (pages/_home.scss, pages/_shop.scss…).

// Conteneur de liste de cartes
.card-list {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
}

// Modificateur : fond grisé encadrant les cartes (ex: page d'accueil)
// Rend les box-shadow perceptibles en créant un contraste avec le fond blanc des cartes
.card-list--contained {
    background: $color-bg-light;
    padding: $spacing-md;
    border-radius: $border-radius;
}

// Carte : vignette à gauche, corps à droite
// La vignette est toujours présente (image ou initiales)
.card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: $spacing-lg;
    padding: $spacing-lg;
    background: $color-bg-white;
    border-radius: $border-radius;
    box-shadow: 0 1px 4px $color-card-shadow;
}

// Lien englobant la vignette — pas de décoration, tabindex=-1 pour
// éviter la double tabulation (le titre est déjà un lien cliquable)
.card__thumb-link {
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}

// Vignette image
.card__thumb {
    width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: $border-radius;
    display: block;
}

// Vignette initiales (affiché quand l'entité n'a pas d'image)
// Mêmes dimensions que .card__thumb pour un alignement cohérent
.card__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 120px;
    border-radius: $border-radius;
    background: $color-bg-initials;
    color: $color-text-muted;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    user-select: none;
}

// Wrapper externe : prend la place à droite de la vignette
// Organisé en flex colonne pour empiler .card__body et .card__actions
.card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

// Partie textuelle de la carte
// max-height contraint le titre + métadonnées + aperçu à la hauteur de la vignette.
// overflow:hidden clip l'aperçu si le contenu dépasse — .card__actions est en dehors
// de ce conteneur et reste donc toujours visible.
.card__body {
    max-height: 120px;
    overflow: hidden;
}

// Titre de la carte
.card__title {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
}

// Lien du titre — élément BEM dédié plutôt qu'un sélecteur descendant sur <a>
.card__title-link {
    text-decoration: none;
    color: inherit;

    &:hover {
        text-decoration: underline;
    }
}

// Métadonnées (date, auteur, prix…)
.card__meta {
    margin-bottom: $spacing-sm;
    color: $color-text-muted;
}

// Texte court de présentation — clipé par overflow:hidden du parent .card__body.
// word-break empêche le débordement de mots longs ou d'URLs sans espace.
.card__excerpt {
    margin: $spacing-sm 0;
    color: $color-text;
    line-height: $line-height-base;
    word-break: break-word;
    overflow-wrap: break-word;

    // Styles pour le HTML formaté retourné par post_excerpt()
    // Les listes à puces/numérotées sont compactées pour rester dans l'aperçu
    ul,
    ol {
        margin: $spacing-xs 0 0 $spacing-sm;
        padding-left: $spacing-sm;
    }

    li {
        margin-bottom: 0;
        line-height: $line-height-base;
    }

    strong,
    b {
        font-weight: 600;
    }
    em,
    i {
        font-style: italic;
    }
}

// Zone d'actions (liens, boutons) — aspect défini dans le fichier de page
.card__actions {
    margin-top: $spacing-sm;
}

// Adaptation mobile : vignette au-dessus du corps, pleine largeur
// max-height est annulé sur .card__body — en disposition colonne l'aperçu
// peut s'étendre librement sous la vignette.
@include mobile {
    .card {
        flex-direction: column;
    }

    .card__thumb-link {
        width: 100%;
    }

    .card__thumb,
    .card__initials {
        width: 100%;
        height: 160px;
    }

    // En mobile (disposition colonne), le corps s'étend librement
    .card__body {
        max-height: none;
        overflow: visible;
    }

    // Titre légèrement réduit pour éviter qu'il soit trop imposant sur petit écran
    .card__title {
        font-size: 1.05rem;
    }
}