/* ====== VM (frontend) ====== */

/* Root (mask effect): radius je NA MENIJU, a ne na kartama */
.vm-menu{
  /* active vars (mapped by media queries below) */
  --vm-radius: var(--vm-radius-fullhd);
  --vm-gap: var(--vm-gap-fullhd);
  --vm-pad-x: var(--vm-pad-x-fullhd);
  --vm-pad-y: var(--vm-pad-y-fullhd);

  border-radius: var(--vm-radius, 0px);
  overflow: hidden; /* <-- reže sadržaj da “krajevi” izgledaju rounded */
  margin: var(--vm-pad-y, 0px) var(--vm-pad-x, 0px);

}

/* Grid */
.vm-menu .vm-grid{
  display: grid;
  gap: var(--vm-gap, 0px);
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

/* Placeholder card (za sada prazno) */
.vm-menu .vm-card{
  background: rgba(0,0,0,0.06);
  overflow: hidden; /* da slika ne izlazi van */
}

/* Media wrapper */
.vm-menu .vm-card-media{
  width: 100%;
  height: 100%;
}

/* Image */
.vm-menu .vm-card-img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* slika se reže lijepo */
  display: block;
}

/* IMPORTANT:
   NE forsiramo height:100% na .vm-card u flex modu jer tada aspect-ratio ne radi kako treba.
   Zadržavamo 100% samo na media/img.
*/
.vm-card-media,
.vm-card-img {
  width: 100%;
  height: 100%;
}

.vm-card-img {
  display: block;
}

/* ====== STATIC MODE (fixed menu height, cards keep AR, scaled to fit) ====== */
.vm-menu[data-size-mode="static"] .vm-grid{
  height: var(--vm-static-h, auto);
  align-content: center;
}

/* Card becomes a centering container (NO stretch) */
.vm-menu[data-size-mode="static"] .vm-card{
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* JS sets --vm-w / --vm-h so media box keeps AR and fits */
.vm-menu[data-size-mode="static"] .vm-card-media{
  width: var(--vm-w, 100%);
  height: var(--vm-h, 100%);
  overflow: hidden;
  border-radius: inherit;
}

/* ====== Breakpoints mapping (4K / 2K / FullHD / HD / Mobile) ====== */
@media (min-width: 2560px){
  .vm-menu{
    --vm-radius: var(--vm-radius-4k);
    --vm-gap: var(--vm-gap-4k);
    --vm-pad-x: var(--vm-pad-x-4k);
    --vm-pad-y: var(--vm-pad-y-4k);
  }
}
@media (min-width: 1921px) and (max-width: 2559px){
  .vm-menu{
    --vm-radius: var(--vm-radius-2k);
    --vm-gap: var(--vm-gap-2k);
    --vm-pad-x: var(--vm-pad-x-2k);
    --vm-pad-y: var(--vm-pad-y-2k);
  }
}
@media (min-width: 1200px) and (max-width: 1920px){
  .vm-menu{
    --vm-radius: var(--vm-radius-fullhd);
    --vm-gap: var(--vm-gap-fullhd);
    --vm-pad-x: var(--vm-pad-x-fullhd);
    --vm-pad-y: var(--vm-pad-y-fullhd);
  }
}
@media (min-width: 769px) and (max-width: 1199px){
  .vm-menu{
    --vm-radius: var(--vm-radius-hd);
    --vm-gap: var(--vm-gap-hd);
    --vm-pad-x: var(--vm-pad-x-hd);
    --vm-pad-y: var(--vm-pad-y-hd);
  }
}
@media (max-width: 768px){
  .vm-menu{
    --vm-radius: var(--vm-radius-mobile);
    --vm-gap: var(--vm-gap-mobile);
    --vm-pad-x: var(--vm-pad-x-mobile);
    --vm-pad-y: var(--vm-pad-y-mobile);
  }
  .vm-menu .vm-grid{
    grid-template-columns: 1fr; /* mobile stack */
  }
}

/* =========================================================
   VM CARD HOVER ENGINE (image swap + overlay + zoom)
   ========================================================= */

.vm-menu .vm-card-media{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
  border-radius: inherit;
}

/* stacked images */
.vm-menu .vm-card-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* ONLY opacity for image swap */
  transition-property: opacity;
  transition-duration: var(--vm-imgfade-dur, 0.25s);
  transition-timing-function: ease;
}

