/*
|--------------------------------------------------------------------------
| CyberDojo - Memberships Page
|--------------------------------------------------------------------------
|
| Public membership plans and optional add-ons.
|
| Handles:
|
| - Membership hero
| - Hero feature points
| - Membership cards
| - Selected plan state
| - URL-highlight state
| - Plan details
| - Feature lists
| - Add-ons
| - Empty state
| - Membership notice
| - CTA
| - Responsive layouts
|
*/


/*
|--------------------------------------------------------------------------
| Page Sections
|--------------------------------------------------------------------------
*/

.memberships-hero,
.membership-plans,
.membership-addons,
.membership-notice,
.membership-cta {
    position: relative;

    width: 100%;

    padding:
        var(--space-20)
        0;
}


.memberships-hero,
.membership-addons,
.membership-cta {
    background:
        var(--bg-secondary);
}


.membership-plans,
.membership-notice {
    background:
        var(--bg-primary);
}


/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.memberships-container {
    width:
        min(
            var(--container-width),
            calc(
                100%
                - (
                    var(--container-padding)
                    * 2
                )
            )
        );

    margin:
        0
        auto;
}


/*
|--------------------------------------------------------------------------
| Section Eyebrow
|--------------------------------------------------------------------------
*/

.memberships-page
.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-3);

    color:
        var(--accent);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-black);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.memberships-page
.section-eyebrow::before {
    content: "";

    width: 30px;
    height: 3px;

    border-radius:
        var(--radius-pill);

    background:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.memberships-hero {
    overflow: hidden;
}


.memberships-hero::before {
    content: "";

    position: absolute;

    top: -220px;
    right: -180px;

    width: 520px;
    height: 520px;

    border-radius:
        var(--radius-round);

    background:
        radial-gradient(
            circle,
            rgba(
                var(--accent-rgb),
                0.11
            ),
            transparent 68%
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Hero Grid
|--------------------------------------------------------------------------
*/

.memberships-hero-grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.1fr
        )
        minmax(
            0,
            0.9fr
        );

    gap:
        var(--space-12);

    align-items: center;
}


/*
|--------------------------------------------------------------------------
| Hero Content
|--------------------------------------------------------------------------
*/

.memberships-hero-content {
    min-width: 0;
}


.memberships-hero-content h1 {
    max-width: 760px;

    margin:
        var(--space-3)
        0
        var(--space-5);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.8rem
        );

    font-weight:
        var(--font-black);

    line-height:
        0.98;

    letter-spacing:
        -0.045em;
}


.memberships-hero-content h1 span {
    color:
        var(--accent);
}


.memberships-hero-content > p {
    max-width: 680px;

    margin: 0;

    color:
        var(--text-muted);

    font-size:
        var(--text-lg);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Hero Points
|--------------------------------------------------------------------------
*/

.memberships-hero-points {
    display: grid;

    gap:
        var(--space-3);

    margin-top:
        var(--space-6);
}


.memberships-hero-points > div {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-3);

    color:
        var(--text-secondary);

    font-size:
        var(--text-sm);

    line-height:
        1.5;
}


.memberships-hero-points i {
    flex-shrink: 0;

    margin-top: 2px;

    color:
        var(--accent);

    font-size:
        1rem;
}


/*
|--------------------------------------------------------------------------
| Hero Media
|--------------------------------------------------------------------------
*/

.memberships-hero-media {
    position: relative;

    min-width: 0;
}


.memberships-hero-media::before {
    content: "";

    position: absolute;

    inset: 12% -8% -10% 16%;

    border-radius:
        var(--radius-2xl);

    background:
        rgba(
            var(--accent-rgb),
            0.08
        );

    filter:
        blur(38px);

    pointer-events: none;
}


.memberships-hero-image {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

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

    border-radius:
        var(--radius-2xl);

    object-fit: cover;

    box-shadow:
        var(--shadow-lg);
}


/*
|--------------------------------------------------------------------------
| Section Heading
|--------------------------------------------------------------------------
*/

.memberships-section-heading {
    max-width: 780px;

    margin:
        0
        auto
        var(--space-10);

    text-align: center;
}


.memberships-section-heading
.section-eyebrow {
    justify-content: center;
}


.memberships-section-heading h2 {
    margin:
        var(--space-3)
        0
        var(--space-4);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    font-weight:
        var(--font-black);

    line-height:
        1.08;

    letter-spacing:
        -0.025em;
}


.memberships-section-heading h2 span {
    color:
        var(--accent);
}


.memberships-section-heading p {
    margin: 0;

    color:
        var(--text-muted);

    font-size:
        var(--text-base);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Membership Grid
|--------------------------------------------------------------------------
*/

.membership-grid {
    display: grid;

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

    gap:
        var(--space-5);

    align-items: stretch;
}


/*
|--------------------------------------------------------------------------
| Membership Card
|--------------------------------------------------------------------------
*/

.membership-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height: 100%;

    padding:
        var(--space-6);

    overflow: hidden;

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

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            150deg,
            var(--bg-card),
            rgba(
                var(--accent-rgb),
                0.018
            )
        );

    box-shadow:
        var(--shadow-sm);

    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.membership-card:hover {
    border-color:
        var(--border-hover);

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-accent);
}


