/* JoomGallery Code – visualizzazione sul sito (responsive) */
.jgcode { margin: 1.5rem 0; }
.jgcode img {
  display: block;
  max-width: 100%;
  height: auto;
}
.jgcode a { display: block; }
.jgcode figcaption { font-size: .875em; opacity: .8; margin-top: .4rem; }

/* Immagine singola: larga quanto l'immagine, mai più del contenitore */
.jgcode-image {
  width: var(--jgcode-w, fit-content);
  max-width: 100%;
}
.jgcode-image img { width: 100%; }
/* la didascalia va a capo alla larghezza dell'immagine */
.jgcode-image figcaption { contain: inline-size; }

.jgcode-align-center { margin-inline: auto; text-align: center; }
.jgcode-align-left { float: left; margin: .25rem 1.25rem 1rem 0; max-width: 50%; }
.jgcode-align-right { float: right; margin: .25rem 0 1rem 1.25rem; max-width: 50%; }

/* Gallerie: colonne diverse per desktop, tablet e telefono */
.jgcode-cat-title { margin: 0 0 .75rem; }
.jgcode-grid {
  display: grid;
  grid-template-columns: repeat(var(--jgcode-cols, 4), minmax(0, 1fr));
  gap: clamp(.4rem, 1.5vw, .75rem);
}
.jgcode-item { margin: 0; min-width: 0; }
.jgcode-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

@media (max-width: 991px) {
  .jgcode-grid { grid-template-columns: repeat(var(--jgcode-cols-md, 3), minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .jgcode-align-left, .jgcode-align-right {
    float: none;
    margin: 1rem auto;
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .jgcode-grid { grid-template-columns: repeat(var(--jgcode-cols-sm, 2), minmax(0, 1fr)); }
}

/* lightbox */
.jgcode-lb {
  border: 0; padding: 0; margin: auto;
  max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh;
  background: transparent; color: #fff;
}
.jgcode-lb::backdrop { background: rgba(10, 12, 16, .92); }
.jgcode-lb-inner {
  height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center;
  padding: 3rem 4rem 1.25rem;
}
.jgcode-lb img {
  max-width: 100%;
  max-height: calc(100dvh - 7rem);
  width: auto; height: auto;
  object-fit: contain;
}
.jgcode-lb-caption { margin: .75rem 0 0; font-size: .95rem; text-align: center; }
.jgcode-lb button {
  position: absolute; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  font-size: 1.4rem; line-height: 1;
}
.jgcode-lb button:hover, .jgcode-lb button:focus-visible { background: rgba(255, 255, 255, .28); }
.jgcode-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jgcode-lb-close { top: 1rem; right: 1rem; }
.jgcode-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.jgcode-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .jgcode-lb-inner { padding: 3.5rem .5rem 4.5rem; }
  .jgcode-lb-prev, .jgcode-lb-next { top: auto; bottom: 1rem; transform: none; }
}