/*
 * «Tutte le destinazioni».
 *
 * Una pagina-indice: la sua qualità si misura in quanto in fretta si trova
 * un nome in mezzo a duecento. Da qui due scelte che guidano tutto il resto.
 *
 * La griglia si adatta da sé con `auto-fill` e un minimo in `rem`: su un
 * telefono viene una colonna, su un portatile tre o quattro, e non c'è
 * nessuna soglia scritta a mano da tenere allineata al resto del sito.
 *
 * Le sottocategorie stanno in un `<details>`. Da chiuse occupano una riga,
 * da aperte si allargano sotto la propria scheda senza spostare le altre
 * colonne — il contenuto cresce dentro la cella, e la riga della griglia si
 * alza con lui.
 */

.sothra-dest {
  --sd-ink: #1c3548;
  --sd-soft: #5c6f7c;
  --sd-line: #e4ebef;
  --sd-blue: #3d8dc4;
  --sd-blue-soft: #eef5fb;

  padding: 2rem 0 3.5rem;
}

/* --- Testa ---------------------------------------------------------------- */

.sothra-dest__lead {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--sd-soft);
}

.sothra-dest__intro {
  margin: 0 0 0.5rem;
  color: var(--sd-soft);
}

/* --- Il filtro ------------------------------------------------------------
 *
 * Volutamente simile alla barra di ricerca del sito, perché fa un gesto
 * simile — ma non identica: qui non c'è nessun pulsante, e la differenza si
 * deve vedere. Un campo senza pulsante dice «scrivi e guarda», un campo con
 * il pulsante dice «scrivi e premi».
 */

/* -----------------------------------------------------------------------------
 * Due regole di servizio, e il difetto che le ha richieste
 *
 * Questa pagina ha un foglio suo e non carica quello della ricerca: comodo,
 * ma vuol dire che quel che lì è dato per scontato qui non esiste.
 *
 * `.screen-reader-text` è la prima. Il plugin la usa per le etichette scritte
 * per chi non vede lo schermo, e la dichiara dentro i propri contenitori —
 * fra i quali questo non c'era. Risultato: «Filtra le destinazioni per nome»
 * e «Filtro tolto: si vedono tutte le destinazioni» si leggevano in pagina,
 * come testo normale.
 *
 * L'attributo `hidden` è la seconda, e più insidiosa. Vale `display: none`,
 * ma arriva dal foglio del browser: qualunque `display` dichiarato qui lo
 * batte. Il pulsante che svuota il campo nasce `hidden` e aveva
 * `display: inline-flex`, quindi si vedeva sempre — con dentro la propria
 * etichetta, che era quel tondino con le lettere sbilenche accanto al campo.
 * -------------------------------------------------------------------------- */

.sothra-dest .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Una classe in più dei selettori qui sotto, quindi vince senza `!important`
   — e vale per tutto quel che in questa pagina nasce o diventa nascosto. */
.sothra-dest [hidden] {
  display: none;
}

/* --- Filtro e totali sulla stessa riga -------------------------------------
 *
 * I totali stavano sopra il filtro, e in una pagina che è un elenco lungo
 * ogni riga prima del primo elenco è scorrimento in più. Accanto al campo
 * stanno nello spazio che il campo lascia libero.
 */

.sothra-dest__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 1.5rem 0 2.25rem;
}

.sothra-dest__toolbar .sothra-dest__lead {
  margin: 0;
  font-size: 0.9375rem;
}

.sothra-dest__filter {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 34rem;
  margin: 0;
}

.sothra-dest__filter-field {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.125rem;
  background: #fff;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(28, 53, 72, 0.04);
}

.sothra-dest__filter-field:focus-within {
  border-color: var(--sd-blue);
  box-shadow: 0 0 0 3px rgba(61, 141, 196, 0.18);
}

.sothra-dest__filter-icon {
  color: #8a99a3;
  flex: none;
  font-size: 1rem;
  line-height: 1;
}

