/*
 * Filtered catalog hero
 *
 * Long SEO headings and breadcrumbs must stay in the copy column instead of
 * extending underneath the absolutely positioned map.
 */
.catalog-page .catalog-hero.has-filter-labels .hero-copy,
.catalog-page .catalog-hero.has-filter-labels .breadcrumbs {
  width: min(716px, calc(50vw - 112px));
  max-width: 100%;
}

.catalog-page .catalog-hero.has-filter-labels .breadcrumbs {
  flex-wrap: wrap;
  row-gap: 8px;
}

.catalog-page .catalog-hero.has-filter-labels .hero-copy h1 {
  width: 100%;
  max-width: 100%;
  font-size: clamp(42px, 4.7vw, 78px);
  line-height: .9;
  overflow-wrap: break-word;
  text-wrap: balance;
}

@media (max-width: 1180px) {
  .catalog-page .catalog-hero.has-filter-labels .hero-copy,
  .catalog-page .catalog-hero.has-filter-labels .breadcrumbs {
    width: 100%;
  }

  .catalog-page .catalog-hero.has-filter-labels .hero-copy {
    min-height: 0;
  }

  .catalog-page .catalog-hero.has-filter-labels .map-card {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: 330px;
    margin-top: 28px;
  }
}

@media (max-width: 760px) {
  .catalog-page .catalog-hero.has-filter-labels .hero-copy,
  .catalog-page .catalog-hero.has-filter-labels .breadcrumbs {
    width: 100%;
  }

  .catalog-page .catalog-hero .filter-panel.has-selected-settlement:not(.is-expanded) {
    min-height: 190px;
    grid-template-rows: 40px 40px minmax(26px, auto) 44px;
  }

  .catalog-page .catalog-hero .filter-panel.has-selected-settlement:not(.is-expanded) > .filter-select:nth-of-type(3) {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .catalog-page .catalog-hero .filter-panel.has-selected-settlement:not(.is-expanded) > .filter-reset,
  .catalog-page .catalog-hero .filter-panel.has-selected-settlement:not(.is-expanded) > .filter-more-toggle {
    grid-row: 3;
  }

  .catalog-page .catalog-hero .filter-panel.has-selected-settlement:not(.is-expanded) > .filter-actions {
    grid-row: 4;
  }

  .catalog-page .catalog-hero.has-filter-labels .hero-copy h1 {
    font-size: clamp(34px, 10vw, 40px);
    line-height: .88;
  }

  .catalog-page .catalog-hero.has-filter-labels .map-card {
    height: 194px;
    margin-top: 24px;
  }
}