/* La vetrina pubblica.
 *
 * Foglio a sé e non quello del backoffice: qui l'unica cosa che conta
 * sono le immagini, e la pagina la vede gente che non ha mai sentito
 * nominare zeroCAM. I colori sono quelli del marchio.
 */

:root {
  --turchese: #0f9e9e;
  --inchiostro: #0b0b0b;
  --grigio: #52514e;
  --fondo: #fbfbfa;
  --carta: #ffffff;
  --bordo: #e6e5e2;
}

/* Il marchio è nero su fondo chiaro: al buio si inverte tutto, altrimenti
   la vetrina sarebbe l'unica pagina accecante di una sera. */
@media (prefers-color-scheme: dark) {
  :root {
    --inchiostro: #f2f2f0;
    --grigio: #a7a6a2;
    --fondo: #131313;
    --carta: #1c1c1c;
    --bordo: #2c2c2c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.top {
  text-align: center;
  padding: 40px 24px 8px;
}

/* Il marchio esteso è largo più del triplo della sua altezza: si vincola
   l'altezza e si lascia libera la larghezza. Sotto i 30px il payoff non è
   più leggibile, quindi non si scende sotto. */
.mark {
  height: 56px;
  width: auto;
  max-width: 90vw;
}

@media (prefers-color-scheme: dark) {
  /* Il logo è nero: su fondo scuro va schiarito invece di sostituirlo,
     così resta un file solo. */
  .mark { filter: invert(1) hue-rotate(180deg); }
}

.claim {
  color: var(--grigio);
  font-size: 15px;
  margin: 14px 0 0;
}

main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px;
}

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.card {
  margin: 0;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  overflow: hidden;
}

.card img {
  cursor: zoom-in;
  width: 100%;
  /* Rapporto fisso: le camere non hanno tutte la stessa risoluzione, e
     senza questo la griglia salterebbe mentre le immagini arrivano. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bordo);
  display: block;
}

/* Occupa lo stesso spazio dell'immagine che sostituisce, altrimenti la
   griglia si scompone appena una camera non risponde. */
.card .assente {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
  background: var(--bordo);
  color: var(--grigio);
  font-size: 14px;
}

.card .assente[hidden] { display: none; }

.card figcaption {
  padding: 12px 14px;
  font-size: 14.5px;
  border-top: 1px solid var(--bordo);
}

.pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 36px 0 8px;
  font-size: 15px;
}

.pages a { color: var(--turchese); text-decoration: none; }
.pages a:hover { text-decoration: underline; }
.pages .off { color: var(--bordo); }
.pages .of { color: var(--grigio); }

.empty, .foot {
  text-align: center;
  color: var(--grigio);
  font-size: 14px;
}

.empty { padding: 80px 0; }
.foot { padding: 32px 24px 48px; }

/* L'ingrandimento. Il <dialog> di suo è una scatoletta bianca al centro:
   qui diventa una cornice che si adatta all'immagine senza mai uscire
   dallo schermo, in altezza come in larghezza. */
#zoom {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
  overflow: visible;
  color: #f2f2f0;
  cursor: zoom-out;
}

#zoom::backdrop { background: rgba(0, 0, 0, .86); }

#zoom img {
  display: block;
  /* Meno lo spazio della didascalia, o su schermi bassi la taglierebbe. */
  max-height: calc(96vh - 44px);
  max-width: 96vw;
  width: auto;
  height: auto;
  border-radius: 8px;
}

#zoom .didascalia {
  margin: 12px 0 0;
  text-align: center;
  font-size: 15px;
}

#zoom .didascalia:empty { display: none; }