/* ===== User profile ===== */
.user-profile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.user-name-card {
  width: 100%;
  max-width: 1230px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.user-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 1230px;
  width: 100%;
}

.user-stat-card {
  width: 300px;
  height: 55px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.user-stat-card i {
  color: var(--color-accent);
  font-size: 0.75rem;
}

/* ===== Content grid (playlists + videos) ===== */
.user-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ===== Content item grid ===== */
.user-content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  max-width: 1230px;
}
@media (max-width: 1279px) { .user-content-grid { max-width: 920px; } }
@media (max-width: 969px)  { .user-content-grid { max-width: 610px; } }
@media (max-width: 659px)  {
  .user-content-grid { max-width: 300px; margin-left: auto; margin-right: auto; }
  .user-content-item:has(> .category-card) { height: auto; }
}

.user-content-item {
  width: 300px;
  height: 250px;
  flex-shrink: 0;
  background: #c9adb5;
}

.user-content-item:has(.video-author-section),
.user-content-item:has(.category-card),
.user-content-item:has(.video-card),
.user-content-item:has(.ad-placeholder),
.user-content-item:has(.half-banner) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  overflow: hidden;
}

.user-content-item .category-card {
  width: 300px;
  height: 120px;
  flex-shrink: 0;
}

.user-content-item .video-author-section {
  flex-shrink: 0;
}

.user-content-item .video-card-footer:not(:has(.video-card-author)) {
  justify-content: flex-end;
}

.user-content-item:has(.half-banner) {
  overflow: visible;
}