/**
 * Apartment browser — filter sidebar plus results grid.
 *
 * Geometry matches the production page: a 1560px canvas split 24/76. The left
 * column — the "მოძებნე ფილტრით" title cell and the filter panel under it — is
 * one dark panel that bleeds to the viewport's left edge and runs the full
 * height of the browser, so the split is carried by the change of ground rather
 * than by a rule. On wide screens the filter form sticks under the header and
 * scrolls on its own; below 64rem the title and filters stack into a single
 * dark block above the toolbar and the results.
 *
 * Every colour inside the panel comes from the --deka-browser-panel-* set on
 * .deka-browser, so the brand layer re-points the palette without restating
 * any rule here.
 */

/* ==========================================================================
   Page frame
   ========================================================================== */

.deka-browser {
  /* Filter panel palette. Defaults read the theme's inverse surface; lines and
     fills are translucent ink so they sit on whatever that surface is. */
  --deka-browser-panel: var(--deka-surface-inverse);
  --deka-browser-panel-text: var(--deka-text-on-inverse);
  --deka-browser-panel-muted: rgb(255 255 255 / 72%);   /* section titles, reset */
  --deka-browser-panel-line: rgb(255 255 255 / 16%);    /* hairlines, slider track */
  --deka-browser-panel-edge: rgb(255 255 255 / 26%);    /* control outlines, scrollbar */
  --deka-browser-panel-option-edge: rgb(255 255 255 / 7%); /* project / bedroom / block tiles: barely there */
  --deka-browser-panel-hover: rgb(255 255 255 / 60%);   /* hovered outline */
  --deka-browser-panel-control: rgb(255 255 255 / 4%);  /* resting control fill */
  --deka-browser-panel-accent: var(--deka-white);       /* active fill, focus ring */
  --deka-browser-panel-accent-text: var(--deka-surface-inverse); /* label on the active fill */

  width: 100%;
  max-width: var(--deka-container-wide);
  margin-inline: auto;
  padding-inline: var(--deka-gutter);
  padding-block: var(--deka-space-lg) var(--deka-space-3xl);
  font-family: var(--deka-font-body);
  color: var(--deka-text);
}

/* The two rows share one column ruler, so the title cell sits exactly over the
   filter panel and the two read as one column. */
.deka-browser__bar,
.deka-browser__main {
  display: grid;
  grid-template-columns: 24% 76%;
  align-items: stretch;
}

.deka-browser__bar {
  min-height: 50px;
}

/* The rule under the bar belongs to the toolbar cell only; under the title it
   would cut a light line across the dark column. */
.deka-browser__bar-tools {
  border-bottom: 1px solid var(--deka-divider-warm);
}

/* --- The dark column --------------------------------------------------------
   A spread shadow paints the panel out to the viewport's left edge without
   adding scrollable overflow; clip-path keeps it to that side only. Inside the
   panel the focus ring is re-pointed at the accent, since the page's own ring
   is drawn for a light ground. */
.deka-browser__bar-title,
.deka-browser__sidebar {
  --deka-focus-ring: var(--deka-browser-panel-accent);
  min-width: 0;
  padding-right: var(--deka-space-lg);
  background: var(--deka-browser-panel);
  box-shadow: 0 0 0 100vmax var(--deka-browser-panel);
  clip-path: inset(0 0 0 -100vmax);
  color: var(--deka-browser-panel-text);
}

.deka-browser__bar-tools,
.deka-browser__results {
  padding-left: var(--deka-space-lg);
  min-width: 0; /* lets the grid track shrink instead of overflowing */
}

.deka-browser__bar-title {
  display: flex;
  align-items: center;
  min-height: 50px;
  border-bottom: 1px solid var(--deka-browser-panel-line);
}

.deka-browser__title {
  font-family: var(--deka-font-display);
  font-size: 1.25rem; /* 20 */
  font-weight: var(--deka-weight-medium);
  line-height: 1.2;
  color: var(--deka-browser-panel-text);
}

.deka-browser__sidebar {
  padding-top: var(--deka-space-lg);
  padding-bottom: var(--deka-space-lg);
}

.deka-browser__results {
  padding-top: var(--deka-space-lg);
}