/*
|--------------------------------------------------------------------------
| Selected Membership
|--------------------------------------------------------------------------
*/

.membership-card.is-selected {
    border-color:
        var(--accent);

    background:
        linear-gradient(
            150deg,
            rgba(
                var(--accent-rgb),
                0.09
            ),
            var(--bg-card)
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            var(--accent-rgb),
            0.12
        ),
        var(--shadow-accent-strong);
}


.membership-card.is-selected::before {
    content: "Selected";

    position: absolute;

    top: 14px;
    right: -31px;

    width: 118px;

    padding:
        5px
        0;

    background:
        var(--accent);

    color:
        var(--text-on-accent);

    font-size:
        0.62rem;

    font-weight:
        var(--font-black);

    letter-spacing:
        0.08em;

    text-align: center;

    text-transform:
        uppercase;

    transform:
        rotate(45deg);

    box-shadow:
        var(--shadow-sm);
}


/*
|--------------------------------------------------------------------------
| Highlight From URL Hash
|--------------------------------------------------------------------------
*/

.membership-card.is-highlighted {
    animation:
        membership-highlight
        1.8s
        ease;
}


@keyframes membership-highlight {

    0%,
    100% {
        box-shadow:
            var(--shadow-sm);
    }

    35%,
    65% {
        border-color:
            var(--accent);

        box-shadow:
            var(--shadow-accent-strong);
    }

}


/*
|--------------------------------------------------------------------------
| Membership Header
|--------------------------------------------------------------------------
*/

.membership-card-header {
    min-width: 0;
}


.membership-label {
    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding:
        0
        9px;

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

    border-radius:
        var(--radius-pill);

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        0.66rem;

    font-weight:
        var(--font-black);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


.membership-card h3 {
    margin:
        var(--space-4)
        0
        0;

    color:
        var(--text-primary);

    font-size:
        var(--heading-sm);

    font-weight:
        var(--font-black);

    line-height:
        1.18;

    overflow-wrap:
        anywhere;
}


.membership-card-header p {
    margin:
        var(--space-3)
        0
        0;

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Membership Price
|--------------------------------------------------------------------------
*/

.membership-price {
    display: flex;

    align-items: flex-start;

    gap:
        4px;

    margin:
        var(--space-6)
        0;

    color:
        var(--accent);
}


.membership-currency {
    margin-top: 6px;

    font-size:
        var(--text-base);

    font-weight:
        var(--font-black);
}


.membership-price strong {
    color:
        var(--accent);

    font-size:
        clamp(
            2.35rem,
            4vw,
            3.1rem
        );

    font-weight:
        var(--font-black);

    line-height: 1;

    letter-spacing:
        -0.035em;
}


/*
|--------------------------------------------------------------------------
| Membership Details
|--------------------------------------------------------------------------
*/

.membership-details {
    display: grid;

    gap:
        var(--space-2);

    margin-bottom:
        var(--space-5);

    padding:
        var(--space-4);

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

    border-radius:
        var(--radius-md);

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}


.membership-details > div {
    display: flex;

    align-items: center;

    gap:
        var(--space-3);

    color:
        var(--text-secondary);

    font-size:
        var(--text-sm);
}


.membership-details i {
    width: 18px;

    flex:
        0
        0
        18px;

    color:
        var(--accent);

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Features
|--------------------------------------------------------------------------
*/

.membership-features {
    display: grid;

    gap:
        var(--space-3);

    margin:
        0
        0
        var(--space-6);

    padding: 0;

    list-style: none;
}


.membership-features li {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-3);

    color:
        var(--text-secondary);

    font-size:
        var(--text-sm);

    line-height:
        1.5;
}


.membership-features i {
    flex-shrink: 0;

    margin-top:
        2px;

    color:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Membership Action
|--------------------------------------------------------------------------
*/

.membership-card-action {
    margin-top:
        auto;

    padding-top:
        var(--space-3);
}


.membership-card-action
.btn-primary,
.membership-card-action
.btn-secondary {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Empty Membership State
|--------------------------------------------------------------------------
*/

.membership-empty {
    display: grid;

    place-items: center;

    max-width:
        700px;

    min-height:
        280px;

    margin:
        0
        auto;

    padding:
        var(--space-10)
        var(--space-6);

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

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-card);

    text-align: center;
}


.membership-empty > i {
    margin-bottom:
        var(--space-4);

    color:
        var(--accent);

    font-size:
        2.2rem;
}


.membership-empty h3 {
    margin: 0;

    color:
        var(--text-primary);

    font-size:
        var(--heading-sm);
}


.membership-empty p {
    max-width:
        520px;

    margin:
        var(--space-3)
        auto
        0;

    color:
        var(--text-muted);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Add-On Grid
|--------------------------------------------------------------------------
*/

.addon-grid {
    display: grid;

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

    gap:
        var(--space-5);
}


/*
|--------------------------------------------------------------------------
| Add-On Card
|--------------------------------------------------------------------------
*/

.addon-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        var(--space-6);

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

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-card);

    box-shadow:
        var(--shadow-sm);

    transition:
        border-color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.addon-card:hover {
    border-color:
        var(--border-hover);

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-accent);
}


/*
|--------------------------------------------------------------------------
| Add-On Icon
|--------------------------------------------------------------------------
*/

.addon-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex:
        0
        0
        48px;

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

    border-radius:
        var(--radius-lg);

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        1.1rem;
}


/*
|--------------------------------------------------------------------------
| Add-On Content
|--------------------------------------------------------------------------
*/

.addon-card h3 {
    margin:
        var(--space-4)
        0
        0;

    color:
        var(--text-primary);

    font-size:
        var(--text-xl);

    font-weight:
        var(--font-extrabold);

    line-height:
        1.25;
}


.addon-card p {
    margin:
        var(--space-3)
        0
        0;

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Add-On Price
|--------------------------------------------------------------------------
*/

.addon-price {
    display: flex;

    align-items: flex-start;

    gap:
        4px;

    margin:
        var(--space-6)
        0;

    color:
        var(--accent);
}


.addon-price span {
    margin-top:
        5px;

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-black);
}


.addon-price strong {
    color:
        var(--accent);

    font-size:
        2.15rem;

    font-weight:
        var(--font-black);

    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Add-On Actions
|--------------------------------------------------------------------------
*/

.addon-card
.btn-primary,
.addon-card
.btn-secondary {
    width: 100%;

    margin-top:
        auto;
}


/*
|--------------------------------------------------------------------------
| Membership Notice
|--------------------------------------------------------------------------
*/

.membership-notice-card {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-5);

    padding:
        var(--space-6);

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

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            var(--accent-bg-soft),
            var(--bg-card)
        );
}


