/* ==========================================================================
   MXW Property Manager — Our Properties grid + filters
   Uses the theme's design tokens where present, with fallbacks so the plugin
   still renders sensibly if activated against another theme.
   ========================================================================== */

.mxw-properties {
  --pm-gutter: var(--mxw-gutter, 20px);
  --pm-radius: var(--mxw-radius-md, 7px);
  --pm-rule:   var(--mxw-rule, rgba(255, 255, 255, 0.3));
  --pm-text:   var(--mxw-text, #d7e6f0);
  --pm-accent: var(--mxw-lime, #abec46);

  position: relative;
  color: var(--pm-text);
}

/* ---- Heading + filter row ------------------------------------------------ */

/* Heading sits in column 1 and the three filters in columns 2-4, so each
   filter lines up with the card column it acts on. */
.mxw-properties__bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pm-gutter);
  align-items: start;
  margin-bottom: var(--mxw-space-5, 20px);
}

.mxw-properties__heading {
  margin: 0;
  align-self: center;
}

.mxw-filter-group {
  position: relative;
}

.mxw-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mxw-space-3, 12px);
  width: 100%;
  padding: 0 var(--mxw-space-3, 12px) 9px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--pm-rule);
  font-family: var(--mxw-font-text, inherit);
  font-size: var(--mxw-fs-body, 16px);
  line-height: var(--mxw-lh-body, 22px);
  color: var(--pm-text);
  text-align: left;
  cursor: pointer;
}

.mxw-filter:hover,
.mxw-filter:focus-visible {
  color: var(--pm-accent);
}

.mxw-filter__label {
  display: inline-flex;
  align-items: center;
  gap: var(--mxw-space-2, 8px);
}

.mxw-filter__badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--pm-accent);
  color: var(--mxw-navy-ink, #040a41);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

.mxw-filter__chevron {
  flex: none;
  transition: transform 0.18s ease;
}

.mxw-filter[aria-expanded="true"] .mxw-filter__chevron {
  transform: rotate(180deg);
}

/* ---- Dropdown panel ------------------------------------------------------ */

.mxw-filter__panel {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--mxw-space-2, 8px) 0;
  background: var(--mxw-surface-menu, rgba(215, 230, 240, 0.95));
  backdrop-filter: blur(var(--mxw-blur-menu, 4.2px));
  -webkit-backdrop-filter: blur(var(--mxw-blur-menu, 4.2px));
  border-bottom-left-radius: var(--mxw-radius-sm, 5px);
  border-bottom-right-radius: var(--mxw-radius-sm, 5px);
  color: var(--mxw-ink, #01010a);
  box-shadow: 0 10px 24px rgba(1, 1, 10, 0.25);
}

.mxw-filter__panel[hidden] {
  display: none;
}

.mxw-filter__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mxw-filter__item > label {
  display: flex;
  align-items: center;
  gap: var(--mxw-space-2, 8px);
  padding: 5px var(--mxw-space-3, 12px);
  cursor: pointer;
  font-size: var(--mxw-fs-body, 16px);
  line-height: var(--mxw-lh-body, 22px);
}

.mxw-filter__item:hover > label {
  background: rgba(1, 1, 10, 0.06);
}

.mxw-filter__name {
  flex: 1 1 auto;
}

.mxw-count {
  flex: none;
  opacity: var(--mxw-opacity-dim, 0.5);
  font-variant-numeric: tabular-nums;
}

.mxw-filter__item.is-empty > label {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- Grid ---------------------------------------------------------------- */

.mxw-properties__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pm-gutter);
  align-items: start;
}

.mxw-properties.is-loading .mxw-properties__grid {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.mxw-properties__empty {
  grid-column: 1 / -1;
  padding: var(--mxw-space-10, 48px) 0;
  text-align: center;
}

/* ---- Card ---------------------------------------------------------------- */

.mxw-property-card {
  display: flex;
  flex-direction: column;
  gap: var(--mxw-space-4, 16px);
  height: 100%;
  padding: var(--mxw-card-pad, 28px);
  background: var(--mxw-surface-card, rgba(255, 255, 255, 0.18));
  border-radius: var(--pm-radius);
}

.mxw-property-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mxw-property-card__title {
  margin: 0 0 var(--mxw-space-2, 8px);
}

.mxw-property-card__title a:hover,
.mxw-property-card__title a:focus-visible {
  color: var(--pm-accent);
}

.mxw-property-card__size,
.mxw-property-card__location {
  opacity: 0.85;
}

.mxw-property-card__media {
  display: block;
  margin-top: auto;
}

.mxw-property-card__placeholder {
  display: block;
  aspect-ratio: 267 / 224;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--mxw-radius-sm, 5px);
}

.mxw-property-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mxw-space-3, 12px);
}

.mxw-property-card__actions .mxw-btn {
  flex: 0 1 auto;
}

/* ---- Footer row ---------------------------------------------------------- */

.mxw-properties__foot {
  display: flex;
  align-items: center;
  gap: var(--mxw-space-6, 24px);
  margin-top: var(--mxw-space-5, 20px);
}

.mxw-properties__showing {
  font-size: var(--mxw-fs-body, 16px);
  line-height: var(--mxw-lh-body, 22px);
  opacity: 0.85;
}

.mxw-properties__more,
.mxw-properties__clear {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  /* `font: inherit` above resets line-height, which would drop these below the
     24px minimum target size. Restore it after the shorthand. */
  line-height: 24px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mxw-properties__more:hover,
.mxw-properties__clear:hover,
.mxw-properties__more:focus-visible,
.mxw-properties__clear:focus-visible {
  color: var(--pm-accent);
}

.mxw-properties__clear {
  margin-left: auto;
}

.mxw-properties__more[hidden],
.mxw-properties__clear[hidden] {
  display: none;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .mxw-properties__bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mxw-properties__heading {
    grid-column: 1 / -1;
    margin-bottom: var(--mxw-space-2, 8px);
  }
  .mxw-properties__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mxw-properties__bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .mxw-properties__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mxw-properties__foot {
    flex-wrap: wrap;
    gap: var(--mxw-space-3, 12px);
  }
  .mxw-properties__clear {
    margin-left: 0;
  }
}