/* ===== Mosaic Viewport Grid — CSS =====
   Works with WPBakery in Impreza theme.
   Add classes in WPBakery:
   - Outer Row: mosaic-wrap (Row stretch: Full width)
   - Inner Row: mosaic-grid
   - Each Column: mosaic-item
   - Image element: mosaic-img
   - Text wrapper: .mosaic-content
   - Vertical menu: .mosaic-vmenu
*/

/* Scope resets inside our grid so other pages stay safe */
.mosaic-grid .wpb_row, .mosaic-grid .vc_row, .mosaic-wrap .vc_row { margin:0 !important; }
.mosaic-grid > .wpb_column, .mosaic-grid > [class*="vc_col-"]{
  padding:0 !important; width:auto !important; flex:none !important;
}
.mosaic-grid .vc_column-inner, .mosaic-grid .wpb_wrapper{ height:100%; padding:0 !important; }

/* Wrapper fills exactly the viewport between header + footer */
.mosaic-wrap{
  min-height: calc(100dvh - var(--mvg-header,80px) - var(--mvg-footer,180px));
  display:grid; place-items:stretch;
  margin:0 !important; padding:0 !important;
  background:#0f1114;
}

/* Grid — gapless centered squares */
.mosaic-grid{
  display:grid;
  justify-content:center;
  align-content:center;
  gap:0;
  margin:0 auto;
  width:100%;
  /* <=1024 acts like container; >1024 can be full width via JS sizing */
  max-width:var(--mvg-maxw, 1024px);
  grid-template-columns: repeat(var(--mvg-cols,3), var(--mvg-size,280px));
  grid-auto-rows: var(--mvg-size,280px);
}

/* Make each WPBakery column behave like a square tile */
.mosaic-item{
  position:relative; overflow:hidden;
  background:#171a1f;
  border:1px solid rgba(255,255,255,.06);
}
.mosaic-item:hover{ transform:translateY(-2px); transition:transform .2s ease; }

/* Image fills tile */
.mosaic-img, .mosaic-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Readability overlay for image tiles */
.mosaic-item.has-image::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.00) 35%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* Overlay content/text */
.mosaic-content{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(12px, 2.2vw, 22px);
  color:#fff; display:flex; flex-direction:column; gap:.35em;
}
.mosaic-content h2,.mosaic-content h3{margin:0; line-height:1.1; font-weight:600;
  font-size: clamp(16px, 2.4vw, 28px); letter-spacing:.3px;
}
.mosaic-content p, .mosaic-vmenu li, .mosaic-content a{
  font-size: clamp(12px, 1.6vw, 18px);
}

/* Vertical menu style */
.mosaic-vmenu{ list-style:none; margin:0; padding:clamp(16px,2vw,24px);
  display:flex; flex-direction:column; gap:.5em; height:100%;
  color:#e8eaed;
}
.mosaic-vmenu li a{ color:inherit; text-decoration:none; opacity:.9; }
.mosaic-vmenu li a:hover{ opacity:1; }

/* Optional palette for pure text tiles */
.mosaic-item.is-gold{ background:#c7b300; color:#1a1a1a; }
.mosaic-item.is-teal{ background:#16434b; }

/* Mobile: 1 column + normal scroll */
@media (max-width:767px){
  .mosaic-wrap{ min-height:auto; }
  .mosaic-grid{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    max-width:100% !important;
  }
  .mosaic-item{ aspect-ratio: 1 / 1; }
}

/* When locked (only if mosaic exists on the page) prevent body scroll >=768px */
html.mvg-locked, body.mvg-locked{ overflow:hidden; }