/* Advice & Guidance AJAX filter. Cards reuse Content Cards 1. */
.ebp-resource-filter-1 {
  --ebp-resource-filter-1-background: var(--clr-air);

  box-sizing: border-box;
  padding-block: var(--spacing-56);
  color: var(--clr-ink);
  background-color: var(--ebp-resource-filter-1-background);
}

.ebp-resource-filter-1 *,
.ebp-resource-filter-1 *::before,
.ebp-resource-filter-1 *::after {
  box-sizing: border-box;
}

.ebp-resource-filter-1 .ebp-content-cards-1__media {
  display: none;
}

.ebp-resource-filter-1__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: 3rem;
  background-color: inherit;
}

.ebp-resource-filter-1__header {
  margin-inline: auto;
  text-align: center;
}

.ebp-resource-filter-1__heading {
  position: relative;
  margin: 0;
  padding-block-end: var(--spacing-28);
}

.ebp-resource-filter-1__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--spacing-28);
}

.ebp-resource-filter-1__filter {
  box-sizing: border-box;
  display: inline-flex;
  min-block-size: 2.3rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--clr-ink);
  color: var(--clr-ink);
  background-color: transparent;
  font-family: var(--font-primary);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.ebp-resource-filter-1__filter:hover,
.ebp-resource-filter-1__filter:focus-visible,
.ebp-resource-filter-1__filter.is-active {
  color: var(--clr-air);
  background-color: var(--clr-ink);
}

.ebp-resource-filter-1__filter:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Nested cards should not add a second section background or padding. */
.ebp-resource-filter-1 .ebp-content-cards-1 {
  padding: 0;
  color: inherit;
  background-color: inherit;
}

.ebp-resource-filter-1 .ebp-content-cards-1__grid {
  margin-top: var(--spacing-56);
}

.ebp-resource-filter-1__results {
  min-height: 8rem;
}

.ebp-resource-filter-1__results.is-loading {
  pointer-events: none;
  opacity: 0.45;
}

.ebp-resource-filter-1__empty {
  margin: var(--spacing-56) 0 0;
  text-align: center;
}

.ebp-resource-filter-1__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--spacing-56);
}

.ebp-resource-filter-1__page {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 2.3rem;
  min-height: 2.3rem;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--clr-ink);
  color: var(--clr-ink);
  background-color: transparent;
  font-family: var(--font-primary);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.ebp-resource-filter-1__page--step {
  padding-inline: 1rem;
}

.ebp-resource-filter-1__page:hover,
.ebp-resource-filter-1__page:focus-visible,
.ebp-resource-filter-1__page.is-active {
  color: var(--clr-air);
  background-color: var(--clr-ink);
}

.ebp-resource-filter-1__page:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.ebp-resource-filter-1__page:disabled {
  opacity: 0.35;
  cursor: default;
}

.ebp-resource-filter-1__page:disabled:hover,
.ebp-resource-filter-1__page:disabled:focus-visible {
  color: var(--clr-ink);
  background-color: transparent;
}

.ebp-resource-filter-1__page-gap {
  min-width: 1.5rem;
  color: var(--clr-ink);
  font-size: var(--fs-14);
  text-align: center;
}

.ebp-resource-filter-1 .ebp-content-cards-1__card {
  padding: 1rem;
  border: 1px solid var(--clr-ink);
}

@media (max-width: 767px) {
  .ebp-resource-filter-1__inner {
    padding-inline: var(--spacing-20);
  }

  .ebp-resource-filter-1 .ebp-content-cards-1__grid {
    margin-top: var(--spacing-28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ebp-resource-filter-1__filter,
  .ebp-resource-filter-1__page {
    transition: none;
  }

  .ebp-resource-filter-1__header,
  .ebp-resource-filter-1__filters,
  .ebp-resource-filter-1 .ebp-content-cards-1__card {
    visibility: visible !important;
    transform: none !important;
    opacity: 1 !important;
  }
}