/* The catalogue — the product archive and the two taxonomy views.
 *
 * Three stacked sections: what you are looking at, how to narrow it, and the
 * range itself. The filters are a band of their own between the two, closed by
 * a hairline like everything else, so narrowing the range reads as an action
 * on the page rather than as furniture attached to the grid.
 *
 * No colour literals. Every value traces to tokens.css.
 */

.pl-archive__header {
  padding-bottom: var(--sp-4);
}

.pl-archive__title {
  margin-top: var(--sp-2);
}

.pl-archive__intro {
  margin-top: var(--sp-3);
}

/* ------------------------------------------------------------- the filters */
.pl-filters {
  padding-block: var(--sp-4);
}

.pl-filters__groups {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 48rem) {
  .pl-filters__groups {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--sp-4);
  }
}

.pl-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  list-style: none;
  margin-top: var(--sp-2);
}

/* Hairline chips, the same object as the key facts on a product — they are the
 * same kind of thing, a short piece of classification. */
.pl-filters__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: var(--rule) solid var(--c-rule);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.pl-filters__item:hover {
  background: var(--c-water);
  color: var(--c-text);
}

/* The families are filled with water by default, not merely outlined.
 *
 * Asked for more colour on this page, and this is the honest amount of it. The
 * palette is five colours with three of them under strict rules — sky is water,
 * amber is a safety state, red is provenance — so four families cannot have
 * four hues without inventing four tokens and breaking the one rule the
 * brandbook states most plainly.
 *
 * What can change is how much of the colour the page uses. The family row is
 * the most important control on the catalogue, so it is filled: navy on sky,
 * 7.8:1, the pairing DR-01 already established in the chrome. The application
 * row stays hairline, which now also tells the two axes apart at a glance —
 * they used to be identical rows of outlines.
 */
.pl-filters__group[data-taxonomy="product_family"] .pl-filters__item {
  background: var(--c-water);
  color: var(--c-on-water);
  border-color: var(--c-water);
}

.pl-filters__group[data-taxonomy="product_family"] .pl-filters__item:hover {
  border-color: var(--c-text);
}

/* The chosen filter is filled, not merely outlined. It also still links — to
 * the URL without it. */
.pl-filters__item[aria-current] {
  background: var(--c-btn-bg);
  color: var(--c-btn-text);
  border-color: var(--c-btn-bg);
}

.pl-filters__item[aria-current]:hover {
  background: var(--c-btn-bg-hover);
  color: var(--c-btn-text);
}

.pl-filters__clear {
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------- the range */
.pl-archive__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  transition: background-color var(--transition);
}

.pl-archive__card:hover {
  background: var(--c-water);
}

/* Slate on sky is 3.3:1 and fails AA — the same correction as the document
 * rows and the related cards. */
.pl-archive__card:hover .pl-archive__card-text,
.pl-archive__card:hover .pl-archive__card-meta {
  color: var(--c-text);
}

.pl-archive__card img {
  width: 100%;
  border: var(--rule) solid var(--c-rule);
}

/* On an article card the kind and the reading time come before the title: they
 * are what a reader uses to decide whether to start, and a nine-minute guide
 * should say so before it is opened. */
.pl-archive__card-kind {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pl-archive__card:hover .pl-archive__card-kind {
  color: var(--c-text);
}

.pl-archive__card-title {
  font-size: var(--step-1);
  line-height: 1.15;
}

.pl-archive__card-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.pl-archive__card-meta {
  margin-top: auto;
  font-size: 0.78125rem;
}

.pl-archive__empty {
  font-size: var(--step-1);
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------------ pagination  */
.pl-archive .pagination {
  margin-top: var(--sp-6);
}

.pl-archive .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: center;
}

.pl-archive .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-1);
  border: var(--rule) solid var(--c-rule);
  font-size: 0.875rem;
  text-decoration: none;
}

.pl-archive .page-numbers:hover {
  background: var(--c-water);
}

.pl-archive .page-numbers.current {
  background: var(--c-btn-bg);
  color: var(--c-btn-text);
  border-color: var(--c-btn-bg);
}

/* The "Products" heading WordPress prints above its pagination is a label for
 * screen readers, not a line of the page. */
.pl-archive .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}