/*
 * Il campo contro il foglio del tema. Betheme dichiara su
 * `input[type="search"]` una larghezza fissa, un bordo e un margine inferiore
 * — regole che valgono 0,1,1 e che una classe sola non batte. Qui si
 * aggiunge l'elemento al selettore e si arriva a 0,2,1, come già si fa per
 * il campo della barra di ricerca.
 */
.sothra-dest input.sothra-dest__filter-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-color: transparent;
  box-shadow: none;
  font-size: 1rem;
  color: var(--sd-ink);
  line-height: 1.4;
}

.sothra-dest input.sothra-dest__filter-input:focus {
  outline: none;
  border: 0;
  background: none;
  background-color: transparent;
  box-shadow: none;
  color: var(--sd-ink);
}

/* La crocetta che i browser mettono da soli: qui c'è già la nostra. */
.sothra-dest input[type='search']::-webkit-search-decoration,
.sothra-dest input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.sothra-dest__filter-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef2f5;
  color: var(--sd-soft);
  cursor: pointer;
  font-size: 0.75rem;
}

.sothra-dest__filter-clear:hover,
.sothra-dest__filter-clear:focus-visible {
  background: #e0e8ee;
  color: var(--sd-ink);
}

/* --- Macro-aree ----------------------------------------------------------- */

.sothra-dest__macro {
  margin-bottom: 2.75rem;
}

.sothra-dest__macro-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--sd-ink);
}

.sothra-dest__macro-title a {
  color: inherit;
  text-decoration: none;
}

.sothra-dest__macro-title a:hover,
.sothra-dest__macro-title a:focus-visible {
  color: var(--sd-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sothra-dest__macro-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: #8a99a3;
}

.sothra-dest__group {
  margin-top: 1.5rem;
}

.sothra-dest__group-title {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a99a3;
}

.sothra-dest__group-title a {
  color: inherit;
  text-decoration: none;
}

.sothra-dest__group-title a:hover,
.sothra-dest__group-title a:focus-visible {
  color: var(--sd-blue);
}

/* --- La griglia ----------------------------------------------------------- */

.sothra-dest__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;

  /* Una scheda aperta cresce in altezza: le vicine non devono allungarsi
     con lei, o la riga diventa un muro di riquadri vuoti. */
  align-items: start;
}

.sothra-dest__cell {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.sothra-dest__card {
  display: block;
  border: 1px solid var(--sd-line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--sd-ink);
}

a.sothra-dest__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8125rem 1rem;
}

a.sothra-dest__card:hover,
a.sothra-dest__card:focus-visible {
  border-color: var(--sd-blue);
  background: var(--sd-blue-soft);
  text-decoration: none;
  color: var(--sd-ink);
}

