/* =========================================================
   ORCA UNIVERSAL
   DOWNLOADS
   ========================================================= */


/* =========================================================
   DOWNLOAD TOKENS
   ========================================================= */

:root {

    --downloads-light: #ffffff;
    --downloads-soft: #f4f6f8;
    --downloads-hover: #edf1f4;

    --downloads-text: #20242a;
    --downloads-muted: #68717a;

    --downloads-border: #d5d9de;
    --downloads-border-soft: #e6e9ec;

}


/* =========================================================
   PAGE
   ========================================================= */

.downloadsPage {

    width:
        min(
            calc(100% - 32px),
            1500px
        );

    margin:
        18px auto 42px;

}


/* =========================================================
   UTILITY BAR
   ========================================================= */

.orcaUtilityBar {

    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    width:
        min(
            calc(100% - 32px),
            1500px
        );

    margin:
        8px auto 0;

    color:
        var(--orca-muted);

    font-size: 12px;

}


/* =========================================================
   INTRO
   ========================================================= */

.downloadsIntro {

    margin-bottom: 18px;

    padding:
        22px 24px;

    background:
        linear-gradient(
            145deg,
            var(--orca-surface),
            var(--orca-dark)
        );

    border:
        1px solid
        var(--orca-border);

    border-radius: 12px;

    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, 0.2);

}


.downloadsIntroEyebrow,
.downloadsSectionEyebrow,
.downloadAlbumEyebrow {

    margin-bottom: 3px;

    color:
        var(--theme-color);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.downloadsIntro h1 {

    margin: 0;

    color:
        var(--anchor-color);

    font-size:
        clamp(
            30px,
            4vw,
            42px
        );

    font-weight: 600;

    line-height: 1;

}


.downloadsIntro p {

    max-width: 720px;

    margin:
        7px 0 0;

    color:
        var(--orca-muted);

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   MAIN SECTION
   ========================================================= */

.downloadsSection {

    overflow: hidden;

    background:
        var(--downloads-soft);

    border:
        1px solid
        var(--downloads-border);

    border-radius: 12px;

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.14);

}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.downloadsSectionHeader {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        18px 20px;

    background:
        linear-gradient(
            145deg,
            var(--orca-surface-raised),
            var(--orca-dark)
        );

    border-bottom:
        3px solid
        var(--theme-color);

}


.downloadsSectionHeader h2 {

    margin: 0;

    color:
        var(--anchor-color);

    font-size: 24px;
    font-weight: 600;

}


.downloadsSectionHeader p {

    margin:
        5px 0 0;

    color:
        var(--orca-muted);

    font-size: 13px;

    line-height: 1.45;

}


.downloadsHeaderActions {

    display: flex;

    align-items: center;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.downloadsButton {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        8px 13px;

    border:
        1px solid
        var(--downloads-border);

    border-radius: 7px;

    background:
        var(--downloads-light);

    color:
        var(--downloads-text);

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease;

}


.downloadsButton:hover:not(:disabled) {

    background:
        var(--downloads-hover);

    border-color:
        var(--theme-color);

    color:
        var(--theme-color);

}


.downloadsButton:active:not(:disabled) {

    transform:
        translateY(1px);

}


.downloadsPrimaryButton {

    background:
        var(--theme-color);

    border-color:
        var(--theme-color);

    color:
        #ffffff;

}


.downloadsPrimaryButton:hover:not(:disabled) {

    background:
        var(--theme-color);

    color:
        #ffffff;

    filter:
        brightness(1.08);

}


.downloadsButton:disabled {

    opacity: 0.45;

    cursor: not-allowed;

}


/* =========================================================
   ARTIST DIRECTORY
   ========================================================= */

.downloadArtistGrid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 14px;

    padding: 18px;

}


.downloadArtistCard {

    display: flex;

    flex-direction: column;

    gap: 8px;

    min-height: 130px;

    padding: 18px;

    background:
        var(--downloads-light);

    border:
        1px solid
        var(--downloads-border);

    border-radius: 9px;

    color:
        var(--downloads-text);

    text-decoration: none;

    box-shadow:
        0 6px 16px
        rgba(0, 0, 0, 0.08);

    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease;

}


.downloadArtistCard:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--theme-color);

    box-shadow:
        0 12px 24px
        rgba(0, 0, 0, 0.14);

}


.downloadArtistLabel {

    color:
        var(--theme-color);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.downloadArtistCard strong {

    font-size: 19px;

}


.downloadArtistAction {

    margin-top: auto;

    color:
        var(--downloads-muted);

    font-size: 12px;
    font-weight: 600;

}


/* =========================================================
   DOWNLOAD TOOLBAR
   ========================================================= */

.downloadsToolbar {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        12px 18px;

    background:
        var(--downloads-light);

    border-bottom:
        1px solid
        var(--downloads-border);

}


.downloadsCheckOption {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        var(--downloads-text);

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

}


.downloadsCheckOption input,
.downloadAlbumSelect input,
.downloadSong input {

    accent-color:
        var(--theme-color);

}


/* =========================================================
   ALBUM GRID
   ========================================================= */

.downloadAlbumGrid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(330px, 1fr)
        );

    gap: 16px;

    padding: 18px;

}


