/* Elementor Gallery — Collage Mode (v1.8) with tri-slot + upright/no-tilt + hover options */

/* -------- Defaults & variables -------- */
.mt-collage {
  --mt-rot-end: initial;         /* final rotation (0deg via .mt-collage--upright or --no-tilt) */
  --mt-hover-scale: 1.04;        /* hover grow */
  --mt-hover-shadow: 0 14px 36px rgba(0,0,0,.22);
  --mt-size-mult: 1;             /* free-layout helper (kept for compatibility) */
  --mt-spread: 22;
}

/* Hover 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; }

/* Upright or no-tilt options */
.mt-collage--upright { --mt-rot-end: 0deg; }
.mt-collage--no-tilt { --mt-rot-end: 0deg; --mt-rotmax: 0; }

/* Mobile clamp + stacking isolation */
.mt-collage .elementor-image-gallery .gallery,
.elementor-image-gallery.mt-collage .gallery {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  min-height: 340px;
}

/* Aspect 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; 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);

  opacity: 0;
  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 10px rgba(0,0,0,.18);
  outline: 1px solid rgba(255,255,255,.25);
  will-change: transform, opacity;
}

/* Hover: grow & lift */
.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);
}

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

/* Entrance animation */
@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));
  }
}


/* ===== Mobile tuning (tighter) ===== */
@media (max-width: 767px) {
  /* Make the canvas a little shorter (less blank top/bottom) */
  .mt-collage.mt-collage--ratio-4x3 .elementor-image-gallery .gallery,
  .elementor-image-gallery.mt-collage.mt-collage--ratio-4x3 .gallery {
    aspect-ratio: 4 / 3;     /* was 5/4; shorter now */
    min-height: 280px;       /* was 320 */
  }

  /* Fill more of the canvas and reduce vertical insets */
	.mt-collage {
    --mt-tri-size: 58;   /* was ~52–56; try 64–72 to taste */
    --mt-inset-x: 2;     /* was 12–14; smaller = closer to edges */
    --mt-inset-y: 8;     /* keep a bit of top/bottom padding */
    --mt-jitter: .4;
    --mt-rotmax: 2;
  }


  /* If you’re using the mid-slot helpers, keep them centered-ish */
  .mt-collage--tri-left-mid { --mt-tl-y: 50; }
  .mt-collage--right-mid    { --mt-tr-y: 48; } /* 48% sits slightly above exact middle */
  /* Optional: push bottom card closer to the bottom edge */
  .mt-collage { --mt-bc-y: 96; }
}


/* Safety (clip & isolate) */
.mt-collage .elementor-image-gallery .gallery,
.elementor-image-gallery.mt-collage .gallery {
  overflow: hidden;
  isolation: isolate;
}


/* --- Safari: show only the first image, full width of its column --- */
/* Elementor adds <html class="e--ua-safari"> automatically */

.e--ua-safari .mt-collage .elementor-image-gallery .gallery,
.e--ua-safari .elementor-image-gallery.mt-collage .gallery {
  position: static !important;
  display: block !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  isolation: auto !important;
  width: 100% !important;
}

/* Hide all but the first figure */
.e--ua-safari .mt-collage .gallery .gallery-item,
.e--ua-safari .elementor-image-gallery.mt-collage .gallery .gallery-item {
  display: none !important;
  position: static !important;
  margin: 0 !important;
  width: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  z-index: auto !important;
}

/* First item only — full width */
.e--ua-safari .mt-collage .gallery .gallery-item:first-child,
.e--ua-safari .elementor-image-gallery.mt-collage .gallery .gallery-item:first-child {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Image sizing */
.e--ua-safari .mt-collage .gallery .gallery-item:first-child img,
.e--ua-safari .elementor-image-gallery.mt-collage .gallery .gallery-item:first-child img {
  display: block !important;
  width: 100% !important;
  height: auto !important;            /* keeps photo proportion */
  object-fit: cover;
  border-radius: var(--mt-radius, 12px);
  border-radius: 0; /* With single image no rounding of corners */
}