/*
 * "Mes livres" page: proposals waiting for review, then the books in the app.
 */

.books-section + .books-section { margin-top: 32px; }
.section-title { font-size: 20px; margin: 0 4px 14px; }

.book-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--gap); }
.book-card { display: flex; gap: 20px; margin-bottom: 0; }
.book-body { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.book-body .badge { margin-bottom: 6px; }
.book-shop { font-size: 13px; color: var(--violet-ink); overflow-wrap: anywhere; }
.book-body .tags-wrap { margin-top: 10px; }
.book-body .actions { margin-top: 14px; }

.cover {
  width: 84px; height: 124px; flex: none; overflow: hidden;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-0 { background: var(--violet-ink); color: var(--lime); }
.cover-1 { background: var(--violet); color: #FFFFFF; }
.cover-2 { background: var(--lavender); color: var(--ink); }
.cover-3 { background: var(--lime); color: var(--ink); }

.book-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.book-meta { font-size: 13px; color: var(--text-muted); }
.book-readers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--text-muted); }
.book-note { margin-top: 12px; font-size: 13px; color: var(--violet-ink); }

.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px; }

@media (max-width: 600px) {
  .book-cards { grid-template-columns: minmax(0, 1fr); }
  .book-card { gap: 14px; }
  .cover { width: 64px; height: 96px; font-size: 24px; }
}

/* Notice: editing a book comes in a later update */
.books-notice { max-width: 760px; margin: 0 0 24px; }