/* ==========================================================
   UNION CREATIVE — AUDIO PORTFOLIO
   AudioIgniter custom styling
   ========================================================== */


/* ==========================================================
   1. COMPONENT / CONTAINER
   ========================================================== */

.uc-audio-player {
    container-type: inline-size;
}

.uc-audio-player *,
.uc-audio-player *::before,
.uc-audio-player *::after {
    box-sizing: border-box;
}


/* ==========================================================
   2. PLAYER SHELL
   ========================================================== */

.uc-audio-player .ai-wrap.ai-type-full {
    background: #22211e !important;

    padding: 32px !important;
    margin: 0 !important;

    font-family: inherit !important;
}


/* ==========================================================
   3. NOW PLAYING — MAIN LAYOUT
   ========================================================== */

.uc-audio-player .ai-control-wrap {
    display: grid !important;

    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 32px;

    align-items: center;

    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* ==========================================================
   4. FEATURED ARTWORK
   ========================================================== */

.uc-audio-player .ai-control-wrap > .ai-thumb {
    width: 220px !important;
    height: 220px !important;

    min-width: 220px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
}

.uc-audio-player .ai-control-wrap > .ai-thumb img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}


/* ==========================================================
   5. NOW PLAYING — RIGHT COLUMN
   ========================================================== */