/* =========================================================
   ALBUM CARD
   ========================================================= */

.downloadAlbumCard {

    min-width: 0;

    overflow: hidden;

    background:
        var(--downloads-light);

    border:
        1px solid
        var(--downloads-border);

    border-radius: 10px;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.09);

}


.downloadAlbumHeader {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 76px;

    padding:
        13px 15px;

    background:
        #eef1f4;

    border-bottom:
        1px solid
        var(--downloads-border);

}


.downloadAlbumHeader h3 {

    margin: 0;

    color:
        var(--downloads-text);

    font-size: 17px;

    line-height: 1.25;

}


.downloadAlbumYear {

    color:
        var(--downloads-muted);

    font-size: 13px;
    font-weight: 500;

}


.downloadAlbumSelect {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    flex: 0 0 auto;

    padding:
        6px 8px;

    border:
        1px solid
        var(--downloads-border);

    border-radius: 6px;

    background:
        var(--downloads-light);

    color:
        var(--downloads-text);

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

}


/* =========================================================
   ALBUM BODY
   ========================================================= */

.downloadAlbumBody {

    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    min-height: 210px;

}


/* =========================================================
   COVER
   ========================================================= */

.downloadAlbumCover {

    display: flex;

    align-items: flex-start;
    justify-content: center;

    padding: 14px;

    background:
        var(--downloads-soft);

    border-right:
        1px solid
        var(--downloads-border-soft);

}


.downloadAlbumCover img {

    display: block;

    width: 120px;
    height: 120px;

    object-fit: cover;

    border:
        1px solid
        var(--downloads-border);

    box-shadow:
        0 6px 16px
        rgba(0, 0, 0, 0.16);

}


.downloadCoverPlaceholder {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 120px;
    height: 120px;

    padding: 10px;

    border:
        1px dashed
        var(--downloads-border);

    color:
        var(--downloads-muted);

    font-size: 11px;

    text-align: center;

}


/* =========================================================
   SONG LIST
   ========================================================= */

.downloadSongList {

    min-width: 0;

    padding:
        8px 0;

}


.downloadSong {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    padding:
        8px 12px;

    border-bottom:
        1px solid
        var(--downloads-border-soft);

    color:
        var(--downloads-text);

    font-size: 13px;

    line-height: 1.35;

    cursor: pointer;

}


.downloadSong:last-child {

    border-bottom: 0;

}


.downloadSong:hover {

    background:
        var(--downloads-hover);

}


.downloadSong input {

    flex: 0 0 auto;

    margin-top: 2px;

}


.downloadEmptyAlbum {

    padding: 16px;

    color:
        var(--downloads-muted);

    font-size: 12px;

    line-height: 1.45;

}


/* =========================================================
   NOTICE
   ========================================================= */

.downloadsNotice {

    margin: 18px;

    padding: 22px;

    background:
        var(--downloads-light);

    border:
        1px solid
        var(--downloads-border);

    border-radius: 8px;

    color:
        var(--downloads-muted);

    text-align: center;

}


.downloadsNotice h2 {

    margin:
        0 0 7px;

    color:
        var(--downloads-text);

}


.downloadsNotice p {

    margin:
        0 0 14px;

}


/* =========================================================
   FOCUS
   ========================================================= */

.downloadsButton:focus-visible,
.downloadArtistCard:focus-visible,
.downloadSong:focus-within,
.downloadAlbumSelect:focus-within,
.downloadsCheckOption:focus-within {

    outline:
        2px solid
        var(--theme-color);

    outline-offset: 2px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media
(max-width: 760px) {

    .downloadsPage,
    .orcaUtilityBar {

        width:
            calc(
                100% - 20px
            );

    }


    .downloadsSectionHeader {

        align-items: flex-start;

        flex-direction: column;

    }


    .downloadsHeaderActions {

        justify-content: flex-start;

    }


    .downloadsToolbar {

        align-items: stretch;

        flex-direction: column;

    }


    .downloadAlbumGrid {

        grid-template-columns:
            1fr;

        padding: 12px;

    }

}


@media
(max-width: 500px) {

    .downloadsIntro {

        padding:
            20px 18px;

    }


    .downloadAlbumBody {

        grid-template-columns:
            1fr;

    }


    .downloadAlbumCover {

        border-right: 0;

        border-bottom:
            1px solid
            var(--downloads-border-soft);

    }


    .downloadAlbumCover img {

        width: 170px;
        height: 170px;

    }


    .downloadCoverPlaceholder {

        width: 170px;
        height: 170px;

    }

}