/**
 * Filter Card — single/two-column card used inside filter grids.
 */

.filter-card {
  display: block;
  border: 1px solid #bebebe;
  border-radius: 4px;
  background-color: #fff;
  padding: 15px;
  color: #000;
}

.filter-card__row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.filter-card--single-column .filter-card__row {
  display: block;
}

.filter-card__main {
  flex: 1 1 auto;
  min-width: 0;
}

.filter-card--with-image .filter-card__image {
  flex: 0 0 25%;
  max-width: 25%;
  display: flex;
  align-items: center;
  order: 2;
}

.filter-card__image img {
  max-width: 100%;
  height: auto;
}

.filter-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.filter-card__badge {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.8em;
  background-color: #e6e6e6;
}

/* Category badge color map (values normalized to machine slugs, no inline styles). */
.filter-card__badge--residential { background-color: #d7e8f7; }
.filter-card__badge--commercial { background-color: #ffe4c4; }
.filter-card__badge--small-business { background-color: #f7e8d7; }
.filter-card__badge--nonprofit { background-color: #e0d7f7; }
.filter-card__badge--access { background-color: #c0e2cf; }
.filter-card__badge--integration { background-color: #dec4b0; }
.filter-card__badge--prevention { background-color: #e6e9ba; }

.filter-card__preheader {
  margin: 0 0 4px;
  font-size: 0.9em;
}

.filter-card__title {
  margin: 0 0 8px;
}

.filter-card__meta {
  margin: 0 0 6px;
  font-size: 0.9em;
}

.filter-card__highlights {
  margin: 0 0 6px;
}

.filter-card__highlight {
  margin: 0 0 4px;
  font-size: 0.9em;
}

.filter-card-summary {
  margin: 8px 0;
}

/* Filter card's Details disclosure: sitewide paragraph-details.css (see
   css/components/paragraph-details.css) suppresses the native marker and
   draws its own flex-row chevron on ALL <details> elements. That's wrong
   for this component, which is supposed to keep the browser's native
   disclosure triangle. Override back to native rendering here, scoped to
   .filter-card-details only, so no other <details> usage sitewide is
   affected. */
.filter-card-details {
  width: auto;
}

.filter-card-details summary {
  display: list-item;
  list-style: revert;
  align-items: initial;
  padding: 5px 12px;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
}

.filter-card-details summary::marker {
  display: revert;
  content: revert;
  font-size: 1.1em;
}

.filter-card-details summary::-webkit-details-marker {
  display: revert;
}

/* Cancel the sitewide custom chevron background-image; the native marker
   already communicates open/closed state. */
.filter-card-details summary::after {
  content: none;
  background-image: none;
}

.filter-card-details-content {
  padding: 5px 12px;
}

.filter-card__cta-wrap {
  margin-top: 8px;
}

[data-filter-item][hidden] {
  display: none;
}

/* The card itself is not the grid item — it's wrapped in a
   .field_item.flex_item div that grid-container actually places. Hiding
   only the inner card leaves that wrapper's grid cell reserved and empty,
   so collapse the wrapper too whenever its card is hidden. */
.flex_item:has(> [data-filter-item][hidden]) {
  display: none;
}