/* Shared overview chrome: filter bar + pagination (cases, news, …). */

.overview {
  display: flex;
  flex-direction: column;
  gap: var(--row-spacer);
  color: var(--color-primary);
}

.overview-filter {
  display: flex;
  flex-direction: column;
  gap: 1.375rem; /* Figma ~22px title→fields */
  max-inline-size: 77.125rem; /* Figma ~1234 */
  margin-inline: auto;
  padding: 3.5rem 3.875rem; /* Figma ~56×62 */
  background: #fff;
  inline-size: 100%;
  box-sizing: border-box;
}

.overview-filter-title {
  padding-block: 0;
  margin-block: 0;
}

.overview-filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* Figma 24px */
}

.overview-field {
  display: flex;
  flex: 1 1 20rem;
  flex-direction: column;
  gap: 0.25rem; /* Figma 4px */
  min-inline-size: 0;
}

.overview-label {
  font-size: 0.875rem; /* Figma 14px */
  letter-spacing: 0.03125rem; /* Figma 0.5px */
  line-height: 1.25rem;
}

.overview-select-wrap {
  position: relative;
}

.overview-select-wrap::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.overview-select {
  appearance: none;
  inline-size: 100%;
  padding: 0.625rem 2.5rem 0.625rem 1rem; /* Figma 10×16 + chevron room */
  border: var(--border-thickness) solid var(--color-primary);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-primary);
  line-height: 1.5;
}

.overview-select:has(option[value=""]:checked) {
  color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.overview-filter-submit {
  align-self: flex-start;
  margin-block-start: 0.5rem;
}

.overview-empty {
  margin-block: 0;
}

.overview-pagination {
  display: flex;
  justify-content: center;
}

.overview-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem; /* Figma 16px */
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}

.overview-pagination .page-numbers li {
  margin: 0;
  /* Salient's `ul li { list-style: disc }` puts the bullet on the item itself,
     so the list-style on the <ul> above always loses. It goes on the item too. */
  list-style: none;
}

.overview-pagination a.page-numbers,
.overview-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.5rem;
  min-block-size: 2.5rem;
  padding: 0.3125rem 0.625rem; /* Figma 5×10 */
  border-radius: 56px;
  color: var(--color-primary);
  text-decoration: none;
  line-height: 1.5;
}

.overview-pagination span.page-numbers.current {
  border: var(--border-thickness) solid var(--color-primary);
}

.overview-pagination a.prev,
.overview-pagination a.next {
  padding: 0.75rem; /* Figma 12px */
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.overview-pagination a.prev:hover,
.overview-pagination a.next:hover,
.overview-pagination a.prev:focus-visible,
.overview-pagination a.next:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 85%, #fff);
}

.overview-page-arrow {
  display: block;
  inline-size: 1rem;
  block-size: 1rem;
  /* Not currentColor: the pill's own colour loses somewhere in Salient's
     cascade, which left a navy arrow sitting on the navy pill. */
  background-color: var(--color-on-primary);
  /* Real mask URL is injected from functions.php (absolute, so Gravity Forms
     cannot break it); this is only the no-PHP fallback. */
  mask: none;
  -webkit-mask: none;
}

.overview-pagination a.prev .overview-page-arrow {
  transform: scaleX(-1);
}

@media (max-width: 999px) {
  .overview-filter {
    padding: 2rem;
  }
}