/* ============================================================================
   COMPOSANT — Cartes d'articles dans les listes (home / archive / recherche)
   Source : maquette validée (preview _preview_cards.html). Valeurs reprises
   À L'IDENTIQUE — ne pas réinventer (arrondi 16px, ombre douce, line-clamp 3,
   skeleton frugal). Mappé sur les classes réelles de template-parts/content-post.php :
     .post-card        ← .card
     .post-thumbnail   ← .thumb
     .entry-container  ← .body
     .card-category    ← .cat
     .entry-title      ← .title
     .entry-footer     ← .meta
   ============================================================================ */
.posts-container{
  --accent:var(--senego-color-accent);
  --ink:var(--senego-color-heading);
  --muted:var(--senego-color-muted);
  --card-radius:8px;
  --card-shadow:0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.06);
  --card-shadow-hover:0 10px 28px rgba(16,24,40,.14);
  --sk:#e9ebee;
  display:flex;
  flex-direction:column;
  gap:var(--card-gap);
}

/* ── Carte de base ── */
.posts-container .post-card{
  background:#fff;
  border:0;
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:var(--card-shadow);
  display:flex;
  margin:0;
  transition:box-shadow .18s ease, transform .18s ease;
}
.posts-container .post-card:hover{
  box-shadow:var(--card-shadow-hover);
  transform:translateY(-2px);
}
.posts-container .post-card .post-thumbnail{
  position:relative;
  overflow:hidden;
  background:var(--sk);
  flex:none;
  margin:0;
  border-radius:0;
}
.posts-container .post-card .post-thumbnail a{display:block;height:100%}
.posts-container .post-card .post-thumbnail-container{
  width:100%;height:100%;min-height:0;
}
.posts-container .post-card .post-thumbnail img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.posts-container .post-card:hover .post-thumbnail img{transform:scale(1.05)}

.posts-container .post-card .entry-container{
  display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;
}
.posts-container .post-card .entry-header{margin:0}
.posts-container .post-card .card-category{
  display:block;
  color:var(--accent);font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;
}
.posts-container .post-card .entry-title{
  font-size:17px;line-height:1.3;font-weight:700;margin:0;
  text-transform:none;            /* annule le h2 uppercase global du thème */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.posts-container .post-card .entry-title a{color:var(--ink)}
.posts-container .post-card .entry-footer{
  margin-top:auto;display:flex;align-items:center;gap:14px;
  font-size:12px;color:var(--muted);padding-top:2px;border:0;
}
.posts-container .post-card .entry-footer .card-author,
.posts-container .post-card .entry-footer .card-time,
.posts-container .post-card .entry-footer .card-comments{
  display:inline-flex;align-items:center;gap:5px;
}
.posts-container .post-card .entry-footer svg{
  width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2;
}

/* ── HERO : 1 carte tous les 5 (la plus vue, placée en tête de groupe) ── */
.posts-container > article.post-card:nth-of-type(5n+1){
  flex-direction:column;
}
.posts-container > article.post-card:nth-of-type(5n+1) .post-thumbnail{
  width:100%;aspect-ratio:16/9;
}
.posts-container > article.post-card:nth-of-type(5n+1) .entry-container{
  padding:16px 20px 18px;gap:10px;
}
.posts-container > article.post-card:nth-of-type(5n+1) .entry-title{
  font-size:26px;line-height:1.22;
}

/* ── STANDARD : horizontale, grande image à gauche ── */
.posts-container > article.post-card:not(:nth-of-type(5n+1)){
  flex-direction:row;padding:11px;gap:16px;align-items:stretch;
}
.posts-container > article.post-card:not(:nth-of-type(5n+1)) .post-thumbnail{
  width:240px;aspect-ratio:3/2;border-radius:8px;
}
.posts-container > article.post-card:not(:nth-of-type(5n+1)) .entry-container{
  padding:3px 6px 3px 0;
}
.posts-container > article.post-card:not(:nth-of-type(5n+1)) .entry-title{
  font-size:18px;
}

/* ── SKELETON LOADER (animation frugale, GPU-composited) ──
   Balayage via transform:translateX (composé GPU, aucun repaint de layout).
   Pause hors écran / onglet caché (.sk-paused). Retiré du DOM par
   infinite-scroll.js dès l'arrivée du contenu : zéro consommation permanente. */
/* Carte-squelette : <div> (jamais comptée par :nth-of-type des <article>),
   format horizontal identique aux cartes standard. */
.posts-container .post-card.skeleton{
  pointer-events:none;box-shadow:var(--card-shadow);
  flex-direction:row;padding:11px;gap:16px;align-items:stretch;
}
.posts-container .post-card.skeleton .post-thumbnail{
  width:240px;aspect-ratio:3/2;border-radius:8px;flex:none;
}
.posts-container .post-card.skeleton .entry-container{
  display:flex;flex-direction:column;flex:1;min-width:0;padding:3px 6px 3px 0;
}
.sk-el{position:relative;background:var(--sk);border-radius:6px;overflow:hidden}
.sk-el::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sk-sweep 1.4s ease-in-out infinite;will-change:transform;
}
@keyframes sk-sweep{100%{transform:translateX(100%)}}
.posts-container .post-card.skeleton .post-thumbnail{background:var(--sk)}
.sk-line{height:13px;margin-bottom:7px}
.sk-cat{height:10px;width:34%;margin-bottom:10px}
.sk-meta{height:10px;width:55%;margin-top:8px}
.posts-container.sk-paused .sk-el::after{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .sk-el::after{animation:none;background:none}
}

/* ── MOBILE (≤767px) ── */
@media (max-width:767px){
  .posts-container > article.post-card:nth-of-type(5n+1) .entry-title{font-size:19px}
  .posts-container > article.post-card:not(:nth-of-type(5n+1)){border-radius:8px;padding:8px;gap:12px}
  .posts-container > article.post-card:not(:nth-of-type(5n+1)) .post-thumbnail{width:116px;aspect-ratio:1/1}
  .posts-container > article.post-card:not(:nth-of-type(5n+1)) .entry-title{font-size:15px}
  .posts-container > article.post-card:not(:nth-of-type(5n+1)) .card-category{font-size:10.5px}
  .posts-container .post-card.skeleton{border-radius:8px;padding:8px;gap:12px}
  .posts-container .post-card.skeleton .post-thumbnail{width:116px;aspect-ratio:1/1}
}