/* ============================================================
   VMG Vertical Marquee Gallery v2.1
   Premium CSS — All Bugs Fixed
   ============================================================ */

/* ─── SECTION ─── */
.vmg-section {
  position: relative;
  /* height managed by Elementor responsive control */
  min-height: 200px;
  overflow: hidden;
  --vmg-fade: 15%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black var(--vmg-fade),
    black calc(100% - var(--vmg-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black var(--vmg-fade),
    black calc(100% - var(--vmg-fade)),
    transparent 100%
  );
  margin: 0 auto;
}

/* Full Width Breakout */
.vmg-full-width {
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  position: relative !important;
  max-width: 100vw !important;
}

/* ════════════════════════════════════════
   SHARED WRAPPER BASE
   ════════════════════════════════════════ */
.vmg-columns-wrapper {
  display: flex !important;
  width: var(--vmg-width-boost, 100%) !important;
  min-width: 100% !important;
}

.vmg-column {
  --vmg-col-width: calc((100% - ((var(--vmg-cols, 5) - 1) * var(--vmg-gap, 10px))) / var(--vmg-cols, 5));
  position: relative;
  will-change: transform, opacity;
}

/* ════════════════════════════════════════
   VERTICAL LAYOUT
   ════════════════════════════════════════ */
.vmg-layout-vertical .vmg-columns-wrapper {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: var(--vmg-gap, 10px) !important;
  height: 100% !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.vmg-layout-vertical .vmg-column {
  flex: 0 0 var(--vmg-col-width) !important;
  width: var(--vmg-col-width) !important;
  max-width: var(--vmg-col-width) !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* FIX: flex-wrap:nowrap is THE critical fix that stops images
        from jumping to the next row/column in vertical mode */
.vmg-layout-vertical .vmg-track {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  height: max-content !important;
  animation-name: marquee-vertical;
}

/* ════════════════════════════════════════
   HORIZONTAL LAYOUT
   ════════════════════════════════════════ */
.vmg-layout-horizontal .vmg-columns-wrapper {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: var(--vmg-gap, 10px) !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

.vmg-layout-horizontal .vmg-column {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: calc((100% - ((var(--vmg-cols, 3) - 1) * var(--vmg-gap, 10px))) / var(--vmg-cols, 3)) !important;
  min-height: 80px !important;
  overflow: hidden !important;
  display: flex !important;
}

/* FIX: flex-wrap:nowrap keeps all images in one horizontal row */
.vmg-layout-horizontal .vmg-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  height: 100% !important;
  width: max-content !important;
}

/* FIX: explicit sizing so images never collapse or overflow row */
.vmg-layout-horizontal .vmg-image-item {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  height: 100% !important;
  width: auto !important;
  display: flex !important;
  align-items: stretch !important;
}

.vmg-layout-horizontal .vmg-image-item img {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Horizontal direction gradient */
.vmg-layout-horizontal.vmg-section {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--vmg-fade),
    black calc(100% - var(--vmg-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--vmg-fade),
    black calc(100% - var(--vmg-fade)),
    transparent 100%
  );
}

/* ════════════════════════════════════════
   TRACK (shared)
   ════════════════════════════════════════ */
.vmg-track {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  will-change: transform;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  animation-duration: var(--vmg-speed, 40s);
  animation-iteration-count: infinite;
  animation-fill-mode: none !important;
}

/* ─── IMAGE GAPS per layout ─── */
.vmg-layout-vertical .vmg-image-item {
  margin-bottom: var(--vmg-img-gap, 10px) !important;
  margin-right: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.vmg-layout-horizontal .vmg-image-item {
  margin-right: var(--vmg-img-gap, 10px) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Pause on hover: applies per column not whole section */
.vmg-pause-hover .vmg-column:hover .vmg-track {
  animation-play-state: paused !important;
}

.vmg-image-item {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* ════════════════════════════════════════
   INFINITE ANIMATION — VERTICAL
   ════════════════════════════════════════ */
.vmg-layout-vertical.vmg-anim-infinite .vmg-track--down {
  animation-name: vmgScrollDown;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.vmg-layout-vertical.vmg-anim-infinite .vmg-track--up {
  animation-name: vmgScrollUp;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* ════════════════════════════════════════
   INFINITE ANIMATION — HORIZONTAL
   ════════════════════════════════════════ */
.vmg-layout-horizontal.vmg-anim-infinite .vmg-track--down {
  animation-name: vmgScrollRight;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.vmg-layout-horizontal.vmg-anim-infinite .vmg-track--up {
  animation-name: vmgScrollLeft;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes vmgScrollDown {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -50%, 0); }
}
@keyframes vmgScrollUp {
  0%   { transform: translate3d(0, -50%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes vmgScrollRight {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes vmgScrollLeft {
  0%   { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ─── IMAGE ITEM ─── */
.vmg-image-item {
  --vmg-img-gap: 10px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.vmg-layout-vertical .vmg-image-item {
  width: 100% !important;
}

.vmg-image-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
  /* Prevent layout shift while images lazy-load */
  min-height: 40px;
}

/* ─── OVERLAY ─── */
.vmg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.35s ease;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
.vmg-image-item:hover .vmg-overlay { opacity: 1; }

/* ─── SHINE ─── */
.vmg-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
}
.vmg-image-item:hover .vmg-shine { opacity: 1; }
.vmg-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0.08) 70%,
    transparent 100%
  );
  transform: rotate(25deg) translateX(-150%);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ════════════════════════════════════════
   SPEED BOOST
   ════════════════════════════════════════ */
.vmg-is-boosting .vmg-track {
  animation-duration: calc(var(--vmg-speed, 40s) / var(--vmg-boost-scale, 1)) !important;
}

/* ════════════════════════════════════════
   ENTRANCE ANIMATIONS & REVEAL
   ════════════════════════════════════════ */
.js-vmg-active.vmg-reveal-fade-up .vmg-column,
.js-vmg-active.vmg-reveal-fade-scale .vmg-column,
.js-vmg-active.vmg-reveal-blur-in .vmg-column,
.js-vmg-active.vmg-reveal-flip-in .vmg-column,
.js-vmg-active.vmg-reveal-bounce-in .vmg-column,
.js-vmg-active.vmg-reveal-cinematic .vmg-column {
  opacity: 0;
  transition-duration: 0.9s;
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.js-vmg-active.vmg-reveal-cinematic .vmg-column {
  transform: translateY(120px) scale(0.85) rotateX(15deg);
  filter: blur(10px);
}
.vmg-reveal-cinematic .vmg-column.is-revealed {
  opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0);
}

.js-vmg-active.vmg-reveal-fade-up .vmg-column { transform: translateY(80px); }
.vmg-reveal-fade-up .vmg-column.is-revealed { opacity: 1; transform: translateY(0); }

.js-vmg-active.vmg-reveal-fade-scale .vmg-column { transform: scale(0.9); }
.vmg-reveal-fade-scale .vmg-column.is-revealed { opacity: 1; transform: scale(1); }

.js-vmg-active.vmg-reveal-blur-in .vmg-column { filter: blur(15px); }
.vmg-reveal-blur-in .vmg-column.is-revealed { opacity: 1; filter: blur(0); }

.js-vmg-active.vmg-reveal-flip-in .vmg-column { transform: perspective(1000px) rotateY(-45deg); opacity: 0; }
.vmg-reveal-flip-in .vmg-column.is-revealed { opacity: 1; transform: perspective(1000px) rotateY(0); }

.js-vmg-active.vmg-reveal-bounce-in .vmg-column { transform: scale(0.5); opacity: 0; }
.vmg-reveal-bounce-in .vmg-column.is-revealed {
  opacity: 1;
  transform: scale(1);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vmg-reveal-none .vmg-column { opacity: 1; transform: none; }

/* ════════════════════════════════════════
   HOVER EFFECTS
   ════════════════════════════════════════ */
.vmg-hover-zoom .vmg-image-item:hover img { transform: scale(1.1); }

.vmg-hover-tilt-3d .vmg-image-item { perspective: 1000px; }
.vmg-hover-tilt-3d .vmg-image-item:hover img { transform: scale(1.05); }

.vmg-hover-shine .vmg-image-item:hover .vmg-shine::after { transform: rotate(25deg) translateX(300%); }

.vmg-hover-lift .vmg-image-item:hover { transform: translateY(-10px); box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6); }
.vmg-hover-lift .vmg-image-item:hover img { transform: scale(1.03); }

.vmg-hover-glitch .vmg-image-item:hover img { animation: vmgGlitch 0.35s ease forwards; }
@keyframes vmgGlitch {
  0%   { transform: translate(0) scale(1); filter: hue-rotate(0deg); }
  20%  { transform: translate(-4px, 3px) scale(1.02); filter: hue-rotate(90deg); }
  40%  { transform: translate(4px, -3px) scale(0.98); filter: hue-rotate(180deg); }
  60%  { transform: translate(-3px, -2px) scale(1.01); filter: hue-rotate(270deg); }
  80%  { transform: translate(2px, 2px) scale(1); filter: hue-rotate(360deg); }
  100% { transform: translate(0) scale(1.04); filter: hue-rotate(0deg); }
}

.vmg-hover-rotate .vmg-image-item:hover { transform: rotate(-3deg) scale(1.05); }
.vmg-hover-rotate .vmg-image-item:hover img { transform: rotate(3deg) scale(1.08); }

.vmg-grayscale-pro .vmg-image-item img {
  filter: grayscale(80%);
  transition: filter 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.4s ease;
}
.vmg-grayscale-pro .vmg-image-item:hover img { filter: grayscale(0%); }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

/* NOTE: We intentionally do NOT set height on .vmg-section here.
   Elementor's responsive height control (section_height) injects
   its own selector with higher specificity and handles all breakpoints.
   Putting height here would override whatever the user sets in Elementor. */

@media (max-width: 767px) {
  /* Safety net only — prevents collapse if Elementor height is not set.
     min-height never overrides an explicit height, so Elementor still wins. */
  .vmg-section {
    min-height: 200px;
  }

  /* Horizontal layout must NEVER use height:auto — it collapses with overflow:hidden.
     We use min-height as a floor; Elementor's height declaration sits above this. */
  .vmg-layout-horizontal.vmg-section {
    min-height: 240px;
  }
  .vmg-layout-horizontal .vmg-columns-wrapper {
    height: 100% !important;
  }
  .vmg-layout-horizontal .vmg-column {
    height: calc((100% - ((var(--vmg-cols, 2) - 1) * var(--vmg-gap, 10px))) / var(--vmg-cols, 2)) !important;
    min-height: 100px !important;
  }

  .vmg-image-item { border-radius: 8px; }
  .vmg-layout-vertical .vmg-image-item { --vmg-img-gap: 6px; margin-bottom: 6px; }
  .vmg-layout-horizontal .vmg-image-item { --vmg-img-gap: 6px; margin-right: 6px; }

  /* Mobile Side Peek */
  .vmg-peek-mobile.vmg-section { overflow: hidden !important; }
  .vmg-peek-mobile .vmg-columns-wrapper {
    width: 150% !important;
    margin-left: -25% !important;
    overflow: visible !important;
  }
  .vmg-peek-mobile.vmg-layout-vertical .vmg-column {
    flex: 0 0 calc(100% / 3) !important;
    width: calc(100% / 3) !important;
  }

  .vmg-full-width {
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
}

/* ════════════════════════════════════════
   ACCESSIBILITY
   ════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .vmg-track { animation: none !important; }
  .vmg-column { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .vmg-image-item, .vmg-image-item img { transition: none !important; transform: none !important; }
  .vmg-shine::after { display: none; }
}