/**
 * Wyszukiwarka mieszkań (Figma "wyszukiwarka-mieszkan" node 237:7134
 * desktop / "wyszukiwarka-mieszkan-mobile" node 282:7018 mobile, file
 * psb03DxWhlw0g7kvzWHAKt). Page-specific sections only used on
 * wyszukiwarka.php — same split as home.css / o-nas.css / wizualizacje.css.
 *
 * The filter form uses one shared markup for both breakpoints (a straight
 * CSS Grid reflow: 3 columns desktop, 1 column mobile) rather than the
 * dual-markup pattern used elsewhere on the site — the field content and
 * order are identical between Figma's mobile and desktop frames here, so
 * it's a genuine responsive reflow, not two different compositions.
 * Segmented controls (Pokoje/Piętro) and the Status pills are real
 * radio/checkbox inputs styled to look like Figma's segmented buttons —
 * functional without JS, submitted as normal GET params.
 *
 * Kontakt at the bottom of the page reuses contact-form.php directly (same
 * as O nas / Wizualizacje) — no new CSS for it.
 *
 * Known Figma inconsistency, encoded as-is: the results card's status
 * badge is a filled light-gray pill on desktop but an outlined pill on
 * mobile (see search-card.php); specs show icons on desktop only.
 */

/* Navbar floats transparently over the hero photo — unlike .page-home /
   .page-o-nas this applies at both breakpoints, since Figma's mobile frame
   also positions the navbar absolutely over its hero (no in-flow mobile
   navbar variant exists for this page). */
.page-wyszukiwarka .site-navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* Sticky-after-hero (2026-08-25) — see .page-home in home.css for the full
   rationale; components.css holds the shared .site-navbar--stuck animation.
   Wrapped in the desktop breakpoint (unlike the overlay rule above, which
   applies at every width for this page) since main.js only ever adds
   .site-navbar--stuck on desktop — this guard is just belt-and-suspenders
   in case that ever changes. */
@media (min-width: 992px) {
  .page-wyszukiwarka .site-navbar.site-navbar--stuck {
    position: fixed;
  }
}

/* ---------- Hero + floating filter card ----------
   The hero fills the viewport height and lays out as a column: the
   eyebrow/heading centers in the remaining space, the filter panel sits
   pinned at the bottom with a small gap — so filters are visible on load
   with no scrolling needed, "hugging" the bottom of the screen per user
   feedback (previously the filter panel lived in normal document flow
   below a large fixed-aspect-ratio hero and only overlapped it by
   60-80px, so on most viewports it sat below the fold). */
.search-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* min-height (not height): normally fills exactly one viewport so the
     filter panel needs no scrolling, but on short phones (iPhone SE class,
     ~650-700px tall) the filter panel's own content doesn't compress any
     further — see .search-filters below — so this section grows past one
     viewport there instead of forcing an internal scrollbar onto the
     filter panel itself. A little whole-page scroll on the shortest
     phones beats a confusing nested scroll area. */
  min-height: 100vh;
  min-height: 100dvh;
}

.search-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-hero__tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(64, 81, 59, 0.65);
}

.search-hero__content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  margin: 0 auto;
  /* top padding reserves space for the absolutely-positioned navbar
     overlaid on the hero (.page-wyszukiwarka .site-navbar) — without it,
     centering this box vertically let the heading land underneath/behind
     the mobile navbar's collapsed pill on short viewports. */
  padding: 148px 24px 16px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-align: center;
}

.search-hero__eyebrow {
  margin: 0;
  font-size: 14px;
}

.search-hero__heading {
  margin: 0;
  font-family: var(--font-family-hero-heading);
  font-weight: var(--fw-regular);
  font-size: 30px;
  line-height: normal;
}

.search-filters {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: 0 20px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
  padding: 14px;
}

@media (min-width: 992px) {
  .search-hero__content {
    padding: 24px;
    gap: 12px;
  }

  .search-hero__eyebrow {
    font-size: 20px;
  }

  .search-hero__heading {
    font-size: 64px;
    max-width: 1160px;
  }
}

.search-filters__grid {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr: a plain 1fr track's automatic minimum
     size is its content's min-content width, so fields with wide-ish
     content (the range inputs' UA-default intrinsic width, the segmented
     control labels) were forcing the column — and the whole card — wider
     than the viewport, clipping every field's right edge. minmax(0, 1fr)
     removes that automatic minimum, letting the track (and everything in
     it) actually shrink to fit. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.search-filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.search-filters__label {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 14px;
}

.search-filters__range {
  display: flex;
  gap: 8px;
}

.search-filters__range input {
  flex: 1;
  min-width: 0;
  background: var(--color-bg);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  font-size: 13px;
}

.search-filters__range input::placeholder {
  color: var(--color-primary);
  opacity: 1;
}

.search-filters__segmented {
  display: flex;
  gap: 4px;
  background: var(--color-bg);
  border-radius: 8px;
  padding: 4px;
}

.search-filters__radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.search-filters__segmented label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 6px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}

.search-filters__radio-input:checked + label {
  background: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: 14px;
}

.search-filters__status {
  display: flex;
  gap: 8px;
}

.search-filters__checkbox-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.search-filters__status label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-bg);
  border-radius: 8px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  font-size: 13px;
  cursor: pointer;
}

.search-filters__status label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg);
}

