/* ✅ External margin applied to wrapper */
.portfolioGridWrapper {
  /* margin: var(--spacing-xl) auto; */
  /* max-width: 1200px; */
  /* padding: 0 var(--spacing-lg); */
  min-height: 100vh;
  margin-bottom: 15vh;
  transform: scale(1.02);
}


/* === Masonry items === */
.portfolioMenuItem {
  width: calc(49%);
  /* margin-left: var(--spacing-lg); */
  margin-bottom: var(--spacing-lg);
  float: left;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-white);
  transition: transform var(--transition-main);
  break-inside: avoid;
}

.portfolioGridWrapper {
  /* max-width: 1200px; */
  /* padding: 0 var(--spacing-lg); */
  margin-left: 10vw;
  margin-right: 10vw;
  padding-top: 10vh;
    /* display: flex; */
  gap: 100px;
}

/* === Masonry Grid Container === */
.masonry-grid {
  margin-left: -var(--spacing-lg);
}

.grid-sizer {
  width: 50%;
}


  /* Prevent float collapse */
  .portfolioMenuItem::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* === Content inside the item (text + media) === */
  .portfolioContent {
    display: flex;
    flex-direction: column;
    /* gap: var(--spacing-xs); */
    opacity: 0.65;
    transition: transform var(--transition-main-very-slow), opacity var(--transition-main-very-slow);
  }
  
  .portfolioMenuItem:hover .portfolioContent {
    transform: translateY(-10px);
    opacity: 1;
  }
  
  /* === Title and Tags === */
  .portfolioMeta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-xs);
  }
  
  .portfolioMeta h4 {
    font-size: var(--font-size-h4);
    margin: 0;
    transform: translateY(-10px);
  }
  
  .portfolioMeta p {
    font-size: var(--font-size-small);
    margin: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--transition-main-very-slow), transform var(--transition-main-very-slow);
  }
  
  .portfolioMenuItem:hover .portfolioMeta p {
    opacity: 1;
    transform: translateY(-10px);
  }
  
  
  /* === Thumbnail (Image or Video) === */
  .portfolioMenuThumb {
    width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: var(--box-shadow-soft);
    margin-bottom: var(--spacing-lg);
    transition: transform var(--transition-main-very-slow), opacity var(--transition-main-very-slow);
  }
  
  /* === Video specific hover zoom === */
  .videoThumb {
    transition: transform var(--transition-main-very-slow);
  }
  
  .videoThumb:hover {
    transform: scale(1);
  }
  
  /* === Card hover motion === */
  .portfolioMenuItem:hover {
    transform: translateY(0rem);
  }
  
  /* === Responsive fallback === */
  @media (max-width: 1200px) {
    .portfolioMenuItem,
    .grid-sizer {
      width: 100%;
      margin-left: 0;
    }
  
    .portfolioGridWrapper {
      padding: 0 var(--spacing-sm);
    }
  }
  



  
.MainStickyHeaderInner {
  position: fixed;
  max-width: min(800px, 100%);
   top: var(--spacing-sm);
  left: var(--spacing-md);
  right: var(--spacing-md);
  max-height: 30px;
  z-index: 9999;
  margin: 0 auto;
  padding: 2px var(--spacing-lg);
  background: var(--color-bg-primary);
  border-radius: 999px; /* strong pill */
  display: flex;
  align-items: center;
  justify-items: center;

  flex-direction: row;
  justify-content: space-between;
  /* gap: var(--spacing-lg); */
  color: var(--color-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-main), transform var(--transition-main);
  transform: translateY(-10px);
}

.MainStickyHeaderInner.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.MainStickyHeaderInner p{
  line-height: 0px!important;

   margin-top: 13px!important;
   padding: 0px!important;
}
.MainStickyHeaderInner h4{
  line-height: 0px!important;
  margin-right: 50px!important;
   margin-top: 13px!important;
   padding: 0px!important;
}

.MainStickyHeaderInner h3{
  line-height: 0px!important;

     margin-top: 18px!important;
  padding: 0px!important;

}


.filtersWrapper {
  display: flex;
  flex-direction: row;
    align-self: center;
  justify-self: center;
  height: 30px;
}

/* .filtersWrapper h4{
 line-height: 5px;  
} */

.portfolioFiltersBar {
  display: flex;
  gap: var(--spacing-lg);

}

#filters-wrapper {
  height: 100%;
}


.portfolioFilterBtn {
  /* line-height: auto; */
}


@media (max-width: 768px) {
.MainStickyHeaderInner   {
  display: none;
}

  .portfolioMeta p{
    display: none;

  }

  .portfolioGridWrapper {
    margin-left: var(--mobile-margin);
    margin-right: var(--mobile-margin);
  }

  .portfolioContent {
    opacity: 1;
    margin-bottom: -40px;
  }

  }