/* ============================================
   DESIGN & EDITING PORTFOLIO PAGE STYLES
   ============================================ */

/* Masonry-style grid container */
.design-masonry-grid {
  /* 1 column on small screens */
  column-count: 1;
  column-gap: 2rem; /* similar to gap-8 */
}

/* 2 columns on medium screens */
@media (min-width: 768px) {
  .design-masonry-grid {
    column-count: 2;
  }
}

/* 3 columns on large screens */
@media (min-width: 1024px) {
  .design-masonry-grid {
    column-count: 3;
  }
}

/* Card wrapper for design/editing items */
.design-card {
  background: radial-gradient(circle at top left,
    rgba(255, 255, 255, 0.06),
    rgba(0, 0, 0, 0.8));
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  padding: 0.75rem;

  /* Make cards behave as masonry items */
  display: inline-block; /* required inside column layout */
  width: 100%;
  margin: 0 0 2rem;

  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}

/* Base media (image or video) */
.design-media {
  display: block;
  width: 100%;      /* fill the card width */
  height: auto;     /* keep original aspect ratio */
  border-radius: 1.25rem;
  object-fit: contain;   /* show full image/video, no cropping */
  object-position: center;
}

/* Optional: videos get a black bg while loading */
.design-media--video {
  background: #000;
}