/*
 * _patterns/pz-blog-module.css
 * Module "derniers articles" sur la page d'accueil ET liste /blog.
 * Cards luxueuses accordées au Luxe Granulé. SEO/GEO : structure
 * sémantique propre.
 *
 * 2026-06-27 (Vincent) : la page /blog n'avait pas été prise dans la
 * systématicité « Luxe Granulé » — son bloc liste rendait blanc-plat
 * (rupture avec l'accueil/header chaud). Corrigé ici :
 *   - filtres .pz-chips accordés au thème (or + ivoire, plus bas-de-page subtil)
 *   - cat-pill .pz-blog-card__cat alignée sur la doctrine .pz-tag (mono, espacé)
 *   - ornements or discrets (filet doré séparateur, sceau d'angle)
 * Tout en tokens --pz-*, zéro inline sombre, zéro --adm-*.
 */

/* ── Liste /blog : panneau chaud ivoire + filet doré (cohérence accueil) ──
   Le wrapper .section porte déjà le dégradé ivoire + grain (cf _shell/pz.css).
   On renforce ici la chaleur du PREMIER bloc liste pour gommer l'effet
   « blanc trop clair » au sommet de la section (le dégradé montant y finit
   très pâle). Filet doré centré = séparateur de luxe avant la grille. */
.pz-blog-list .pz-chips {
  position: relative;
}
.pz-blog-list .pz-chips::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--pz-sp-3, 13px));
  transform: translateX(-50%);
  width: 88px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pz-gold, #c9a14a), transparent);
  opacity: 0.7;
}

.pz-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--pz-sp-6, 55px);
}
.pz-section-head h2 {
  font-family: var(--pz-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 500;
  margin: var(--pz-sp-2, 8px) 0 var(--pz-sp-3, 13px);
  color: var(--pz-ink, #0a0908);
}
.pz-section-sub {
  color: var(--pz-text-light, #5b524a);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0;
}

.pz-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pz-sp-4, 21px);
}

.pz-blog-card {
  background: #fff;
  border-radius: var(--pz-radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--pz-shadow-sm, 0 2px 8px rgba(10,9,8,0.08));
  border: 1px solid var(--pz-cream, #ede0c4);
  transition:
    transform var(--pz-t-soft, 320ms) var(--pz-ease-out, cubic-bezier(0.22,1,0.36,1)),
    box-shadow var(--pz-t-soft, 320ms) var(--pz-ease-out, cubic-bezier(0.22,1,0.36,1)),
    border-color var(--pz-t-soft, 320ms) ease;
  position: relative;
}
.pz-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pz-shadow-lg, 0 18px 48px rgba(10,9,8,0.18));
  border-color: var(--pz-gold, #c9a14a);
}
.pz-blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.pz-blog-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pz-ink-2, #16140f);
}
.pz-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pz-t-cinema, 900ms) var(--pz-ease-out, ease);
}
.pz-blog-card:hover .pz-blog-card__media img {
  transform: scale(1.06);
}
.pz-blog-card__media-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 3rem;
  opacity: 0.5;
}
/* Cat-pill carte = aligné sur la doctrine .pz-tag du site (mono, espacé,
   pastille). Liseré or discret pour ancrer dans le langage Luxe Granulé. */
.pz-blog-card__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 11px;
  border-radius: var(--pz-radius-pill, 999px);
  background: color-mix(in srgb, var(--cat-color, #c9a14a) 88%, black);
  color: #fff;
  font-family: var(--pz-font-mono, monospace);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(10,9,8,0.32);
  border: 1px solid color-mix(in srgb, var(--pz-gold, #c9a14a) 40%, transparent);
}

.pz-blog-card__body {
  padding: var(--pz-sp-4, 21px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pz-blog-card__title {
  font-family: var(--pz-font-display, 'Cormorant Garamond', serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--pz-sp-2, 8px);
  color: var(--pz-ink, #0a0908);
}
.pz-blog-card:hover .pz-blog-card__title {
  color: var(--pz-red, #b3001b);
}
.pz-blog-card__excerpt {
  color: var(--pz-text-light, #5b524a);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 var(--pz-sp-3, 13px);
  flex: 1;
}
.pz-blog-card__meta {
  font-family: var(--pz-font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--pz-text-lighter, #8c8478);
  text-transform: uppercase;
  display: flex;
  gap: 6px;
  align-items: center;
}

.pz-blog-cta {
  text-align: center;
  margin-top: var(--pz-sp-6, 55px);
}

/* ── Filtres /blog accordés au Luxe Granulé ──────────────────────────────
   Scopé sous .pz-blog-list pour gagner en spécificité sur la def générique
   .pz-chip (_patterns/pz-theme.css) sans en dépendre de l'ordre de cascade.
   Pastilles ivoire chaud + bord or, état actif encre — cohérent tags du site. */
.pz-blog-list .pz-chips {
  margin-bottom: var(--pz-sp-4, 21px);
}
.pz-blog-list .pz-chip {
  background: color-mix(in srgb, var(--pz-ivory, #fbf6ec) 80%, #fff);
  border: 1px solid var(--pz-cream, #ede0c4);
  color: var(--pz-text-light, #5b524a);
  font-family: var(--pz-font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(10, 9, 8, 0.05);
}
.pz-blog-list .pz-chip:hover {
  color: var(--pz-ink, #0a0908);
  border-color: var(--pz-gold, #c9a14a);
}
.pz-blog-list .pz-chip.is-on {
  background: var(--pz-ink, #0a0908);
  border-color: var(--pz-ink, #0a0908);
  color: var(--pz-gold-3, #e6c878);
}

/* ── Sceau d'angle doré discret sur la carte (ornement raffiné) ──────────
   Filet d'angle SVG inline, posé au coin haut-droit, révélé au hover.
   Vocabulaire or du site (cf pz-page-header.css). Jamais chargé : 0 asset. */
.pz-blog-card__body {
  position: relative;
}
.pz-blog-card__body::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23c9a14a' stroke-width='1' stroke-linecap='round'><path d='M21 1 L21 9 M21 1 L13 1'/><path d='M21 5 Q 17 5 17 9 M5 1 Q 5 5 1 5' opacity='0.6'/><circle cx='17.5' cy='4.5' r='0.9' fill='%23c9a14a'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transition:
    opacity var(--pz-t-soft, 320ms) var(--pz-ease-out, ease),
    transform var(--pz-t-soft, 320ms) var(--pz-ease-out, ease);
}
.pz-blog-card:hover .pz-blog-card__body::after {
  opacity: 0.85;
  transform: scale(1);
}

/* Responsive */
@media (max-width: 980px) {
  .pz-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pz-blog-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pz-blog-card,
  .pz-blog-card__media img { transition: none; }
  .pz-blog-card:hover { transform: none; }
  .pz-blog-card:hover .pz-blog-card__media img { transform: none; }
}