/* MEDIA GALLERY PAGE STYLES */
.media-gallery-section-heading {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-4);
  color: var(--color-primary);
}
.media-intro-section {
  background: var(--color-surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  margin-top: var(--space-4);
}
.media-intro {
  font-size: var(--font-size-3);
  color: var(--color-neutral-700);
}

.media-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.featured-media-card {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.featured-media-card figure,
.featured-media-card video {
  width: 100%;
  border-radius: var(--radius-m);
  overflow: hidden;
}
.media-card-caption, .featured-media-card figcaption {
  font-size: var(--font-size-1);
  margin-top: var(--space-2);
  color: var(--color-neutral-500);
}
@media (min-width: 700px) {
  .media-featured-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.user-content-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.user-content-desc {
  max-width: 500px;
}
.user-content-showcase {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.user-media-card {
  max-width: 200px;
  flex: 1 1 180px;
  background: var(--color-neutral-100);
  padding: var(--space-3);
  text-align: center;
}
.contribution-guidelines {
  font-size: var(--font-size-1);
  color: var(--color-neutral-500);
  margin-top: var(--space-2);
}
@media (min-width: 900px) {
  .user-content-panel {
    flex-direction: row;
  }
}

.media-categories-nav {
  margin-bottom: var(--space-4);
}
.media-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.category-chip {
  display: inline-block;
  background: var(--color-neutral-200);
  color: var(--color-primary);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.category-chip:focus, .category-chip:hover {
  background: var(--color-primary);
  color: #fff;
}
.media-categories {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.media-category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
  gap: var(--space-2);
  min-width: 0;
}
.media-category-card img {
  border-radius: var(--radius-s);
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
@media (min-width: 900px) {
  .media-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

.media-player-panel {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.media-player-main {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.media-player-main img, .media-player-main video {
  width: 100%;
  border-radius: var(--radius-m);
  margin-bottom: var(--space-3);
}
.player-controls {
  gap: var(--space-2);
}
.player-actions {
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.player-action-btn {
  min-width: 110px;
}
.media-comment-modal {
  background: var(--color-background);
  box-shadow: var(--shadow-m);
  padding: var(--space-4);
  border-radius: var(--radius-m);
  position: absolute;
  top: 10%;
  left: 50%;
  min-width: 285px;
  max-width: 98vw;
  transform: translate(-50%, 0);
  z-index: 20;
}
.media-comment-modal label {
  font-weight: 600;
  margin-bottom: var(--space-2);
  display: block;
}
.media-comment-modal textarea {
  width: 100%;
  margin-bottom: var(--space-2);
  resize: vertical;
}
.media-comment-modal button {
  margin-right: var(--space-2);
  margin-top: var(--space-2);
}

.exclusive-content-panel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.exclusive-sneak-peek {
  position: relative;
  max-width: 280px;
}
.exclusive-blur {
  filter: blur(6px) grayscale(50%);
  border-radius: var(--radius-l);
}
.exclusive-label {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  background: var(--color-warning);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
}

.media-contributors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: flex-start;
}
.media-contributor-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-neutral-100);
  flex: 1 1 240px;
  min-width: 210px;
}
.contributor-avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}

.media-gallery-news-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .media-featured-grid, .media-categories {
    grid-template-columns: 1fr;
  }
  .media-contributors-grid {
    flex-direction: column;
    gap: var(--space-4);
  }
  .exclusive-content-panel {
    flex-direction: column;
    gap: var(--space-3);
  }
}

@media (max-width: 700px) {
  .container {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .media-player-panel {
    padding: var(--space-3);
  }
}