/* Shared horizontal article previews, extracted from article1.html. */
.editorial-list .article-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  padding: 40px 0;
  border-block-end: 1px solid var(--line);
  align-items: center;
}
.editorial-list .article-row:last-child { border-block-end: none; }
.editorial-list .article-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.editorial-list .article-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.editorial-list .article-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--teal-50);
  border: 1px solid var(--teal-200);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.editorial-list .article-badge.cat-vibe { color: var(--teal-700); }
.editorial-list .article-badge.cat-ai { color: var(--teal-800); }
.editorial-list .article-badge.cat-beginner { color: var(--teal-500); }
.editorial-list .article-badge.cat-opinion { color: var(--teal-600); }
.editorial-list .article-title {
  font-weight: 800;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
  text-decoration: none;
  display: block;
  transition: color 200ms;
}
.editorial-list .article-row:hover .article-title { color: var(--teal-700); }
.editorial-list .article-excerpt {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.7;
  max-height: 90px;
  overflow: hidden;
  position: relative;
}
.editorial-list .article-excerpt::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--surface, var(--surface-2)));
  pointer-events: none;
}
.editorial-list .article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}
.editorial-list .meta-sep { color: var(--teal-300); font-size: 10px; }
.editorial-list .article-cta {
  color: var(--teal-700);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 4px;
  transition: color 200ms;
}
.editorial-list .article-cta:hover { color: var(--teal-900); }
.editorial-list .article-cta svg { transition: transform 200ms; }
.editorial-list .article-cta:hover svg { transform: translateX(-4px); }
.editorial-list .article-image {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--teal-50);
  display: block;
  min-width: 0;
}
.editorial-list .article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
  display: block;
}
.editorial-list .article-row:hover .article-image img { transform: scale(1.04); }
.editorial-list .article-image-logo img { object-fit: contain; padding: 40px; }
@media (max-width: 760px) {
  .editorial-list .article-row { grid-template-columns: 1fr; gap: 16px; }
  .editorial-list .article-text { order: 1; }
  .editorial-list .article-image { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-list .article-image img, .editorial-list .article-cta svg { transition: none; }
}