/* ==========================================================================
   ARTICLES — grille de cartes pour index.html et archive.html (blog,
   catégories, archives de la taxonomie technologie, ex. /technologie/numpy/).

   Ces deux gabarits posent des classes "à plat" (post-card, post-title,
   post-meta, post-excerpt, post-read-more) qui ne correspondent à AUCUNE
   règle existante ailleurs dans le thème : le seul système de carte déjà
   dessiné pour des articles est le bloc "Carte Hover"
   (styles/sections/card-hover.json + .is-style-card-hover dans
   css/block-styles.css, utilisé par 404.html/single-hero.html sous la forme
   ".post-card.is-style-card-hover" + ".post-card__body"/".post-card__title").
   On reprend ici exactement le même style (fond, bordure, rayon, lift au
   survol, liseré lumineux tournant) sur la classe nue ".post-card", pour que
   ces archives ressemblent enfin aux cartes utilisées partout ailleurs sur
   le site plutôt que d'avoir leur propre design.

   La page de résultats de recherche (search.html) réutilise elle
   directement ".post-card.is-style-card-hover" (comme 404.html) : rien à
   ajouter ici non plus.
   ========================================================================== */

/* --- Grille de cartes --- */
/* .site-main n'a volontairement aucun padding (pour les bandeaux plein
   écran ailleurs sur le site) : ces gabarits doivent donc gérer leur
   propre marge latérale, sinon le contenu touche les bords de l'écran. */
.archive-title,
.posts-grid,
.posts-container {
    box-sizing: border-box;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.posts-grid .wp-block-post-template,
.posts-container .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.1rem, 2.5vw, 1.75rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 960px) {
    .posts-grid .wp-block-post-template,
    .posts-container .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .posts-grid .wp-block-post-template,
    .posts-container .wp-block-post-template { grid-template-columns: 1fr; }
}

/* --- Carte : même recette que .is-style-card-hover (fond/bordure/rayon +
   lift et liseré lumineux au survol), reprise ici sans dépendre de cette
   classe puisque post-card apparaît ici sans elle. --- */
.post-card {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.post-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: conic-gradient(
        from var(--qs-light-pos),
        transparent 0deg 50deg,
        var(--qs-neon) 80deg,
        transparent 110deg 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
}
.post-card:hover::before {
    opacity: 1;
    animation: qs-run-light 1.8s linear infinite;
}
.post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px var(--qs-neon-a15), 0 0 0 1px var(--qs-neon-a20);
}
@media (prefers-reduced-motion: reduce) {
    .post-card:hover::before { animation: none; }
}

/* L'image mise en avant (quand le gabarit en ajoute une) touche les bords
   de la carte, comme sur les cartes .is-style-card-hover existantes. */
.post-card .wp-block-post-featured-image {
    display: block;
    line-height: 0;
}
.post-card .wp-block-post-featured-image img {
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.post-card > .post-title,
.post-card > .post-meta,
.post-card > .post-excerpt,
.post-card > .post-read-more {
    margin-inline: 1.5rem;
}
.post-card > .post-title { margin-top: 1.2rem; }
.post-card > .post-read-more { margin-bottom: 1.5rem; }

.post-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.45rem;
    color: var(--wp--preset--color--contrast);
}
.post-title a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.post-card:hover .post-title a { color: var(--qs-neon); }

/* .post-date (posé par parts/post-meta.html) est déjà stylé globalement
   dans style.css — rien à ajouter ici. */

.post-excerpt {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.55;
    margin: 0.6rem 0 0;
    flex: 1;
    /* core/post-excerpt n'a pas de longueur limitée ici (contrairement au
       "pitch" des cartes projet) : on tronque pour garder des cartes
       homogènes en hauteur. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-read-more {
    display: block;
    align-self: flex-start;
    font-size: 0.78rem;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    letter-spacing: 0.05em;
    color: var(--qs-neon);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-top: 0.75rem;
    transition: border-color 0.2s;
}
.post-read-more:hover { border-color: var(--qs-neon); }

/* --- Pagination (classe nue "pagination", utilisée par index.html,
   archive.html et search.html). --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.pagination .wp-block-query-pagination-previous,
.pagination .wp-block-query-pagination-next {
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    font-size: 0.78rem;
    color: var(--qs-neon);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--qs-neon-a30);
    border-radius: 4px;
    letter-spacing: 0.05em;
    transition: background 0.2s, border-color 0.2s;
}
.pagination .wp-block-query-pagination-previous:hover,
.pagination .wp-block-query-pagination-next:hover {
    background: var(--qs-neon-a08);
    border-color: var(--qs-neon-a50);
}
.pagination .wp-block-query-pagination-numbers { display: flex; gap: 0.35rem; align-items: center; }
.pagination .page-numbers {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.82rem;
    font-family: var(--wp--preset--font-family--jetbrains-mono, monospace);
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.pagination .page-numbers:hover {
    color: var(--qs-neon);
    border-color: var(--qs-neon-a30);
    background: var(--qs-neon-a06);
}
.pagination .page-numbers.current {
    color: var(--qs-neon);
    border-color: var(--qs-neon-a50);
    background: var(--qs-neon-a08);
    font-weight: 700;
}
.pagination .page-numbers.dots { border: none; color: rgba(255, 255, 255, 0.2); pointer-events: none; }