/* RC88 · Tesori — barra dei filtri, interruttore elenco/mappa e carta.
   monuments.css descrive le schede; qui c'è solo quello che serve ai comandi
   nuovi: provincia, ordinamento, il passaggio elenco/mappa e la mappa con i
   segnaposti. I colori sono quelli della sezione: verde bosco, oro, crema. */

.monuments-toolbar {
  grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(128px, 0.72fr));
}

.monuments-toolbar label {
  min-width: 0;
}

.monuments-toolbar input,
.monuments-toolbar select {
  width: 100%;
  min-height: 44px;
}

/* Interruttore elenco / mappa e comando della posizione. */
.monuments-viewbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 0;
}

.monuments-viewswitch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #ddcfbb;
  border-radius: 999px;
  background: #fffaf0;
}

.monuments-viewswitch button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4a3826;
  font: 800 13px/1 system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.monuments-viewswitch button:hover {
  background: #f3ead9;
}

.monuments-viewswitch button.is-active {
  background: #203b38;
  color: #fff8ec;
}

.monuments-viewswitch button:focus-visible,
.monuments-locate:focus-visible {
  outline: 3px solid rgba(224, 163, 60, 0.55);
  outline-offset: 2px;
}

.monuments-locate {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #c9dbd1;
  border-radius: 999px;
  background: #f2f7f4;
  color: #203b38;
  font: 800 13px/1 system-ui, sans-serif;
  cursor: pointer;
}

.monuments-locate:hover {
  background: #e6f0ea;
}

.monuments-locate:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* La carta prende il posto della griglia, senza far saltare la pagina. */
.monuments-map-host {
  margin: 16px 0 0;
}

.monuments-map-host[hidden] {
  display: none !important;
}

.monuments-map-canvas {
  width: 100%;
  height: min(66vh, 620px);
  min-height: 340px;
  overflow: hidden;
  border: 1px solid #ddcfbb;
  border-radius: 20px;
  background: #efe6d8;
}

.monuments-map-note {
  min-height: 20px;
  margin: 8px 2px 0;
  color: #6b5b4a;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.4;
}

/* Nuvoletta del segnaposto: nome, luogo e il comando per la scheda. */
.monuments-map-popup {
  display: grid;
  gap: 4px;
  font-family: system-ui, sans-serif;
}

.monuments-map-popup-place {
  margin: 0;
  color: #8a7a66;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monuments-map-popup strong {
  color: #203b38;
  font: 800 1rem/1.2 Georgia, serif;
}

.monuments-map-popup-type {
  margin: 0;
  color: #6b5b4a;
  font-size: 0.8rem;
}

.monuments-map-popup button {
  margin-top: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #203b38;
  color: #fff8ec;
  font: 800 0.82rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.monuments-map-popup button:hover {
  background: #2f5a4e;
}

.monuments-map-popup button:focus-visible {
  outline: 3px solid rgba(224, 163, 60, 0.55);
  outline-offset: 2px;
}

.leaflet-container {
  font-family: system-ui, sans-serif;
}

@media (max-width: 1080px) {
  .monuments-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monuments-toolbar-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 780px) {
  .monuments-toolbar {
    grid-template-columns: 1fr;
  }

  .monuments-viewbar {
    gap: 8px;
  }

  .monuments-viewswitch {
    flex: 1 1 100%;
    justify-content: center;
  }

  .monuments-viewswitch button {
    flex: 1 1 auto;
  }

  .monuments-locate {
    flex: 1 1 100%;
  }
}

@media (max-width: 640px) {
  .monuments-map-canvas {
    height: 58vh;
    min-height: 300px;
    border-radius: 16px;
  }
}