/* === SIMPLE, ROBUST BADGE + CORNER FIX === */

/* Keep both grids as positioning anchors */
.portfolio{position:relative !important; z-index:0 !important;}
.portfolio .portfolio-item{position:relative !important; overflow:hidden !important; z-index:0 !important;}

/* Projects page: keep rectangle corners clean */
#projects.portfolio .portfolio-item{border-radius:14px !important;}
#projects.portfolio .portfolio-item img{border-radius:inherit !important;}

/* Desktop badge: your exact look */
:root{ --badge-offset:10px; }
.portfolio .portfolio-item .badge-anchor,
.portfolio .portfolio-item .thumb-badge{
  position:absolute !important;
  /* neutralize any old full-bleed rules */
  inset:auto !important;
  /* pin to top-right inside the thumbnail */
  top:var(--badge-offset) !important;
  right:var(--badge-offset) !important;
  left:auto !important;
  bottom:auto !important;
  width:50px !important;
  height:50px !important;
  z-index:1 !important;
  transform:none !important;
  pointer-events:none !important;
}
/* If both exist, make .thumb-badge fill .badge-anchor cleanly */
.portfolio .portfolio-item .badge-anchor .thumb-badge{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

/* Hex + number visuals */
.portfolio .portfolio-item .thumb-badge .hex path{ fill:#525866 !important; }
.portfolio .portfolio-item .thumb-badge .num{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:800 !important;
  line-height:1 !important;
  color:#FFFFFF !important;
  font-size:18px !important; /* desktop baseline */
}

/* Mobile (<=768px): smaller badge, same top-right pin */
@media (max-width:768px){
  :root{ --badge-offset:8px; }
  .portfolio .portfolio-item .badge-anchor,
  .portfolio .portfolio-item .thumb-badge{
    width:28px !important;
    height:28px !important;
  }
  .portfolio .portfolio-item .thumb-badge .num{
    font-size:12px !important;
  }
}

.overlay-open .thumb-badge{ display:none !important; }

/* AUTO-PATCH: mirror portfolio corner handling for projects thumbs (do not remove) */
#projects .thumb, #projects-grid .thumb, .projects .thumb, .projects-grid .thumb, [data-gallery="projects"] .thumb {
  transform: none !important;
  border-radius: var(--portfolio-thumb-radius, 14px) !important;
  overflow: clip !important;
}
#projects .thumb, #projects-grid .thumb, .projects .thumb, .projects-grid .thumb, [data-gallery="projects"] .thumb > img,
#projects .thumb, #projects-grid .thumb, .projects .thumb, .projects-grid .thumb, [data-gallery="projects"] .thumb > video {
  border-radius: inherit !important;
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: none !important;
}