/* Home-page release highlight and latest-release list. */

.home-page {
    display: grid;
    gap: var(--content-section-gap);
}

.release-highlight {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--release-highlight-aspect-ratio);
    border: var(--card-border-width) solid var(--color-border);
    border-radius: var(--radius-highlight);
    background: var(--color-surface);
}

.release-highlight__cover,
.release-highlight__scrim,
.release-highlight__content {
    position: absolute;
    inset: 0;
}

.release-highlight__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.release-highlight__canvas {
    display: block;
}

.release-highlight__cover--placeholder {
    display: grid;
    background: var(--color-surface);
    place-items: center;
}

.release-highlight__cover--placeholder img {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.release-highlight__scrim {
    background: linear-gradient(
        to bottom,
        var(--color-highlight-scrim-start),
        var(--color-highlight-scrim-end)
    );
}

.release-highlight__content {
    display: flex;
    padding: var(--space-6);
    flex-direction: column;
    justify-content: space-between;
}

.release-highlight__eyebrow {
    color: var(--color-primary);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-spacing-h3);
    text-transform: uppercase;
}

.release-highlight__bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
}

.release-highlight__meta {
    min-width: 0;
}

.release-highlight__title {
    overflow: hidden;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-spacing-h2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.release-highlight__artist,
.release-highlight__countdown {
    display: block;
    color: var(--color-secondary);
    font-size: var(--font-size-body);
}

.release-highlight__countdown {
    margin-top: var(--space-1);
}

.highlight-action {
    --highlight-action-icon-size: 24px;

    display: grid;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    padding: var(--space-0);
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--radius-icon-control);
    background: transparent;
    cursor: pointer;
    place-items: center;
}

.highlight-action__icon {
    width: var(--highlight-action-icon-size);
    height: var(--highlight-action-icon-size);
    object-fit: contain;
}

.highlight-action__icon--clicked {
    display: none;
}

.highlight-action[data-clicked="true"] .highlight-action__icon--default {
    display: none;
}

.highlight-action[data-clicked="true"] .highlight-action__icon--clicked {
    display: block;
}

.latest-releases {
    padding-inline: var(--space-6);
}

.latest-releases__label {
    display: none;
    margin-bottom: var(--space-4);
}

.release-list {
    display: grid;
}

.release-row {
    display: flex;
    min-height: var(--button-min-height);
    padding-block: var(--space-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.release-row + .release-row {
    border-top: var(--card-border-width) solid var(--color-border);
}

.release-row__meta {
    min-width: 0;
}

.release-row__title {
    overflow: hidden;
    color: var(--color-primary);
    font-size: var(--font-size-body);
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.release-row__artist {
    color: var(--color-secondary);
    font-size: var(--font-size-body-small);
}

.release-row__action {
    display: grid;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    padding: var(--space-0);
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    place-items: center;
    color: var(--color-secondary);
    transition: color var(--transition-interactive);
}

.release-row__action img {
    display: none;
}

.release-row__action::before {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    background: currentColor;
    content: "";
    -webkit-mask: var(--icon-image-play-circle) center / contain no-repeat;
    mask: var(--icon-image-play-circle) center / contain no-repeat;
}

.release-row__action:hover,
.release-row__action:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.view-more-button {
    display: flex;
    margin: var(--space-4) auto var(--space-0);
    padding: var(--space-3);
    align-items: center;
    gap: var(--space-3);
    border: 0;
    background: transparent;
    color: var(--color-secondary);
    cursor: pointer;
    font-size: var(--font-size-body-small);
    transition: color var(--transition-interactive);
}

.view-more-button:hover,
.view-more-button:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.view-more-button__icon {
    display: none;
}

.view-more-button::before {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background: currentColor;
    content: "";
    -webkit-mask: var(--icon-image-arrow-down) center / contain no-repeat;
    mask: var(--icon-image-arrow-down) center / contain no-repeat;
}

@media (min-width: 768px) {
    .release-highlight {
        aspect-ratio: var(--release-highlight-aspect-ratio-wide);
    }
}


@media (min-width: 64rem) {
    .site-shell:has(.home-page) {
        max-width: var(--public-page-max-width);
        padding-inline: var(--public-page-padding-inline);
    }

    .home-page {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(18rem, 1fr);
        align-items: stretch;
        gap: var(--space-8);
    }

    .home-highlight-section,
    .latest-releases {
        min-width: 0;
    }

    .release-highlight {
        aspect-ratio: var(--release-highlight-aspect-ratio-wide);
    }

    .release-highlight__content {
        padding: var(--space-7);
    }

    .latest-releases {
        display: flex;
        height: 100%;
        padding: var(--space-6);
        flex-direction: column;
        border: var(--card-border-width) solid var(--color-border);
        border-radius: var(--radius-highlight);
        background: var(--color-surface);
    }

    .latest-releases__label {
        display: block;
    }

    .view-more-button {
        margin-top: auto;
    }
}