/**
 * Coaxia RH — Blog page styles
 */

/**
 * Category filter nav
 */
nav.filter {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-10);

    & .btn-filter {
        padding: 0.5rem 1.25rem;
        font-size: var(--text-sm);
        border-radius: var(--radius-full);

        /* Survol commun aux 2 états (actif/inactif) : même micro-interaction
           (soulèvement + ombre teintée) que les autres variantes ".btn-*"
           de base.css (".btn-brand"/".btn-white"/…) — ce bouton n'héritait
           jusqu'ici d'aucun ".btn-*" existant, donc d'aucun survol du tout
           au-delà de la transition déjà posée par ".btn" (base.css). */
        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 22px rgba(56, 128, 107, .28);
        }

        &.active {
            background-color: var(--color-brand);
            color: var(--color-white);
            border-color: transparent;
        }

        &:not(.active) {
            background-color: transparent;
            color: var(--color-black);
            border-color: var(--color-gray-soft);

            /* Fond teinté + bordure "--color-brand" au survol : invite au
               clic sur un filtre PAS ENCORE sélectionné (le fond plein
               "--color-brand" reste réservé à ".active", pour que le
               survol ne se confonde jamais visuellement avec la sélection
               réelle). "--color-brand-light" (pâle) plutôt que
               "--color-brand-soft" (plus saturé depuis la mise à jour des
               couleurs de marque) : le texte reste "--color-black",
               largement lisible sur les deux, mais une teinte pâle au
               survol d'un simple filtre reste plus discrète qu'un fond
               saturé, qui se rapprocherait trop visuellement de ".active". */
            &:hover {
                background-color: var(--color-brand-light);
                border-color: var(--color-brand);
            }
        }
    }
}

/* Articles grid */
section.blog {
    & .news-grid {
        &.filtered-list {
            & .card {
                padding: 0;
                overflow: hidden;

                &.hidden {
                    display: none;
                }

                & .img {
                    aspect-ratio: 16 / 9;
                    overflow: hidden;

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform .4s var(--ease-refined);
                    }
                }

                &:hover .img img {
                    transform: scale(1.04);
                }

                & .body {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    padding: 22px 24px 24px;
                    gap: var(--space-3);
                }

                & .meta {
                    display: flex;
                    align-items: center;
                    gap: var(--space-3);
                    font-size: var(--text-sm);
                }

                & .category {
                    font-weight: 600;
                    color: var(--color-brand);
                    text-transform: uppercase;
                    letter-spacing: 0.06em;
                    font-size: var(--text-xs);
                }

                & time {
                    color: var(--color-gray-soft);
                }

                & h3 {
                    color: var(--color-brand);
                    line-height: 1.35;
                    margin-bottom: 0;
                }

                & .link {
                    margin-top: auto;
                    padding-top: var(--space-2);
                }
            }
        }
    }
}

@scope (.page-blog-article) {

    .sidebar-card {

        & .text {
            font-size: var(--text-sm);
        }

        /* Médaillon auteur dans la sidebar — fond menthe clair
           ("--color-brand-soft") : tout le contenu, blanc à l'origine (fond
           noir/menthe), passe en sombre pour rester lisible. */
        &.profile {
            background-color: var(--color-brand-soft);
            color: var(--color-black);
            text-align: center;
            /* "--color-white" (et non "--color-brand", qui contredisait le
               commentaire de ".sidebar-card" dans base.css — "blanc sur le
               fond menthe de .profile" — jamais appliqué ici) : le
               filigrane doit CONTRASTER avec son propre fond (comme sur les
               fonds noir/blanc des autres variantes), pas s'y fondre —
               d'autant plus que "--color-brand-soft" est désormais plus
               saturé, rapprochant encore plus un filigrane "--color-brand"
               de son propre fond (même famille de teinte). */
            --sidebar-mark: var(--color-white);
            --sidebar-mark-opacity: 0.35;

            .text {
                color: var(--color-gray);
            }

            & figure {
                margin: 0;

                /* Photo : "img.avatar" (base.css, ".sidebar-card .avatar" —
                   design des ".badge", 110px) ; ici seulement centrée. */
                & .avatar {
                    margin: 0 auto var(--space-4);
                }
            }

            & figcaption,
            & .name {
                font-family: var(--font-heading);
                font-size: var(--text-base);
                font-weight: 700;
                font-style: normal;
                margin-bottom: var(--space-3);
                color: var(--color-black);
            }

            /* Bouton « À propos » : le "btn-outline" blanc des cartes sombres
               (base.css, ".sidebar-card:not(.light)") est illisible sur ce
               fond clair — contour et texte sombres, comme sur ".light". */
            & .btn-outline {
                color: var(--color-black);
                border-color: rgba(35, 31, 32, 0.55);

                &:hover {
                    background-color: rgba(35, 31, 32, 0.06);
                    border-color: var(--color-black);
                }
            }
        }

        /* Bloc de contact dans la sidebar */
        &.contact {
            & .btn {
                font-size: var(--text-sm);
            }
        }
    }

    section.blog {
        & header {
            margin: var(--space-12) 0;
            max-width: 100%;

            & h1 {
                color: var(--color-brand);
            }

            @media (min-width: 1024px) {
                & {
                    margin: var(--space-24) 0;
                }
            }

            /**
            * Article  meta (category, date, read time, author)
            */
            ul {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: var(--space-2) var(--space-4);
                list-style: none;
                margin-bottom: var(--space-5);
                font-size: var(--text-sm);
                color: var(--color-gray-soft);

                & li {
                    display: flex;
                    align-items: center;

                    &.label {
                        margin: 0;

                        &::before {
                            display: none;
                        }
                    }

                    &::before {
                        content: "";
                        display: block;
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background-color: var(--color-brand);
                        margin-right: var(--space-4);
                        flex-shrink: 0;
                    }
                }
            }

            /* Article header — image panoramique */
            & img {
                display: block;
                width: 100%;
                height: clamp(220px, 40vw, 480px);
                object-fit: cover;
                border-radius: var(--radius-md);
                margin-top: var(--space-8);
            }

            & figure {
                margin: 0;

                & figcaption {
                    margin-top: var(--space-3);
                    text-align: center;
                    font-size: var(--text-sm);
                    font-style: italic;
                    font-weight: 400;
                    color: var(--color-gray-soft);
                }
            }
        }

        /* Article tags */
        ul.article-tags {
            display: flex;
            gap: var(--space-2);
            flex-wrap: wrap;
            padding: var(--space-6) 0 0;
            list-style: none;

            & li {
                font-size: var(--text-xs);
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--color-brand);
                border: 1px solid var(--color-brand);
                padding: 4px 12px;
                border-radius: 100px;
            }
        }

        &.blog-related {
            & header {
                margin: 0;
            }
        }
    }
}