/* ============================================================================
   SHARED COMPONENTS
   Reusable UI primitives loaded globally (see base.html), same tier as
   main.css. If you're about to write a new .btn/.pagination-style block in a
   page CSS file, check here first and extend/override with a modifier or a
   page-scoped custom property instead of re-declaring the whole component.
   ========================================================================== */

/* ============================================================================
   BUTTON
   Generic action button. Page-specific buttons with real layout differences
   (e.g. toggle pills, h2h controls) are not duplicates of this and belong in
   their own page CSS. Unlike .pagination below, .btn intentionally has no
   per-page accent hook -- primary/secondary are meant to converge on one look
   everywhere; add one only if a real page needs a third, distinct accent.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none;
}

.btn--primary {
  background: var(--color-accent-emerald);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-accent-emerald-dark, #059669);
}

.btn--secondary {
  background: var(--color-slate-200);
  color: var(--color-slate-600);
}

.btn--secondary:hover {
  background: var(--color-slate-300);
}

/* ============================================================================
   PAGINATION
   Shared paged-list control (news, podcasts, home article grid). Wrap in
   .pagination and set --pagination-accent on a page-scoped wrapper class to
   change the accent; e.g. .podcast-pagination overrides it to fuchsia below.
   Supports both <a>-based (server-rendered, disabled via [disabled]/.disabled)
   and <button>-based (JS-driven, disabled via :disabled) pagination controls.
   ========================================================================== */
.pagination,
.news-pagination,
.podcast-pagination {
  --pagination-accent: var(--color-accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.podcast-pagination {
  --pagination-accent: var(--color-accent-fuchsia);
}

.pagination__numbers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagination__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-slate-300);
  border-radius: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-slate-600);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  text-decoration: none;
}

.pagination__button:hover:not(:disabled):not(.disabled):not([disabled]) {
  background: var(--color-slate-50);
  border-color: var(--pagination-accent);
  color: var(--pagination-accent);
  text-decoration: none;
}

.pagination__button.active {
  background: var(--pagination-accent);
  border-color: var(--pagination-accent);
  color: var(--color-white);
}

.pagination__button--nav {
  gap: 0.25rem;
  padding: 0.5rem 0.875rem;
  border-color: var(--color-slate-300);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pagination__button:disabled,
.pagination__button[disabled],
.pagination__button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination__ellipsis {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-slate-400);
  padding: 0 0.25rem;
}

.pagination__info {
  margin-left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-slate-500);
}