/* ─────────────────────────────────────────────────────────────
   Hero Collage Widget
   ───────────────────────────────────────────────────────────── */

/* Contenitore: relativo e overflow hidden per limitare le immagini assolute */
.hc-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Ogni item è posizionato via regole CSS scoped generate dal PHP.
   Qui solo la base strutturale. */
.hc-item {
  position: absolute;
  cursor: default;
}

/* Cursore pointer se l'item ha un link */
.hc-item:has(a) {
  cursor: pointer;
}

/* ── Fluttuazione ──────────────────────────────────────────────
   .hc-float è il wrapper interno che porta l'animazione e la
   transizione hover. Separarlo da .hc-item evita conflitti fra
   la translate dell'animazione e la scale dell'hover.
   ──────────────────────────────────────────────────────────────*/
.hc-float {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

/* L'immagine gestisce da sola lo zoom: nessun conflitto con l'animazione translate */
.hc-img {
  width: 100%;
  display: block;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hc-item:hover .hc-img,
.hc-item.hc-hovered .hc-img {
  transform: scale(var(--hc-scale, 1.08));
}



/* Link wrapper: blocco senza decorazioni */
.hc-float > a {
  display: block;
  text-decoration: none;
  line-height: 0;
}

/* Immagine: occupa tutta la larghezza dell'item */
.hc-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  pointer-events: none; /* il click è gestito dal wrapper <a> */
}