/* ================================================================
   Block : art-accueil-epingle
   Layout : grille 3 colonnes
     col 1 → image  (50vw, fixe)
     col 2 → contenu (1fr)
     col 3 → tag "focus" (auto — largeur de la pill)
   ================================================================ */

.art-accueil-epingle {
    display: grid;
    grid-template-columns: 50vw 1fr auto;
    grid-template-rows: 1fr;
    min-height: 50vw; /* image carré 1/1 → hauteur = col 1 */
    align-items: stretch;
    overflow: hidden;
}


/* ── Col 1 : image ──────────────────────────────────────────── */

.art-accueil-epingle__media {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    overflow: hidden;
}

.art-accueil-epingle__media a {
    display: block;
    width: 100%;
    height: 100%;
}

.art-accueil-epingle__img,
.art-accueil-epingle__media-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.art-accueil-epingle__media-placeholder {
    background-color: #812b29; /* pop-secondary — fallback hex */
}


/* ── Col 2 : contenu ────────────────────────────────────────── */

.art-accueil-epingle__content {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* top flotte haut, bottom collé bas */
    padding: 44px 40px 52px 60px;   /* droite réduite : la col tag prend le relais */
    box-sizing: border-box;
}


/* ── Col 3 : tag "focus" ────────────────────────────────────── */

.art-accueil-epingle__tag {
    grid-column: 3;
    grid-row: 1;
    align-self: start;          /* colle en haut de la ligne */
    margin-top: 44px;           /* aligne avec le padding-top du contenu */
    margin-right: 60px;         /* respire du bord droit de page */
    margin-left: 20px;          /* espace entre contenu et pill */

    /* Pill visuelle — hex directs : pas de dépendance aux CSS vars */
    display: inline-flex;
    align-items: center;
    background-color: #812b29;  /* pop-secondary */
    color: #ffffff;
    font-family: var(--wp--preset--font-family--instrument-sans, sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 9px 26px 10px;
    border-radius: 50px;
    text-transform: lowercase;
    white-space: nowrap;
    /* Pas de position absolute : placement géré par la grille */
}


/* ── Zone haute : titre + excerpt ───────────────────────────── */

.art-accueil-epingle__top {
    /* prend l'espace libre, laisse __bottom au fond (space-between) */
}

.art-accueil-epingle__title {
    font-family: var(--wp--preset--font-family--agrandir-wide-bold, sans-serif);
    font-size: 60px;
    line-height: 1.05;
    color: #812b29; /* pop-secondary — hex direct */
    margin-top: 0;
    margin-bottom: 35px;
    /* padding-right supprimé : le tag n'est plus en absolute overlay */
}

.art-accueil-epingle__title a {
    color: inherit;
    text-decoration: none;
}

.art-accueil-epingle__title a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.art-accueil-epingle__excerpt {
    font-family: var(--wp--preset--font-family--agrandir-tight-bold, sans-serif);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: #812b29; /* pop-secondary */
    margin: 0;
}


/* ── Zone basse : body + CTA ────────────────────────────────── */

.art-accueil-epingle__bottom {
    /* collé en bas grâce au justify-content: space-between du parent */
}

.art-accueil-epingle__body {
    margin-bottom: 28px;
    color: #812b29; /* pop-secondary */
    font-size: 16px;
    line-height: 1.65;
}

.art-accueil-epingle__body > * + * {
    margin-top: 16px;
}

.art-accueil-epingle__body p {
    margin: 0;
}


/* ── CTA ────────────────────────────────────────────────────────
   L'élément est un <a> natif avec data-pop-style="pop-outline-red".
   Le CSS de ccbla_pop_css_for_slug() est injecté via wp_add_inline_style
   dans enqueue_assets (blocks-acf-contenu.php).
   Seul display est fixé ici.
   ─────────────────────────────────────────────────────────────── */

.art-accueil-epingle__cta {
    display: inline-block;
}


/* ── Responsive : tablette ≤ 900px ──────────────────────────── */
/*
   Grid 2 colonnes :
     row 1 → média (full width)
     row 2 → contenu (1fr) | tag (auto)
   Le tag reste visible à droite du contenu.
*/

@media (max-width: 900px) {

    .art-accueil-epingle {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        min-height: auto;
    }

    .art-accueil-epingle__media {
        grid-column: 1 / -1; /* span toutes les colonnes */
        grid-row: 1;
    }

    .art-accueil-epingle__img {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    .art-accueil-epingle__content {
        grid-column: 1;
        grid-row: 2;
        min-height: auto;
        padding: 32px 20px 40px 28px;
    }

    .art-accueil-epingle__tag {
        grid-column: 2;
        grid-row: 2;
        margin-top: 32px;   /* aligne avec padding-top contenu */
        margin-right: 28px;
        margin-left: 12px;
    }

    .art-accueil-epingle__title {
        font-size: 38px;
    }

    .art-accueil-epingle__excerpt {
        font-size: 24px;
    }
}


/* ── Responsive : mobile ≤ 480px ────────────────────────────── */
/*
   Grid 1 colonne : média → tag → contenu
*/

@media (max-width: 480px) {

    .art-accueil-epingle {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .art-accueil-epingle__media {
        grid-column: 1;
        grid-row: 1;
    }

    .art-accueil-epingle__tag {
        grid-column: 1;
        grid-row: 2;
        margin-top: 24px;
        margin-left: 28px;
        margin-right: 28px;
        margin-bottom: 0;
        align-self: start;
        justify-self: start;
    }

    .art-accueil-epingle__content {
        grid-column: 1;
        grid-row: 3;
        padding: 20px 28px 40px;
    }

    .art-accueil-epingle__title {
        font-size: 28px;
    }

    .art-accueil-epingle__excerpt {
        font-size: 20px;
    }
}