/* ========================================
   Shared Pricing Cards
   Used by the landing page and /pricing/.
   Source partial: /partials/pricing-cards.php

   Premium accents use --premium-* (the semantic alias over the blue brand
   ramp in custom-colors.css), never --blue-* or --purple-* directly.
   ======================================== */

/* Billing cycle toggle */
.pcards-toggle {
    display: flex;
    margin: 0 auto 40px;
    padding: 4px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    max-width: 360px;
    width: 100%;
    justify-content: center;
}

.pcards-cycle-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--black);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    white-space: nowrap;
}

.pcards-cycle-btn.active {
    background: var(--white);
    color: var(--premium-600);
    box-shadow: var(--elevation-sm);
}

.pcards-save {
    display: inline-block;
    padding: 2px 8px;
    background: var(--premium-100);
    color: var(--premium-700);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 700;
}

.pcards-cycle-btn:not(.active) .pcards-save {
    background: var(--gray-200);
    color: var(--black);
}

/* Card grid */
.pcards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    /* No row gap: with subgrid below, the card's internal rows ARE this grid's
       rows, so any row-gap here would open a 24px hole between every row inside
       the cards. Spacing between rows is set by margins on the card children.
       The mobile breakpoint puts the row gap back for stacked cards. */
    row-gap: 0;
    max-width: 800px;
    margin: 0 auto;
    /* Default `stretch` alignment: both cards match the taller one's height,
       and .pcard-features absorbs the slack via flex: 1. */
}

.pcards-grid[data-active-cycle="monthly"] [data-cycle="yearly"] { display: none; }
.pcards-grid[data-active-cycle="yearly"] [data-cycle="monthly"] { display: none; }

@media (max-width: 768px) {
    .pcards-grid {
        grid-template-columns: 1fr;
        row-gap: 24px;
        max-width: 450px;
    }
}

/* Card */
.pcard {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 32px;
    border: 1px solid var(--gray-200);
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.pcard-premium {
    background: var(--premium-50);
    border: 2px solid var(--premium-500);
    padding: 31px;
}

/* Row alignment across the two cards.
   Each card exposes the same six children (name, pitch, price, CTA, list
   lead-in, features) and adopts the grid's rows via subgrid, so a pitch that
   wraps to three lines in one card lifts the matching row in the other and the
   CTAs stay level. This replaces a hand-tuned min-height on .pcard-pitch, which
   silently broke whenever the copy changed length.
   Must come AFTER the .pcard flex rule above: @supports adds no specificity, so
   a later `display: flex` would simply win. The flex layout remains the
   fallback for browsers without subgrid, where the cards are still equal height
   and only the CTAs can drift. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 769px) {
        .pcards-grid {
            /* name, pitch, price, CTA, lead-in, features */
            grid-template-rows: auto auto auto auto auto 1fr;
        }

        .pcard {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 6;
            row-gap: 0;
        }
    }
}

/* "Recommended" flag riding the top edge of the Premium card */
.pcard-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--premium-500);
    color: var(--white);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pcard-price-block {
    margin-bottom: 24px;
}

/* Plan name: chip + the word "Plan" */
.pcard-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--black);
}

.pcard-chip {
    display: inline-block;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--gray-200);
    color: var(--black);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

.pcard-chip-premium {
    background: var(--premium-500);
    color: var(--white);
}

.pcard-pitch {
    margin: 0 0 24px;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--black);
    min-height: 3em;
}

/* Price display. Fixed two-row shape (amount, then struck-out line) in every
   card and every cycle, so nothing below it ever moves. */
.pcard-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 4px;
}

.pcard-amount-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* Slide-and-fade when the cycle changes. The class is re-applied by the
   toggle handler on each switch to restart the animation. */
@keyframes pcard-price-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pcard-price-in-left {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.pcard-price.price-swap-right {
    animation: pcard-price-in-right 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard-price.price-swap-left {
    animation: pcard-price-in-left 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .pcard-price.price-swap-right,
    .pcard-price.price-swap-left {
        animation: none;
    }
}

.pcard-currency {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--black);
}

.pcard-number {
    font-size: var(--text-6xl);
    font-weight: 700;
    line-height: 1;
    color: var(--black);
}

.pcard-premium .pcard-currency,
.pcard-premium .pcard-number {
    color: var(--premium-600);
}

.pcard-period {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--black);
}

.pcard-premium .pcard-period {
    color: var(--premium-600);
}

.pcard-strike {
    color: var(--black);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--premium-alpha-40);
    line-height: 1.2;
}

/* Occupies the strike line's row without showing it, so the monthly view is
   exactly as tall as the annual one. */
.pcard-strike-spacer {
    visibility: hidden;
}

.pcard-alt {
    font-size: var(--text-xs);
    color: var(--black);
    font-weight: 500;
    margin: 6px 0 0;
}

/* CTAs sit above the feature list */
.pcard-cta {
    display: block;
    width: 100%;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-xs);
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    cursor: pointer;
}

.pcard-cta-free {
    background: var(--white);
    color: var(--premium-600);
    border: 2px solid var(--premium-500);
}

.pcard-cta-free:hover {
    background: var(--premium-50);
    transform: translateY(-1px);
    box-shadow: var(--elevation-brand-strong);
    color: var(--premium-700);
}

.pcard-cta-premium {
    background: var(--premium-500);
    color: var(--white);
    border: 2px solid var(--premium-500);
}

.pcard-cta-premium:hover {
    background: var(--premium-600);
    border-color: var(--premium-600);
    transform: translateY(-1px);
    box-shadow: var(--elevation-brand-strong);
    color: var(--white);
}

/* "Everything in Free, plus..." lead-in above the Premium feature list */
.pcard-plus {
    margin: 28px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--premium-200);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--premium-600);
}

/* The Free card's counterpart to .pcard-plus. It has no lead-in text to show,
   but it occupies the same grid row so both feature lists start level, and it
   carries the divider the Free card would otherwise draw itself. Transparent
   text rather than visibility:hidden, which would take the border with it. */
.pcard-plus-spacer {
    color: transparent;
    border-top-color: var(--gray-200);
}

/* Features list */
.pcard-features {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    flex: 1;
}

.pcard-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: var(--text-sm);
    line-height: 1.45;
}

.pcard-features li svg {
    color: var(--black);
    flex-shrink: 0;
    margin-top: 1px;
}

.pcard-premium .pcard-features li svg {
    color: var(--premium-500);
}

.pcard-features li span {
    color: var(--black);
}