/*========================================
=           MEMBERSHIP PAGE BASE         =
========================================*/

.membership {
  padding: 5rem 0;
  background-color: var(--body-color);
}

.membership__description {
  text-align: center;
  color: var(--text-color-light);
  max-width: 600px;
  margin: 0 auto 2rem;
}

/*========================================
=           MEMBERSHIP BENEFITS          =
========================================*/

.member-benefits__subtitle {
    text-align: center;
    font-size: 1rem;
    color: var(--text-color-light);
    max-width: 650px;
    margin: 0.5rem auto 2.8rem auto;
    line-height: 1.6;
}

.member-benefits__grid {
    margin-top: 2.5rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.member-benefit__card {
    background: linear-gradient(135deg, var(--container-color), var(--body-color-alt));
    padding: 2rem;
    border-radius: 1.2rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

.member-benefit__card:hover {
    transform: translateY(-7px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.25);
    background: linear-gradient(135deg, var(--first-color), var(--container-color));
}

.member-benefit__icon {
    font-size: 2.3rem;
    color: var(--first-color);
    margin-bottom: .9rem;
    transition: color .35s ease;
}

.member-benefit__card:hover .member-benefit__icon {
    color: #fff;
}

.member-benefit__title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.member-benefit__text {
    font-size: .95rem;
    color: var(--text-color-light);
    line-height: 1.6;
}


/*========================================
=           MEMBERSHIP TIERS             =
========================================*/

.member-tiers__subtitle {
    text-align: center;
    color: var(--text-color-light);
    margin: 0 auto 2rem;
    max-width: 600px;
}

.member-tiers__grid {
    margin-top: 2rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.member-tier__card {
    background: var(--container-color);
    padding: 2rem;
    border-radius: 1.2rem;
    text-align: center;
    border: 1px solid var(--first-color);
    transition: .3s ease;
}

.member-tier__card.featured {
    background: linear-gradient(135deg, var(--first-color), var(--container-color));
    color: #fff;
    border: none;
}

.member-tier__name {
    font-size: 1.3rem;
    margin-bottom: .5rem;
}

.member-tier__price {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.member-tier__list li {
    margin-bottom: .4rem;
    font-size: .95rem;
}

.member-tier__btn {
    margin-top: 1rem;
    width: 100%;
}


/*========================================
=         MEMBERSHIP HIGHLIGHTS          =
========================================*/

.membership-highlights__grid {
    margin-top: 2.5rem;
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.highlight__card {
    background: var(--container-color);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    transition: .3s ease;
}

.highlight__card:hover {
    transform: translateY(-5px);
}

.highlight__icon {
    font-size: 2.2rem;
    color: var(--first-color);
    margin-bottom: 1rem;
}

.highlight__title {
    font-size: 1.2rem;
    margin-bottom: .4rem;
    font-weight: 600;
}

.highlight__text {
    font-size: .95rem;
    color: var(--text-color-light);
}


/*========================================
=           MEMBER TESTIMONIALS          =
========================================*/

.member-testimonials__grid {
    margin-top: 2.5rem;
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.testimonial__card {
    background: var(--container-color);
    padding: 1.8rem;
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transition: .3s ease;
}

.testimonial__card:hover {
    transform: translateY(-6px);
}

.testimonial__text {
    font-size: 0.95rem;
    color: var(--text-color-light);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.testimonial__author {
    font-weight: 600;
    color: var(--first-color);
    font-size: 1rem;
}


/*========================================
=           DARK MODE SUPPORT            =
========================================*/

body.dark-theme .member-tier__card,
body.dark-theme .highlight__card,
body.dark-theme .testimonial__card {
    background: var(--container-color-alt);
}

body.dark-theme .member-tier__card.featured {
    background: linear-gradient(135deg, var(--first-color), #333);
}

body.dark-theme .member-benefit__card {
    background: linear-gradient(135deg, var(--container-color-alt), var(--body-color));
}

body.dark-theme .member-benefit__card:hover {
    background: linear-gradient(135deg, var(--first-color), var(--container-color-alt));
}

body.dark-theme .highlight__text,
body.dark-theme .member-benefit__text,
body.dark-theme .testimonial__text {
    color: var(--text-color-light);
}