.deka-browser--unavailable {
  padding-block: var(--deka-space-3xl);
  text-align: center;
  color: var(--deka-text-muted);
}

/* ==========================================================================
   Toolbar: currency, chips, sort
   ========================================================================== */

/* No vertical padding: the bar is a fixed 50px, and the tallest control here
   (the currency switch, 36px) sits inside that. Chips still wrap and grow the
   row when a lot of filters are active. */
.deka-browser__bar-tools {
  display: flex;
  align-items: center;
  gap: var(--deka-space-md);
  flex-wrap: wrap;
}

.deka-browser__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--deka-space-2xs);
  flex: 1;
  min-width: 0;
}

/* --- Currency switch: see components/currency.css (shared with the
   apartment price block) ------------------------------------------------- */

/* --- Filter chips --------------------------------------------------------- */

.deka-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--deka-space-2xs);
  max-width: 100%;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--deka-action);
  border-radius: var(--deka-radius-lg);
  background: transparent;
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  color: var(--deka-text-brand);
}

.deka-chip__label {
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deka-chip__remove {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--deka-action);
  color: var(--deka-action-text);
  cursor: pointer;
  transition: transform var(--deka-duration-fast) var(--deka-ease-out),
              background-color var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-chip__remove svg { width: 8px; height: 8px; }
.deka-chip__remove:hover { transform: scale(1.1); background: var(--deka-oxblood-900); }

.deka-browser__clear {
  padding: 4px 12px;
  border: 1px solid var(--deka-border);
  border-radius: var(--deka-radius-lg);
  background: transparent;
  font-family: inherit;
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  color: var(--deka-text-subtle);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--deka-duration-base) var(--deka-ease-out),
              border-color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-browser__clear:hover {
  border-color: var(--deka-action);
  color: var(--deka-text-brand);
}

/* --- Sort ----------------------------------------------------------------- */

.deka-sort {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.deka-sort__trigger {
  display: flex;
  align-items: center;
  gap: var(--deka-space-2xs);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  color: var(--deka-text);
  white-space: nowrap;
  cursor: pointer;
}

.deka-sort__trigger:hover { color: var(--deka-text-brand); }

.deka-sort__icon {
  width: 16px;
  height: 16px;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-sort.is-open .deka-sort__icon { transform: rotate(180deg); }

.deka-sort__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--deka-z-dropdown);
  min-width: 280px;
  padding: var(--deka-space-2xs);
  border: 2px solid var(--deka-action);
  border-radius: var(--deka-radius-sm);
  background: var(--deka-surface-raised);
  box-shadow: var(--deka-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--deka-duration-base) var(--deka-ease-out),
              transform var(--deka-duration-base) var(--deka-ease-out),
              visibility var(--deka-duration-base);
}

.deka-sort.is-open .deka-sort__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.deka-sort__option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--deka-radius-xs);
  background: transparent;
  font-family: inherit;
  font-size: var(--deka-text-sm);
  text-align: left;
  color: var(--deka-text);
  cursor: pointer;
  transition: background-color var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-sort__option:hover { background: var(--deka-surface-tint); }

.deka-sort__option[aria-selected='true'] {
  background: var(--deka-surface-tint);
  color: var(--deka-text-brand);
  font-weight: var(--deka-weight-semibold);
}

/* ==========================================================================
   Filter panel
   Sits on the dark column. Every colour comes from --deka-browser-panel-*:
   hairlines and outlines are translucent ink, the active state is the accent
   fill with its own label colour, and hover only strengthens the outline — a
   lift and drop shadow read as nothing on a dark ground.
   ========================================================================== */

.deka-filters__section {
  margin-bottom: var(--deka-space-xl);
  padding-bottom: var(--deka-space-xl);
  border-bottom: 1px solid var(--deka-browser-panel-line);
}

.deka-filters__section:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
}

.deka-filters__title {
  margin: 0 0 var(--deka-space-2xs);
  font-family: var(--deka-font-display);
  font-size: 1rem; /* 16 */
  font-weight: var(--deka-weight-semibold);
  line-height: 1.3;
  color: var(--deka-browser-panel-muted);
}

/* --- Project picker ------------------------------------------------------- */

/* Two to a row only while a tile can hold a project mark: the column is 24%
   of the frame, and below ~1400px two tiles were narrower than the marks they
   carry, which spilled into the neighbouring tile. */
