/* ═══════════════════════════════════════════════════════════════════════
 * CCBLA — Article Card (Template Commun)
 *
 * Design source : Kadence Query Loop + Advanced Heading
 *   Image  : ratio 1:1 (carré), pleine largeur, object-fit cover
 *   Date   : Agrandir Wide Medium 16px · mb 5px · couleur texte standard
 *   Titre  : Agrandir Tight Bold 30px · line-height 34px · var(--global-palette4)
 *
 * Pas de tags, pas d'organisateur — card article minimaliste.
 *
 * 2026-04-28 : intégration des styles de grille .ccbla-articles-grid*
 * (préalablement scopés dans art-lies-projets/style.css). Ces styles
 * sont indissociables d'un usage du partial → single source of truth ici.
 * Tous les blocs qui utilisent article-card.php doivent enqueuer
 * 'ccbla-article-card' (cf. blocks-acf-contenu.php).
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Wrapper article ────────────────────────────────────────────────── */
.ccbla-article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    border-bottom: 1px solid transparent;         /* réservation d'espace — évite saut au hover */
    transition: border-color .25s ease;
}
.ccbla-article-card:hover,
.ccbla-article-card:focus-within {
    border-bottom-color: var(--global-palette4, #2D3748);
}

/* ── Lien englobant (toute la card est cliquable) ───────────────────── */
.ccbla-article-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    outline-offset: 2px;
}
.ccbla-article-card__link:focus-visible {
    outline: 2px solid var(--global-palette1, #6b4796);
    border-radius: 2px;
}

/* ── Image wrapper : ratio 1:1 carré ───────────────────────────────── */
.ccbla-article-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--global-palette8, #e8e8e8);
    flex-shrink: 0;
}

.ccbla-article-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.ccbla-article-card__link:hover .ccbla-article-card__img,
.ccbla-article-card__link:focus-visible .ccbla-article-card__img {
    transform: scale(1.09);
}

/* ── Placeholder (sans image) ───────────────────────────────────────── */
.ccbla-article-card__img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--global-palette6, #888888);
}
.ccbla-article-card__img-placeholder svg {
    width: 60px;
    height: 45px;
}

/* ── Corps texte ─────────────────────────────────────────────────────── */
.ccbla-article-card__body {
    padding: 10px 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Date ───────────────────────────────────────────────────────────── */
.ccbla-article-card__date {
    margin: 0 !important;
    padding: 0;
    font-family: 'Agrandir Wide Medium', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--global-palette4, #555555);
}
.ccbla-article-card__date time {
    display: inline;
}

/* ── Titre ──────────────────────────────────────────────────────────── */
.ccbla-article-card__title {
    margin: 0!important;
    padding: 0;
    font-family: 'Agrandir Tight Bold', sans-serif;
    font-size: 30px;
    font-weight: 400; /* la graisse est dans la coupe de fonte */
    line-height: 34px;
    color: var(--global-palette4, #2D3748);
}

/* ── Mobile (<768px) — typo réduite ──────────────────────────────────── */
@media (max-width: 767px) {
    .ccbla-article-card__title {
        font-size: 22px;
        line-height: 26px;
    }
    .ccbla-article-card__date {
        font-size: 14px;
    }
}

/* Grille — wrapper layout (.ccbla-articles-grid + __list + __item) 2026-04-28: migré depuis art-lies-projets/style.css pour devenir single source of truth. Utilisé par: art-lies-projets, articles-du-membre. Grille: 4 col ≥ 1100px · 3 col ≥ 800px · 2 col ≥ 520px · 1 col mobile */

/* ── Wrapper section ─────────────────────────────────────────────────── */
.ccbla-articles-grid {
    margin: 0;
    padding: 0;
}

/* ── Liste ───────────────────────────────────────────────────────────── */
.ccbla-articles-grid__list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 0 !important;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* ── Items ───────────────────────────────────────────────────────────── */
.ccbla-articles-grid__item {
    display: flex;
    flex-direction: column;
}
.ccbla-articles-grid__item .ccbla-article-card {
    flex: 1;
}

/* ── Responsive — gap 16px sur tablette + mobile ────────────────────── */
@media (max-width: 1099px) {
    .ccbla-articles-grid__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 799px) {
    .ccbla-articles-grid__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ── Mobile (<768px) — 1 colonne ─────────────────────────────────────── */
@media (max-width: 767px) {
    .ccbla-articles-grid__list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 519px) {
    .ccbla-articles-grid__list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}