/* search-thumbnails.css
 * Раскладка результатов поиска с обложкой слева и текстом справа.
 * Применяется только к #search-results на search.html.
 * См. search-thumbnails.js — он добавляет <img class="search-thumb"> в <li>.
 */

#search-results li.has-thumb,
#search-results li.thumb-loading {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: start;
  padding: 12px 0;
}

/* Скелетон-плейсхолдер: серый блок с «бегущим» бликом, пока грузится обложка.
   Резервирует место заранее, чтобы результаты не «прыгали». */
#search-results li.thumb-loading::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 96px;
  height: 72px;
  border-radius: 6px;
  border: 1px solid #e1e4e8;
  background: linear-gradient(100deg, #eee 30%, #f6f6f6 50%, #eee 70%);
  background-size: 200% 100%;
  animation: search-thumb-shimmer 1.2s ease-in-out infinite;
}

/* Когда картинка загрузилась — скелетон уходит (класс снимается из JS). */
#search-results li.thumb-loading > a {
  grid-column: 2;
  grid-row: 1;
}
#search-results li.thumb-loading > span,
#search-results li.thumb-loading > p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

@keyframes search-thumb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #search-results li.thumb-loading::before { animation: none; }
}

/* Обложка занимает левую колонку на обе строки (заголовок + сниппет). */
#search-results li.has-thumb .search-thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  background: #f3f3f3;
  border: 1px solid #e1e4e8;
}

/* Заголовок и сниппет — в правой колонке. */
#search-results li.has-thumb > a {
  grid-column: 2;
  grid-row: 1;
}

#search-results li.has-thumb > span,
#search-results li.has-thumb > p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

/* На мобильных уменьшаем обложку. */
@media (max-width: 480px) {
  #search-results li.has-thumb {
    grid-template-columns: 64px 1fr;
    column-gap: 12px;
  }
  #search-results li.has-thumb .search-thumb {
    width: 64px;
    height: 48px;
  }
}