/* =================================================
   AIVELLE MEMBER COLLECTIONS
   PLATFORM v2.0 — ITERATION 2B
================================================= */


/* =================================================
   01 Hero refinements
================================================= */

.member-collections-v2 .collections-hero {

    align-items:
        end;

}


.collections-count-label {

    margin:
        0;

    color:
        var(--member-gold);

    text-transform:
        uppercase;

    letter-spacing:
        .19em;

    font-size:
        9px;

}


.collections-count {

    margin:
        16px 0 28px;

    color:
        var(--member-white);

    font-size:
        clamp(54px, 6vw, 88px);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.055em;

}


/* =================================================
   02 Collection controls
================================================= */

.collections-controls {

    display:
        grid;

    grid-template-columns:
        minmax(210px, .35fr)
        minmax(0, 1.65fr);

    gap:
        var(--member-gap-large);

    align-items:
        end;

    padding-block:
        clamp(76px, 9vw, 124px);

    border-bottom:
        1px solid var(--member-line);

}


.collections-control-index {

    margin:
        0 0 20px;

    color:
        var(--member-gold);

    font-size:
        10px;

}


.collections-controls h2 {

    max-width:
        390px;

    margin:
        0;

    color:
        var(--member-white);

    font-size:
        var(--member-heading-lg);

    font-weight:
        400;

    line-height:
        .98;

    letter-spacing:
        -.055em;

}


.collections-control-group {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        38px;

    align-items:
        flex-end;

    justify-content:
        space-between;

}


.collections-filter {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px 26px;

    margin:
        0;

    padding:
        0;

    border:
        0;

}


.collections-filter legend {

    width:
        100%;

    margin-bottom:
        14px;

    color:
        var(--member-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        9px;

}


.collections-filter-button {

    padding:
        0 0 8px;

    border:
        0;

    border-bottom:
        1px solid transparent;

    color:
        var(--member-muted);

    background:
        transparent;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    font-size:
        10px;

    cursor:
        pointer;

    transition:
        color var(--member-transition-fast),
        border-color var(--member-transition-fast);

}


.collections-filter-button:hover,
.collections-filter-button:focus-visible,
.collections-filter-button.is-active {

    color:
        var(--member-gold);

    border-bottom-color:
        var(--member-gold);

}


.collections-sort {

    display:
        grid;

    gap:
        12px;

    min-width:
        175px;

}


.collections-sort span {

    color:
        var(--member-muted);

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        9px;

}


.collections-sort select {

    width:
        100%;

    padding:
        0 30px 10px 0;

    border:
        0;

    border-bottom:
        1px solid #555555;

    border-radius:
        0;

    outline:
        none;

    color:
        var(--member-paper);

    background:
        transparent;

    font-size:
        12px;

}


/* =================================================
   03 Editorial grid
================================================= */

.collections-content {

    padding-top:
        clamp(74px, 9vw, 126px);

}


.collections-grid {

    display:
        grid;

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

    gap:
        clamp(42px, 6vw, 82px)
        clamp(20px, 3vw, 42px);

}


.collection-card {

    grid-column:
        span 4;

    min-width:
        0;

}


.collection-card:nth-child(5n + 1) {

    grid-column:
        span 7;

}


.collection-card:nth-child(5n + 2) {

    grid-column:
        span 5;

    padding-top:
        clamp(76px, 9vw, 132px);

}


.collection-card:nth-child(5n + 1)
.collection-card-media {

    aspect-ratio:
        16 / 11;

}


.collection-card-remove {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    display:
        inline-grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid rgba(255, 255, 255, .52);

    border-radius:
        50%;

    color:
        var(--member-paper);

    background:
        rgba(0, 0, 0, .48);

    font-size:
        17px;

    cursor:
        pointer;

    backdrop-filter:
        blur(8px);

    transition:
        border-color var(--member-transition-fast),
        color var(--member-transition-fast),
        background var(--member-transition-fast),
        transform var(--member-transition-fast);

}


.collection-card-remove:hover,
.collection-card-remove:focus-visible {

    border-color:
        var(--member-gold);

    color:
        var(--member-gold);

    background:
        rgba(0, 0, 0, .72);

    transform:
        scale(1.06);

}


.collection-card-remove:disabled {

    opacity:
        .55;

    cursor:
        wait;

}


.collection-card-body {

    display:
        grid;

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

    gap:
        26px;

    align-items:
        start;

}


.collection-card-copy {

    max-width:
        520px;

}


.collection-card-saved {

    margin:
        16px 0 0;

    color:
        var(--member-muted-soft);

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    font-size:
        9px;

}


.collection-card-link {

    display:
        inline-grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    margin-top:
        2px;

    border:
        1px solid var(--member-line);

    color:
        var(--member-gold);

    font-size:
        16px;

    transition:
        border-color var(--member-transition-fast),
        background var(--member-transition-fast);

}


.collection-card-link:hover,
.collection-card-link:focus-visible {

    border-color:
        var(--member-gold);

    background:
        var(--member-gold-soft);

}


/* =================================================
   04 Empty state refinements
================================================= */

.collections-empty {

    margin-bottom:
        var(--member-section-space-small);

}


/* =================================================
   05 Responsive
================================================= */

@media (max-width: 1060px) {

    .collections-grid {

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

    }


    .collection-card,
    .collection-card:nth-child(5n + 1),
    .collection-card:nth-child(5n + 2) {

        grid-column:
            auto;

        padding-top:
            0;

    }


    .collection-card:nth-child(5n + 1)
    .collection-card-media {

        aspect-ratio:
            4 / 5;

    }

}


@media (max-width: 820px) {

    .collections-controls {

        grid-template-columns:
            1fr;

        align-items:
            start;

    }

}


@media (max-width: 620px) {

    .collections-control-group {

        align-items:
            flex-start;

    }


    .collections-grid {

        grid-template-columns:
            1fr;

    }

}