/* Blog — mismo diseño que la web (LeadFlags), responsive */

.section--blog-list {
  padding: var(--space-2xl, 2rem) 0;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
@media (min-width: 768px) {
  .section--blog-list { padding: var(--space-3xl, 4rem) 0; }
}
.blog-list__header { margin-bottom: var(--space-xl, 2rem); text-align: center; padding-inline: var(--space-md); }
@media (min-width: 768px) { .blog-list__header { margin-bottom: var(--space-2xl); } }
.blog-list__title { font-size: var(--fs-2xl, 1.5rem); margin: 0 0 var(--space-sm); color: var(--text-primary); }
@media (min-width: 768px) { .blog-list__title { font-size: var(--fs-3xl, 2rem); } }
.blog-list__lead { color: var(--text-secondary); margin: 0; font-size: var(--fs-base); }
@media (min-width: 768px) { .blog-list__lead { font-size: var(--fs-lg); } }
.blog-list__empty { color: var(--text-secondary); text-align: center; padding: var(--space-2xl); }

.blog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }

.blog-card { margin: 0; width: 100%; }
.blog-card__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md, 1rem);
  background: var(--bg-card, rgba(22, 24, 36, 0.85));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 10px);
  padding: var(--space-md, 1rem);
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .blog-card__inner { gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-lg); }
}
.blog-card__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-input, rgba(255,255,255,0.06));
  display: block;
}
@media (min-width: 768px) {
  .blog-card__thumb { width: 100px; height: 100px; }
}
.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card__thumb--placeholder {
  background: var(--bg-dot, rgba(255,255,255,0.12));
}
.blog-card__content { flex: 1; min-width: 0; }
.blog-card__date { font-size: var(--fs-xs, 0.75rem); color: var(--text-muted); margin-bottom: var(--space-xs); }
@media (min-width: 768px) { .blog-card__date { font-size: var(--fs-sm); } }
.blog-card__title { font-size: var(--fs-lg, 1.125rem); margin: 0 0 var(--space-sm); line-height: 1.3; }
@media (min-width: 768px) { .blog-card__title { font-size: var(--fs-xl); } }
.blog-card__title a { color: var(--text-primary); text-decoration: none; }
.blog-card__title a:hover { color: var(--accent); text-decoration: underline; }
.blog-card__teaser { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0 0 var(--space-md); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.blog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); padding-inline: var(--space-md); border-top: 1px solid var(--border); }
@media (min-width: 768px) { .blog-pagination { margin-top: var(--space-2xl); padding-top: var(--space-xl); } }
.blog-pagination__prev, .blog-pagination__next { color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; }
.blog-pagination__info { color: var(--text-muted); font-size: var(--fs-sm); }

/* Post completo */
.section--blog-post {
  padding: var(--space-lg, 1.5rem) 0;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
@media (min-width: 768px) { .section--blog-post { padding: var(--space-2xl, 3rem) 0; } }
.container--narrow { max-width: 720px; margin-inline: auto; padding-inline: var(--space-md, 1rem); }
@media (min-width: 768px) { .container--narrow { padding-inline: var(--space-lg); } }
.blog-post__header { margin-bottom: var(--space-xl, 2rem); }
/* Imagen del post: límite de tamaño, sin estirar, proporción correcta */
.blog-post__figure {
  margin: 0 0 var(--space-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 100%;
  background: var(--bg-input, rgba(255,255,255,0.06));
}
.blog-post__image {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  object-position: center;
}
.blog-post__back { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-md); display: inline-block; }
.blog-post__back:hover { color: var(--accent); }
.blog-post__date { font-size: var(--fs-sm); color: var(--text-muted); display: block; margin-bottom: var(--space-sm); }
.blog-post__title { font-size: var(--fs-2xl, 1.5rem); margin: 0 0 var(--space-sm); color: var(--text-primary); line-height: 1.3; }
.blog-post__author { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0 0 var(--space-lg); }
.blog-post__body {
  color: var(--text-secondary);
  line-height: 1.75;
  font-size: var(--fs-base);
}
.blog-post__body h2 { font-size: var(--fs-xl); color: var(--text-primary); margin: var(--space-xl) 0 var(--space-md); }
.blog-post__body h3 { font-size: var(--fs-lg); color: var(--text-primary); margin: var(--space-lg) 0 var(--space-sm); }
.blog-post__body p { margin: 0 0 var(--space-md); }
.blog-post__body a { color: var(--accent); }
.blog-post__body ul, .blog-post__body ol { margin: 0 0 var(--space-md); padding-left: 1.5em; }
.blog-post__body pre, .blog-post__body code { background: var(--bg-input); color: var(--kicker); border-radius: var(--radius-sm); }
.blog-post__body pre { padding: var(--space-md); overflow-x: auto; margin: 0 0 var(--space-md); }
.blog-post__body code { padding: 0.15em 0.4em; font-size: 0.9em; }
.blog-post__body pre code { padding: 0; background: none; }
.blog-post__body img { max-width: 100%; height: auto; border-radius: var(--radius-md); vertical-align: middle; }
.blog-post__body iframe { max-width: 100%; }
/* Share: al final del post, sobrio, casi invisible */
.blog-post__share {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  row-gap: var(--space-sm);
}
.blog-post__share-label {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.01em;
}
.blog-post__share-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.blog-post__share-link {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-muted);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.blog-post__share-link:hover {
  color: var(--text-secondary);
}
.blog-post__share-link:focus {
  outline: 1px solid var(--border);
  outline-offset: 2px;
}
.blog-post__share-copy { font: inherit; }

.blog-post__footer { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.blog-post__footer .btn { min-height: 44px; display: inline-flex; align-items: center; }

.nav__link--active { font-weight: 600; color: var(--kicker, #60a5fa); }

/* Container del listado: padding móvil */
.section--blog-list .container { padding-inline: var(--space-md); }
@media (min-width: 768px) { .section--blog-list .container { padding-inline: var(--space-lg); } }