/* Announcement cards on the board (annCard.js): the item card from card.css
   plus these. The text colour of a post (--kind) is set in announce.css. */
.ann-grid > [hidden] { display: none; }   /* cards past the shown rows (announceBoard.js) */
.ann-card { cursor: default; }
.ann-card:hover { transform: none; border-color: var(--kind); }
.ann-card.is-mine { border-color: rgba(245, 179, 1, 0.45); }
.ann-card .card-top .ann-kind { height: 20px; padding: 0 8px; font-size: 11px; }
.badge-mine { padding: 1px 7px; border-radius: 999px; background: rgba(245, 179, 1, 0.15); color: var(--gold); font-size: 11px; }
a.card-icon { text-decoration: none; }
.ann-card-mega { width: 50px; height: auto; }

/* title, details, price, in-game name: grows so the foot lines up at the bottom */
.ann-card-body { flex: 1; display: flex; flex-direction: column; padding-bottom: 10px; }
.ann-card-title { display: block; margin: 8px 0 0; color: var(--kind); text-decoration: none; }
a.ann-card-title:hover { text-decoration: underline; }
.ann-card-title.is-text {   /* a text-only post: its text is the title, up to 3 lines */
  min-height: 0; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ann-card-details {
  margin: 2px 10px 0; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ann-card-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding: 6px 10px 0; font-size: 12px; }
.ann-card-line strong { overflow-wrap: anywhere; }

.ann-card-foot { flex-wrap: wrap; align-items: center; margin-top: 0; }
.ann-card-author { display: inline-flex; flex-wrap: wrap; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.ann-card .badge-admin { margin-left: 4px; padding: 0 6px; font-size: 10px; }
.ann-card .ann-act { padding: 2px 4px; font-size: 12px; }
.ann-card-acts { display: flex; flex-wrap: wrap; gap: 0 4px; padding: 0 6px 6px; }

.ann-more { margin-top: 14px; }

@media (max-width: 480px) {
  .ann-card-foot { align-items: flex-start; }   /* the foot is a column here (card.css): keep it left */
}