/**
 * Noticias: listado de entradas (home.php y archive.php).
 * Origen: #s-blog de blog.html (valores exactos). Se carga con
 * is_home() || is_archive(). La tarjeta está en css/blog-card.css.
 *
 * La paginación (.pagination) está en css/pagination.css, compartida con
 * search.php.
 *
 * Cambios respecto al mockup:
 * - los títulos de la barra lateral son <h2 class="sidebar-title"> con el
 *   aspecto del h3 del mockup;
 * - hover de las categorías y categoría actual en --orange-dark (el naranja
 *   de marca da 3,25:1 sobre blanco; --orange-dark, 4,57:1).
 *
 * @package silomasters
 */

/* =====================================================
   MAQUETACIÓN
   ===================================================== */
.blog-layout{display:grid; grid-template-columns:2fr 1fr; gap:48px; align-items:start;}
@media(max-width:900px){ .blog-layout{grid-template-columns:1fr; gap:40px;} }
/* min-width:0: la columna no se ensancha con contenido largo */
.blog-posts{min-width:0;}

/* reset explícito de las listas: sin JS no hay preflight de Tailwind CDN */
.blog-posts-grid,
.sidebar-cat-list{margin:0; padding:0; list-style:none;}
.blog-posts-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
@media(max-width:600px){ .blog-posts-grid{grid-template-columns:1fr;} }
/* la tarjeta llena el <li> (en el mockup era el elemento de la rejilla: misma altura por fila) */
.blog-posts-grid > li{display:flex;}
.blog-posts-grid .blog-card{flex:1 1 auto; min-width:0;}

.blog-empty{padding:28px 24px; border:1px dashed var(--border); border-radius:var(--r-lg); background:var(--bg-tint); font-size:15px; color:var(--text-secondary);}

/* =====================================================
   BARRA LATERAL
   ===================================================== */
.sidebar-widget{background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 22px; margin-bottom:24px;}
/* <h2> con el aspecto del h3 del mockup (h3 base de 19px → 14px) */
.sidebar-widget .sidebar-title{font-size:14px; letter-spacing:.04em; margin-bottom:16px;}

.sidebar-cat-list li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px;}
.sidebar-cat-list li:last-child{border-bottom:none;}
.sidebar-cat-list li a{color:var(--text); font-weight:600; text-decoration:none; transition:color .2s ease;}
.sidebar-cat-list li a:hover{color:var(--orange-dark);}
.sidebar-cat-list li a:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
/* categoría actual (archive.php) */
.sidebar-cat-list li a[aria-current="page"]{color:var(--orange-dark);}
.sidebar-cat-list li.is-current .sidebar-cat-count{background:var(--orange-dark); color:var(--white);}
.sidebar-cat-count{font-family:var(--label); font-size:11.5px; color:var(--text-secondary); background:var(--bg-tint); padding:2px 9px; border-radius:100px;}

/* llamada a la calculadora: icono --orange sobre negro (6,5:1); botón con --orange-dark (global) */
.sidebar-cta{background:var(--black); color:var(--white); text-align:center; border-color:var(--black);}
.sidebar-cta .material-symbols-outlined{font-size:32px; color:var(--orange); margin-bottom:12px;}
.sidebar-cta .sidebar-title{color:var(--white);}
.sidebar-cta p{color:rgba(255,255,255,.7); font-size:13.5px; margin-bottom:18px; line-height:1.55;}

@media(prefers-reduced-motion: reduce){
  .sidebar-cat-list li a{transition:none;}
}