/* pages/books — /books, /en/books (план DEV0320, задача 2, спека §2):
   заголовок + сетка карточек книги (обложка, название, язык/формат, цена).
   Только токены ДС. .books__grid--personal — сетка карточки-входа
   персональной книги (план DEV0322, задача 3; перенесена из
   pages/books-personal.css планом DEV0465, задача 1: это раскладка /books,
   не /books/personal — карточка сама стилизована в components.css). */

.books { padding-block: 32px 64px; display: flex; flex-direction: column; gap: 32px; }
.books__head h1 { margin: 0; font-size: 40px; }

.books__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.books__grid--personal { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--space-4); }

.book-card { display: flex; flex-direction: column; gap: var(--space-2); color: inherit; text-decoration: none; }
.book-card__media { position: relative; aspect-ratio: 4 / 5; display: block; border-radius: var(--radius-lg); overflow: hidden; }
.book-card__media img { width: 100%; height: 100%; object-fit: cover; }
.book-card__media-placeholder { display: block; width: 100%; height: 100%; }
.book-card__media .badge { position: absolute; top: var(--space-3); left: var(--space-3); }

.book-card__body { display: flex; flex-direction: column; gap: 4px; }
.book-card__title { font-family: var(--font-heading); font-size: 18px; }
.book-card__meta { font-size: 13px; color: var(--color-neutral-700); }
.book-card__price { font-weight: 700; }

@media (max-width: 1023px) {
  .books__grid { grid-template-columns: repeat(2, 1fr); }
  .books__grid--personal { grid-template-columns: repeat(2, 1fr); }
}