/* posts.css — /posts, the full Gameplay/Captures listing behind home.js's
 * Recent Posts teaser.
 *
 * Layered on home.css rather than standalone: that file already supplies the
 * palette (:root tokens), the topbar and the .post-card/.post-grid/
 * .post-lightbox rules a card here is built from (see postCard in posts.js,
 * duplicated from home.js's). This file is only what's new — the page
 * container, the tabs, and the infinite-scroll sentinel/status line.
 */

.posts-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 56px) clamp(18px, 4vw, 30px) 100px;
}

.posts-head { margin-bottom: 30px; }

/* The WOW Kills strip above the tabs — .section-title/.section-lead/
   .post-grid/.post-card/.post-wow-badge all come from home.css, which this
   page already loads (see the file banner above); this is only the section's
   own spacing, set off from the tabs below it the same way .posts-head is. */
.posts-wow-kills { margin-bottom: 44px; }

/* Tabs
   -------------------------------------------------------------------------- */
.posts-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 12px;
  gap: 10px;
  border-bottom: 1px solid var(--glass-line);
  margin-bottom: 30px;
}

/* Pinned to the row's far right, the way home.js's roster search sits at the
   end of its own section head — margin-left: auto rather than
   justify-content: space-between on .posts-tabs, which would also space the
   two tabs apart from each other instead of keeping them adjacent. */
.posts-search {
  margin-left: auto;
}

.posts-search-box {
  display: flex;
  gap: 8px;
}

/* The suggestion list is anchored to this wrapper, not to .posts-search-box,
   so it spans the input alone and not the Search button too — same
   reasoning as /player's .lookup-field. flex: 1 here (rather than on the
   input) is what lets the input's own width:100% below track the space
   .posts-search-box actually has, including under the 620px wrap. */
.posts-search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.posts-search-field .player-search-input { width: 100%; }

/* Suggestions — same source and matching logic as /player's lookup dropdown
   (see wirePostSearch in posts.js), duplicated the way squash()/hexToRgb
   already are across these classic scripts. Declares no `display` on
   purpose: shop.css's single-class `.hidden` then has no specificity tie to
   lose, the bug player.css documents at .nav-link.hidden. The dim backdrop
   is body's own background colour (#0f2027, home.css) at near-opacity,
   since there's no themed palette on this page to draw it from the way
   player.css's .lookup-suggest does. */
.posts-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(15, 32, 39, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

.posts-suggest-option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* One highlight for both the arrow keys and the mouse, because Enter acts on
   whichever row is wearing it — see setSuggestActive in posts.js. */
.posts-suggest-option.active { background: rgba(var(--accent-rgb), 0.2); }

.posts-suggest-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

/* Pushed to the right edge and never shrunk: the username is what the search
   actually filters on as reliably as the nickname, so it's the half worth
   reading in full when the nickname has to clip. */
.posts-suggest-user {
  margin-left: auto;
  flex: none;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* Same glass-pill treatment as home.css's .refresh-btn, so the two explicit
   actions on this side of the app (Refresh there, Search here) read as the
   same kind of control. */
.posts-search-btn {
  padding: 11px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.posts-search-btn:hover { background: rgba(255, 255, 255, 0.12); }

.posts-search-btn:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

.posts-tab {
  padding: 12px 4px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.posts-tab + .posts-tab { margin-left: 14px; }

.posts-tab:hover { color: var(--ink); }

.posts-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.posts-tab:focus-visible {
  outline: none;
  color: var(--accent);
}

/* A hidden panel's grid is unlaid-out, which is what stops its sentinel from
   ever reporting intersection — see wireInfiniteScroll in posts.js. Nothing
   here needs to know that; this rule is what makes it true. */
.posts-panel.hidden { display: none; }

/* The teaser's fixed grid on / caps at a handful of columns because it only
   ever shows six; this page can hold far more, so the minimum column width
   comes down slightly to fit more per row on a wide screen. */
.posts-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* A thin full-width strip rather than a real grid cell — invisible, and never
   disrupts the column count the way an empty tile-sized box would. */
.posts-sentinel {
  grid-column: 1 / -1;
  height: 1px;
}

.posts-status {
  margin-top: 22px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.88rem;
  min-height: 1.2em;
}

/* Prev/next lightbox nav — moved to home.css (see .post-lightbox-nav there):
   it's shared with the Memories lightbox on /, not just this page. */

@media (max-width: 620px) {
  /* The row has wrapped by now — the search takes the whole second line
     rather than a short right-aligned column, matching home.css's own
     .section-tools breakpoint. The button keeps its own width rather than
     stretching too, the same call .refresh-box makes there — .posts-search-field
     already flexes to fill whatever's left at every width, so there's
     nothing input-specific to override here any more. */
  .posts-search { margin-left: 0; width: 100%; }
}

@media (max-width: 480px) {
  .posts-tab { font-size: 0.9rem; }
}