.uc-audio-player .ai-control-wrap-controls {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    flex: none !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* ==========================================================
   6. PLAY BUTTON + TRACK INFO
   ========================================================== */

.uc-audio-player .ai-audio-controls-main {
    display: grid !important;

    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 20px;

    align-items: center;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 20px !important;
}


/* Play / pause */

.uc-audio-player .ai-audio-control {
    display: flex !important;

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

    width: 64px !important;
    height: 64px !important;

    min-width: 64px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    cursor: pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

@media (hover: hover) {

    .uc-audio-player .ai-audio-control:hover {
        transform: scale(1.06);
    }

}


/* ==========================================================
   7. TRACK INFORMATION
   ========================================================== */

.uc-audio-player .ai-track-info {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
}

.uc-audio-player .ai-track-title {
    width: auto !important;
    max-width: none !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    font-size: 25px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;

    color: #fff !important;
}

.uc-audio-player .ai-track-subtitle {
    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;

    color: rgba(255,255,255,.65) !important;
}


/* Contributions */

.uc-audio-player .uc-now-playing-credits {
    width: auto !important;
    max-width: none !important;

    margin-top: 10px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: rgba(255,255,255,.55);
}


/* ==========================================================
   8. PROGRESS BAR
   ========================================================== */

.uc-audio-player .ai-audio-controls-progress {
    width: 100% !important;

    margin: 0 0 18px !important;
}


/* ==========================================================
   9. SECONDARY CONTROLS
   ========================================================== */

.uc-audio-player .ai-audio-controls-meta {
    display: flex !important;
    align-items: center;

    width: 100% !important;

    margin: 0 !important;
}


/* Remove volume meter and +/- controls */
.uc-audio-player .ai-audio-volume-control {
    display: none !important;
}


/* ==========================================================
   10. THUMBNAIL GALLERY
   ========================================================== */

.uc-audio-player .ai-tracklist {
    display: grid !important;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 8px !important;

    width: 100% !important;

    margin: 8px 0 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* ==========================================================
   11. INDIVIDUAL GALLERY TRACK
   ========================================================== */

.uc-audio-player .ai-tracklist .ai-track {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;

    aspect-ratio: 1 / 1;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;

    overflow: hidden !important;

    cursor: pointer;
}


/* ==========================================================
   12. GALLERY ARTWORK
   ========================================================== */

.uc-audio-player
.ai-tracklist
.ai-track
.ai-track-thumb {

    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
}

.uc-audio-player
.ai-tracklist
.ai-track
.ai-track-thumb img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    object-fit: cover !important;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* ==========================================================
   13. INVISIBLE AUDIOIGNITER CLICK TARGET
   ========================================================== */

/*
 * Keep AudioIgniter's native track control over the artwork
 * so the whole thumbnail remains clickable.
 */

.uc-audio-player
.ai-tracklist
.ai-track
.ai-track-control {

    position: absolute !important;

    inset: 0 !important;

    z-index: 3 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    cursor: pointer !important;
}


/* Hide AudioIgniter title/artist inside gallery */

.uc-audio-player
.ai-tracklist
.ai-track
.ai-track-name {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip-path: inset(50%) !important;

    white-space: nowrap !important;
}


/* Hide lyrics/credits button */

.uc-audio-player
.ai-tracklist
.ai-track
.ai-track-control-buttons {

    display: none !important;
}


/* Hide metadata generated by our previous list version */

.uc-audio-player
.ai-tracklist
.uc-track-meta {

    display: none !important;
}


/* ==========================================================
   14. ACTIVE TRACK
   ========================================================== */

.uc-audio-player
.ai-tracklist
.ai-track.ai-track-active::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 5px #22211e;
}


/* ==========================================================
   15. GALLERY HOVER
   ========================================================== */

@media (hover: hover) {

    .uc-audio-player
    .ai-tracklist
    .ai-track:hover
    .ai-track-thumb img {

        transform: scale(1.035);
    }


    .uc-audio-player
    .ai-tracklist:hover
    .ai-track:not(:hover)
    .ai-track-thumb img {

        opacity: .72;
    }

}


/* ==========================================================
   16. MEDIUM PLAYER
   Component width — NOT browser width
   ========================================================== */

@container (max-width: 700px) {

    .uc-audio-player .ai-wrap.ai-type-full {
        padding: 26px !important;
    }


    .uc-audio-player .ai-control-wrap {
        grid-template-columns: 170px minmax(0, 1fr);

        column-gap: 26px;
    }


    .uc-audio-player .ai-control-wrap > .ai-thumb {
        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
    }


    .uc-audio-player .ai-audio-controls-main {
        grid-template-columns: 54px minmax(0, 1fr);

        column-gap: 15px;

        margin-bottom: 16px !important;
    }


    .uc-audio-player .ai-audio-control {
        width: 54px !important;
        height: 54px !important;

        min-width: 54px !important;
    }


    .uc-audio-player .ai-track-title {
        font-size: 21px !important;
    }


    .uc-audio-player .ai-track-subtitle {
        font-size: 15px !important;
    }


    .uc-audio-player .uc-now-playing-credits {
        margin-top: 7px;

        font-size: 10px;
    }


    /*
     * Four covers across.
     */

    .uc-audio-player .ai-tracklist {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


/* ==========================================================
   17. COMPACT PLAYER
   ========================================================== */

@container (max-width: 500px) {

    .uc-audio-player .ai-wrap.ai-type-full {
        padding: 20px !important;
    }


    /*
     * Keep artwork beside information rather than stacking
     * everything vertically.
     */

    .uc-audio-player .ai-control-wrap {
        grid-template-columns: 130px minmax(0, 1fr);

        column-gap: 18px;
    }


    .uc-audio-player .ai-control-wrap > .ai-thumb {
        width: 130px !important;
        height: 130px !important;

        min-width: 130px !important;
    }


    .uc-audio-player .ai-audio-controls-main {
        grid-template-columns: 46px minmax(0, 1fr);

        column-gap: 12px;

        margin-bottom: 12px !important;
    }


    .uc-audio-player .ai-audio-control {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
    }


    .uc-audio-player .ai-track-title {
        font-size: 18px !important;
    }


    .uc-audio-player .ai-track-subtitle {
        font-size: 14px !important;
    }


    .uc-audio-player .uc-now-playing-credits {
        margin-top: 6px;

        font-size: 9px;
        line-height: 1.3;

        letter-spacing: .06em;
    }


    /*
     * Three covers across.
     */

    .uc-audio-player .ai-tracklist {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px !important;

        margin-top: 6px !important;
    }


    .uc-audio-player
    .ai-tracklist
    .ai-track.ai-track-active::after {

        box-shadow:
            inset 0 0 0 4px #22211e;
    }

}


/* ==========================================================
   18. PHONE / VERY NARROW COMPONENT
   ========================================================== */

@container (max-width: 400px) {

    .uc-audio-player .ai-wrap.ai-type-full {
        padding: 16px !important;
    }


    /*
     * Now stack the featured artwork.
     */

    .uc-audio-player .ai-control-wrap {
        display: flex !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 18px;
    }


    .uc-audio-player .ai-control-wrap > .ai-thumb {
        width: 100% !important;
        height: auto !important;

        min-width: 0 !important;

        aspect-ratio: 1 / 1;
    }


    .uc-audio-player .ai-audio-controls-main {
        grid-template-columns: 48px minmax(0, 1fr);

        column-gap: 13px;

        margin-bottom: 15px !important;
    }


    .uc-audio-player .ai-audio-control {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
    }


    .uc-audio-player .ai-track-title {
        font-size: 19px !important;
    }


    .uc-audio-player .ai-track-subtitle {
        font-size: 14px !important;
    }


    .uc-audio-player .uc-now-playing-credits {
        font-size: 9px;
    }


    /*
     * Two covers across on phones.
     */

    .uc-audio-player .ai-tracklist {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}