/* Home roster hero. Copy sits on the page colour; captions sit on a fixed dark scrim. */

.home-hero {
    --hero-caption: #f4f5f2;
    --hero-caption-muted: #b8bdb4;
    --hero-outset: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
    width: calc(100% + (2 * var(--hero-outset)));
    margin-top: calc(-1 * (var(--space-16) + var(--space-16)) + 8px);
    margin-left: calc(-1 * var(--hero-outset));
    margin-right: calc(-1 * var(--hero-outset));
    padding: var(--space-16) var(--page-gutter) var(--space-16);
    background: var(--color-page);
    color: var(--color-text);
}

.home-hero-copy {
    min-width: 0;
    max-width: 36rem;
}

.home-hero-kicker {
    margin: 0;
    color: var(--color-brand-text);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
}

.home-hero-title {
    max-width: 12em;
    margin: var(--space-16) 0 var(--space-16);
    color: var(--color-text);
    font-family: var(--font-display);
    /* 76px wraps “Plus living Sessions.” beside the portraits, so this
       clamps to the 61px step at 1280 and keeps the headline on two lines. */
    font-size: clamp(var(--fs-39), 4.77vw, var(--fs-61));
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
}

.home-hero-intro {
    max-width: 28rem;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-18);
    line-height: var(--leading-body);
}

.home-hero-transparency {
    max-width: 28rem;
    margin: var(--space-12) 0 0;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: var(--tracking-meta);
    line-height: var(--leading-heading);
    text-transform: uppercase;
}

.home-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.home-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: 44px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--duration-hover) var(--ease-standard),
        border-color var(--duration-hover) var(--ease-standard),
        color var(--duration-hover) var(--ease-standard);
}

.home-hero-btn-primary,
.home-hero-btn-primary:visited {
    border: 0;
    background: var(--color-green-400);
    color: #0b0c0b;
}

.home-hero-btn-primary:hover {
    background: var(--color-green-600);
    color: #fff;
}

.home-hero-btn-ghost,
.home-hero-btn-ghost:visited {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: var(--color-text-100);
}

.home-hero-btn-ghost:hover {
    border-color: var(--color-text-100);
    color: var(--color-text-100);
}

[data-bs-theme="light"] .home-hero-btn-ghost,
[data-bs-theme="light"] .home-hero-btn-ghost:visited {
    border-color: rgba(17, 19, 17, 0.28);
    color: var(--color-text);
}

[data-bs-theme="light"] .home-hero-btn-ghost:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.home-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
    margin: var(--space-16) 0 0;
}

.home-hero-stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
}

.home-hero-stat-value {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-16);
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
}

.home-hero-stat-label {
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: var(--tracking-meta);
    line-height: var(--leading-heading);
    text-transform: uppercase;
}

.home-hero-strip {
    display: flex;
    gap: var(--space-12);
    min-width: 0;
    width: calc(100% + (2 * var(--page-gutter)));
    margin-inline: calc(-1 * var(--page-gutter));
    padding-inline: var(--page-gutter);
    padding-bottom: var(--space-8);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-gutter);
    overscroll-behavior-x: contain;
}

.home-hero-strip:focus-visible {
    outline: 2px solid #4cc96b;
    outline-offset: 3px;
}

[data-bs-theme="light"] .home-hero-strip:focus-visible {
    outline: 2px solid #1f6b31;
    outline-offset: 3px;
}

.home-hero-panel {
    position: relative;
    display: block;
    flex: 0 0 70vw;
    width: 70vw;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--color-ink-900);
    color: var(--hero-caption);
    text-decoration: none;
}

.home-hero-panel:focus-visible,
[data-bs-theme="light"] .home-hero-panel:focus-visible {
    z-index: 1;
    outline-offset: -3px !important;
}

/* The global light-theme outline is #1f6b31, which falls under 3:1 on a portrait. */
[data-bs-theme="light"] .home-hero-panel:focus-visible {
    outline: 2px solid #4cc96b !important;
}

/* The portrait covers an inset shadow on the panel itself, and overflow on
   the strip clips an outline that sits outside the card. The ring is a
   pseudo-element above the photo; the negative offset keeps the outline
   inside the card where the strip cannot crop it. */
.home-hero-panel.is-spotlight::before,
.home-hero-panel:focus-visible::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.home-hero-panel.is-spotlight::before {
    box-shadow: inset 0 0 0 2px #4cc96b;
}

/* Keyboard focus is thicker than the resting Spotlight outline. */
.home-hero-panel:focus-visible::before {
    box-shadow: inset 0 0 0 4px #4cc96b;
}

[data-bs-theme="light"] .home-hero-panel.is-spotlight::before {
    box-shadow: inset 0 0 0 2px #1f6b31;
}

/* The ring sits on the portrait, where #1f6b31 falls under 3:1. */
[data-bs-theme="light"] .home-hero-panel:focus-visible::before {
    box-shadow: inset 0 0 0 4px #4cc96b;
}