.vm-menu .vm-card-img--main{ opacity: 1; }
.vm-menu .vm-card-img--hover{ opacity: 0; }

/* swap ONLY when hover image exists */
.vm-menu .vm-card.vm-card--has-hover-img:hover .vm-card-img--hover{ opacity: 1; }
.vm-menu .vm-card.vm-card--has-hover-img:hover .vm-card-img--main { opacity: 0; }

/* overlay */
.vm-menu .vm-card-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: var(--vm-hover-color, transparent);
  opacity: 0;

  /* ONLY opacity for overlay */
  transition-property: opacity;
  transition-duration: var(--vm-hover-dur, 0.25s);
  transition-timing-function: ease;
}

/* =========================================================
   INVERSE FADEOUT LOCK
   While inverse is fading out, DISABLE normal hover overlay
   ========================================================= */

/* AFTER: fadeout lock applies ONLY to non-source cards */
.vm-menu.vm-inv-fadeout .vm-card:not(.vm-inv-source) .vm-card-overlay{
  background: var(--vm-inv-color, transparent) !important;
  opacity: var(--vm-inv-alpha, 0) !important;

  transition-property: opacity, background-color;
  transition-duration: var(--vm-inv-dur, 0.25s) !important;
}

/* Also keep hover override ONLY on non-source cards */
.vm-menu.vm-inv-fadeout .vm-card:not(.vm-inv-source):hover .vm-card-overlay{
  background: var(--vm-inv-color, transparent) !important;
  opacity: var(--vm-inv-alpha, 0) !important;
}

.vm-menu .vm-card:hover .vm-card-overlay{
  opacity: var(--vm-hover-alpha, 0);
}

/* =========================================================
   INVERSE HOVER COLOR
   Other cards get overlay when one card is hovered
   ========================================================= */

.vm-menu.vm-inv-active .vm-card:not(.vm-inv-source) .vm-card-overlay{
  background: var(--vm-inv-color, transparent) !important;
  opacity: var(--vm-inv-alpha, 0) !important;

  transition-property: opacity, background-color;
  transition-duration: var(--vm-inv-dur, 0.25s) !important;
}

/* If the hovered (source) card has NO hover color, make it follow inverse too */


/* zoom scales whole media (main OR hover image) */
.vm-menu .vm-card-media{
  transition-property: transform;
  transition-duration: var(--vm-zoom-dur, 0.25s);
  transition-timing-function: ease;
}

.vm-menu .vm-card:hover .vm-card-media{
  transform: scale(var(--vm-zoom-scale, 1));
}

/* =========================================================
   VM CARD INFO (headline + button) + CLICKABLE CARD LINK
   ========================================================= */

.vm-menu .vm-card{
  position: relative;
}

/* full-card link (only when button disabled) */
.vm-menu .vm-card-link{
  position: absolute;
  inset: 0;
  z-index: 2;
  text-decoration: none;
}

/* info overlay bottom */
.vm-menu .vm-card-info{
  text-align: var(--vm-info-align, left);
  pointer-events: none; /* headline klik ne hvata */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3; /* above vm-card-link */
  padding: 12px;
  pointer-events: none; /* headline klik ne hvata */
}

