/* Il panorama dal rifugio (js/panorama.js). In un foglio suo e non in
   rifugio.css: rifugio.css entra con la sua impronta in tutte le pagine, e
   toccarlo per un prototipo spento cambierebbe quattrocento pagine. */

/* `hidden` vale anche contro le regole di questo foglio: `display: flex` sui
   comandi batteva l'attributo, e senza JavaScript data, «Oggi» e la casella
   della luce del sole si vedevano e non facevano niente. */
.bs-panorama [hidden] { display: none !important; }

.bs-panorama__vista {
  position: relative;
  height: clamp(340px, 46vw, 440px);
  margin: 1rem 0 0;
  border-radius: var(--bs-radius-md, 14px);
  overflow: hidden;
  background: #E7F1FA;
  /* Il trascinamento orizzontale è del panorama, quello verticale resta
     della pagina: su un telefono chi scorre la pagina non deve restare
     impigliato nel panorama. Il pizzico arriva al visore. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.bs-panorama__vista:active { cursor: grabbing; }
/* Il riquadro prenotato mentre arrivano i dati (`apri` in js/panorama.js). */
.bs-panorama__vista.is-attesa::after {
  content: "Carico il panorama…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--bs-ink-3, #8A857F);
  font-size: 0.92rem;
  pointer-events: none;
}
/* Ingranditi, il trascinamento verticale guarda su e giù: il riquadro prende
   anche quel gesto, e la pagina si scorre toccando fuori. */
.bs-panorama__vista.is-zoom { touch-action: none; }
.bs-panorama__vista:focus-visible { outline: 3px solid var(--bs-primary, #D9512C); outline-offset: 3px; }
.bs-panorama__vista canvas { display: block; width: 100%; height: 100%; }

.bs-panorama__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bs-panorama__zoom button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bs-line, rgba(27,24,20,0.08));
  background: rgba(255, 255, 255, 0.92);
  color: var(--bs-ink, #1B1814);
  font: 600 20px/1 var(--bs-body, system-ui, sans-serif);
  cursor: pointer;
}
.bs-panorama__zoom button:active { background: #fff; }
.bs-panorama__zoom button:focus-visible { outline: 3px solid var(--bs-primary, #D9512C); outline-offset: 2px; }

.bs-panorama__aiuto { margin: 0.4rem 0 0; }
.bs-panorama__sole {
  margin: 0.8rem 0 0.4rem;
  font-weight: 600;
  min-height: 1.5em;
}
.bs-panorama__comandi :disabled { opacity: 0.55; cursor: default; }

.bs-panorama__comandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.92rem;
  color: var(--bs-ink-2, #5A5651);
}
.bs-panorama__comandi label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; }
.bs-panorama__comandi input[type="date"] {
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--bs-line, rgba(27,24,20,0.12));
  border-radius: 8px;
  background: var(--bs-surface, #fff);
  color: inherit;
}
.bs-panorama__oggi {
  font: inherit;
  min-height: 40px;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--bs-line, rgba(27,24,20,0.12));
  border-radius: var(--bs-radius-pill, 999px);
  background: var(--bs-surface, #fff);
  color: inherit;
  cursor: pointer;
}

.bs-panorama__nota:empty { display: none; }
.bs-panorama__elenco { margin: 0.8rem 0 0.4rem; }
.bs-panorama__elenco summary { cursor: pointer; font-weight: 600; }
.bs-panorama__elenco ol { margin: 0.5rem 0 0; padding-left: 1.4rem; columns: 2 18rem; column-gap: 2rem; }
.bs-panorama__elenco li { break-inside: avoid; margin: 0.15rem 0; }
.bs-panorama__altre { margin: 0.6rem 0 0; }
.bs-panorama__altre summary { font-weight: 400; }
.bs-panorama__crediti { margin-top: 0.4rem; }
/* Come ogni altro credito della pagina (la didascalia della foto, le fonti,
   la mappa): sottolineato. Senza, i due collegamenti ai crediti si leggevano
   come testo, e ora la sezione sta fuori dalla colonna dove le regole della
   pagina li sottolineano. */
.bs-panorama__crediti a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Senza JavaScript, dove il panorama fa da copertina: la sua anteprima. */
.bs-panorama__anteprima {
  display: block;
  width: 100%;
  height: auto;
  margin: 1rem 0 0;
  border-radius: var(--bs-radius-md, 14px);
}

/* Il posto nella pagina (v3, decisione del 26/09): subito sotto la foto, o in
   cima al posto della foto quando la foto non c'è. Fuori dalla colonna del
   testo, largo quanto la foto: a 776 px le catene lontane stavano in una
   striscia, a 1.160 hanno un terzo di spazio in più. */
.rf-container > .bs-panorama { margin-bottom: 40px; }
.rf-hero + .bs-panorama { padding-top: 0; }
.bs-panorama--copertina { padding-top: 0; }
.bs-panorama--copertina h2 { margin-top: 0; }