/* 主样式文件 */

/* 章节标题 */
.section {
  margin-bottom: var(--spacing-3xl);
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: bold;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text);
}

/* Sound Grid */
.sound-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* Related Recommendations Grid - Optimize: Ensure 14 sounds display in two rows */
#related-grid.sound-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* Fixed 7 columns, ensure 14 sounds fill two rows */
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* 在中等屏幕上调整相关推荐列数 */
@media (max-width: 1024px) {
  #related-grid.sound-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* 在小屏幕上调整相关推荐列数 */
@media (max-width: 768px) {
  #related-grid.sound-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 在小屏幕上调整相关推荐列数 */
@media (max-width: 640px) {
  #related-grid.sound-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  #related-grid.sound-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sound Card */
.sound-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  text-align: center;
  transition: all var(--transition-normal) ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.sound-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.sound-card__icon {
  font-size: 48px;
  margin-bottom: var(--spacing-md);
  display: block;
}

.sound-card__title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sound-card__stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin-top: var(--spacing-sm);
}

.sound-card__stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sound-card__badge {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background-color: var(--color-danger);
  color: var(--color-text-white);
  padding: 2px var(--spacing-xs);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: bold;
}

/* Playing State */
.sound-card--playing {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.sound-card--playing .sound-card__icon {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* 分类页 */
.category-header {
  margin-bottom: var(--spacing-xl);
}

.category-title {
  font-size: var(--font-size-4xl);
  font-weight: bold;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.category-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
}

/* Search Page */
.search-header {
  margin-bottom: var(--spacing-xl);
}

.search-title {
  font-size: var(--font-size-4xl);
  font-weight: bold;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.search-query {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
}

/* Sound Detail Page */
.sound-detail {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}

.sound-detail__header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.sound-detail__icon {
  font-size: 120px;
  margin-bottom: var(--spacing-lg);
  display: block;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.sound-detail__title {
  font-size: var(--font-size-4xl);
  font-weight: bold;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.sound-detail__description {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-relaxed);
}

.sound-detail__stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.sound-detail__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.sound-detail__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sound-detail__stat-value {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-text);
}

.sound-detail__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.sound-detail__tag {
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}

.sound-detail__tag:hover {
  background-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 操作按钮组 */
.sound-detail__actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.sound-detail__btn {
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-lg);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: all var(--transition-fast) ease;
}

.sound-detail__btn--play {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  min-width: 150px;
}

.sound-detail__btn--play:hover {
  background-color: var(--color-primary-dark);
}

.sound-detail__btn--play.playing {
  background-color: var(--color-danger);
}

.sound-detail__btn--download {
  background-color: var(--color-bg-light);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.sound-detail__btn--download:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.sound-detail__btn--share {
  background-color: var(--color-bg-light);
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
}

.sound-detail__btn--share:hover {
  background-color: var(--color-secondary);
  color: var(--color-text-white);
}

.sound-detail__btn--copy {
  background-color: var(--color-bg-light);
  border: 2px solid var(--color-success);
  color: var(--color-success);
}

.sound-detail__btn--copy:hover {
  background-color: var(--color-success);
  color: var(--color-text-white);
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .sound-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-sm);
  }
}

@media (max-width: 768px) {
  .sound-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .sound-card__icon {
    font-size: 36px;
  }

  .sound-card__title {
    font-size: var(--font-size-sm);
  }

  .section-title {
    font-size: var(--font-size-2xl);
  }

  .category-title,
  .search-title {
    font-size: var(--font-size-3xl);
  }

  .sound-detail {
    padding: var(--spacing-lg);
  }

  .sound-detail__icon {
    font-size: 80px;
  }

  .sound-detail__title {
    font-size: var(--font-size-3xl);
  }

  .sound-detail__stats {
    gap: var(--spacing-lg);
  }

  .sound-detail__actions {
    flex-direction: column;
  }

  .sound-detail__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .sound-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .sound-card {
    padding: var(--spacing-sm);
  }

  .sound-card__icon {
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
  }

  .categories-list {
    gap: var(--spacing-xs);
  }
}

/* 骨架屏样式 - 性能优化：提升loading体验 */
.sound-card--skeleton {
  pointer-events: none;
  opacity: 0.7;
}

.skeleton-icon,
.skeleton-title,
.skeleton-stats > div {
  background: #e0e0e0;
  border-radius: 4px;
}

.skeleton-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-title {
  height: 16px;
  width: 80%;
  margin: 8px 0;
}

.skeleton-stats {
  display: flex;
  gap: 8px;
}

.skeleton-stats > div {
  height: 12px;
  width: 40px;
}

.shimmer {
  animation: shimmer 1.5s infinite;
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}