.membership-notice-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex:
        0
        0
        48px;

    border-radius:
        var(--radius-lg);

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        1.3rem;
}


.membership-notice-card h3 {
    margin: 0;

    color:
        var(--text-primary);

    font-size:
        var(--text-lg);

    font-weight:
        var(--font-extrabold);
}


.membership-notice-card p {
    margin:
        var(--space-2)
        0
        0;

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.membership-cta-card {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        var(--space-8);

    padding:
        var(--space-8);

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

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            var(--bg-card),
            rgba(
                var(--accent-rgb),
                0.035
            )
        );

    box-shadow:
        var(--shadow-md);
}


.membership-cta h2 {
    margin:
        var(--space-3)
        0
        var(--space-4);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        var(--font-black);

    line-height:
        1.08;
}


.membership-cta h2 span {
    color:
        var(--accent);
}


.membership-cta p {
    max-width:
        640px;

    margin: 0;

    color:
        var(--text-muted);

    line-height:
        var(--leading-relaxed);
}


.membership-cta-card
> .btn-primary,
.membership-cta-card
> .btn-secondary {
    flex-shrink: 0;
}


/*
|--------------------------------------------------------------------------
| Ready State
|--------------------------------------------------------------------------
*/

.memberships-page-ready
.membership-card,
.memberships-page-ready
.addon-card {
    visibility: visible;
}


/*
|--------------------------------------------------------------------------
| Medium Desktop
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .membership-grid,
    .addon-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .memberships-hero,
    .membership-plans,
    .membership-addons,
    .membership-notice,
    .membership-cta {
        padding:
            var(--space-16)
            0;
    }


    .memberships-hero-grid {
        grid-template-columns:
            1fr;

        gap:
            var(--space-8);
    }


    .memberships-hero-media {
        max-width:
            720px;
    }


    .membership-cta-card {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .membership-notice-card {
        align-items:
            flex-start;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .memberships-hero,
    .membership-plans,
    .membership-addons,
    .membership-notice,
    .membership-cta {
        padding:
            var(--space-12)
            0;
    }


    .memberships-hero-content h1 {
        font-size:
            clamp(
                2.3rem,
                12vw,
                3.35rem
            );
    }


    .memberships-hero-content > p {
        font-size:
            var(--text-base);
    }


    .membership-grid,
    .addon-grid {
        grid-template-columns:
            1fr;
    }


    .membership-card,
    .addon-card {
        padding:
            var(--space-5);
    }


    .memberships-section-heading {
        margin-bottom:
            var(--space-8);
    }


    .membership-notice-card {
        padding:
            var(--space-5);
    }


    .membership-cta-card {
        padding:
            var(--space-5);
    }


    .membership-cta-card
    > .btn-primary,
    .membership-cta-card
    > .btn-secondary {
        width: 100%;
    }

}


/*
|--------------------------------------------------------------------------
| Very Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    .memberships-hero-points > div {
        font-size:
            var(--text-xs);
    }


    .membership-card h3 {
        font-size:
            var(--text-xl);
    }


    .membership-price strong {
        font-size:
            2.3rem;
    }


    .membership-notice-card {
        flex-direction:
            column;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .membership-card,
    .addon-card {
        transition:
            none;
    }


    .membership-card.is-highlighted {
        animation:
            none;
    }

}