/* Harmony Properties final correction layer.
 * This file deliberately resolves late-version conflicts without changing the
 * approved visual language or introducing a second design system.
 */

/* Homepage hero hierarchy: brand first, slogan second. */
.home-hero__content h1,
.home-hero h1 {
  margin: 0;
  font-size: clamp(2.7rem, 4.6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.home-hero__slogan {
  display: block;
  margin: 12px 0 0;
  color: inherit;
  font-size: clamp(1.35rem, 2.15vw, 2rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
}

/* Desktop hero: restore the shared page gutter and keep both client faces in frame. */
@media (min-width: 768px) {
  .home-hero__inner.container {
    width: min(calc(100% - 96px), 1240px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .home-hero__media img {
    object-position: 50% 32% !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .home-hero__inner.container {
    width: calc(100% - 56px) !important;
  }
}

/* Area cards stay text-led and use exactly one centred location marker. */
.area-discovery__grid > a .area-discovery__icon {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--orange) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transform: none !important;
}

.area-discovery__grid > a .area-discovery__icon::before,
.area-discovery__grid > a .area-discovery__icon::after,
.area-discovery__grid > a .area-discovery__icon .line-icon::before,
.area-discovery__grid > a .area-discovery__icon .line-icon::after {
  display: none !important;
  content: none !important;
}

.area-discovery__grid > a .area-discovery__icon .line-icon {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.area-discovery__grid > a .area-discovery__icon svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  transform: none !important;
}

/* For-sale filters: one balanced row, with actions on a calm second line. */
.desktop-filter-panel .listing-controls {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: end !important;
  padding: 24px !important;
}

.desktop-filter-panel .listing-control-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  margin: 0 !important;
  padding-top: 4px !important;
}

.desktop-filter-panel .listing-control-actions .button {
  min-width: 220px;
}

/* Questionnaire: one question per row, recognisable controls, no giant fields. */
.questionnaire-layout {
  width: min(100% - 40px, 900px) !important;
  margin-inline: auto !important;
}

.questionnaire-panel {
  padding: clamp(24px, 4vw, 42px) !important;
}

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

.questionnaire-grid > * {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.choice-grid,
.choice-grid--three,
.choice-grid--four {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.choice-grid label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 13px 15px !important;
  text-align: start !important;
}

.choice-grid input[type="checkbox"],
.choice-grid input[type="radio"] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 0 !important;
}

.questionnaire-form input:not([type="checkbox"]):not([type="radio"]),
.questionnaire-form select,
.questionnaire-form textarea {
  min-height: 52px !important;
}

/* Arabic needs its own natural rhythm, not mirrored English spacing. */
[dir="rtl"] .home-hero__content,
[dir="rtl"] .questionnaire-hero__inner,
[dir="rtl"] .questionnaire-form,
[dir="rtl"] .area-discovery__grid > a {
  text-align: right;
}

@media (max-width: 1000px) {
  .desktop-filter-panel .listing-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .home-hero__content h1,
  .home-hero h1 {
    font-size: clamp(2.25rem, 10.2vw, 3rem);
  }

  .home-hero__slogan {
    margin-top: 9px;
    font-size: 1.22rem;
  }

  .desktop-filter-panel .listing-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 18px !important;
  }

  .desktop-filter-panel .listing-control-actions {
    align-items: stretch !important;
    gap: 14px !important;
  }

  .desktop-filter-panel .listing-control-actions .button {
    min-width: 0;
  }

  .questionnaire-layout {
    width: min(100% - 28px, 900px) !important;
  }

  .questionnaire-panel {
    padding: 22px 18px !important;
  }
}