/* ============================================================
   BLOG
   ============================================================ */


/* ============================================================
   NAVIGATION DES CATÉGORIES
   ============================================================ */

.blog-navigation {
    padding-block:
        var(--spacing-xl);

    background:
        var(--color-white);

    border-bottom:
        1px solid var(--color-border);
}


.blog-categories {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap:
        var(--spacing-sm);

    margin: 0;
}


.blog-category {
    display: inline-flex;

    align-items: center;

    padding:
        0.55rem 1rem;

    border:
        1px solid var(--color-border);

    border-radius:
        999px;

    background:
        var(--color-white);

    color:
        var(--color-text-light);

    font-size:
        var(--font-size-sm);

    font-weight:
        600;

    text-decoration: none;

    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal);
}


.blog-category:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--color-accent);

    color:
        var(--color-accent);
}


/* ============================================================
   ARTICLE À LA UNE
   ============================================================ */

.blog-featured {
    padding-top:
        var(--spacing-4xl);
}


.blog-featured-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);

    min-height:
        460px;

    overflow: hidden;

    background:
        var(--color-white);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-sm);

    transition:
        box-shadow var(--transition-normal);
}


.blog-featured-card:hover {
    box-shadow:
        var(--shadow-md);
}


.blog-featured-card__image {
    position: relative;

    min-height:
        460px;

    overflow: hidden;

    background:
        var(--color-primary);
}


.blog-featured-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.blog-featured-card:hover
.blog-featured-card__image img {
    transform:
        scale(1.03);
}


.blog-featured-card__placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: var(--spacing-xl);

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-dark)
        );

    color:
        var(--color-white);

    font-size:
        var(--font-size-sm);

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.blog-featured-card__body {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        var(--spacing-3xl);
}


.blog-featured-card__title {
    margin-top:
        var(--spacing-md);

    margin-bottom:
        var(--spacing-lg);

    color:
        var(--color-primary);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    line-height:
        1.15;
}


.blog-featured-card__excerpt {
    margin-bottom:
        var(--spacing-xl);

    color:
        var(--color-text-light);

    font-size:
        var(--font-size-lg);

    line-height:
        1.7;
}


.blog-featured-card__meta {
    margin-bottom:
        var(--spacing-xl);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-sm);
}


.blog-featured-card__link {
    display: inline-flex;

    align-items: center;

    gap:
        0.5rem;

    width:
        fit-content;

    color:
        var(--color-primary);

    font-weight:
        700;

    text-decoration: none;
}


.blog-featured-card__link span {
    transition:
        transform 0.2s ease;
}


.blog-featured-card__link:hover {
    color:
        var(--color-accent);
}


.blog-featured-card__link:hover span {
    transform:
        translateX(4px);
}


/* ============================================================
   ARTICLES SECONDAIRES
   ============================================================ */

.blog-secondary-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        var(--spacing-xl);

    margin-top:
        var(--spacing-xl);
}


.blog-secondary-card {
    display: grid;

    grid-template-columns:
        180px minmax(0, 1fr);

    overflow: hidden;

    background:
        var(--color-white);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.blog-secondary-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-md);
}


.blog-secondary-card__image {
    min-height:
        240px;

    overflow: hidden;

    background:
        var(--color-primary);
}


.blog-secondary-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}


.blog-secondary-card:hover
.blog-secondary-card__image img {
    transform:
        scale(1.04);
}


.blog-secondary-card__placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding:
        var(--spacing-md);

    color:
        var(--color-white);

    font-size:
        var(--font-size-xs);

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.blog-secondary-card__body {
    display: flex;

    flex-direction: column;

    padding:
        var(--spacing-xl);
}


.blog-secondary-card__title {
    margin-top:
        var(--spacing-sm);

    margin-bottom:
        var(--spacing-md);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xl);

    line-height:
        1.25;
}


.blog-secondary-card__excerpt {
    margin-bottom:
        var(--spacing-lg);

    color:
        var(--color-text-light);

    font-size:
        var(--font-size-sm);

    line-height:
        1.6;
}


.blog-secondary-card__footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        var(--spacing-md);

    margin-top:
        auto;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-sm);
}


.blog-secondary-card__link {
    color:
        var(--color-primary);

    font-weight:
        700;

    text-decoration:
        none;
}


.blog-secondary-card__link:hover {
    color:
        var(--color-accent);
}


/* ============================================================
   DERNIERS ARTICLES
   ============================================================ */

.blog-latest {
    padding-top:
        var(--spacing-4xl);
}


/* ============================================================
   GRILLE D'ARTICLES
   ============================================================ */

.blog-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--spacing-xl);
}


.blog-card {
    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: hidden;

    background:
        var(--color-white);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


.blog-card:hover {
    transform:
        translateY(-5px);

    border-color:
        var(--color-secondary-light);

    box-shadow:
        var(--shadow-md);
}


.blog-card__image {
    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        var(--color-primary);
}


.blog-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}