.sothra-dest__card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* È l'unico elemento della riga che può cedere spazio: senza `min-width:
     0` un figlio flessibile non scende mai sotto la larghezza del proprio
     contenuto, e sarebbero gli altri a essere spinti fuori. */
  min-width: 0;
  flex: 1 1 auto;
}

.sothra-dest__card-count {
  flex: none;
  font-size: 0.8125rem;
  color: #8a99a3;
  font-variant-numeric: tabular-nums;
}

/* --- La scheda che si apre -------------------------------------------------
 *
 * `<details>` fa il lavoro: apre, chiude, risponde alla tastiera, e il suo
 * contenuto sta nel documento anche da chiuso — quindi lo trovano i motori
 * di ricerca e lo trova il «cerca nella pagina» del browser. Qui si toglie
 * solo il triangolino predefinito, che su ogni browser è diverso.
 */

.sothra-dest__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8125rem 1rem;
  cursor: pointer;
  list-style: none;
}

/* Il conteggio delle guide si stacca dal nome e tiene compagnia al «+N»:
   i tre elementi di destra stanno insieme, il nome prende il resto. */
.sothra-dest__summary .sothra-dest__card-count {
  margin-left: auto;
}

.sothra-dest__summary::-webkit-details-marker {
  display: none;
}

.sothra-dest__summary:hover,
.sothra-dest__card--more[open] > .sothra-dest__summary {
  background: var(--sd-blue-soft);
  border-radius: 11px;
}

.sothra-dest__card--more[open] > .sothra-dest__summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sothra-dest__card--more:focus-within {
  border-color: var(--sd-blue);
}

/*
 * Il «+2»: quante ce ne sono sotto, in due caratteri.
 *
 * Sta prima della freccia e dopo il conteggio delle guide, e i due numeri
 * non si confondono perché dicono due cose con due forme diverse: quello
 * delle guide è nudo e grigio, questo ha il segno davanti e una pastiglia
 * attorno. `flex: none` perché a stringersi sia il nome, non lui — un nome
 * troncato si capisce ancora, un «+» senza numero no.
 */
.sothra-dest__more {
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.1875rem 0.375rem;
  border-radius: 6px;
  background: #e4eef7;
  color: #2f6f9e;
  font-variant-numeric: tabular-nums;
}

/* La freccetta: ruota all'apertura, e il movimento dice da solo cos'è
   successo senza bisogno di cambiare un'etichetta. */
.sothra-dest__chevron {
  flex: none;
  width: 0;
  height: 0;
  margin-left: -0.25rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #8a99a3;
}

@media (prefers-reduced-motion: no-preference) {
  .sothra-dest__chevron {
    transition: transform 0.15s ease;
  }
}

.sothra-dest__card--more[open] .sothra-dest__chevron {
  transform: rotate(180deg);
}

.sothra-dest__sub {
  padding: 0.25rem 1rem 0.875rem;
  border-top: 1px solid var(--sd-line);
}

.sothra-dest__sub-all {
  display: inline-block;
  margin: 0.625rem 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sd-blue);
  text-decoration: none;
}

.sothra-dest__sub-all:hover,
.sothra-dest__sub-all:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sothra-dest__sub-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.125rem;
}

.sothra-dest__sub-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sothra-dest__sub-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--sd-ink);
  text-decoration: none;
}

.sothra-dest__sub-list a:hover,
.sothra-dest__sub-list a:focus-visible {
  background: var(--sd-blue-soft);
  color: var(--sd-blue);
  text-decoration: none;
}

.sothra-dest__sub-count {
  flex: none;
  font-size: 0.75rem;
  color: #8a99a3;
  font-variant-numeric: tabular-nums;
}

/* --- Quando il filtro non trova niente ------------------------------------ */

.sothra-dest__none,
.sothra-dest__empty {
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  border: 1px dashed #cfdae1;
  border-radius: 12px;
  color: var(--sd-soft);
  text-align: center;
}

/* --- Telefono -------------------------------------------------------------
 *
 * La griglia si riduce da sé a una colonna. Qui restano le distanze, che su
 * uno schermo stretto vanno strette anche loro: in una pagina che è un
 * elenco, l'aria fra una voce e l'altra è scorrimento in più.
 */

@media (max-width: 600px) {
  .sothra-dest {
    padding: 1.25rem 0 2.5rem;
  }

  .sothra-dest__macro {
    margin-bottom: 2rem;
  }

  .sothra-dest__toolbar {
    margin: 1rem 0 1.5rem;
    gap: 0.5rem;
  }

  /* Su schermo stretto il campo si prende la riga e i totali vanno sotto:
     affiancati sarebbero due cose strette invece di una comoda. */
  .sothra-dest__filter {
    flex: 1 1 100%;
    max-width: none;
  }

  .sothra-dest__grid {
    grid-template-columns: 1fr;
  }

  a.sothra-dest__card,
  .sothra-dest__summary {
    padding: 0.75rem 0.875rem;
  }
}