/* headline */
.vm-menu .vm-card-headline{
  margin-bottom: 10px;
  color: var(--vm-hl-color, #fff);
  font-weight: var(--vm-hl-fw, 600);

  /* responsive values mapped below */
  padding: 0px var(--vm-hl-px, 0px) var(--vm-hl-py, 0px) var(--vm-hl-px, 0px);
  font-size: var(--vm-hl-fs, inherit);
  font-family: var(--vm-hl-ff, inherit);
}

/* button */
.vm-menu .vm-card-btn{
  display: inline-block;
  pointer-events: auto; /* button mora biti klikabilan */
  background: var(--vm-btn-bg, #000);
  color: var(--vm-btn-fg, #fff);
  text-decoration: none;

  /* responsive values mapped below */
  padding: var(--vm-btn-py, 0px) var(--vm-btn-px, 0px);
  border-radius: var(--vm-btn-r, 0px);
  transform: translateY(calc(-1 * var(--vm-btn-offy, 0px)));
  font-family: var(--vm-btn-ff, inherit);
  font-size: var(--vm-btn-fs, inherit);
  font-weight: var(--vm-btn-fw, 600);
}

/* =========================================================
   Button breakpoint mapping (uses per-card vars)
   IMPORTANT: mapping MUST live on .vm-card because
   per-card vars (--vm-btn-px-*, etc.) are set inline on .vm-card
   ========================================================= */

.vm-menu .vm-card{
  --vm-btn-px: var(--vm-btn-px-fullhd);
  --vm-btn-py: var(--vm-btn-py-fullhd);
  --vm-btn-r:  var(--vm-btn-r-fullhd);
  --vm-btn-offy: var(--vm-btn-offy-fullhd);
  --vm-hl-px: var(--vm-hl-px-fullhd);
  --vm-hl-py: var(--vm-hl-py-fullhd);
  --vm-hl-fs: var(--vm-hl-fs-fullhd);
  --vm-btn-fs: var(--vm-btn-fs-fullhd);
  --vm-card-r: var(--vm-card-r-fullhd);
  border-radius: var(--vm-card-r, 0px);
  overflow: hidden;
}

@media (min-width: 2560px){
  .vm-menu .vm-card {
    /* Headline */
    --vm-hl-px: var(--vm-hl-px-4k);
    --vm-hl-py: var(--vm-hl-py-4k);
    --vm-hl-fs: var(--vm-hl-fs-4k);

    /* Button */
    --vm-btn-px: var(--vm-btn-px-4k);
    --vm-btn-py: var(--vm-btn-py-4k);
    --vm-btn-r:  var(--vm-btn-r-4k);  
    --vm-btn-offy: var(--vm-btn-offy-4k);
    --vm-btn-fs: var(--vm-btn-fs-4k);

    /* Card rounded */
    --vm-card-r: var(--vm-card-r-4k);
    
  }
}
@media (min-width: 1921px) and (max-width: 2559px){
  .vm-menu .vm-card{
    --vm-btn-px: var(--vm-btn-px-2k);
    --vm-btn-py: var(--vm-btn-py-2k);
    --vm-btn-r:  var(--vm-btn-r-2k);
    --vm-hl-px: var(--vm-hl-px-2k);
    --vm-hl-py: var(--vm-hl-py-2k);
    --vm-hl-fs: var(--vm-hl-fs-2k);
    --vm-btn-offy: var(--vm-btn-offy-2k);
    --vm-btn-fs: var(--vm-btn-fs-2k);
      --vm-card-r: var(--vm-card-r-2k);
  }
}
@media (min-width: 1200px) and (max-width: 1920px){
  .vm-menu .vm-card{
    --vm-btn-px: var(--vm-btn-px-fullhd);
    --vm-btn-py: var(--vm-btn-py-fullhd);
    --vm-btn-r:  var(--vm-btn-r-fullhd);
    --vm-hl-px: var(--vm-hl-px-fullhd);
    --vm-hl-py: var(--vm-hl-py-fullhd);
    --vm-hl-fs: var(--vm-hl-fs-fullhd);
    --vm-btn-offy: var(--vm-btn-offy-fullhd);
    --vm-btn-fs: var(--vm-btn-fs-fullhd);
    --vm-card-r: var(--vm-card-r-fullhd);

  }
}
@media (min-width: 769px) and (max-width: 1199px){
  .vm-menu .vm-card{
    --vm-btn-px: var(--vm-btn-px-hd);
    --vm-btn-py: var(--vm-btn-py-hd);
    --vm-btn-r:  var(--vm-btn-r-hd);
    --vm-hl-px: var(--vm-hl-px-hd);
    --vm-hl-py: var(--vm-hl-py-hd);
    --vm-hl-fs: var(--vm-hl-fs-hd);
    --vm-btn-offy: var(--vm-btn-offy-hd);
    --vm-btn-fs: var(--vm-btn-fs-hd);
    --vm-card-r: var(--vm-card-r-hd);
  }
}
@media (max-width: 768px){
  .vm-menu .vm-card{
    --vm-btn-px: var(--vm-btn-px-mobile);
    --vm-btn-py: var(--vm-btn-py-mobile);
    --vm-btn-r:  var(--vm-btn-r-mobile);
    --vm-hl-px: var(--vm-hl-px-mobile);
    --vm-hl-py: var(--vm-hl-py-mobile);
    --vm-hl-fs: var(--vm-hl-fs-mobile);
    --vm-btn-offy: var(--vm-btn-offy-mobile);
    --vm-btn-fs: var(--vm-btn-fs-mobile);
    --vm-card-r: var(--vm-card-r-mobile);
  }
}