.blog-card:hover
.blog-card__image img {
    transform:
        scale(1.04);
}


.blog-card__placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding:
        var(--spacing-lg);

    color:
        var(--color-white);

    font-size:
        var(--font-size-xs);

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.blog-card__body {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding:
        var(--spacing-xl);
}


.blog-card__category {
    margin-bottom:
        var(--spacing-sm);

    color:
        var(--color-accent);

    font-size:
        var(--font-size-xs);

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.blog-card__title {
    margin-bottom:
        var(--spacing-md);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xl);

    line-height:
        1.25;
}


.blog-card__excerpt {
    margin-bottom:
        var(--spacing-lg);

    color:
        var(--color-text-light);

    line-height:
        1.6;
}


.blog-card__footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        var(--spacing-md);

    margin-top:
        auto;
}


.blog-card__meta {
    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-sm);
}


.blog-card__link {
    display: inline-flex;

    align-items: center;

    gap:
        0.4rem;

    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

    font-weight:
        700;

    text-decoration:
        none;
}


.blog-card__link span {
    transition:
        transform 0.2s ease;
}


.blog-card__link:hover {
    color:
        var(--color-accent);
}


.blog-card__link:hover span {
    transform:
        translateX(3px);
}


/* ============================================================
   ARTICLE
   ============================================================ */

.article {
    max-width:
        850px;

    margin-inline:
        auto;
}


.article__meta {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        var(--spacing-md);

    margin-bottom:
        var(--spacing-xl);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-sm);
}


.article__meta a {
    color:
        var(--color-primary);

    font-weight:
        600;

    text-decoration:
        none;
}


.article__meta a:hover {
    color:
        var(--color-accent);
}


.article__content {
    color:
        var(--color-text);

    font-size:
        var(--font-size-lg);

    line-height:
        1.8;
}


.article__content p {
    margin-bottom:
        var(--spacing-xl);
}


.article__content h2 {
    margin-top:
        var(--spacing-3xl);

    margin-bottom:
        var(--spacing-lg);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-2xl);
}


.article__content h3 {
    margin-top:
        var(--spacing-2xl);

    margin-bottom:
        var(--spacing-md);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-xl);
}


.article__content ul,
.article__content ol {
    margin-bottom:
        var(--spacing-xl);

    padding-left:
        var(--spacing-xl);
}


.article__content li {
    margin-bottom:
        var(--spacing-sm);
}


.article__content a {
    color:
        var(--color-primary);

    text-decoration:
        underline;
}


.article__content a:hover {
    color:
        var(--color-accent);
}


.article__content blockquote {
    margin:
        var(--spacing-2xl) 0;

    padding:
        var(--spacing-lg)
        var(--spacing-xl);

    border-left:
        4px solid var(--color-accent);

    background:
        var(--color-background-light);

    color:
        var(--color-text-light);

    font-style:
        italic;
}


.article__back {
    display:
        inline-flex;

    margin-top:
        var(--spacing-3xl);

    color:
        var(--color-primary);

    font-weight:
        600;

    text-decoration:
        none;
}


.article__back:hover {
    color:
        var(--color-accent);
}


/* ============================================================
   RETOUR CATÉGORIE
   ============================================================ */

.blog-category-back {
    margin-bottom:
        var(--spacing-2xl);
}


/* ============================================================
   ÉTAT VIDE
   ============================================================ */

.blog-empty {
    padding:
        var(--spacing-4xl);

    border:
        1px solid var(--color-border);

    background:
        var(--color-white);

    text-align:
        center;
}


.blog-empty h2 {
    margin-bottom:
        var(--spacing-sm);

    color:
        var(--color-primary);
}


.blog-empty p {
    margin:
        0;

    color:
        var(--color-text-light);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

    .blog-featured-card {
        grid-template-columns:
            1fr;
    }


    .blog-featured-card__image {
        min-height:
            360px;
    }


    .blog-secondary-grid {
        grid-template-columns:
            1fr;
    }


    .blog-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .blog-featured-card__body {
        padding:
            var(--spacing-2xl);
    }


    .blog-secondary-card {
        grid-template-columns:
            1fr;
    }


    .blog-secondary-card__image {
        min-height:
            220px;
    }


    .blog-grid {
        grid-template-columns:
            1fr;
    }


    .blog-card__body {
        padding:
            var(--spacing-lg);
    }

}


@media (max-width: 480px) {

    .blog-categories {
        justify-content:
            flex-start;
    }


    .blog-featured-card__image {
        min-height:
            260px;
    }


    .blog-featured-card__body {
        padding:
            var(--spacing-xl);
    }


    .blog-featured-card__title {
        font-size:
            1.7rem;
    }


    .blog-secondary-card__body {
        padding:
            var(--spacing-lg);
    }

}