/* blog-lista.css — listados del blog (ES/EN, índice y categorías).
   Formato lista: foto a la izquierda, texto a la derecha; apilado en móvil.
   Se carga DESPUÉS del <style> propio de cada página para ganarle la cascada.
   Creado 2026-10-04: las fotos de las tarjetas no tenían estilo en las categorías
   (salían a 800px y desbordaban). Acompaña a assets/js/blog-lista.js. */

.articles-index {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.art-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 28px;
  row-gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition), border-color var(--transition);
}
.art-card[hidden] { display: none; }
.art-card > :not(.art-card-cover) { grid-column: 2; padding-right: 28px; }
.art-card > .art-meta { padding-top: 24px; }
.art-card > .art-arrow { padding-bottom: 24px; }
.art-card-cover {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 190px;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  display: block;
}
/* Tarjeta sin foto (p. ej. recién generada por actualizar_seo.py): una sola columna */
.art-card:not(:has(.art-card-cover)) { grid-template-columns: minmax(0, 1fr); }
.art-card:not(:has(.art-card-cover)) > * { grid-column: 1; padding-left: 28px; }
.art-card:hover { background: var(--surface-2); }
.art-card:hover .art-arrow { transform: translateX(4px); opacity: 1; }

/* Filtros por categoría (botones, solo con JS) */
.cat-nav { max-width: 1100px; margin: 0 auto; padding: 0 28px 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-nav[hidden] { display: none; }
.cat-pill { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: none; color: var(--text-muted); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.cat-pill:hover { background: var(--surface); color: var(--text); }
.cat-pill-active, .cat-pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-pill-active:hover, .cat-pill[aria-pressed="true"]:hover { background: var(--accent); color: #fff; }

/* Paginador */
.paginador { max-width: 1100px; margin: 32px auto 80px; padding: 0 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.paginador[hidden] { display: none; }
.paginador button { font: inherit; font-size: 14px; font-weight: 600; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; transition: background .2s, color .2s; }
.paginador button:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.paginador button[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.paginador button:disabled { opacity: .35; cursor: default; }
.paginador-info { width: 100%; text-align: center; font-size: 13px; color: var(--text-subtle); margin-top: 6px; }
/* Sin JS no hay paginador: deja aire al final de la lista */
.articles-index:last-child { margin-bottom: 80px; }

@media (max-width: 734px) {
  .articles-index { padding: 0 16px; }
  .cat-nav, .paginador { padding-left: 16px; padding-right: 16px; }
  .art-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; column-gap: 0; }
  .art-card > :not(.art-card-cover), .art-card:not(:has(.art-card-cover)) > * { grid-column: 1; padding: 0 20px; }
  .art-card > .art-meta { padding-top: 4px; }
  .art-card:not(:has(.art-card-cover)) > .art-meta { padding-top: 20px; }
  .art-card > .art-arrow { padding-bottom: 20px; }
  .art-card-cover { grid-row: auto; width: 100%; height: 180px; min-height: 0; margin: 0; }
}