/*
 * [cbtp_group_articles] / [cbtp_site_articles] — slider de cartes "articles"
 * (post_type = post). Fichier autonome : ne dépend pas du CSS du thème.
 *
 * Proportions et logique visuelle strictement alignées sur le slider
 * Réalisations (astra-child/assets/css/cbtp-group-realisations.css, lecture
 * seule, NON modifié) : mêmes dimensions de carte (308px, featured 408px),
 * même image (250px, hauteur fixe à tous les breakpoints), même logo
 * (padding/position/border-radius), même titre/description. Pas de CTA dans
 * la card (supprimé), pas de barre de séparation sous l'image (Réalisations
 * n'en a pas non plus).
 */

.cbtp-group-articles {
    --cbtp-articles-gap: 30px;
    --cbtp-articles-radius: 16px;
    --cbtp-articles-card-w: 308px;
    --cbtp-articles-featured-w: 408px;
    --cbtp-articles-media-h: 250px;
    --cbtp-articles-body-min-h: calc(408px - 250px);

    /*
     * Typographie strictement alignée sur .cbtp-realisation-title /
     * .cbtp-realisation-description / .cbtp-realisation-link
     * (astra-child/assets/css/cbtp-group-realisations.css) : mêmes
     * variables globales Elementor, avec un repli en dur uniquement si
     * elles sont absentes.
     */
    --cbtp-articles-color-title: var(--e-global-color-text, #0b2545);
    --cbtp-articles-color-text: var(--e-global-color-accent, #4a5568);
    --cbtp-articles-color-cta: var(--e-global-color-primary, #0b2545);

    width: 100%;
    overflow: visible;
}


.cbtp-article-link:hover{color:var(--cbtp-articles-color-title);}

.cbtp-articles-track {
    display: flex;
    align-items: stretch;
    gap: var(--cbtp-articles-gap);

    width: 100%;
    overflow-x: auto;
    overflow-y: visible;

    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0;
    list-style: none;

    cursor: auto;
    touch-action: pan-y;
}

.cbtp-articles-track::-webkit-scrollbar {
    display: none;
}

.cbtp-articles-track.is-dragging {
    cursor: auto;
    scroll-snap-type: none;
}


.cbtp-article-card.cbtp-entity-groupe {
    --cbtp-article-logo-bg: #CCE8FF;
}

.cbtp-article-card.cbtp-entity-maconnerie {
    --cbtp-article-logo-bg: #FFECE5;
}

.cbtp-article-card.cbtp-entity-signalisation {
    --cbtp-article-logo-bg: #FDF5E5;
}

.cbtp-article-card.cbtp-entity-impression {
    --cbtp-article-logo-bg: #F9D2DA;
}

/* Card */

.cbtp-article-card {
    position: relative;

    flex: 0 0 var(--cbtp-articles-card-w);
    width: var(--cbtp-articles-card-w);
    height: 408px;
    scroll-snap-align: start;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #ffffff;
    border-radius: var(--cbtp-articles-radius);
    overflow: hidden;

    
    transition:
    flex-basis .45s cubic-bezier(.22, 1, .36, 1),
    width .45s cubic-bezier(.22, 1, .36, 1);
     /*transition:   flex-basis .45s ease,        width .45s ease;*/
        

    z-index: 1;
}

/*
 * La carte réellement mise en avant est TOUJOURS la première carte visible
 * du slider (pas un hover). L'état initial est posé côté PHP (premier
 * index), puis mis à jour par articles-slider.js au scroll / drag. Seule la
 * largeur change : image, contenu et hauteur globale restent strictement
 * identiques aux cartes normales (même logique que
 * .cbtp-realisation-card.is-featured : jamais d'agrandissement vertical).
 */
.cbtp-article-card.is-featured {
    flex-basis: var(--cbtp-articles-featured-w);
    width: var(--cbtp-articles-featured-w);
    z-index: 10;
}

.cbtp-article-media {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.cbtp-article-image {
    display: block;
    width: 100%;
    height: var(--cbtp-articles-media-h) !important;
    object-fit: cover;
}

/*
 * Logo de l'entité d'origine — mêmes taille/padding/position/border-radius
 * que .cbtp-realisation-logo. Pas de barre d'accent colorée sous l'image :
 * la référence Réalisations n'en a pas.
 */
.cbtp-article-logo {
    background-color: var(--cbtp-article-logo-bg, #FFFFFF);
    border-radius: 999px;

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

    width: fit-content;
    height: auto;

    padding: 5px 8px;

    position: absolute;
    top: 10px;
    right: 10px;

    z-index: 4;
}

.cbtp-article-logo img {
    display: block;
    width: auto;
    height: 30px;
    max-width: 100%;
}

.cbtp-article-body {
    min-height: var(--cbtp-articles-body-min-h);
    box-sizing: border-box;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 8px;

    background: #ffffff;
    padding: 20px;
}

/* Titre — mêmes valeurs que .cbtp-realisation-title (couleur portée par le
   h3, comme dans la référence). Le lien ne change rien visuellement : pas
   de soulignement, y compris au survol, la référence Réalisations n'en a pas. */
.cbtp-article-title {
    margin: 0;
    color: var(--cbtp-articles-color-title);
    font-size: 18px !important;
    line-height: 1.1;
      font-weight: 800;
}

.cbtp-article-title-link {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cbtp-article-title-link:hover{
    color: var(--e-global-color-primary);
}

/*
 * Extrait — mêmes valeurs que .cbtp-realisation-description. Ajout d'un
 * -webkit-line-clamp: 3 (absent côté Réalisations) car l'extrait WordPress
 * natif peut être plus long que le texte réalisation ; cela évite d'agrandir
 * la card sans changer ni la taille, ni la couleur, ni le poids du texte.
 */
.cbtp-article-excerpt {
    margin: 0;
    color: var(--cbtp-articles-color-text);
    font-size: 0.9rem;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
      text-overflow: ellipsis;
     /*  height: calc(0.9rem * 1.5 * 2);*/
}

.cbtp-article-excerpt p {
    margin: 0;
}
/*
 * CTA "Voir toutes nos actualités" — mêmes valeurs que
 * .cbtp-realisation-link. Doit rester cliquable même quand la carte est
 * draggable.
 */
.cbtp-article-link {
    margin-top: auto;
    padding-top: 8px;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-align: right;
    justify-content: flex-end;

    color: var(--cbtp-articles-color-cta);
    font-size: 14px !important;
    text-decoration: none;

    position: relative;
    z-index: 20;
    pointer-events: auto;
    cursor: pointer !important;
}

.cbtp-article-link-icon {
    flex: 0 0 auto;
}

/*
 * Tablette puis mobile : seule la largeur des cartes s'adapte (gap compris),
 * hauteur de carte et hauteur d'image restent fixes — même principe que
 * .cbtp-realisation-card / .cbtp-realisation-image, qui ne varient jamais
 * avec les media queries.
 */
@media screen and (max-width: 1024px) {
    .cbtp-group-articles {
        --cbtp-articles-gap: 20px;
        --cbtp-articles-card-w: 260px;
        --cbtp-articles-featured-w: 320px;
    }
}

/* Mobile : même principe (première carte visible plus large), largeurs adaptées à l'écran */
@media screen and (max-width: 767px) {
    .cbtp-group-articles {
        --cbtp-articles-gap: 16px;
        --cbtp-articles-card-w: min(72vw, 308px);
        --cbtp-articles-featured-w: min(88vw, 408px);
    }
}

.cbtp-articles-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

.cbtp-articles-arrow {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--e-global-color-primary, #008CFF);
    cursor: pointer;
    box-shadow: none !important;
}

.cbtp-articles-arrow svg {
    display: block;
    width: 20px;
    height: 20px;
}

.cbtp-articles-arrow svg path {
    fill: var(--e-global-color-primary, #008CFF);
}

@media screen and (max-width: 767px) {
    .cbtp-articles-navigation {
        margin-top: 16px;
    }

    .cbtp-articles-arrow {
        width: 42px;
        height: 42px;
    }
}