.deka-filters__projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--deka-space-sm);
  margin-top: var(--deka-space-sm);
}

.deka-filters__project {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 60px;
  padding: var(--deka-space-xs);
  border: 1px solid var(--deka-browser-panel-option-edge);
  border-radius: var(--deka-radius-xs);
  background: var(--deka-browser-panel-control);
  color: var(--deka-browser-panel-text);
  overflow: hidden; /* a mark longer than any tile is cut, never laid over the next one */
  cursor: pointer;
  transition: border-color var(--deka-duration-base) var(--deka-ease-out),
              background-color var(--deka-duration-base) var(--deka-ease-out),
              box-shadow var(--deka-duration-base) var(--deka-ease-out);
}

.deka-filters__project:hover { border-color: var(--deka-browser-panel-hover); }

/* Selected is an accent frame (2px: border plus an inset ring) over a faint
   accent wash, not an accent fill: the project marks carry the accent colour
   themselves and would disappear into it. */
.deka-filters__project.is-selected,
.deka-filters__project[aria-pressed='true'] {
  border-color: var(--deka-browser-panel-accent);
  background: var(--deka-browser-panel-control);
  background: color-mix(in srgb, var(--deka-browser-panel-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--deka-browser-panel-accent);
}

.deka-filters__project-logo {
  max-width: 100%;
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

.deka-filters__project-name {
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-semibold);
  text-align: center;
  text-transform: uppercase;
}

/* --- Checkbox options ----------------------------------------------------- */

.deka-filters__options {
  display: grid;
  gap: var(--deka-space-xs);
  margin-top: var(--deka-space-sm);
}

.deka-filters__options--inline { grid-template-columns: repeat(3, 1fr); }

/* Bedrooms: two to a row, so "1 საძინებელი" and "2 საძინებელი" sit side by side. */
.deka-filters__options--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.deka-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--deka-space-xs);
  width: 100%;
  padding: var(--deka-space-sm) var(--deka-space-lg);
  border: 1px solid var(--deka-browser-panel-option-edge);
  border-radius: var(--deka-radius-xs);
  background: var(--deka-browser-panel-control);
  color: var(--deka-browser-panel-text);
  cursor: pointer;
  transition: border-color var(--deka-duration-base) var(--deka-ease-out),
              background-color var(--deka-duration-base) var(--deka-ease-out),
              color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-option:hover { border-color: var(--deka-browser-panel-hover); }

.deka-option.is-selected {
  border-color: var(--deka-browser-panel-accent);
  background: var(--deka-browser-panel-accent);
  color: var(--deka-browser-panel-accent-text);
}

/* Kept in the layout but invisible, so it stays focusable and form-submittable. */
.deka-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.deka-option__marker {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--deka-browser-panel-muted);
  border-radius: 50%;
  transition: border-color var(--deka-duration-base) var(--deka-ease-out),
              background-color var(--deka-duration-base) var(--deka-ease-out);
}

/* Checked: the marker turns the label colour and shows an accent dot, so it
   still reads as a tick on the accent fill. */
.deka-option__marker::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--deka-browser-panel-accent);
  opacity: 0;
  transition: opacity var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-option.is-selected .deka-option__marker {
  border-color: var(--deka-browser-panel-accent-text);
  background: var(--deka-browser-panel-accent-text);
}

.deka-option.is-selected .deka-option__marker::after { opacity: 1; }

.deka-option__input:focus-visible + .deka-option__marker {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 2px;
}

/* Where :has() is available the ring goes round the whole option instead: on
   a selected option the marker sits on the accent, where an accent ring round
   the marker alone would not show. */
@supports selector(:has(*)) {
  .deka-option__input:focus-visible + .deka-option__marker { outline: 0; }

  .deka-option:has(.deka-option__input:focus-visible) {
    outline: 2px solid var(--deka-focus-ring);
    outline-offset: 2px;
  }
}

.deka-option__label {
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  text-transform: uppercase;
  line-height: 1.2;
}

/* --- Range sliders -------------------------------------------------------- */

.deka-range {
  padding-block: 10px;
  margin-top: var(--deka-space-2xs);
}

