/**
 * Archive / Blog listing — Calepin Parentalité
 *
 * Styles pour la page des articles (is_home) et les archives (catégories, tags…).
 * Chargé uniquement sur ces pages.
 *
 * Note : quand WordPress a une page d'accueil statique, la page "Articles"
 * reçoit la classe body `blog` (pas `home`). On utilise :is(.home, .blog)
 * pour couvrir les deux cas.
 *
 * Pour ajouter un gradient à une nouvelle catégorie, ajoutez une règle
 * .category-{slug} dans la section "Gradients par catégorie" ci-dessous.
 *
 * @package CalepiParentalite
 */

/* ── Grid 3 colonnes ─────────────────────────────────────────────────────────── */

:is(.home, .blog) .site-main,
.archive .site-main,
.category .site-main,
.tag .site-main {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    align-items:           stretch; /* cartes de même hauteur par ligne */
}

/* Pagination : pleine largeur */
:is(.home, .blog) .site-main .paging-navigation,
:is(.home, .blog) .site-main .navigation,
.archive .site-main .paging-navigation,
.archive .site-main .navigation,
.category .site-main .paging-navigation,
.tag .site-main .paging-navigation {
    grid-column: 1 / -1;
}

/* ── Carte article ───────────────────────────────────────────────────────────── */

:is(.home, .blog) article.hentry,
.archive article.hentry,
.category article.hentry,
.tag article.hentry {
    background:    #fff;
    border-radius: var(--cp-radius-card);
    box-shadow:    0 2px 8px rgba(44, 44, 42, 0.07), 0 0 0 0.5px rgba(44, 44, 42, 0.08);
    overflow:      hidden;
    transition:    box-shadow 0.18s ease, transform 0.18s ease;
}

:is(.home, .blog) article.hentry:hover,
.archive article.hentry:hover,
.category article.hentry:hover,
.tag article.hentry:hover {
    box-shadow: 0 6px 20px rgba(44, 44, 42, 0.11), 0 0 0 0.5px rgba(91, 168, 160, 0.4);
    transform:  translateY(-2px);
}

/* Flex column : image en haut, footer collé en bas */
/* !important nécessaire : GP applique padding:40px sur .separate-containers .inside-article */
:is(.home, .blog) .inside-article,
.archive .inside-article,
.category .inside-article,
.tag .inside-article {
    padding:        0 !important;
    display:        flex;
    flex-direction: column;
    height:         100%;
}

/* ── Zone image ──────────────────────────────────────────────────────────────── */

:is(.home, .blog) .post-image,
.archive .post-image,
.category .post-image,
.tag .post-image {
    position:   relative;
    height:     200px;
    overflow:   hidden;
    background: linear-gradient(160deg, rgba(136, 135, 128, 0.2) 0%, var(--cp-cream) 100%);
    flex-shrink: 0; /* ne pas comprimer la zone image */
}

/* L'<a> wrappant l'image doit remplir la div */
:is(.home, .blog) .post-image a,
.archive .post-image a,
.category .post-image a,
.tag .post-image a {
    display: block;
    height:  100%;
}

:is(.home, .blog) .post-image img,
.archive .post-image img,
.category .post-image img,
.tag .post-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.35s ease;
}

:is(.home, .blog) article.hentry:hover .post-image img,
.archive article.hentry:hover .post-image img {
    transform: scale(1.03);
}

/* Placeholder quand pas d'image mise en avant */
.cp-img-placeholder {
    height:     200px;
    position:   relative;
    background: linear-gradient(160deg, rgba(136, 135, 128, 0.2) 0%, var(--cp-cream) 100%);
}

/* ── Gradients par catégorie (slug WordPress) ────────────────────────────────── */
/* Pour ajouter une catégorie : .category-{slug} .post-image, .cat-{slug} { background: ...; } */

