/* Elementor Gallery — Collage Mode (v1.8)
   - Works with free layout and tri-slot mode
   - New classes:
     .mt-collage--upright    → finish straight (no final angle)
     .mt-collage--no-tilt    → no angle at all (even during animation)
     .mt-collage--hover-sm   → smaller hover grow
     .mt-collage--hover-md   → medium hover grow (default-ish)
     .mt-collage--hover-lg   → larger hover grow
*/

/* -------- Defaults & variables -------- */
.mt-collage {
  /* final rotation (fallbacks to --mt-rot from JS if not set) */
  --mt-rot-end: initial;

  /* hover scale (tweak via preset classes below) */
  --mt-hover-scale: 1.04;
  --mt-hover-shadow: 0 14px 36px rgba(0,0,0,.22);

  /* free-layout helpers (already used by your JS) */
  --mt-size-mult: 1;
  --mt-spread: 22;
}

/* Presets */
.mt-collage--hover-sm { --mt-hover-scale: 1.03; }
.mt-collage--hover-md { --mt-hover-scale: 1.06; }
.mt-collage--hover-lg { --mt-hover-scale: 1.08; }

/* Finish straight (but allow animated tilt) */
.mt-collage--upright { --mt-rot-end: 0deg; }

/* No tilt at all (even during animation) */
.mt-collage--no-tilt {
  --mt-rot-end: 0deg;
  --mt-rotmax: 0; /* your JS already reads this for tri mode */
}

/* -------- Canvas (gallery container) -------- */
.mt-collage .elementor-image-gallery .gallery,
.elementor-image-gallery.mt-collage .gallery {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  min-height: 340px; /* safety floor */
}

/* Ratio modifiers for the canvas */
.mt-collage.mt-collage--ratio-16x9 .elementor-image-gallery .gallery,
.elementor-image-gallery.mt-collage.mt-collage--ratio-16x9 .gallery {
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.mt-collage.mt-collage--ratio-4x3 .elementor-image-gallery .gallery,
.elementor-image-gallery.mt-collage.mt-collage--ratio-4x3 .gallery {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

@supports not (aspect-ratio: 1 / 1) {
  .mt-collage .elementor-image-gallery .gallery,
  .elementor-image-gallery.mt-collage .gallery { min-height: 420px; }
}

/* -------- Tiles -------- */
.mt-collage .elementor-image-gallery .gallery .gallery-item,
.elementor-image-gallery.mt-collage .gallery .gallery-item {
  position: absolute !important;
  inset: 50% auto auto 50%;
  margin: 0 !important;
  pointer-events: auto;

  /* width via JS + optional multiplier; height from aspect-ratio */
  width: calc(var(--mt-w, 100%) * var(--mt-size-mult, 1));
  max-width: 120%;
  aspect-ratio: var(--mt-aspect, 4 / 3);
  height: auto;

  left: var(--mt-x, 50%);
  top:  var(--mt-y, 50%);
  z-index: var(--mt-z, 1);

  /* Start hidden; JS reveals & animates on first layout */
  opacity: 0;

  /* Base (post-animation) transform uses final angle var */
  transform:
    translate(-50%, -50%)
    rotate(var(--mt-rot-end, var(--mt-rot, 0deg)))
    scale(var(--mt-scale, 1));

  animation: none;
  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}

.mt-collage .elementor-image-gallery .gallery .gallery-item .gallery-icon,
.mt-collage .elementor-image-gallery .gallery .gallery-item a,
.elementor-image-gallery.mt-collage .gallery .gallery-item .gallery-icon,
.elementor-image-gallery.mt-collage .gallery .gallery-item a {
  display: block; width: 100%; height: 100%;
}

/* Images */
.mt-collage .elementor-image-gallery .gallery .gallery-item img,
.elementor-image-gallery.mt-collage .gallery .gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  outline: 1px solid rgba(255,255,255,.25);
  will-change: transform, opacity;
}

/* Hover: grow a bit and lift, keeping the final angle (upright or angled) */
.mt-collage .elementor-image-gallery .gallery .gallery-item:hover,
.elementor-image-gallery.mt-collage .gallery .gallery-item:hover {
  filter: saturate(1.08) contrast(1.02);
  transform:
    translate(-50%, -50%)
    rotate(var(--mt-rot-end, var(--mt-rot, 0deg)))
    scale(calc(var(--mt-scale, 1) * var(--mt-hover-scale, 1.04)));
  box-shadow: var(--mt-hover-shadow);
  z-index: calc(var(--mt-z, 1) + 50); /* ensure hovered tile is above */
}

/* Hide captions (optional) */
.mt-collage .elementor-image-gallery .gallery .gallery-caption,
.elementor-image-gallery.mt-collage .gallery .gallery-caption {
  display: none !important;
}

/* -------- Animation --------
   Uses --mt-rot for the animated tilt, but lands on --mt-rot-end
   (which can be 0deg via .mt-collage--upright)
*/
@keyframes mt-pop {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--mt-rot, 0deg))
      scale(0.01);
  }
  60% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--mt-rot, 0deg) * 0.7))
      scale(calc(var(--mt-scale, 1) * 1.2));
  }
  100% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--mt-rot-end, var(--mt-rot, 0deg)))
      scale(var(--mt-scale, 1));
  }
}


/* figure has a transition */
.mt-collage .elementor-image-gallery .gallery .gallery-item,
.elementor-image-gallery.mt-collage .gallery .gallery-item {
  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}

/* hover scales using your chosen preset (e.g., --hover-md) */
.mt-collage .elementor-image-gallery .gallery .gallery-item:hover,
.elementor-image-gallery.mt-collage .gallery .gallery-item:hover {
  transform:
    translate(-50%, -50%)
    rotate(var(--mt-rot-end, var(--mt-rot, 0deg)))
    scale(calc(var(--mt-scale, 1) * var(--mt-hover-scale, 1.04)));
}

/* Put TOP-LEFT midway down */
.mt-collage--tri-left-mid { --mt-tl-y: 50; }

/* Put TOP-RIGHT midway down  (your requested class name) */
.mt-collage--right-mid,
.mt-collage--tri-right-mid { --mt-tr-y: 50; }

/* Optional: tweak "mid" quickly, e.g. a touch above/below center */
.mt-collage--mid-45 { --mt-tl-y: 45; --mt-tr-y: 45; }
.mt-collage--mid-55 { --mt-tl-y: 55; --mt-tr-y: 55; }



/* -------- Responsive niceties -------- */
@media (max-width: 767px) {
  .mt-collage .elementor-image-gallery .gallery,
  .elementor-image-gallery.mt-collage .gallery { min-height: 300px; }
}