/* ==========================================================================
   COMPONENT: Pricing cards & Sponsorship plan cards — token-aligned
   ========================================================================== */

/* Rely on tokens defined in tokens.css only */
:root {
    --pricing-card-bg: var(--color-surface-muted);
    --pricing-card-border: rgba(74, 74, 74, 0.06);
    --pricing-card-text: var(--color-text-primary);
    --pricing-card-radius: var(--radius-md);
    --pricing-card-gap: var(--gap-sm);
    --pricing-card-action-height: var(--gap-2xl);
    --pricing-card-min: 200px;
    --pricing-card-max: 320px;
    /* Plan color tokens */
    --pricing-current-bg: var(--color-primary-600);
    /* Free plan background */
    --pricing-current-action-bg: var(--color-primary-500);
    /* Free plan action visible color */
    --pricing-featured-bg: var(--color-primary-500);
    /* Plus plan background */
    --pricing-plus-action-bg: var(--color-primary-300);
    --pricing-plus-action-hover: var(--color-primary-100);
    /* Featured accent (gradient uses brand tokens) */
    --pricing-featured-accent: linear-gradient(90deg, var(--color-primary-600), var(--color-primary-700));
}

/* Grid — now applies to both pricing and sponsorship plan grids */
.pricing-grid,
.sponsorship-plans-grid {
    display: grid;
    gap: var(--pricing-card-gap);
    grid-template-columns: repeat(auto-fit, minmax(var(--pricing-card-min), var(--pricing-card-max)));
    justify-content: center;
    justify-items: stretch;
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-grid > li,
.sponsorship-plans-grid > li {
    display: flex;
}

/* Card base (tokenized colors only) — applies to pricing-card and sponsorship-plan */
.pricing-card,
.sponsorship-plan {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pricing-card-max);
    min-width: var(--pricing-card-min);
    display: flex;
    flex-direction: column;
    gap: var(--pricing-card-gap);
    background: var(--pricing-card-bg);
    color: var(--pricing-card-text);
    /* all card text uses token */
    border-radius: var(--pricing-card-radius);
    border: 1px solid var(--pricing-card-border);
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    padding: clamp(var(--padding-sm), 2.5vw, var(--padding-md));
    min-height: 480px;
    flex: 1 1 auto;
}

/* Hover lift for pointer users — do not apply to current plan */

.pricing-card:not(.pricing-card--current):hover,
.sponsorship-plan:not(.pricing-card--current):hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(16, 20, 50, 0.06);
}

/* CURRENT PLAN (Free) — tokenized background, CTA visible but non-interactive */
.pricing-card--current,
.sponsorship-plan--current {
    background: var(--pricing-current-bg);
    color: var(--pricing-card-text);
    border: 1px solid var(--pricing-card-border);
}

/* Free plan CTA uses primary-500 so it is visually present but remains non-clickable */
.pricing-card--current .pricing-card__action .btn,
.sponsorship-plan--current .sponsorship-plan__action .btn {
    background: var(--pricing-current-action-bg);
    color: var(--pricing-card-text);
    cursor: default;
    pointer-events: none;
    border: none;
    box-shadow: none;
}

.pricing-card--current .pricing-card__action .btn:hover,
.pricing-card--current .pricing-card__action .btn:focus,
.sponsorship-plan--current .sponsorship-plan__action .btn:hover,
.sponsorship-plan--current .sponsorship-plan__action .btn:focus {
    background: var(--pricing-current-action-bg);
    transform: none;
}

/* FEATURED / HIGHLIGHT visual (featured) */
.pricing-card--featured,
.sponsorship-plan--highlight {
    background: var(--pricing-featured-bg);
    border: 1px solid var(--pricing-card-border);
    position: relative;
    color: var(--pricing-card-text);
}

/* Optional badge (uses brand tokens) */
.pricing-card__badge,
.sponsorship-plan__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    background: var(--pricing-featured-accent);
}

/* Media / title
   Map pricing media/title to sponsorship equivalents */
.pricing-card__media,
.sponsorship-plan__header {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

.pricing-card__title,
.sponsorship-plan__title {
    margin: 0;
    font-size: clamp(var(--font-size-lg), 2.2vw, var(--font-size-xl));
    font-weight: var(--font-weight-bold);
    color: var(--pricing-card-text);
}

/* Price row: currency raised, amount large, period centered vertically */
.pricing-card__price,
.sponsorship-plan__price {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-xs);
}

.pricing-card__currency,
.sponsorship-plan__currency {
    font-size: var(--font-size-md);
    transform: translateY(-0.6em);
    color: var(--pricing-card-text);
}

.pricing-card__amount,
.sponsorship-plan__amount {
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-sm);
    color: var(--pricing-card-text);
}

.pricing-card__period,
.sponsorship-plan__period {
    font-size: var(--font-size-md);
    color: var(--pricing-card-text);
    opacity: 0.85;
    margin-left: var(--margin-sm);
    align-self: center;
}

/* Description */
.pricing-card__body,
.sponsorship-plan__body {
    width: 100%;
}

.pricing-card__desc,
.sponsorship-plan__desc {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    max-width: 40ch;
    color: var(--pricing-card-text);
}

/* CTA (action block) */
.pricing-card__action,
.sponsorship-plan__action {
    width: 100%;
    display: block;
    margin-top: var(--margin-sm);
    flex: 0 0 auto;
}

.pricing-card__action .btn,
.sponsorship-plan__action .btn {
    width: 100%;
    min-height: var(--pricing-card-action-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-sm) var(--padding-md);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    box-sizing: border-box;
}

/* PLUS / Featured CTA (clickable) tokenized */
.pricing-card--featured .pricing-card__action .btn,
.sponsorship-plan--highlight .sponsorship-plan__action .btn {
    background: var(--pricing-plus-action-bg);
    color: var(--color-text-primary);
    border: none;
}

.pricing-card--featured .pricing-card__action .btn:hover,
.pricing-card--featured .pricing-card__action .btn:focus,
.sponsorship-plan--highlight .sponsorship-plan__action .btn:hover,
.sponsorship-plan--highlight .sponsorship-plan__action .btn:focus {
    background: var(--pricing-plus-action-hover);
}

/* Feature list */
.pricing-card__features,
.sponsorship-plan__features {
    width: 100%;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--gap-md);
    margin-top: var(--margin-sm);
}

.pricing-feature,
.sponsorship-plan__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    color: var(--pricing-card-text);
    font-size: var(--font-size-sm);
}

/* Keep only 'sm' breakpoint for layout refinement (your official breakpoints) */
@media (min-width: 576px) {
    /* sm */
    .pricing-grid,
    .sponsorship-plans-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
        gap: calc(var(--pricing-card-gap) + 6px);
    }
}