.category-sommeil .post-image,       .cat-sommeil       { background: linear-gradient(160deg, rgba(91,  168, 160, 0.35) 0%, var(--cp-cream) 100%); }
.category-parentalite .post-image,   .cat-parentalite   { background: linear-gradient(160deg, rgba(212,  85,  58, 0.28) 0%, var(--cp-cream) 100%); }
.category-adolescence .post-image,   .cat-adolescence   { background: linear-gradient(160deg, rgba(232, 131,  58, 0.28) 0%, var(--cp-cream) 100%); }
.category-famille .post-image,       .cat-famille       { background: linear-gradient(160deg, rgba(232, 131,  58, 0.25) 0%, var(--cp-cream) 100%); }
.category-vie-de-famille .post-image, .cat-vie-de-famille { background: linear-gradient(160deg, rgba(232, 131, 58, 0.25) 0%, var(--cp-cream) 100%); }
.category-education .post-image,     .cat-education     { background: linear-gradient(160deg, rgba(91,  168, 160, 0.28) 0%, var(--cp-cream) 100%); }
.category-grossesse .post-image,     .cat-grossesse     { background: linear-gradient(160deg, rgba(212,  85,  58, 0.22) 0%, var(--cp-cream) 100%); }
.category-couple .post-image,        .cat-couple        { background: linear-gradient(160deg, rgba(212,  85,  58, 0.25) 0%, var(--cp-cream) 100%); }
.category-sante .post-image,         .cat-sante         { background: linear-gradient(160deg, rgba(91,  168, 160, 0.3)  0%, var(--cp-cream) 100%); }

/* ── Badge catégorie ─────────────────────────────────────────────────────────── */

.cp-cat-badge {
    position:        absolute;
    top:             0.875rem;
    left:            0.875rem;
    background:      rgba(255, 255, 255, 0.92);
    color:           var(--cp-teal);
    font-family:     'Lato', sans-serif;
    font-size:       11px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    border-radius:   var(--cp-radius-pill);
    padding:         0.3rem 0.75rem;
    z-index:         2;
    border:          0.5px solid rgba(91, 168, 160, 0.25);
    backdrop-filter: blur(4px);
    white-space:     nowrap;
}

/* ── Contenu texte ───────────────────────────────────────────────────────────── */

:is(.home, .blog) .entry-header,
.archive .entry-header,
.category .entry-header,
.tag .entry-header {
    padding:       1.125rem 1.25rem 0.375rem;
    margin-bottom: 0;
}

:is(.home, .blog) .entry-title,
.archive .entry-title,
.category .entry-title,
.tag .entry-title {
    font-family:   'Lato', sans-serif;
    font-weight:   700;
    font-size:     17px;
    line-height:   1.3;
    margin-bottom: 0;
}

:is(.home, .blog) .entry-title a,
.archive .entry-title a,
.category .entry-title a,
.tag .entry-title a {
    color:           var(--cp-graphite);
    text-decoration: none;
    transition:      color 0.15s ease;
}

:is(.home, .blog) .entry-title a:hover,
.archive .entry-title a:hover {
    color: var(--cp-teal);
}

/* Masque la méta GP (date, auteur) dans les cards */
:is(.home, .blog) .entry-meta,
.archive .entry-meta,
.category .entry-meta,
.tag .entry-meta {
    display: none;
}

/* Extrait : flex column pour coller le texte sous le titre et le footer en bas */
:is(.home, .blog) .entry-summary,
.archive .entry-summary,
.category .entry-summary,
.tag .entry-summary {
    padding:        0.375rem 1.25rem 0;
    font-size:      13px;
    color:          var(--cp-muted);
    line-height:    1.55;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

:is(.home, .blog) .entry-summary > p:first-child,
.archive .entry-summary > p:first-child {
    margin-bottom:      0;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Masque le lien "Continuer la lecture" de GP */
:is(.home, .blog) .more-link,
.archive .more-link,
.category .more-link,
.tag .more-link {
    display: none;
}

/* ── Footer carte : temps de lecture + CTA ───────────────────────────────────── */

.cp-card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.75rem 1.25rem;
    margin-top:      auto; /* colle le footer au bas de la carte */
    /* annule le padding horizontal hérité de .entry-summary */
    margin-left:     -1.25rem;
    margin-right:    -1.25rem;
}

.cp-card-time {
    font-family: 'Lato', sans-serif;
    font-size:   13px;
    color:       var(--cp-muted);
    display:     flex;
    align-items: center;
    gap:         0.3rem;
}

.cp-card-cta {
    font-family:     'Lato', sans-serif;
    font-size:       14px;
    font-weight:     700;
    color:           var(--cp-teal);
    text-decoration: none;
    transition:      color 0.15s ease;
    white-space:     nowrap;
}
.cp-card-cta:hover { color: var(--cp-coral); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    :is(.home, .blog) .site-main,
    .archive .site-main,
    .category .site-main,
    .tag .site-main {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    :is(.home, .blog) .site-main,
    .archive .site-main,
    .category .site-main,
    .tag .site-main {
        grid-template-columns: repeat(2, 1fr);
    }
}