/* =============================================
   PROPERTIES CATALOGUE — parameter filter
   Loaded per-page via $extra_css (properties.php), after the main chain.
   Markup: includes/properties/property-filter.php
   Driver: assets/js/property-filter.js

   One bar under the banner: a field per facet in the contact form's idiom
   (small uppercase label, underlined field, terracotta on focus), then a
   count / clear line. On mobile the whole bar leaves the flow and becomes a
   bottom drawer, opened from a fixed filter button in the bottom-right
   corner (see the media query at the end).
   ============================================= */

/* The script sets html.js-propfilter first thing. Until then the whole block
   stays out of the page, so a visitor never meets a control that does nothing. */
html:not(.js-propfilter) .prop-filter,
html:not(.js-propfilter) .prop-filter__backdrop,
html:not(.js-propfilter) .prop-filter__fab {
  display: none;
}

/* `hidden` must beat the grid's own display: grid and the card's reveal
   classes, otherwise a filtered-out card would still hold its cell. */
.prop-catalogue [hidden] {
  display: none !important;
}

.prop-catalogue {
  background-color: var(--color-parchment);
}

/* Shares the grid's horizontal rhythm. */
.prop-filter {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(40px, 5vh, 56px) clamp(48px, 6vw, 96px) 0;
}

/* ---- Head: eyebrow, mobile close ---- */
.prop-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid color-mix(in oklch, var(--color-clay) 22%, transparent);
}

.prop-filter__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-terracotta);
}

/* The drawer's own controls exist only on mobile. */
.prop-filter__close,
.prop-filter__done,
.prop-filter__backdrop,
.prop-filter__fab {
  display: none;
}

/* ---- Fields ---- */
.prop-filter__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md) clamp(32px, 4vw, 64px);
  align-items: end;
  min-height: 0;
  padding: var(--space-md) 0;
}

.prop-filter__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Legends float so the browser stops rendering them as fieldset captions
   and lets them flow like the labels beside them. */
.prop-filter__group-label {
  display: block;
  float: left;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

/* Dropdowns: the contact form's underlined field. */
.prop-filter__select-wrap {
  position: relative;
  clear: both;
}

.prop-filter__select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: clamp(10px, 1.4vh, 14px) 32px clamp(10px, 1.4vh, 14px) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--color-charcoal);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--color-charcoal) 28%, transparent);
  border-radius: 0;
  outline: none;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.2s ease-out;
}

.prop-filter__select:hover,
.prop-filter__select:focus-visible {
  border-bottom-color: var(--color-terracotta);
}

.prop-filter__select-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-terracotta);
  pointer-events: none;
}

/* ---- Foot: count, clear ---- */
.prop-filter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid color-mix(in oklch, var(--color-clay) 22%, transparent);
}

.prop-filter__count {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-clay);
  font-variant-numeric: tabular-nums;
}

/* .cta-link on a button: strip the button chrome, keep its underline. */
.prop-filter__reset {
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
}

/* ---- Filtered-to-nothing ---- */
.prop-filter__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.prop-filter__empty-text {
  margin: 0;
}

.prop-filter__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  margin: 0;
}

/* Never stack a second empty state's padding on top of the grid's. */
.prop-catalogue__grid[hidden] + .prop-filter__empty {
  padding-top: clamp(48px, 6vh, 80px);
}

/* ---- Reveal ---- */
.prop-filter.animate-pending {
  opacity: 0;
  transform: translateY(22px);
}

.prop-filter.in-view {
  animation: fade-up var(--anim-base) var(--ease-spring) both;
}

/* =============================================
   Mobile (<=767px): the bar becomes a bottom drawer
   The section leaves the flow entirely and waits below the viewport; a fixed
   filter button in the bottom-right corner slides it up over a dimmed page.
   State lives on .prop-filter.is-open (set by property-filter.js); the
   backdrop and button are the section's next siblings and follow it with ~.
   ============================================= */
@media (max-width: 767px) {
  /* The drawer sits above the sticky nav (100) and below its menu (200). */
  .prop-filter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    max-height: 85dvh;
    max-width: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-parchment);
    border-top: 1px solid color-mix(in oklch, var(--color-clay) 35%, transparent);
    visibility: hidden;
    transform: translateY(100%);
    transition:
      transform calc(var(--anim-quick) / 3) var(--ease-spring),
      visibility 0s linear calc(var(--anim-quick) / 3);
  }

  /* Out of the flow, the drawer is no longer a scroll reveal: it must not be
     pre-hidden (a fixed element below the viewport never intersects, so the
     pending state would never lift) and must not animate on open. */
  .prop-filter.animate-pending {
    opacity: 1;
    transform: translateY(100%);
  }

  .prop-filter.in-view {
    animation: none;
  }

  .prop-filter.is-open {
    visibility: visible;
    transform: translateY(0);
    transition: transform calc(var(--anim-quick) / 3) var(--ease-spring);
  }

  .prop-filter__head {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
  }

  .prop-filter__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px -12px -10px 0;   /* keep the head's height that of its eyebrow */
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-terracotta);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .prop-filter__close i {
    font-size: 20px;
  }

  .prop-filter__close:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 2px;
  }

  /* The only part that scrolls when the fields outgrow the sheet. */
  .prop-filter__fields {
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .prop-filter__foot {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  }

  .prop-filter__done {
    display: block;
    flex-basis: 100%;
    min-height: 48px;
    margin: var(--space-xs) 0 0;
    padding: 0 var(--space-sm);
    border: 0;
    border-radius: var(--radius-sm);
    background-color: var(--color-terracotta);
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-parchment);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .prop-filter__done:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 2px;
  }

  /* ---- Backdrop ---- */
  .prop-filter__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 145;
    background-color: color-mix(in oklch, var(--color-obsidian) 45%, transparent);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity calc(var(--anim-quick) / 3) ease-out,
      visibility 0s linear calc(var(--anim-quick) / 3);
  }

  .prop-filter.is-open ~ .prop-filter__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity calc(var(--anim-quick) / 3) ease-out;
  }

  /* ---- Filter button: fixed in the bottom-right corner ---- */
  .prop-filter__fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: calc(var(--space-sm) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    z-index: 140;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: var(--color-terracotta);
    color: var(--color-parchment);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease-out;
  }

  .prop-filter__fab i {
    font-size: 22px;
  }

  .prop-filter__fab:active {
    background-color: var(--color-caramel);
  }

  .prop-filter__fab:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 3px;
  }

  /* Active-filter count, pinned to the button's corner. */
  .prop-filter__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-family: var(--font-sans);
    font-size: var(--fs-label-sm);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-terracotta);
    background-color: var(--color-parchment);
    border: 1px solid var(--color-terracotta);
    border-radius: var(--radius-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prop-filter.animate-pending { opacity: 1; transform: none; }
  .prop-filter.in-view { animation: none; }

  .prop-filter,
  .prop-filter__backdrop,
  .prop-filter__select {
    transition: none;
  }
}

/* The reveal override above would also un-offset the closed drawer. */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .prop-filter.animate-pending:not(.is-open) { transform: translateY(100%); }
}