/* Masonry Gallery Layout System */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 10px; /* Increased for more visible differences */
  padding: 20px 0;
  align-items: start; /* Prevent stretching */
  grid-auto-flow: row dense; /* Better packing */
}

/* Media item base styles */
.media-item {
  display: block;
  cursor: pointer;
  transition: transform 0.1s ease;
  width: 100%;
  position: relative;
  /* Height will be set dynamically by JavaScript */
  /* Removed min-height fallback to test masonry */
}

/* Prevent global CSS from forcing uniform heights in gallery items */
.media-item .window {
  flex: none !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
}

.media-item .window-body {
  flex: none !important;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.media-item:hover {
  transform: translateY(-2px);
}

.media-item:active {
  transform: translateY(0);
}

.media-item:hover .window {
  box-shadow: 4px 4px 0 #000;
}

/* Loading state */
.media-item[data-masonry-loading="true"] {
  opacity: 0.7;
}

.media-item[data-masonry-loading="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #c0c0c0;
  border-radius: 50%;
  border-top-color: transparent;
  animation: masonry-spin 0.8s linear infinite;
}

@keyframes masonry-spin {
  to { transform: rotate(360deg); }
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    padding: 15px 0;
  }
}

@media (max-width: 480px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10 px;
    padding: 10px 0;
  }
}

@media (max-width: 320px) {
  .media-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 0;
  }
}

/* Natural sizing for media content */
.media-content img {
  width: 100%;
  height: auto !important;
  object-fit: cover;
  /* Removed max-height to allow natural sizing */
}

/* Force different heights for different content types to make masonry visible */
.media-item[data-type="image"] .media-content {
  min-height: 180px;
}

.media-item[data-type="audio"] .media-content {
  min-height: 120px;
  max-height: 160px;
}

.media-item[data-type="video"] .media-content {
  min-height: 200px;
  max-height: 250px;
}

.media-item[data-type="text"] .media-content {
  min-height: 160px;
  max-height: 220px;
}

/* Tab filtering support */
.media-item.hidden {
  display: none !important;
}

/* Preserve Windows 98 aesthetic */
.tabs menu button {
  cursor: pointer;
}