.deka-range__values {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--deka-space-xs);
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--deka-browser-panel-text);
}

/* Inset by half a handle (the handles are 18px), so the fill runs from handle
   centre to handle centre. Full width, the fill ran out past the top handle
   whenever the step stops it short of the maximum (see topStep() in the JS),
   which showed as a stub of accent beyond the handle. */
.deka-range__track {
  position: relative;
  height: 3px;
  margin-inline: 9px;
  border-radius: 3px;
  background: var(--deka-browser-panel-line);
}

.deka-range__fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--deka-browser-panel-accent);
}

/* The two inputs overlap the track; only their thumbs take pointer events, so
   whichever handle is under the cursor is the one that moves. */
.deka-range__inputs {
  position: relative;
  height: 28px;
  margin-top: -14px;
}

.deka-range__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

/* With scripts, range-drag.js moves the handles from anywhere on the row —
   the native thumbs cannot be dragged by touch on iOS. A vertical swipe over
   the row still scrolls the panel. */
.deka-js .deka-range__inputs {
  touch-action: pan-y;
  cursor: pointer;
}

.deka-js .deka-range__inputs.is-dragging { cursor: grabbing; }

.deka-js .deka-range__input::-webkit-slider-thumb { pointer-events: none; }
.deka-js .deka-range__input::-moz-range-thumb { pointer-events: none; }

/* The focused handle carries the ring (below); a second ring round the whole
   full-width input would not say which of the two handles has focus. */
.deka-range__input:focus-visible { outline: 0; }

.deka-range__input::-webkit-slider-runnable-track { height: 3px; background: transparent; }
.deka-range__input::-moz-range-track { height: 3px; background: transparent; }

/* Light handles ringed in the panel colour, so they stand clear of the accent
   fill they sit on. */
.deka-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border: 3px solid var(--deka-browser-panel);
  border-radius: 50%;
  background: var(--deka-browser-panel-text);
  box-shadow: none;
  cursor: grab;
  pointer-events: auto;
  transition: transform var(--deka-duration-fast) var(--deka-ease-out),
              box-shadow var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-range__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--deka-browser-panel);
  border-radius: 50%;
  background: var(--deka-browser-panel-text);
  box-shadow: none;
  cursor: grab;
  pointer-events: auto;
}

.deka-range__input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.deka-range__input:active::-webkit-slider-thumb { cursor: grabbing; }
.deka-range__input:active::-moz-range-thumb { cursor: grabbing; }

.deka-range__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--deka-focus-ring);
}

.deka-range__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--deka-focus-ring);
}

/* --- Reset ---------------------------------------------------------------- */

.deka-filters__reset {
  display: block;
  width: 100%;
  margin-top: var(--deka-space-md);
  padding: 0 0 var(--deka-space-xs);
  border: 0;
  background: transparent;
  font-family: var(--deka-font-display);
  font-size: 0.8125rem; /* 13 */
  font-weight: var(--deka-weight-medium);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--deka-browser-panel-edge);
  text-underline-offset: 3px;
  color: var(--deka-browser-panel-muted);
  cursor: pointer;
  transition: color var(--deka-duration-base) var(--deka-ease-out),
              text-decoration-color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-filters__reset:hover {
  color: var(--deka-browser-panel-text);
  text-decoration-color: currentColor;
}

/* Only rendered without JavaScript: the primary action of the panel, so the
   accent fill; it inverts to the panel's text colour on hover. */
.deka-filters__submit {
  width: 100%;
  margin-top: var(--deka-space-md);
  padding: var(--deka-space-xs);
  border: 0;
  border-radius: var(--deka-radius-xs);
  background: var(--deka-browser-panel-accent);
  color: var(--deka-browser-panel-accent-text);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--deka-duration-base) var(--deka-ease-out),
              color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-filters__submit:hover {
  background: var(--deka-browser-panel-text);
  color: var(--deka-browser-panel);
}

/* ==========================================================================
   Results
   ========================================================================== */

.deka-results__count {
  margin: 0 0 var(--deka-space-md);
  font-size: var(--deka-text-sm);
  color: var(--deka-text-muted);
}

.deka-results__count strong {
  font-weight: var(--deka-weight-semibold);
  color: var(--deka-text);
}

.deka-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--deka-space-md);
}

