/* --- MEDIA CARDS & BADGES --- */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2vw;
  padding: 2vh 0;
  width: 100%;
}

.media-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  aspect-ratio: 2/3;
  will-change: transform;
}

:root[data-main-page-glow="true"] .media-item { overflow: visible; }

:root[data-main-page-glow="true"] .media-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--media-thumb);
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  filter: blur(calc(var(--media-thumb-glow-blur) + 1px)) saturate(1.6) brightness(1.2);
  opacity: 0.85;
  transform: scale(calc(var(--media-thumb-glow-scale) + 0.01));
  transition: opacity 0.2s ease, transform 0.2s ease;
  animation: sideGlowPulse 3s ease-in-out infinite;
  will-change: transform, opacity;
}

@media (min-width: 769px) {
  .media-item { transform: translateY(-6px); }
  .media-item:hover { transform: translateY(0); box-shadow: none; }
  :root[data-main-page-glow="true"] .media-item:hover::before {
    opacity: 0.35;
    filter: blur(var(--media-thumb-glow-blur)) saturate(1.4) brightness(1.15);
    transform: scale(var(--media-thumb-glow-scale));
    animation: none;
    /* Create a gradient mask that only shows top (50% strength) and bottom glow */
    -webkit-mask-image: linear-gradient(to bottom, 
      rgba(0,0,0,0.5) 0%, 
      rgba(0,0,0,0.5) 25%, 
      transparent 25%, 
      transparent 75%, 
      rgba(0,0,0,1) 75%, 
      rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to bottom, 
      rgba(0,0,0,0.5) 0%, 
      rgba(0,0,0,0.5) 25%, 
      transparent 25%, 
      transparent 75%, 
      rgba(0,0,0,1) 75%, 
      rgba(0,0,0,1) 100%);
  }
}

.media-item.person-item img { animation: floatSlow 3s ease-in-out infinite; }
.media-item.person-item:hover img { animation: none; }
.media-item.person-item:active img { transform: scale(0.98); transition: transform 0.1s ease; animation: none; }
.media-item.blurred-on-open { filter: blur(8px); opacity: 0.5; }

.media-item img { width: 100%; height: 100%; object-fit: cover; }

.media-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, 0);
  padding: 1vh;
  display: none;
}

.media-item .media-title, .media-item .media-rating, .media-item .media-known-for { font-family: 'Roboto', sans-serif; }

.media-title {
  margin: 0;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary-color);
}
.media-title .title-part-secondary { color: var(--lighter-primary-color) !important; }

.media-rating { font-size: 0.8rem; color: #ffd700; margin: 0.3vh 0; }

.media-rating-badge {
  position: absolute;
  bottom: 8px; right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  z-index: 10;
}
:root[data-show-rating="false"] .media-rating-badge { display: none !important; }

.media-year-badge {
  position: absolute;
  bottom: 8px; left: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
  font-weight: bold;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
:root[data-show-year-released="false"] .media-year-badge { display: none !important; }
.media-year-badge .media-year-top { font-size: 0.6rem; }
.media-year-badge .media-year-bot { font-size: 1.0rem; }