/* GayStash — the activity feed. */

.comm{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:0 14px 14px}

/* the feed is more than comments, so it filters */
.filters{display:flex;gap:8px;overflow-x:auto;padding:0 0 16px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}

/* ── the feed ───────────────────────────────────────────────────── */
.feed{display:flex;flex-direction:column;gap:10px}
.act{background:var(--surface);border-radius:var(--r-lg);padding:14px}
.act-head{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text-3)}
.act-head .av{width:28px;height:28px;font-size:12px}
.act-head b{color:var(--text);font-weight:700}
.act-head time{margin-left:auto;font-size:12.5px;color:var(--text-3);white-space:nowrap}

/* the comment leads; it is why the row exists */
.act-say{
  font-size:16.5px;font-weight:600;line-height:1.4;letter-spacing:-.012em;
  padding:10px 0 12px;color:var(--text);
}

/* the stash being discussed, as a card rather than a blue link */
.mini{
  display:flex;gap:12px;align-items:center;
  background:var(--bg);border-radius:var(--r-md);padding:9px;
  transition:background .14s var(--ease);
}
.mini:hover{background:var(--surface-2)}
.mini-thumb{
  position:relative;width:124px;flex:none;aspect-ratio:16/9;
  border-radius:var(--r-sm);overflow:hidden;
}
.mini-thumb .dur{right:4px;bottom:4px;font-size:10.5px;padding:1px 5px}
.mini-thumb .ads{left:4px;top:4px;font-size:9.5px;padding:1px 5px}
.mini-body{min-width:0}
.mini-title{
  font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mini:hover .mini-title{color:var(--accent)}
.mini-sub{padding-top:4px;font-size:12.5px;font-weight:600;color:var(--text-3)}
.act[data-type=stash] .mini{margin-top:11px}
.act-join{display:flex;align-items:center;gap:10px;padding-top:11px}
.act-join p{font-size:14px;font-weight:500;color:var(--text-2);flex:1;min-width:0}

.feed-end{display:flex;justify-content:center;padding:18px 0 4px}

@media (min-width:1000px){
  .comm{grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding:0 22px 30px;align-items:start}
  .act{padding:16px 18px}
  .mini-thumb{width:150px}
}