/* ==========================================================================
   SAKANA — simple listing pages: favorites, shop by vibe, search
   ========================================================================== */

.listing { min-block-size: 30vh; }
.fav-suggest { padding-block-start: var(--section); }

/* Search page ---------------------------------------------------------------- */

.search-page__form { margin-block-start: 14px; max-inline-size: 560px; }
.search-page__form .input { font-size: 18px; }
.listing > .search__hint, .listing > .chips { padding-inline: var(--g); }
.listing > .search__hint { margin-block-end: 8px; font-size: 14px; color: var(--soft); }

/* Shop by vibe ----------------------------------------------------------------- */

.vibe-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px;
  padding-inline: var(--g);
}
@media (min-width: 720px) { .vibe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; } }
@media (min-width: 1100px) { .vibe-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.vibe-card__link { display: grid; gap: 4px; }
.vibe-card__img { aspect-ratio: 4 / 5; margin-block-end: 8px; }
.vibe-card__img img { transition: transform 1.2s var(--ease); }
@media (hover: hover) { .vibe-card__link:hover .vibe-card__img img { transform: scale(1.04); } }
.vibe-card__label { font-family: var(--f-serif); font-weight: 400; font-size: 22px; line-height: 1.2; transition: color var(--t-fast); }
@media (hover: hover) { .vibe-card__link:hover .vibe-card__label { color: var(--accent); } }
.vibe-card__tag { font-size: 14px; color: var(--soft); line-height: 1.45; min-block-size: 2.9em; }
.vibe-card__peek { display: flex; gap: 4px; margin-block: 6px 2px; }
.vibe-card__peek .frame { inline-size: 36px; aspect-ratio: 1; }
.vibe-card__count { font-size: 14px; font-weight: 600; }
@media (hover: hover) { .vibe-card__link:hover .vibe-card__count { color: var(--accent); } }