/* Hero-dominant: a wide 16:9 image rather than the square cover used on track detail. */
.session-detail-hero {
    margin: 0 auto 2rem;
    overflow: hidden;
}

/* session-detail-hero-img rides on MudPaper (child Razor component); ::deep pierces its output. */
::deep .session-detail-hero-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Secondary medium square cover sitting below the hero — same 220px frame as mix detail,
   smaller than the cut cover so the hero stays dominant. The cover-art MudPaper fills it. */
.session-detail-cover {
    aspect-ratio: 1 / 1;
    max-width: 220px;
    margin: 0 auto 2rem;
    overflow: hidden;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
}