/* Cover cards and detail heroes. Colors from reference-design.md (420d6622). */
:root {
  --cover-bg: #0f1420;
  --cover-s2: #1d2536;
  --cover-mint: #2ee6c5;
  --cover-amber: #ffb020;
}
ol.entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
ol.entries > li:not(.has-cover) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
ol.entries > li.has-cover {
  display: block;
  padding: 0;
  border: 0;
}
.cover-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
  min-height: 48px;
}
.cover-card .th {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cover-bg);
}
.cover-card .th img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.cover-card:hover .th img { transform: scale(1.04); }
.cover-card:hover { color: inherit; }
.cover-card .cover-copy { display: grid; gap: 0.15rem; }
.cover-card .entry-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cover-card .entry-meta {
  font-size: 12.5px;
  color: var(--muted);
}
.cover-card .entry-meta .cover-cat { color: var(--cover-mint); }
.record-hero {
  margin: 0.85rem 0 1.2rem;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cover-bg);
  aspect-ratio: 16 / 10;
}
.record-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-results li.has-cover {
  display: block;
  padding: 0;
  border: 0;
}
@media (max-width: 640px) {
  ol.entries { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  ol.entries > li:not(.has-cover) { grid-template-columns: 1fr; gap: 0.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-card .th img { transition: none; }
  .cover-card:hover .th img { transform: none; }
}