/*
 * Ruled grid: no gaps, neighbouring cards share one 1px line. The grid draws
 * the top and left rules and every card its right and bottom ones, so each
 * line stays single at any column count (3, 2 or 1). Doubled scope: outranks
 * the brand layer's boxed card (.deka-brand .deka-card and its hover).
 *
 * Hover can no longer recolour the card's own border — half its edges belong
 * to its neighbours — so a frame is laid exactly over the four shared lines
 * instead (::after, 1px out on every side).
 */
.deka-browser .deka-results__grid {
  --deka-results-rule: var(--dk-concrete, var(--deka-border-card));
  --deka-results-hover: var(--dk-black, var(--deka-action));
  gap: 0;
  border-top: 1px solid var(--deka-results-rule);
  border-left: 1px solid var(--deka-results-rule);
}

.deka-browser .deka-results__grid > .deka-card {
  border: 0;
  border-right: 1px solid var(--deka-results-rule);
  border-bottom: 1px solid var(--deka-results-rule);
  padding: clamp(1.125rem, 0.75rem + 0.8vw, 1.625rem);
}

.deka-browser .deka-results__grid > .deka-card:hover { border-color: var(--deka-results-rule); }

.deka-browser .deka-results__grid > .deka-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 3;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-browser .deka-results__grid > .deka-card:hover::after { border-color: var(--deka-results-hover); }

.deka-results__empty {
  padding: var(--deka-space-3xl) var(--deka-space-lg);
  text-align: center;
}

.deka-results__empty-title {
  margin: 0 0 var(--deka-space-2xs);
  font-family: var(--deka-font-display);
  font-size: var(--deka-text-lg);
  font-weight: var(--deka-weight-semibold);
}

.deka-results__empty-text {
  margin: 0;
  font-size: var(--deka-text-sm);
  color: var(--deka-text-muted);
}

.deka-results__empty-action {
  margin-top: var(--deka-space-md);
  padding: var(--deka-space-xs) var(--deka-space-md);
  border: 0;
  border-radius: var(--deka-radius-xs);
  background: var(--deka-action);
  color: var(--deka-action-text);
  font-family: inherit;
  font-size: var(--deka-text-sm);
  cursor: pointer;
}

.deka-results__more {
  display: flex;
  justify-content: center;
  margin-top: var(--deka-space-xl);
}

.deka-results__load {
  padding: var(--deka-space-xs) var(--deka-space-lg);
  border: 1px solid var(--deka-border);
  border-radius: var(--deka-radius-xs);
  background: transparent;
  font-family: inherit;
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  color: var(--deka-text);
  cursor: pointer;
  transition: border-color var(--deka-duration-base) var(--deka-ease-out),
              color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-results__load:hover { border-color: var(--deka-action); color: var(--deka-text-brand); }
.deka-results__load[disabled] { opacity: 0.5; cursor: default; }

.deka-results__busy {
  display: flex;
  justify-content: center;
  padding: var(--deka-space-lg);
}

.deka-results__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--deka-divider);
  border-top-color: var(--deka-action);
  border-radius: 50%;
  animation: deka-spin 800ms linear infinite;
}

@keyframes deka-spin { to { transform: rotate(360deg); } }

/* Dim rather than blank the grid while a new query is in flight, so the page
   does not jump to zero height and back. */
.deka-results.is-busy .deka-results__grid {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--deka-duration-fast) var(--deka-ease-out);
}

/* ==========================================================================
   Card
   ========================================================================== */

/*
 * Layering inside a card, bottom to top:
 *   1  the inactive drawing
 *   2  the active drawing
 *   3  the stretched link overlay   — must clear both drawings
 *   4  project logo, status badge
 *   5  the 3D/2D switch             — must stay above the link
 *
 * `isolation: isolate` is what makes those numbers mean anything: without a
 * stacking context here they would compete with the rest of the page, and the
 * active drawing (2) painted over the link overlay (1), leaving the largest
 * part of the card unclickable.
 */
