/*
 * Correção responsiva do mapa público do marketplace.
 * Escopo deliberadamente limitado a .directory-page para não alterar o mapa
 * operacional/autenticado da Quero Locar.
 */
.directory-page .map.mapboxgl-map {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  contain: layout paint;
  transform: translateZ(0);
}

.directory-page .map.mapboxgl-map > .mapboxgl-canvas-container,
.directory-page .map.mapboxgl-map > .mapboxgl-control-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.directory-page .map .mapboxgl-canvas-container {
  overflow: hidden !important;
}

.directory-page .map .mapboxgl-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  max-width: none !important;
}

/* O transform aplicado pelo Mapbox é a fonte de verdade do posicionamento. */
.directory-page .map .mapboxgl-marker {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  z-index: 2;
  will-change: transform;
}

.directory-page .map .mapboxgl-popup {
  position: absolute !important;
  z-index: 5;
}

.directory-page .map .mapboxgl-ctrl-top-right,
.directory-page .map .mapboxgl-ctrl-top-left,
.directory-page .map .mapboxgl-ctrl-bottom-right,
.directory-page .map .mapboxgl-ctrl-bottom-left {
  position: absolute !important;
}

@media (max-width: 860px) {
  .directory-page {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
    padding: 20px 12px 32px !important;
  }

  .directory-page .hero {
    margin-bottom: 24px;
  }

  .directory-page .topbar {
    gap: 10px;
    margin-bottom: 24px;
  }

  .directory-page .hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }

  .directory-page .hero > p {
    font-size: .94rem;
    line-height: 1.5;
  }

  .directory-page .city-search {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    padding: 9px;
  }

  .directory-page .city-search label {
    min-width: 0;
    padding-inline: 7px;
  }

  .directory-page .city-search input {
    width: 100%;
    min-width: 0;
    font-size: 1rem;
  }

  .directory-page .city-search button {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-height: 50px;
    margin-top: 3px;
  }

  .directory-page .content-grid {
    display: block !important;
    width: 100%;
    max-width: 100%;
  }

  .directory-page .map-card,
  .directory-page .list-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .directory-page .map-card {
    position: relative !important;
    top: auto !important;
    padding: 18px 14px !important;
    overflow: hidden;
  }

  .directory-page .section-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .directory-page .count {
    align-self: flex-start;
  }

  .directory-page .map-legend {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .directory-page .map-message {
    margin-top: 14px !important;
    padding: 12px 13px !important;
    line-height: 1.45;
  }

  .directory-page .map.mapboxgl-map {
    height: 340px !important;
    min-height: 340px !important;
    margin-top: 14px !important;
    border-radius: 18px !important;
  }

  .directory-page .map .mapboxgl-ctrl-group button {
    width: 34px;
    height: 34px;
    padding: 0;
  }

  .directory-page .privacy-note {
    margin: 12px 2px 0 !important;
    font-size: .75rem !important;
  }

  .directory-page .list-card {
    margin-top: 18px;
    padding-inline: 16px !important;
  }

  .directory-page .locator-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px 0 !important;
  }

  .directory-page .locator-monogram {
    width: 44px !important;
    height: 44px !important;
  }

  .directory-page .card-title-row {
    align-items: flex-start !important;
  }

  .directory-page .public-locator-marker {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }
}

@media (max-width: 420px) {
  .directory-page {
    padding-inline: 9px !important;
  }

  .directory-page .map-card {
    padding-inline: 12px !important;
  }

  .directory-page .map.mapboxgl-map {
    height: 315px !important;
    min-height: 315px !important;
  }

  .directory-page .nav-actions {
    font-size: .75rem;
  }
}