/* GayStash — collections page. Loaded only by this page. */


.colls{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 10px;padding:0 14px;
}
.coll{display:flex;flex-direction:column;min-width:0}

/* The cover reports the size of the collection. One item gets one tile, two
   or three get two, four or more get the mosaic — so a thin collection reads
   as thin instead of padding itself out with three empty rectangles. */
.cov{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-md);
  overflow:hidden;display:grid;gap:2px;background:var(--surface-2);
}
.cov-1{grid-template-columns:1fr}
.cov-2{grid-template-columns:1fr 1fr}
.cov-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.ct{display:block}

.cnt{
  position:absolute;right:6px;bottom:6px;
  background:rgba(0,0,0,.78);color:#fff;border-radius:6px;
  padding:2px 7px;font-size:11.5px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
/* a one-item collection doesn't get to wear the same badge as a 25-item one */
.coll-thin .cnt{background:var(--surface-3);color:var(--text-3)}

.coll-body{padding:10px 2px 0;min-width:0}
.coll-title{
  font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.coll:hover .coll-title{color:var(--accent)}
.coll-by{
  display:flex;align-items:center;gap:6px;padding-top:5px;min-width:0;
  font-size:12.5px;font-weight:500;color:var(--text-3);
}
/* nowrap on the line, ellipsis on the name — same rule as .card-sub. Without
   it the count is an anonymous flex item whose text can break, so a long
   username pushed "44 saves" onto a line of its own. The name gives way; the
   count never does. */
.coll-by{white-space:nowrap}
.coll-by .av{width:18px;height:18px;font-size:9.5px}
.coll-by span.who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


@media (min-width:640px){.colls{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){
  .colls{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px;padding:0 22px}
}
@media (min-width:1240px){.colls{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1660px){.colls{grid-template-columns:repeat(5,minmax(0,1fr))}}