.deka-card {
  position: relative;
  isolation: isolate;
  padding: var(--deka-space-md);
  border: 1px solid var(--deka-border-card);
  background: var(--deka-surface-card);
  transition: border-color var(--deka-duration-base) var(--deka-ease-out),
              background-color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-card:hover {
  border-color: var(--deka-action);
  background: rgb(255 255 255 / 60%);
}

/* The footer link is the card's only link, stretched over the whole card. That
   keeps one tab stop and one accessible name per card while leaving the 3D/2D
   buttons — which sit above it — independently clickable. */
.deka-card__link {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

/* Deliberately not positioned itself, so this resolves against .deka-card and
   covers the whole card rather than just the arrow. */
.deka-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

.deka-card:hover .deka-card__arrow { transform: translateX(5px); }

.deka-card__link:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 4px;
}

/* --- Media ---------------------------------------------------------------- */

.deka-card__media {
  position: relative;
  height: 300px;
  margin-bottom: var(--deka-space-sm);
  overflow: hidden;
}

.deka-card__logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100px;
  height: auto;
  object-fit: contain;
}

/* Images are inset from the top so the project logo has clear space above
   them; the plan drawings are wide, so nothing is lost to the offset. */
.deka-card__image {
  position: absolute;
  /* Inset from the top to clear the 3D/2D toggle, and sized to the space that
     leaves. The height has to be stated: an absolutely positioned <img> is a
     replaced element, so `top`/`bottom` alone do not stretch it — it falls back
     to its intrinsic size and collapses to nothing before it loads. Plain
     `height: 100%` is wrong the other way, resolving against the full media box
     so the plan hangs 30px past the bottom and gets clipped. */
  inset: 30px 0 0;
  width: 100%;
  height: calc(100% - 30px);
  object-fit: contain;
  transition: opacity var(--deka-duration-base) var(--deka-ease-out);
}

.deka-card__image--3d { opacity: 1; z-index: 2; }
.deka-card__image--2d { opacity: 0; z-index: 1; }

.deka-card__media--2d .deka-card__image--3d { opacity: 0; z-index: 1; }
.deka-card__media--2d .deka-card__image--2d { opacity: 1; z-index: 2; }

/* --- 3D / 2D switch ------------------------------------------------------- */

.deka-card__view {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 5;
  display: inline-flex;
  padding: 2px;
  /* 1.5px rather than a hairline: this control sits on the white plan drawing
     rather than a tinted panel, and at 1px it read as an edge of the artwork.
     Same weight the header's call button uses. */
  border: 1.5px solid var(--deka-grey-500);
  /* Fully rounded, to match the currency switch. Not `100%`: on a 52x28 box
     that resolves to an inscribed ellipse — curved top and bottom edges with
     pinched corners — rather than the flat-sided capsule intended. The pill
     token clamps to half the height, which is the capsule. */
  border-radius: var(--deka-radius-pill);
  background: var(--deka-surface-raised);
  line-height: 1;
  overflow: hidden;
}

.deka-card__view-pill {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--deka-action);
  transition: transform var(--deka-duration-base) var(--deka-ease-emphasis);
  pointer-events: none;
}

.deka-card__media--2d .deka-card__view-pill { transform: translateX(24px); }

.deka-card__view-btn {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-family: inherit;
  font-size: 10px;
  font-weight: var(--deka-weight-semibold);
  line-height: 1;
  color: var(--deka-text);
  cursor: pointer;
  transition: color var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-card__view-btn--active { color: var(--deka-action-text); }
.deka-card__view-btn:not(.deka-card__view-btn--active):hover { opacity: 0.7; }

/* --- Status --------------------------------------------------------------- */

.deka-card__status {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  padding: 4px 12px;
  border-radius: var(--deka-radius-xs);
  font-size: var(--deka-text-xs);
  font-weight: var(--deka-weight-semibold);
  text-transform: uppercase;
  color: var(--deka-action-text);
  background: var(--deka-status-sold);
}

.deka-card.is-reserved .deka-card__status {
  background: var(--deka-status-reserved);
  color: var(--deka-black);
}

/* --- Rows ----------------------------------------------------------------- */

/* The dividers sit close to the rows they separate: at the original 32px above
   and below, consecutive rows were 65px apart and the card read as three loose
   panels rather than one block of detail. */
.deka-card__headline,
.deka-card__meta {
  padding-bottom: var(--deka-space-sm);
  margin-bottom: var(--deka-space-sm);
  border-bottom: 1px solid var(--deka-divider-card);
}

.deka-card__headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--deka-space-2xs);
}

