/* /search-homes/ -- the internal SABOR ConnectMLS IDX route.
   Scoped to .idx-* so nothing here can reach another page's layout.
   styles.css is not in this repo (it is served from the host), so this file
   defines its own visually-hidden helper rather than assuming one exists. */

.idx-intro {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.25rem;
}

.idx-intro h1 {
  margin: 0.25rem 0 0.75rem;
}

.idx-lede {
  margin: 0;
  max-width: 46rem;
}

.idx-search {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem 1.5rem;
}

.idx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The provider controls the iframe's internal height, so the frame is sized
   against the viewport with a floor tall enough for the filter row plus a row
   of results, and a ceiling so it never outgrows the screen on a tall monitor. */
.idx-frame {
  position: relative;
  width: 100%;
  height: clamp(34rem, 80vh, 60rem);
  border: 1px solid rgba(13, 31, 60, 0.14);
  border-radius: 10px;
  overflow: hidden;
  background: #f6f7f9;
}

.idx-frame__embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.idx-fallback {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}

.idx-next {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

.idx-next h2 {
  margin: 0 0 0.5rem;
}

.idx-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 40rem) {
  .idx-frame {
    height: clamp(30rem, 78vh, 44rem);
    border-radius: 8px;
  }

  .idx-intro {
    padding-top: 1.75rem;
  }
}