.search-filters__checkbox-input:checked + label {
  border-color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.search-filters__checkbox-input:checked + label::before {
  background: var(--color-primary);
}

.search-filters__submit {
  width: 100%;
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 8px;
  padding: 14px 24px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 14px;
  cursor: pointer;
}

@media (min-width: 992px) {
  .search-filters {
    /* 1320px, not the old 1400px — unified with the site-wide standard
       column width (see .section-column in base.css); 1400 had no
       documented reason to differ. */
    max-width: 1320px;
    margin: 0 auto;
    /* Normal gap from the hero's bottom edge at 1920x1080 (32px, since
       1080 * 0.02963 = 32) — grows proportionally past that viewport
       height, same mechanism as .mieszkanie-stats on mieszkanie.php, so
       the panel doesn't hug the screen's bottom edge on 2K/4K displays. */
    margin-bottom: max(32px, 2.963vh);
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
  }

  .search-filters__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: end;
  }

  .search-filters__label {
    font-size: 20px;
  }

  .search-filters__range input {
    font-size: 16px;
    font-weight: var(--fw-regular);
  }

  .search-filters__segmented label,
  .search-filters__status label {
    font-size: 20px;
    padding: 8px 12px;
  }

  .search-filters__radio-input:checked + label {
    font-size: 20px;
  }

  .search-filters__status label {
    padding: 10px 16px;
  }

  .search-filters__submit {
    padding: 14px 24px;
    font-size: 20px;
    border-radius: 8px;
  }
}

/* ---------- Results ---------- */
/* 1320px, not the old 1400px — see the note on .search-filters above. */
.search-results {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 20px;
}

.search-results__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.search-results__heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--font-family-base);
}

.search-results__heading strong {
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 24px;
}

.search-results__count {
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  font-size: 16px;
}

.search-results__sort {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
}

.search-results__sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-bg);
  border-radius: 30px;
  padding: 8px 16px;
  background: none;
  font-family: var(--font-family-base);
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.search-results__sort-toggle:hover,
.search-results__sort-toggle:focus-visible {
  border-color: var(--color-primary);
}

.search-results__sort-toggle[aria-expanded="true"] img {
  /* Rotate the chevron to point up while the list is open, same idea as
     the wizualizacje/mobile-menu chevrons elsewhere on the site. */
  transform: rotate(180deg);
}

.search-results__sort-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  white-space: nowrap;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0px 8px 24px rgba(17, 17, 26, 0.12);
}

.search-results__sort-list[hidden] {
  display: none;
}

.search-results__sort-list a {
  display: block;
  padding: 8px 20px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: 14px;
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
}

.search-results__sort-list a:hover {
  background: var(--color-bg);
}

.search-results__sort-list a.is-active {
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.search-results__sort-label {
  font-weight: var(--fw-medium);
  font-size: 13px;
}

.search-results__sort-value {
  font-weight: var(--fw-bold);
  font-size: 14px;
}

.search-results__sort img {
  /* Matches the SVG's own intrinsic ratio (13.34 x 7.67) — a forced
     square box (was 24x24) stretched this wide, short chevron into a
     tall arrow instead of scaling it proportionally (2026-09-08 fix). */
  width: 14px;
  height: 8px;
}

.search-results__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.search-results__empty {
  color: var(--color-secondary);
}

@media (min-width: 992px) {
  .search-results {
    padding: 60px 32px;
  }

  .search-results__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .search-results__heading strong {
    font-size: 38px;
  }

  .search-results__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

/* ---------- Search card ---------- */
.search-card__media {
  overflow: hidden;
}

.search-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-card--mobile {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 32px;
  overflow: hidden;
}

.search-card--mobile .search-card__media {
  aspect-ratio: 4 / 3;
}

.search-card--mobile .search-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.search-card--mobile .search-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.search-card--mobile .search-card__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 20px;
}

.search-card--mobile .search-card__floor {
  margin: 4px 0 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  font-size: 14px;
}

.search-card--mobile .search-card__badge {
  flex-shrink: 0;
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 6px 12px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-size: 14px;
  white-space: nowrap;
}

.search-card__specs-grid {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.search-card__specs-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-card__stat-label {
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  font-size: 13px;
}

.search-card__stat-value {
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 14px;
}

.search-card--mobile .search-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-bg);
  padding-top: 8px;
}

.search-card--mobile .search-card__price-value {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-size: 20px;
}

/* Desktop */
.search-card--desktop {
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-bg);
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

@media (min-width: 992px) {
  .search-card--desktop .search-card__media {
    aspect-ratio: 680 / 320;
  }

  .search-card--desktop .search-card__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
  }

  .search-card--desktop .search-card__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .search-card--desktop .search-card__title {
    margin: 0;
    font-family: var(--font-family-base);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    font-size: 24px;
  }

  .search-card--desktop .search-card__badge {
    background: var(--color-bg);
    border-radius: 100px;
    padding: 6px 12px;
    font-family: var(--font-family-base);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    font-size: 20px;
    white-space: nowrap;
  }

  .search-card__divider {
    height: 1px;
    background: var(--color-bg);
  }

  .search-card__specs {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .search-card__spec {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-base);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    font-size: 20px;
    white-space: nowrap;
  }

  .search-card__spec img {
    width: 24px;
    height: 24px;
  }

  .search-card--desktop .search-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .search-card__price-label {
    margin: 0;
    font-family: var(--font-family-base);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    font-size: 20px;
  }

  .search-card--desktop .search-card__price-value {
    margin: 0;
    font-family: var(--font-family-base);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    font-size: 24px;
  }

}