/* Search page styles */

.search-hero {
  position: relative;
  padding-top: 150px;
  padding-bottom: 110px;
  background:
    linear-gradient(120deg, hsla(200, 69%, 14%, 0.87), hsla(9, 100%, 62%, 0.62)),
    url("../images/hero-banner.png") center/cover no-repeat;
}

.search-hero .section-subtitle {
  margin-inline: auto;
  background: hsla(0, 0%, 100%, 0.2);
  color: var(--white);
}

.search-title {
  color: var(--white);
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 24px;
}

.search-panel {
  max-width: 760px;
  margin-inline: auto;
  background: hsla(0, 0%, 100%, 0.95);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 16px;
}

.search-label {
  display: block;
  color: var(--raisin-black-1);
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  margin-bottom: 10px;
}

.search-field-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid hsl(0, 0%, 85%);
  border-radius: 10px;
  padding-inline: 12px;
  background: var(--white);
}

.search-field-wrap ion-icon {
  color: var(--orange-soda);
  font-size: 20px;
}

.search-field-wrap input {
  width: 100%;
  border: none;
  padding-block: 14px;
  color: var(--raisin-black-1);
  font-size: var(--fs-5);
  font-family: var(--ff-nunito-sans);
}

.search-field-wrap input:focus {
  outline: none;
}

.search-results {
  background: var(--cultured-2);
  padding-top: 75px;
}

.search-section-title {
  margin-bottom: 10px;
}

.search-meta {
  color: var(--cadet);
  text-align: center;
  margin-bottom: 26px;
}

.property-grid {
  display: grid;
  gap: 24px;
}

.no-results {
  margin-top: 24px;
  text-align: center;
  font-size: var(--fs-5);
  color: var(--cadet);
  background: var(--white);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow-1);
}

@media (min-width: 768px) {
  .search-panel {
    padding: 18px;
  }

  .property-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .property-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}