/* ========================================
   Radius Homepage — tile + fade-in dal centro
   Layout gestito dal column-count del tema (tramite display: contents).
   ======================================== */

/* I wrapper del modulo non devono creare livelli di layout:
   le tile sono figli "virtuali" del .columns del tema. */
#block-radius-content,
.radius-homepage-wrapper,
.radius-tiles {
  display: contents;
}

/* La tile si comporta come .columns .image del tema. */
.radius-tile {
  display: inline-block;
  width: 100%;
  margin: 0 0 0.5em;
  page-break-inside: avoid;
  break-inside: avoid;
  overflow: hidden;
  position: relative;
}

/* Contenitore immagine: spazio riservato con aspect-ratio 4:3. */
.radius-tile .image.fit {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #eee;
  border-radius: 4px;
}

/* Variante verticale. */
.radius-tile .image.fit.radius_home_page_alta {
  aspect-ratio: 3 / 4;
}

/* Fade-in dal centro: parte piccola e trasparente, si espande e dissolve. */
.radius-tile .image.fit img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center center;
  transition:
    opacity 0.6s ease-out,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.radius-tile .image.fit.is-loaded img {
  opacity: 1;
  transform: scale(1);
}

/* Shimmer di sfondo mentre carica. */
.radius-tile .image.fit.is-loading {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: radius-homepage-shimmer 1.2s infinite;
}

@keyframes radius-homepage-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Trigger invisibile. */
.load-more-trigger {
  height: 1px;
  width: 100%;
  break-inside: avoid;
  page-break-inside: avoid;
}