.home-hero-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1);
    transition: transform 6s var(--ease-standard);
}

.home-hero-panel:hover .home-hero-portrait,
.home-hero-panel:focus-visible .home-hero-portrait {
    transform: scale(1.04);
}

.home-hero-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(11, 12, 11, 0) 36%,
        rgba(11, 12, 11, 0.55) 58%,
        rgba(11, 12, 11, 0.94) 80%,
        rgba(11, 12, 11, 0.96) 100%
    );
    pointer-events: none;
}

.home-hero-caption {
    position: absolute;
    right: var(--space-12);
    bottom: var(--space-16);
    left: var(--space-16);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
}

.home-hero-name {
    color: var(--hero-caption);
    font-family: var(--font-display);
    font-size: var(--fs-20);
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-heading);
    overflow-wrap: normal;
    word-break: normal;
}

.home-hero-genre {
    color: var(--hero-caption-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: var(--tracking-meta);
    line-height: var(--leading-heading);
    text-transform: uppercase;
}

.home-hero-single {
    color: var(--hero-caption);
    font-family: var(--font-body);
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: var(--leading-heading);
}

.home-hero-caption .release-new {
    margin: 0 var(--space-8) 0 0;
}

@media (min-width: 992px) {
    .home-hero-strip:hover .home-hero-panel:not(:hover):not(:focus-visible) :is(.home-hero-genre, .home-hero-single),
    .home-hero-strip:focus-within .home-hero-panel:not(:hover):not(:focus-visible) :is(.home-hero-genre, .home-hero-single) {
        visibility: hidden;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-hero-genre,
    .home-hero-single {
        display: none;
    }

    /* Collapsed panels are narrower than a 20px name. Size the type to
       the panel, and pull the caption in so the longest word still fits. */
    .home-hero-panel {
        container-type: inline-size;
    }

    @container (max-width: 100px) {
        .home-hero-caption {
            right: var(--space-4);
            left: var(--space-4);
        }

        .home-hero-name {
            min-width: 0;
            max-width: 100%;
            font-size: clamp(12px, 21cqi, 20px);
        }
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .home-hero {
        margin-top: calc(-1 * (var(--space-16) + var(--space-32)) + 8px);
    }
}

@media (min-width: 768px) {
    .home-hero {
        --hero-outset: var(--space-24);
        margin-top: calc(-1 * (var(--space-24) + var(--space-32)));
    }
}

@media (max-width: 991.98px) {
    .home-hero-copy {
        display: contents;
    }

    .home-hero-kicker {
        order: 1;
    }

    .home-hero-title {
        order: 2;
    }

    .home-hero-actions {
        order: 3;
    }

    .home-hero-actions .home-hero-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .home-hero-strip {
        order: 4;
    }

    .home-hero-intro,
    .home-hero-transparency {
        order: 5;
    }

    .home-hero-intro {
        margin-top: var(--space-16);
    }

    .home-hero-stats {
        order: 6;
    }
}

@media (min-width: 992px) {
    .home-hero {
        display: grid;
        grid-template-columns: minmax(16rem, 560px) minmax(0, 1fr);
        column-gap: var(--space-32);
        align-items: stretch;
        min-height: calc(100svh - 72px);
        gap: var(--space-24);
        padding: var(--space-32) 0 var(--space-24) var(--page-gutter);
    }

    .home-hero-copy {
        display: block;
    }

    .home-hero-kicker,
    .home-hero-title,
    .home-hero-actions,
    .home-hero-intro,
    .home-hero-transparency,
    .home-hero-stats {
        order: 0;
    }

    .home-hero-intro {
        margin-top: 0;
    }

    .home-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-12);
        margin-top: var(--space-24);
    }

    .home-hero-btn {
        min-height: 48px;
        padding: 0 22px;
        font-size: var(--fs-16);
    }

    .home-hero-stats {
        gap: var(--space-24) var(--space-32);
        margin-top: var(--space-24);
    }

    .home-hero-stat-value {
        font-size: var(--fs-25);
    }

    .home-hero-copy {
        align-self: center;
        padding-right: var(--space-16);
    }

    .home-hero-strip {
        width: auto;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        gap: 2px;
        overflow: hidden;
        scroll-snap-type: none;
    }

    .home-hero-panel {
        flex: 1 1 0;
        width: auto;
        height: 100%;
        min-width: 0;
        aspect-ratio: auto;
        transition: flex-grow var(--duration-hero) var(--ease-standard);
    }

    .home-hero-panel:hover,
    .home-hero-panel:focus-visible {
        flex-grow: 2.2;
    }

    .home-hero-portrait {
        height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-panel,
    .home-hero-portrait {
        transition: none;
    }

    .home-hero-panel:hover .home-hero-portrait,
    .home-hero-panel:focus-visible .home-hero-portrait {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
    .home-hero-panel:hover,
    .home-hero-panel:focus-visible {
        flex-grow: 1;
    }
}