/* ==========================================================================
   pages/boards.css: Player-made boards (/boards)
   Owner: the builder lane. Every rule is scoped under .pg-boards.
   ========================================================================== */

.pg-boards .bx { padding-top: var(--s-7); padding-bottom: var(--s-10); }
.pg-boards .bx-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.pg-boards .bx-top-txt { flex: 1 1 380px; min-width: 0; }
.pg-boards .bx-top .page-title { margin-top: var(--s-2); }
.pg-boards .bx-top .page-sub { max-width: 560px; }
.pg-boards .bx-make { flex: 0 0 auto; }
@media (max-width: 559px) { .pg-boards .bx-make { width: 100%; } }

/* Today's picks. */
.pg-boards .bx-feats { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.pg-boards .bx-feats:empty { display: none; }
@media (min-width: 760px) { .pg-boards .bx-feats { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.pg-boards .bx-feat {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); color: inherit; text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med);
}
.pg-boards .bx-feat:hover { transform: translateY(-2px); }
.pg-boards .bx-feat-k { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.pg-boards .bx-feat-h { font: 800 var(--fs-2xl)/1.08 var(--font-ui); letter-spacing: -.02em; overflow-wrap: anywhere; }
.pg-boards .bx-feat-p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.pg-boards .bx-feat-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); flex-wrap: wrap; }
.pg-boards .bx-feat-by { color: var(--text-2); font-size: var(--fs-sm); }
.pg-boards .bx-feat-go { min-height: 44px; }

/* Sort and mode. */
.pg-boards .bx-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; margin: var(--s-7) 0 var(--s-4); }

/* The list. */
.pg-boards .bx-list > li { list-style: none; }
.pg-boards .bx-row { gap: var(--s-4); align-items: center; color: inherit; text-decoration: none; }
.pg-boards .bx-row:hover { border-color: var(--mode-line); }
.pg-boards .bx-row .icon-tile { width: 52px; height: 52px; flex: 0 0 52px; }
.pg-boards .bx-row .icon-tile .i { width: 26px; height: 26px; }
.pg-boards .bx-blurb {
  color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; margin: 2px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-boards .bx-votes {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 6px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border); font: 700 var(--fs-sm)/1 var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums;
}
.pg-boards .bx-votes .bx-up { width: 14px; height: 14px; transform: rotate(-90deg); color: var(--mode-primary); }
.pg-boards .bx-votes.is-on { border-color: var(--mode-primary); background: var(--mode-tint); }
@media (max-width: 480px) {
  .pg-boards .bx-row { gap: var(--s-3); }
  .pg-boards .bx-row .icon-tile { display: none; }
  .pg-boards .bx-row .lr-chev { display: none; }
}
.pg-boards .bx-more { display: flex; justify-content: center; margin-top: var(--s-5); }