/**
 * Tarjeta de artículo (template-parts/content/content-card.php).
 * Origen: .blog-card de home-final.html / blog.html (valores exactos).
 *
 * @package silomasters
 */

.blog-card{
  display:block; background:var(--white); border:1px solid var(--border); border-radius:10px;
  overflow:hidden; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover{
  transform:translateY(-6px); border-color:transparent;
  box-shadow:0 24px 40px -16px rgba(22,22,22,.22);
}
.blog-card:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}
/* sin imagen destacada: fondo neutro con el mismo aspect-ratio */
.blog-card-media{aspect-ratio:16/10; overflow:hidden; display:block; background:var(--bg-tint);}
.blog-card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.blog-card:hover .blog-card-media img{transform:scale(1.06);}
.blog-card-body{padding:24px 22px 26px;}
.blog-card-meta{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.blog-card-tag{
  font-family:var(--label); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--orange-dark); font-weight:600; /* 4,57:1 sobre blanco (con --orange, 3,25:1) */
}
.blog-card-date{font-family:var(--label); font-size:11.5px; color:var(--text-secondary);}
.blog-card-body h3{font-size:18px; line-height:1.15;}
.blog-card-body p{font-size:13.5px; line-height:1.6; margin-top:10px;}
.blog-card-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--text);
}
.blog-card-link .material-symbols-outlined{font-size:16px; color:var(--orange); transition:transform .25s ease;}
.blog-card:hover .blog-card-link .material-symbols-outlined{transform:translateX(4px);}

@media(prefers-reduced-motion: reduce){
  .blog-card,
  .blog-card-media img,
  .blog-card-link .material-symbols-outlined{transition:none;}
  .blog-card:hover,
  .blog-card:hover .blog-card-media img,
  .blog-card:hover .blog-card-link .material-symbols-outlined{transform:none;}
}