.dashboard-hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center top;
}

/* Dark gradient overlay — content readable on any thumbnail */
.dashboard-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(13, 13, 15, 0.92) 35%, rgba(13, 13, 15, 0.2) 75%, transparent),
    linear-gradient(to top,    rgba(13, 13, 15, 0.9)  25%, transparent 60%);
}

.dashboard-hero__content {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-12) var(--gutter);
  max-width: 600px;
  gap: var(--space-4);
}

.dashboard-hero__genre {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.dashboard-hero__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl));
  font-weight: 800;
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.dashboard-hero__description {
  font-size: var(--text-base);
  color: rgba(240, 240, 245, 0.75);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: var(--leading-normal);
}

.dashboard-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .dashboard-hero {
    height: 55vh;
    min-height: 360px;
  }

  .dashboard-hero__content {
    padding: var(--space-8) var(--gutter);
  }
}