/* =============================================================================
   WFP ARTICLE ARCHIVE
   File: assets/css/frontend/windhamfreepress-archive.css (or add to editorial.css)
   
   Component classes:
   .wfp-archive              — root wrapper
   .wfp-archive__filters     — filter controls area
   .wfp-archive__sections    — section pill buttons
   .wfp-archive__section-btn — individual section button
   .wfp-archive__filter-row  — second row (search, dropdowns, reset)
   .wfp-archive__search-wrap — search input wrapper
   .wfp-archive__meta        — count + loading indicator row
   .wfp-archive__grid        — story card grid (reuses .wfp-story-grid)
   .wfp-archive__empty       — no results message
   .wfp-archive__pagination  — pagination wrapper
   .wfp-archive__page-btn    — individual page button
   ============================================================================= */

/* ── Root ─────────────────────────────────────────────────────────────────── */

.wfp-archive {
  container-type: inline-size;
  container-name: wfp-archive;
}

/* ── Filters ──────────────────────────────────────────────────────────────── */

.wfp-archive__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

/* Section buttons row */
.wfp-archive__sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.wfp-archive__section-btn {
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--base-2);
  color: var(--contrast-2);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition-1),
    border-color var(--transition-1),
    color var(--transition-1);
  white-space: nowrap;
}

.wfp-archive__section-btn:hover,
.wfp-archive__section-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--base-3);
}

.wfp-archive__section-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--base-3);
}

/* Second filter row */
.wfp-archive__filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.wfp-archive__search-wrap {
  flex: 1;
  min-width: 200px;
}

.wfp-archive__search {
  width: 100%;
}

.wfp-archive__format,
.wfp-archive__author,
.wfp-archive__sort {
  min-width: 160px;
  flex-shrink: 0;
}

.wfp-archive__reset {
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--contrast-3);
  font-size: var(--step--1);
  cursor: pointer;
  transition: color var(--transition-1), border-color var(--transition-1);
  white-space: nowrap;
}

.wfp-archive__reset:hover,
.wfp-archive__reset:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Meta row (count + loading) ───────────────────────────────────────────── */

.wfp-archive__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-m);
  min-height: 1.5rem; /* prevent layout shift when loading indicator appears */
}

.wfp-archive__count {
  font-size: var(--step--1);
  color: var(--contrast-3);
  margin: 0;
}

.wfp-archive__count-num {
  font-weight: 700;
  color: var(--contrast-2);
}

.wfp-archive__loading {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--contrast-3);
}

.wfp-archive__loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wfp-spin 0.6s linear infinite;
}

@keyframes wfp-spin {
  to { transform: rotate(360deg); }
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.wfp-archive__empty {
  padding: var(--space-2xl) var(--space-m);
  text-align: center;
  color: var(--contrast-3);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--base-2);
}

.wfp-archive__empty p {
  margin: 0;
  font-size: var(--step-0);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.wfp-archive__pagination {
  margin-top: var(--space-xl);
}

.wfp-archive-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.wfp-archive__page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-s);
  border: 1px solid var(--border-color);
  background: var(--base-3);
  color: var(--contrast-2);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition-1),
    border-color var(--transition-1),
    color var(--transition-1);
}

.wfp-archive__page-btn:hover,
.wfp-archive__page-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.wfp-archive__page-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--base-3);
  font-weight: 700;
}

.wfp-archive__page-btn--prev,
.wfp-archive__page-btn--next {
  font-size: var(--step-0);
  font-weight: 400;
}

.wfp-archive__page-ellipsis {
  color: var(--contrast-3);
  padding: 0 var(--space-3xs);
  font-size: var(--step--1);
  user-select: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@container wfp-archive (max-width: 600px) {
  .wfp-archive__filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .wfp-archive__search-wrap {
    min-width: 0;
  }

  .wfp-archive__format,
  .wfp-archive__author,
  .wfp-archive__sort {
    min-width: 0;
    width: 100%;
  }

  .wfp-archive__reset {
    align-self: flex-start;
  }
}

@container wfp-archive (max-width: 400px) {
  .wfp-archive__sections {
    gap: var(--space-3xs);
  }

  .wfp-archive__section-btn {
    font-size: var(--step--2);
    padding: var(--space-3xs) var(--space-xs);
  }
}