/* ============================================================ */
/* ===== ARCHIVES CATEGORIE — bordure rouge + photo arrondie  */
/* ============================================================ */

/* Masquer le titre auto-généré de la catégorie (« FAQ », « Vente de pneus », etc.) */
body.archive .ast-archive-title,
body.archive .page-title,
body.archive header.page-header > h1,
body.archive .ast-archive-page > h1:first-child {
    display: none !important;
}

/* Masquer la méta (auteur + date) — sans restriction de body class */
html body div.entry-meta,
html body .entry-meta,
.entry-meta,
.entry-meta * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}

/* Si la méta apparaissait sur les pages catégorie, on la remet visible là-bas */
body.archive .entry-meta,
body.archive .entry-meta * {
    display: revert !important;
    visibility: revert !important;
    height: revert !important;
    width: revert !important;
    overflow: revert !important;
    margin: revert !important;
    padding: revert !important;
    font-size: revert !important;
}

/* Mais on garde quand même cachée la méta dans les cartes d'archive (si présente) */
body.archive article.post .entry-meta {
    display: none !important;
}

/* Bordure rouge arrondie autour de chaque article */
body.archive article.post {
    border: 2px solid var(--red) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 0 28px 0 !important; /* uniquement vertical */
    box-sizing: border-box !important;
    /* Pour aligner image en haut + bouton en bas */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Image : ratio constant + coins arrondis */
body.archive article.post .post-thumb,
body.archive article.post .post-thumb-img-content,
body.archive article.post .ast-blog-featured-section {
    flex: 0 0 auto !important;
    width: calc(100% - 8px) !important;    /* 4px de chaque côté */
    margin: 4px auto 18px !important;
    aspect-ratio: 1 / 1 !important;         /* carré */
    overflow: hidden !important;
    border-radius: 6px !important;
}
body.archive article.post .post-thumb img,
body.archive article.post .post-thumb-img-content img,
body.archive article.post .wp-post-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 6px !important;
}

/* Tous les wrappers possibles entre l'image et le bouton */
body.archive article.post > .entry-content,
body.archive article.post > .entry-summary,
body.archive article.post > .ast-article-inner,
body.archive article.post > .post-content,
body.archive article.post .ast-article-inner,
body.archive article.post .ast-article-inner > .entry-content,
body.archive article.post *:has(> .read-more),
body.archive article.post *:has(> a.read-more),
body.archive article.post *:has(> .ast-the-content-more) {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Le bouton « Lire la suite » est poussé tout en bas */
body.archive article.post .read-more,
body.archive article.post a.read-more,
body.archive article.post .ast-the-content-more {
    margin-top: auto !important;
    align-self: flex-start !important;
}

/* Grid 3 colonnes */
body.archive .ast-row,
body.archive .ast-grid-common,
body.archive .site-main *:has(> article.post) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

/* Les colonnes Astra sont neutralisées dans une grid */
body.archive .ast-row > [class*="ast-col"],
body.archive .ast-grid-common-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Bouton "Lire la suite" — pastille rouge */
body.archive article.post .read-more,
body.archive article.post a.read-more,
body.archive article.post .ast-the-content-more {
    display: inline-block;
    margin: 4px 0 6px;
    padding: 8px 18px;
    background: var(--red) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: background 0.2s;
    border: none !important;
}

/* Forcer le texte du bouton en blanc */
body.archive article.post .read-more,
body.archive article.post .read-more *,
body.archive article.post .read-more a,
body.archive article.post .read-more a:visited,
body.archive article.post a.read-more,
body.archive article.post a.read-more *,
body.archive article.post .ast-the-content-more,
body.archive article.post .ast-the-content-more *,
body.archive article.post .ast-the-content-more a {
    color: #ffffff !important;
}
body.archive article.post .read-more:hover,
body.archive article.post .read-more:hover *,
body.archive article.post a.read-more:hover,
body.archive article.post a.read-more:hover *,
body.archive article.post .ast-the-content-more:hover,
body.archive article.post .ast-the-content-more:hover * {
    background: var(--red-dark) !important;
    color: #ffffff !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
    body.archive .ast-row,
    body.archive .ast-grid-common,
    body.archive .site-main *:has(> article.post) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    body.archive .ast-row,
    body.archive .ast-grid-common,
    body.archive .site-main *:has(> article.post) {
        grid-template-columns: 1fr !important;
    }
}