/* Filter bar + full-width card list — directory list View (89).
   Loads on top of directory-listing.css, which owns the card styling the two
   Views share. Nothing here restyles .spdir-card itself. */

/* ── Filter bar ────────────────────────────────────────────── */
.spdir-filters {
  background: var(--color-primary);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  margin-top: -48px;
}

.spdir-filters__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* The form carries GravityView's own .gv-widget-search class, which ships
   `flex-flow: row wrap; justify-content: space-between; margin: 20px -10px`.
   That laid the three filter rows out side by side instead of stacked. Scoped
   one level deeper so it wins on specificity rather than on load order, and
   using the same `flex-flow` shorthand so it can't be half-overridden. */
.spdir-filters .spdir-filters__form {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
}

.spdir-filters__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

/* GravityView core ships `.gv-search-box { flex: 1 1 10em }`, which stretches
   every search control to fill its row. The keyword field opts back into that
   below; the rest size to their content. */
.spdir-filters__form .gv-search-box { flex: 0 1 auto; }

.spdir-filters__clear {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.spdir-filters__clear:hover { color: #fff; }

/* Keyword field keeps growing; the country dropdown stays at its own width. */
.spdir-filters__row--primary .spdir-search__field { flex: 1 1 16em; }
.spdir-filters__row--primary .spdir-search__field--narrow { flex: 0 0 200px; }

/* .spdir-checkpill's shape and active state live in gv-overrides.css, shared
   with the pills in View 63's search header. */

/* ── Filter panel ──────────────────────────────────────────── */
.spdir-filters__caps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.spdir-filters__caps-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.spdir-filters__caps-toggle:hover { color: #fff; }

.spdir-filters__caps-toggle svg { transition: transform .15s; }
.spdir-filters__caps-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.spdir-filters__caps-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #fff;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.spdir-filters__caps-panel {
  display: none;
  margin-top: 10px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,.15);
}

.spdir-filters__caps-panel--open { display: block; }

.spdir-capgroup {
  border: none;
  margin-bottom: 14px;
}
.spdir-capgroup:last-of-type { margin-bottom: 0; }

.spdir-capgroup__legend {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 8px;
}

.spdir-capgroup__options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Shape, colour and active state come from the shared .spdir-pill rule in
   gv-overrides.css. Only the checkbox mechanics live here. */
.spdir-checkpill {
  position: relative;
}

.spdir-checkpill input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
}

.spdir-checkpill:has(input:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.spdir-filters__caps-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.15);
}

.spdir-search__btn--sm {
  height: 34px;
  padding: 0 18px;
  font-size: 13px;
}

/* ── List layout ───────────────────────────────────────────── */
.spdir-list {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 40px;
  min-height: calc(100vh - 200px);
}

/* The cards keep their shared styling; only the container differs from the
   split-panel View, where they sit in a 480px sidebar. */
.spdir-results--list .spdir-card {
  border: 1px solid var(--color-border);
  border-left: 4px solid transparent;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  padding: 18px 22px;
}

.spdir-results--list .spdir-card:hover {
  border-left-color: var(--color-primary-mid);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.spdir-list .spdir-meta {
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  position: static;
  padding: 18px 2px 14px;
}

.spdir-list .spdir-results { padding-top: 14px; }

.spdir-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text-muted);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .spdir-filters__row--primary { flex-wrap: wrap; }
  .spdir-filters__row--primary .spdir-search__field { flex: 1 1 100%; }
  .spdir-filters__row--primary .spdir-search__field--narrow { flex: 1 1 100%; }
  .spdir-filters__row--primary .spdir-search__btn { flex: 1 1 100%; }
}