.deka-card__bedroom,
.deka-card__area {
  font-size: 1rem;
  font-weight: var(--deka-weight-semibold);
}

.deka-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deka-space-sm);
}

.deka-card__meta-item {
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  white-space: nowrap;
}

.deka-card__meta-item--id {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deka-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.deka-card__price {
  font-size: 1rem;
  font-weight: var(--deka-weight-medium);
  font-variant-numeric: tabular-nums;
}

.deka-card__arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

/* The phone rows' unit code, expand control and detail panel (card.php).
   Only the phone layout shows them (apartment-browser-m.css); the grid card
   here and the similar-apartments strip never do. */
.deka-card__code,
.deka-card__toggle,
.deka-card__detail {
  display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 75rem) { /* 1200 */
  .deka-results__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Wide screens: the filter form sticks under the header for as long as the
   results run, and scrolls on its own when it is taller than the viewport
   (it is marked data-lenis-prevent while it overflows, so the wheel reaches
   it rather than Lenis). The negative inline margins hand the form's padding
   back, so the controls do not move: the padding only gives focus rings room
   inside the scroll box, and puts the scrollbar in the column's gutter. */
@media (min-width: 64.0625rem) {
  .deka-filters {
    --deka-browser-sticky-top: var(--deka-header-height);
    position: sticky;
    top: var(--deka-browser-sticky-top);
    max-height: calc(100vh - var(--deka-browser-sticky-top));
    max-height: calc(100dvh - var(--deka-browser-sticky-top));
    margin-inline: calc(var(--deka-space-2xs) * -1) calc(var(--deka-space-xs) * -1);
    padding-inline: var(--deka-space-2xs) var(--deka-space-xs);
    padding-bottom: var(--deka-space-sm);
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: var(--deka-browser-panel-edge) transparent;
  }

  /* Logged in, the fixed header sits below the admin bar (site-header.css). */
  .admin-bar .deka-filters {
    --deka-browser-sticky-top: calc(var(--deka-header-height) + var(--wp-admin--admin-bar--height, 32px));
  }

  /* Engines without scrollbar-color (older Safari) */
  .deka-filters::-webkit-scrollbar { width: 6px; }
  .deka-filters::-webkit-scrollbar-track { background: transparent; }
  .deka-filters::-webkit-scrollbar-thumb { background: var(--deka-browser-panel-edge); }
  .deka-filters::-webkit-scrollbar-thumb:hover { background: var(--deka-browser-panel-hover); }
}

/* 1024 — the sidebar stops being a column. Both rows dissolve into one stack
   so the title cell and the filters can sit together as a single dark block
   (full-bleed on both sides now), with the toolbar moved down to the results
   it controls. */
@media (max-width: 64rem) {
  .deka-browser {
    display: flex;
    flex-direction: column;
  }

  .deka-browser__bar,
  .deka-browser__main {
    display: contents;
  }

  .deka-browser__bar-title { order: 1; }
  .deka-browser__sidebar { order: 2; }
  .deka-browser__bar-tools { order: 3; min-height: 50px; }
  .deka-browser__results { order: 4; }

  .deka-browser__bar-title,
  .deka-browser__sidebar {
    padding-right: 0;
    clip-path: inset(0 -100vmax);
  }

  .deka-browser__bar-tools,
  .deka-browser__results {
    padding-left: 0;
  }

  .deka-sort { margin-left: 0; }
}

@media (max-width: 40rem) { /* 640 */
  .deka-results__grid { grid-template-columns: 1fr; }
  .deka-card__media { height: 220px; }
  .deka-filters__options--inline { grid-template-columns: repeat(2, 1fr); }
}

/* The duration tokens are already collapsed under prefers-reduced-motion, so
   only the movement that is not driven by them needs handling here. */
@media (prefers-reduced-motion: reduce) {
  /* On its own: a vendor pseudo-element in a selector list would void the
     whole list in engines that do not know it. */
  .deka-range__input::-webkit-slider-thumb:hover { transform: none; }

  .deka-card__link:hover .deka-card__arrow,
  .deka-chip__remove:hover {
    transform: none;
  }

  .deka-results__spinner { animation-duration: 2s; }
}