/* rm-masonry.css */
/* Masonry via CSS Columns. Box con proporzione naturale dell’immagine. */

.rm-masonry {
  width: 100%;
  --rm-gap: 16px; /* gap orizzontale/verticale */
  -webkit-tap-highlight-color: transparent;
}

.rm-grid {
  column-gap: var(--rm-gap);
  column-fill: balance;
  /* Colonne responsive */
  column-count: 1;
}
@media (min-width: 600px) {
  .rm-grid { column-count: 2; --rm-gap: 16px; }
}
@media (min-width: 900px) {
  .rm-grid { column-count: 3; --rm-gap: 18px; }
}
@media (min-width: 1200px) {
  .rm-grid { column-count: 4; --rm-gap: 20px; }
}

/* Ogni item deve evitare spezzature tra colonne */
.rm-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--rm-gap);
  display: block;
}

/* Card: mantiene la dimensione naturale dell’immagine */
.rm-card {
  position: relative;
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: zoom-in; /* suggerisce l’apertura in lightbox */
  background: #000; /* evita flash su caricamento */
  outline: 0;
}

/* Media: immagine fluida con proporzione originale */
.rm-media {
  display: block;
}
.rm-img {
  display: block;
  width: 100%;
  height: auto;     /* mantiene l'aspect ratio naturale */
  object-fit: contain;
  object-position: center;
}

/* Overlay (riuso delle classi rc-* per uniformità con lo shortcode precedente) */
.rc-overlay,
.rc-overlay-inner {
  pointer-events: none;
}
.rc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 12px;
}
.rc-overlay-inner { max-width: 90%; }

.rc-title {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
}
.rc-meta {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.95;
  color: #fff;
}

/* Hover/focus: mostra overlay */
.rm-card:hover .rc-overlay,
.rm-card:focus .rc-overlay,
.rm-item:focus-within .rc-overlay {
  opacity: 1;
}

/* Focus visibile per tastiera */
.rm-card:focus {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* Riduzione motion */
@media (prefers-reduced-motion: reduce) {
  .rc-overlay { transition: none; }
}

/* Lightbox */
.rc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.8);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rc-lightbox.is-open { display: flex; }
.rc-lightbox__figure { position: relative; margin: 0; max-width: 90vw; max-height: 90vh; }
.rc-lightbox__img {
  width: 100%; height: 100%;
  object-fit: contain; background: #000;
  outline: 10px solid #fff;
  box-shadow: 0 12px 48px rgba(0,0,0,.6);
}
.rc-lightbox__close {
  position: absolute; top: -12px; right: -12px;
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: #fff; color: #000; font-size: 24px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.rc-lightbox__close:hover { filter: brightness(.95); }
.rc-lightbox__close:focus { outline: 2px solid #000; }
body.rc-lightbox-open { overflow: hidden; }