/* ============================================================
   Books block — a second <aside> directly under the podcasts one,
   inside the spotlight's "Explore" drawer.

   It carries class "sp-pods sp-books", so it inherits the whole
   listening-row treatment for free: the same full-width
   multi-column flow, the same gold mono heading, and the same
   thin rule between entries. Everything below is only the
   difference between the two blocks.

   Delete this file and the books still render — they just lose
   the dividing line and the italic author line.
   ============================================================ */

/* the horizontal rule that separates the two blocks */
.v3 .sp-books{
  border-top: 1px solid var(--line-faint);
  padding-top: 14px;
  margin-top: 2px;
}

/* a region with no books for this year emits nothing at all;
   without this the empty aside would still draw its rule */
.sp-books:empty{ display: none; border-top: none; padding-top: 0; }

/* the author line is secondary to the title */
.book-rec .pr-what{ font-style: italic; }

/* ---------- Open Library cover thumbnails ----------
   The cover is a fixed-width column beside the text so a row keeps its
   shape whether or not Open Library has a picture. .bk-blank is the same
   box with nothing in it, which is why a missing cover does not shuffle
   the text sideways. */
.book-rec{ display: flex; gap: 11px; align-items: flex-start; }
.book-rec .bk-cover{
  flex: 0 0 46px; width: 46px; height: auto; max-height: 70px;
  object-fit: cover; border-radius: 2px;
  background: rgba(255,255,255,.03);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.book-rec .bk-blank{ height: 62px; box-shadow: none; }
.book-rec .bk-text{ flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px){
  .book-rec .bk-cover{ flex-basis: 38px; width: 38px; }
  .book-rec .bk-blank{ height: 52px; }
}