/* ==========================================================================
   Blog — listado editorial + entrada individual
   ========================================================================== */

.blog-list {
  border-top: 1px solid var(--hairline);
}

.blog-row {
  position: relative;
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-md);
  padding-block: clamp(1.5rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--dur-fast) var(--ease-out);
}

.blog-row:hover {
  background: var(--surface-alt);
}

.blog-row__link {
  position: absolute;
  inset: 0;
}

.blog-row__date {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--on-surface-soft);
}

.blog-row__content {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.blog-row__thumb {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.blog-row__title {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.blog-row__excerpt {
  color: var(--on-surface-soft);
  max-width: 60ch;
}

.blog-empty {
  padding-block: var(--space-lg);
  color: var(--on-surface-soft);
}

.article-hero {
  padding-bottom: var(--space-lg);
}

.article-hero__date {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--on-surface-soft);
  display: block;
  margin-bottom: var(--space-md);
}

.article-hero__title {
  font-size: var(--fs-h2);
  max-width: 24ch;
}

.article-cover {
  width: 100%;
  max-width: 68ch;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.article-body {
  max-width: 68ch;
}

.article-body p,
.article-body ul,
.article-body ol {
  color: var(--on-surface-soft);
  font-size: 1.0625rem;
  margin-bottom: 1.25em;
}

.article-body h2,
.article-body h3 {
  margin: 1.5em 0 0.6em;
}

.article-body a {
  color: var(--luz);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .blog-row {
    grid-template-columns: 1fr;
  }

  .blog-row__thumb {
    width: 3.5rem;
    height: 3.5rem;
  }
}