/* Image led category cards. The image sits above the label rather than beside
   it, so the row reads as a set of destinations rather than a list. */
.collections__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.collection {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: var(--ground);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.collection:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}

.collection__media {
  display: block;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.collection__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.collection:hover .collection__media img { transform: scale(1.04); }
.collection__media .img-placeholder { height: 100%; border: 0; border-radius: 0; }

.collection__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
}
.collection__name { font-weight: 600; font-size: var(--step-0); letter-spacing: var(--track-tight); }
.collection:hover .collection__name { color: var(--accent); }
.collection__count {
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

@media (max-width: 900px) { .collections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .collections__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .collection__media { aspect-ratio: 16 / 7; }
}