/* Escursioni: la riga delle vie nella scheda dell'elenco, e la scheda della meta che prende il
   posto dell'elenco nella barra, con la linguetta «Sentieri» (escursioni.js). */

.luogo-vie { display: block; font-size: .78rem; color: var(--abete-chiaro); font-weight: 500; margin-top: 4px; }

/* la scheda della meta: lo stesso articolo del popup, a tutta larghezza nella barra */
.pannello-meta { padding: 0; }
.pannello-meta .pop { padding: 12px 24px 24px; }
.pannello-meta .pop-foto { margin: 0 -24px 12px; }
.pannello-meta .pop-foto img { height: 190px; border-radius: 0; }
.meta-indietro {
  display: block; margin: 14px 24px 0; padding: 4px 0;
  border: 0; background: none; cursor: pointer;
  font: 700 .82rem var(--fonte-testo); color: var(--abete-chiaro);
}
.meta-indietro:hover { color: var(--inchiostro); }

.pop .vie { list-style: none; margin: 0 0 8px; padding: 0; }
.pop .via {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid var(--granito-scuro);
  font-size: .82rem; line-height: 1.45; cursor: pointer;
}
.pop .via:hover { background: var(--granito-scuro); }
.pop .via.accesa { background: #fff; box-shadow: inset 0 0 0 1px var(--granito-scuro); }
.via-colore { flex: none; width: 5px; align-self: stretch; border-radius: 3px; }
.via-corpo { flex: 1; min-width: 0; }
.via-testa { display: block; font-weight: 700; }
.via-quota { font-weight: 400; color: var(--roccia); }
.via-numeri { display: block; color: var(--inchiostro); }
.via-diff {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  font: 700 .68rem var(--fonte-testo); background: var(--abete); color: var(--granito);
}
.pop .via-auto { display: inline-block; margin-top: 3px; font-size: .78rem; }
.pop .via .stella { font-size: 1.3rem; align-self: center; }

/* selettore Difficoltà · Durata · Zona sopra l'elenco delle escursioni */
.elenco-barra:has(.ordina) { justify-content: space-between; align-items: center; gap: 8px; }
.ordina { display: inline-flex; border: 1px solid var(--granito-scuro); border-radius: 8px; overflow: hidden; }
.ordina button {
  border: 0; background: none; padding: 5px 10px; cursor: pointer;
  font: 600 .78rem var(--fonte-testo); color: var(--roccia);
}
.ordina button + button { border-left: 1px solid var(--granito-scuro); }
.ordina button[aria-pressed="true"] { background: var(--abete); color: var(--granito); }
.ordina button:focus-visible { outline: 2px solid var(--larice); outline-offset: -2px; }
.ordina-nota { font-size: .76rem; line-height: 1.45; color: var(--roccia); margin: 0 0 14px; }
.luogo-nome .icona-tema { margin-right: 2px; }