:root {
    --botlink-primary-color:#00f0d4;
    --botlink-secondary-color:#566868;
}
.botlink-articles-container {
    max-width:1200px;
    margin:0 auto;
    padding:1.4rem;
    & .botlink-articles-title {
        margin-bottom:2rem;
        text-align:center;
        font-size:2rem;
    }
    & .botlink-articles-grid {
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
        gap:2rem;
        margin-bottom:2rem;
        & .botlink-article-card {
            position:relative;
            padding-bottom:2rem;
            border:1px solid var(--botlink-primary-color);
            border-radius:1rem;
            overflow:hidden;
            transition:transform .3s ease, box-shadow .3s ease;
            &:hover {
                transform:translateY(-5px);
                box-shadow:0 10px 20px rgba(0, 0, 0, 0.1);
            }
            & .botlink-article-thumbnail {
                & img {
                    width:100%;
                    height:200px;
                    object-fit:cover;
                }
            }
            & .botlink-article-content {
                padding:20px;
                & .botlink-article-title {
                    margin-top:0;
                    margin-bottom:15px;
                    font-size:1.4em;
                    & a {
                        text-decoration:none;
                        color:inherit;
                    }
                }
                & .botlink-article-excerpt {
                    color:var(--botlink-secondary-color);
                    margin-bottom:15px;
                    line-height:1.6;
                }
                & .botlink-read-more {
                    position:absolute;
                    bottom:1rem;
                    left:50%;
                    transform:translateX(-50%);
                    text-align:center;
                    display:block;
                    padding:.5rem 1rem;
                    background:var(--botlink-primary-color);
                    color:white;
                    text-decoration:none;
                    border-radius:2rem;
                    transition:background-color .3s ease;
                    margin-inline:auto;
                    font-weight:700;
                    width:fit-content;
                    &:hover {
                        background:var(--botlink-secondary-color);
                        color:white;
                    }
                }
            }
            & .botlink-pagination {
                text-align:center;
                margin-top:1rem;
                & .page-numbers {
                    display:inline-block;
                    padding:.5rem .8rem;
                    margin:0 5px;
                    border:1px solid var(--botlink-primary-color);
                    border-radius:1rem;
                    text-decoration:none;
                    &.current {
                        background-color:var(--botlink-primary-color);
                        color:white;
                        border-color:var(--botlink-primary-color);
                    }
                }
            }
        }
    }
}

.botlink-no-articles {
    text-align:center;
    padding:40px;
    font-size:1.2em;
    color:var(--botlink-secondary-color);
}

a.cta {
    background:var(--botlink-primary-color);color:white;padding:1rem 2rem;border-radius:2rem;display:block;margin:0 auto 2rem auto;text-transform:uppercase;width:fit-content;font-weight:700;
    &:hover {
        background:var(--botlink-secondary-color);color:white;
    }
}

body:has([aria-label="Formulaire de contact"]) {
    & a.cta[href*="contact"] {
        display:none;
    }
}

@media (max-width:768px) {
    .botlink-articles-grid {
        grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width:480px) {
    .botlink-articles-grid {
        grid-template-columns:1fr;
    }
}