/* Chez Coco Esthétique - styles blogue (single.php + index.php).
   Chargé uniquement sur les vues blogue via functions.php. Réutilise les tokens
   du design system (assets/css/style.css). Aucun em-dash, palette verrouillée. */

.c-hero--post {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.25rem, 3.5vw, 2.5rem);
}

/* ---- Article seul ---------------------------------------------------------- */
.c-post__cover {
  margin: 0 0 var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.c-post__cover img { display: block; width: 100%; height: auto; }

.c-post__body {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--ink-2);
}
.c-post__body > * + * { margin-top: 1.15em; }
.c-post__body h2 { font-size: var(--fs-h2); line-height: 1.2; margin-top: 1.8em; color: var(--charcoal); }
.c-post__body h3 { font-size: var(--fs-h3); margin-top: 1.5em; color: var(--charcoal); }
.c-post__body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.c-post__body a:not(.c-btn) { color: var(--terracotta); }
.c-post__body blockquote {
  margin: 1.5em 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--terracotta);
  color: var(--charcoal-soft);
  font-style: italic;
}
.c-post__body ul, .c-post__body ol { padding-left: 1.4rem; }
.c-post__body li + li { margin-top: 0.4em; }
.c-post__back { max-width: 68ch; margin: var(--space-xl) auto 0; }

/* ---- Liste / grille -------------------------------------------------------- */
.c-postlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px)  { .c-postlist { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); } }
@media (min-width: 1100px) { .c-postlist { grid-template-columns: repeat(3, 1fr); } }

.c-postcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.c-postcard:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.c-postcard__media { display: block; aspect-ratio: 3 / 2; background: var(--champagne); overflow: hidden; }
.c-postcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-postcard__body { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--space-md); }
.c-postcard__date { margin: 0; }
.c-postcard__title { font-size: var(--fs-h3); line-height: 1.25; margin: 0; }
.c-postcard__title a { color: var(--charcoal); text-decoration: none; }
.c-postcard__title a:hover { color: var(--terracotta); }
.c-postcard__excerpt { margin: 0; color: var(--warm-gray); font-size: var(--fs-body); line-height: 1.6; }
.c-postcard__more { margin-top: auto; padding-top: 0.4rem; color: var(--terracotta); font-weight: 600; font-size: var(--fs-small); }

/* ---- Pagination ------------------------------------------------------------ */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: var(--space-xl); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.85rem;
  border: 1px solid var(--border-ink); border-radius: var(--radius-pill);
  color: var(--charcoal); text-decoration: none; font-size: var(--fs-small);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.pagination .page-numbers.current { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--terracotta); color: var(--terracotta); }