/* Превращаем контейнер в единую CSS-сетку (3 колонки на десктопе) */
.views-view-grid.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

/* Убираем влияние жестких строк Views, чтобы все карточки выстроились в общую сетку */
.views-view-grid.cols-3 .views-row {
  display: contents;
}

/* Переопределяем инлайн-стиль width: 33.33% и оформляем карточку книги */
.views-view-grid.cols-3 .views-col {
  width: 100% !important;
  float: none !important;
  position: relative; /* Для кликабельности всей карточки */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 18px;
  background-color: #faf9f6; /* Единый стиль с карточкой книги */
  border: 1px solid #e6e2d8;
  border-radius: 0px; /* 8 */
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.views-view-grid.cols-3 .views-col:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: #d5cfc2;
}

/* Контейнер обложки */
.views-view-grid.cols-3 .views-field-field-image {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 200px; /* Выравнивает названия книг по одной линии, даже если обложки разной высоты */
}

.views-view-grid.cols-3 .views-field-field-image img {
  display: block;
  max-height: 200px;
  width: auto;
  /*border-radius: 4px;*/
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  transition: transform 0.2s ease;
}

.views-view-grid.cols-3 .views-col:hover .views-field-field-image img {
  transform: scale(1.02);
}

/* Название книги */
.views-view-grid.cols-3 .views-field-title {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}

/* Ссылка на книгу (растягиваем зону клика на всю карточку) */
.views-view-grid.cols-3 .views-field-title a {
  color: #2b2927;
  text-decoration: none;
  transition: color 0.15s ease;
}

.views-view-grid.cols-3 .views-field-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.views-view-grid.cols-3 .views-col:hover .views-field-title a {
  color: #8c4a27; /* Фирменный терракотовый оттенок при наведении */
}

/* =========================================
   Планшеты (до 900px — 2 колонки)
   ========================================= */
@media (max-width: 900px) {
  .views-view-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* =========================================
   Мобильные устройства (до 560px — 1 колонка)
   ========================================= */
@media (max-width: 560px) {
  .views-view-grid.cols-3 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* На телефонах делаем компактную горизонтальную карточку (обложка слева, текст справа) */
  .views-view-grid.cols-3 .views-col {
    display: block;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 14px;
    gap: 16px;
  }

  .views-view-grid.cols-3 .views-field-field-image {
    flex: 0 0 85px;
    min-height: auto;
    margin-bottom: 0;
  }

  .views-view-grid.cols-3 .views-field-field-image img {
    width: 85px;
    max-height: none;
    height: auto;
  }

  .views-view-grid.cols-3 .views-field-title {
    font-size: 14px;
    line-height: 1.4;
  }
}


.books .views-row.clearfix::after {
    display: none;
    content: inherit;
}