/**
 * ==========================================================================
 * SurLeFoot — Article Card
 * ==========================================================================
 */

.slf-article-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;

    border: 1px solid var(--slf-color-border, #dfe5eb);
    border-radius: var(--slf-radius-large, 14px);

    background: var(--slf-color-surface, #ffffff);
    box-shadow: var(--slf-shadow-small, 0 4px 14px rgb(11 31 53 / 8%));

    transition:
        border-color var(--slf-transition-fast, 180ms ease),
        box-shadow var(--slf-transition-fast, 180ms ease),
        transform var(--slf-transition-fast, 180ms ease);
}

.slf-article-card:hover {
    border-color: var(--slf-color-primary, #20b653);
    box-shadow: var(--slf-shadow-medium, 0 10px 26px rgb(11 31 53 / 14%));
    transform: translateY(-3px);
}

/*
|--------------------------------------------------------------------------
| Média
|--------------------------------------------------------------------------
*/

.slf-article-card__media-link {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;

    border-radius:
        var(--slf-radius-large, 14px)
        var(--slf-radius-large, 14px)
        0
        0;

    color: inherit;
    text-decoration: none;
}

.slf-article-card__media-link:focus-visible {
    outline: 3px solid var(--slf-color-focus, #20b653);
    outline-offset: -3px;
}

.slf-article-card__media-link .slf-editorial-media {
    display: block;
    overflow: hidden;
    width: 100%;
    margin: 0;

    border-radius:
        var(--slf-radius-large, 14px)
        var(--slf-radius-large, 14px)
        0
        0;
}

.slf-article-card__media-link .slf-editorial-media__image {
    display: block;
    width: 100%;
    height: 100%;

    border-radius:
        var(--slf-radius-large, 14px)
        var(--slf-radius-large, 14px)
        0
        0;

    object-fit: cover;
    transform: scale(1);
    transform-origin: center center;

    transition: transform 320ms ease;
}

/*
 * Règles renforcées pour neutraliser les anciens styles
 * spécifiques à la grille des derniers articles.
 */
.slf-latest .slf-article-card:hover
    .slf-article-card__media-link
    .slf-editorial-media__image,
.slf-latest .slf-article-card__media-link:hover
    .slf-editorial-media__image,
.slf-article-card:hover
    .slf-article-card__media-link
    .slf-editorial-media__image,
.slf-article-card__media-link:hover
    .slf-editorial-media__image {
    transform: scale(1.06) !important;
}

/*
|--------------------------------------------------------------------------
| Contenu
|--------------------------------------------------------------------------
*/

.slf-article-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--slf-space-3, 12px);

    padding: var(--slf-space-5, 24px);
}

.slf-article-card__title {
    margin: 0;

    color: var(--slf-color-heading, #071525);

    font-family: var(--slf-font-family-display, Arial, sans-serif);
    font-size: var(--slf-font-size-500, 1.15rem);
    font-weight: var(--slf-font-weight-bold, 700);
    line-height: var(--slf-line-height-heading, 1.25);
}

.slf-article-card__title a {
    color: inherit;
    text-decoration: none;
}

.slf-article-card__title a:hover {
    color: var(--slf-color-primary-hover, #15933f);
}

.slf-article-card__title a:focus-visible {
    outline: 3px solid var(--slf-color-focus, #20b653);
    outline-offset: 3px;
}

.slf-article-card__excerpt {
    margin: 0;

    color: var(--slf-color-text-muted, #667085);

    font-size: var(--slf-font-size-200, 0.9rem);
    line-height: var(--slf-line-height-body, 1.55);
}

.slf-article-card__meta {
    margin-top: auto;
}

/*
|--------------------------------------------------------------------------
| Variante compacte
|--------------------------------------------------------------------------
*/

.slf-article-card--compact {
    display: grid;
    grid-template-columns: minmax(7.5rem, 36%) minmax(0, 1fr);
}

.slf-article-card--compact .slf-article-card__media-link {
    height: 100%;

    border-radius:
        var(--slf-radius-large, 14px)
        0
        0
        var(--slf-radius-large, 14px);
}

.slf-article-card--compact .slf-editorial-media,
.slf-article-card--compact .slf-editorial-media__image {
    height: 100%;
    min-height: 8.5rem;

    border-radius:
        var(--slf-radius-large, 14px)
        0
        0
        var(--slf-radius-large, 14px);

    aspect-ratio: auto;
}

.slf-article-card--compact .slf-article-card__body {
    gap: var(--slf-space-2, 8px);
    padding: var(--slf-space-4, 16px);
}

.slf-article-card--compact .slf-article-card__title {
    font-size: var(--slf-font-size-400, 1rem);
}

/*
|--------------------------------------------------------------------------
| Variante mise en avant
|--------------------------------------------------------------------------
*/

.slf-article-card--featured {
    position: relative;

    border: 0;
    background: var(--slf-color-secondary, #071525);
}

.slf-article-card--featured .slf-article-card__body {
    color: var(--slf-color-text-inverse, #ffffff);
}

.slf-article-card--featured .slf-article-card__title {
    color: var(--slf-color-text-inverse, #ffffff);
    font-size: var(--slf-font-size-600, 1.4rem);
}

.slf-article-card--featured .slf-article-card__excerpt,
.slf-article-card--featured .slf-article-meta {
    color: var(--slf-color-text-inverse-muted, rgb(255 255 255 / 78%));
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .slf-article-card--compact {
        grid-template-columns: 1fr;
    }

    .slf-article-card--compact .slf-article-card__media-link,
    .slf-article-card--compact .slf-editorial-media,
    .slf-article-card--compact .slf-editorial-media__image {
        min-height: 0;

        border-radius:
            var(--slf-radius-large, 14px)
            var(--slf-radius-large, 14px)
            0
            0;

        aspect-ratio: 16 / 9;
    }
}

/*
|--------------------------------------------------------------------------
| Réduction des animations
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .slf-article-card {
        transition: none;
    }

    .slf-article-card:hover {
        transform: none;
    }
}