/* =================================================
   AIVELLE MEMBER MEMBERSHIP
   PLATFORM v2.0 — ITERATION 2D
================================================= */


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

.membership-hero-status {

    color:
        var(--member-gold);

    font-size:
        clamp(34px, 4vw, 62px);

    line-height:
        1.02;

    text-transform:
        none;

}


/* =================================================
   02 Summary Cards
================================================= */

.membership-summary-grid {

    margin-top:
        clamp(52px, 7vw, 88px);

}


.membership-summary-card {

    min-height:
        410px;

}


.membership-card-index {

    color:
        var(--member-gold);

    font-size:
        10px;

    letter-spacing:
        .14em;

}


.membership-summary-card .member-card-body {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

}


.membership-summary-card .member-card-title {

    font-size:
        clamp(30px, 3vw, 48px);

}


.membership-status-value {

    color:
        var(--member-gold);

}


/* =================================================
   03 Billing
================================================= */

.membership-billing-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, .8fr);

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

    align-items:
        start;

}


.membership-section-intro {

    max-width:
        680px;

}


.membership-billing-panel {

    display:
        grid;

    align-content:
        start;

}


.membership-billing-panel .member-button {

    margin-top:
        32px;

}


.membership-billing-status {

    margin-top:
        18px;

}


/* =================================================
   04 Detail List
================================================= */

.membership-details-layout {

    display:
        grid;

    grid-template-columns:
        minmax(240px, .62fr)
        minmax(0, 1.38fr);

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

    align-items:
        start;

}


.membership-detail-list {

    margin-top:
        0;

}


/* =================================================
   05 Options
================================================= */

.membership-options-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, .8fr);

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

    align-items:
        end;

}


.membership-option-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        24px;

    align-items:
        center;

    justify-content:
        flex-end;

}




/* =================================================
   06 Invoice History
================================================= */

.membership-invoice-list {

    margin-top:
        clamp(44px, 6vw, 76px);

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

}


.membership-invoice-row {

    display:
        grid;

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

    gap:
        32px;

    align-items:
        center;

    padding-block:
        28px;

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

}


.membership-invoice-row .member-subtitle {

    margin:
        0;

}


.membership-invoice-meta {

    margin-top:
        8px;

    text-transform:
        capitalize;

}


.membership-invoice-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    justify-content:
        flex-end;

}


.membership-invoice-empty {

    margin-top:
        48px;

}


/* =================================================
   07 Membership State Treatments
================================================= */

html.has-active-membership
.membership-hero-status {

    color:
        var(--member-gold);

}


html.membership-cancels-at-period-end
.membership-hero-status {

    color:
        var(--member-paper);

}


html.membership-cancels-at-period-end
[data-membership-renewal-setting] {

    color:
        var(--member-gold);

}


/* =================================================
   08 Responsive
================================================= */

@media (max-width: 1050px) {

    .membership-billing-layout,
    .membership-details-layout,
    .membership-options-layout {

        grid-template-columns:
            1fr;

    }


    .membership-option-actions {

        justify-content:
            flex-start;

    }

}


@media (max-width: 820px) {

    .membership-summary-card {

        min-height:
            auto;

    }

}


@media (max-width: 620px) {

    .membership-option-actions {

        display:
            grid;

        width:
            100%;

    }


    .membership-option-actions .member-action {

        justify-self:
            start;

    }

}


@media (max-width: 620px) {

    .membership-invoice-row {

        grid-template-columns:
            1fr;

        align-items:
            start;

    }


    .membership-invoice-actions {

        justify-content:
            flex-start;

    }

}