/** @fileoverview Поиск с общими превью каталога, секциями категорий и проектов. */
[data-search-page] { padding: 24px; font-family: var(--ui-font); }
[data-search-page] > .back-link { margin-bottom: 24px; }
[data-search-page] .page-head { padding: 0; margin-bottom: 24px; }
[data-search-page] h1 { font-size: 30px; line-height: 36px; font-weight: 700; text-wrap: balance; }
[data-search-page] .search-meta { font-size: 14px; line-height: 20px; margin-top: 8px; color: var(--muted); }
.search-results { margin-top: 24px; }
.search-results > h2 { margin-bottom: 12px; font-size: 20px; line-height: 28px; font-weight: 600; }
.search-results > h2 span { margin-left: 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
/** Размер превью не зависит от пропорций оригинала и сохраняет выравнивание строк. */
[data-search-page] .search-result { gap: 16px; padding: 16px; border-radius: 16px; transition: transform 300ms var(--ui-motion); }
.search-result__media { flex: 0 0 160px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--panel); }
.search-result__media :is(img, .project-card__placeholder) { display: block; width: 100%; height: 100%; object-fit: contain; }
.search-result .project-info { min-width: 0; }
.search-result h3 { font-size: 20px; line-height: 28px; font-weight: 600; overflow-wrap: anywhere; text-wrap: balance; }
[data-search-page] .search-result p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 4px; font-size: 14px; line-height: 20px; text-wrap: pretty; }
.search-result__type { display: inline-block; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--violet-bright); }
[data-search-page] .search-result:hover { transform: translateY(-2px); }
[data-search-page] :is(a, button, input):focus-visible { outline: 2px solid var(--violet-bright); outline-offset: 4px; }
[data-search-page] .search-result:active { transform: scale(0.98); }
.search-empty { padding: 24px; margin-top: 24px; border: 1px solid var(--panel-border); border-radius: 16px; color: var(--muted); text-wrap: pretty; }
/** На телефоне превью остаётся различимым, а текст не создаёт горизонтальную прокрутку. */
@media (max-width: 640px) {
  [data-search-page] { padding: 16px; }
  [data-search-page] h1 { font-size: 24px; line-height: 32px; }
  [data-search-page] .search-result { gap: 12px; padding: 12px; }
  .search-result__media { flex-basis: 96px; }
  .search-result h3 { font-size: 18px; line-height: 28px; }
}
/** При уменьшении движения сохраняется только обычная смена состояния. */
@media (prefers-reduced-motion: reduce) {
  [data-search-page] .search-result { transition: none; transform: none; }
}