@import url('base.css?ver=0.1.4');

/* ---------- Sample/staging fixture ribbon ---------- */
.sample-ribbon {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--wf-accent);
  color: var(--wf-on-accent);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--wf-radius-sm);
}
.card { position: relative; }

/* ---------- Archive filters (query-string based, no JS required) ---------- */
.archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-2);
  margin-bottom: var(--wf-space-5);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--wf-size-sm);
  padding: var(--wf-space-2) var(--wf-space-3);
  border-radius: var(--wf-radius-pill);
  border: 1px solid var(--wf-border);
  background: var(--wf-surface);
  color: var(--wf-text);
  text-decoration: none;
}
.filter-chip.is-active {
  background: var(--wf-accent);
  border-color: var(--wf-accent);
  color: var(--wf-on-accent);
  font-weight: 600;
}
.filter-chip .count { color: var(--wf-text-muted); font-size: 0.75rem; }
.filter-chip.is-active .count { color: inherit; opacity: 0.85; }

/* ---------- Archive grid (standard cards, non-carousel) ---------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--wf-space-4);
  margin-bottom: var(--wf-space-6);
}
@media (max-width: 599px) {
  .archive-grid { grid-template-columns: 1fr; }
}

/* ---------- Load more (deal feed) ---------- */
.load-more-row { display: flex; justify-content: center; margin: var(--wf-space-6) 0; }
.load-more-row .btn[aria-busy="true"] { cursor: wait; }

/* ---------- Pagination ---------- */
.wf-pagination { display: flex; gap: var(--wf-space-2); justify-content: center; margin: var(--wf-space-6) 0; }
.wf-pagination a, .wf-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  border-radius: var(--wf-radius-md);
  text-decoration: none;
  font-size: var(--wf-size-sm);
  color: var(--wf-text);
  border: 1px solid var(--wf-border);
}
.wf-pagination .current { background: var(--wf-accent); color: var(--wf-on-accent); border-color: var(--wf-accent); font-weight: 700; }

/* ---------- Empty state ---------- */
.empty-state { padding: var(--wf-space-7) 0; text-align: center; color: var(--wf-text-muted); }
.empty-state a { font-weight: 600; }

/* ---------- Article prose (single.php the_content) ---------- */
.article-prose { font-size: var(--wf-size-md); }
.article-prose h2 { font-size: var(--wf-size-xl); margin: var(--wf-space-6) 0 var(--wf-space-3); }
.article-prose h3 { font-size: var(--wf-size-lg); margin: var(--wf-space-5) 0 var(--wf-space-2); }
.article-prose p { margin: 0 0 var(--wf-space-4); }
.article-prose img { border-radius: var(--wf-radius-md); margin: var(--wf-space-4) 0; }
.article-prose blockquote {
  margin: var(--wf-space-5) 0;
  padding: var(--wf-space-3) var(--wf-space-4);
  border-left: 3px solid var(--wf-accent);
  font-style: italic;
  color: var(--wf-text-muted);
}
.article-meta { color: var(--wf-text-muted); font-size: var(--wf-size-sm); margin-bottom: var(--wf-space-5); }
.article-trust-footer {
  margin-top: var(--wf-space-7);
  padding-top: var(--wf-space-5);
  border-top: 1px solid var(--wf-border);
  font-size: var(--wf-size-xs);
  color: var(--wf-text-muted);
}

/* ---------- Deal/Auction detail page ---------- */
.detail-header { display: flex; gap: var(--wf-space-6); flex-wrap: wrap; margin-bottom: var(--wf-space-6); }
.detail-media { flex: 0 0 320px; aspect-ratio: 1; background: #fff; border-radius: var(--wf-radius-lg); border: 1px solid var(--wf-border); }
.detail-body { flex: 1; min-width: 280px; }
.detail-body h1 { font-size: var(--wf-size-2xl); margin: var(--wf-space-2) 0; }
.detail-cta-row { display: flex; align-items: center; gap: var(--wf-space-3); margin: var(--wf-space-4) 0; flex-wrap: wrap; }
.banner {
  padding: var(--wf-space-3) var(--wf-space-4);
  border-radius: var(--wf-radius-md);
  font-size: var(--wf-size-sm);
  margin-bottom: var(--wf-space-4);
}
.banner-unverified { background: var(--ext-status-pending-bg); color: var(--ext-status-pending-fg); }
.banner-unavailable { background: var(--ext-status-unavailable-bg); color: var(--ext-status-unavailable-fg); }
.banner-stale { background: var(--ext-status-stale-bg); color: var(--ext-status-stale-fg); }
.banner-reserve { background: var(--ext-status-reserve-bg); color: var(--ext-status-reserve-fg); }
.banner-expired { background: var(--ext-status-expired-bg); color: var(--ext-status-expired-fg); }
.detail-section { margin: var(--wf-space-5) 0; }
.detail-section h2 { font-size: var(--wf-size-lg); margin: 0 0 var(--wf-space-2); }
.detail-fact-list { list-style: none; padding: 0; margin: 0; font-size: var(--wf-size-sm); }
.detail-fact-list li { display: flex; gap: var(--wf-space-2); padding: 4px 0; border-bottom: 1px solid var(--wf-border); }
.detail-fact-list dt { color: var(--wf-text-muted); min-width: 140px; }

/* ---------- Comments (core WP output) ---------- */
.comment-list, .comment-list ul { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: var(--wf-space-5); margin-top: var(--wf-space-3); }
.comment { border-bottom: 1px solid var(--wf-border); padding: var(--wf-space-4) 0; }
.comment-author .fn { font-weight: 700; font-style: normal; }
.comment-meta { font-size: var(--wf-size-xs); color: var(--wf-text-muted); margin-bottom: var(--wf-space-2); }
.comment-content p:last-child { margin-bottom: 0; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; max-width: 480px; padding: var(--wf-space-2) var(--wf-space-3);
  border: 1px solid var(--wf-border); border-radius: var(--wf-radius-md);
  font-family: var(--wf-font-ui); font-size: var(--wf-size-sm);
  background: var(--wf-bg); color: var(--wf-text); margin-bottom: var(--wf-space-3); display: block;
}
.comment-form-comment textarea { max-width: 100%; min-height: 100px; }
.comment-reply-title { font-size: var(--wf-size-lg); }