/* Styles for Pricing component */
@layer components {
    .pricing {
        & .pricing__title {
            font-size: var(--size-step-1);
            margin-block-end: var(--space-m);
            scroll-margin-block-start: calc(var(--header-height) + var(--space-m));
        }

        & .pricing__group + .pricing__group {
            margin-block-start: var(--space-l);
        }

        & .pricing__group-title {
            margin-block-end: var(--space-xs);
            font-family: var(--font-display);
            font-size: var(--size-step-0);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--color-text-muted);
        }

        & .pricing__list {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-s);
            padding: 0;
            list-style: none;
        }

        & .pricing__card {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
            padding: var(--space-m);
            background-color: var(--color-surface-raised);
            border: 1px solid var(--color-border);
            transition:
                border-color var(--duration-fast) var(--ease-jab),
                box-shadow var(--duration-fast) var(--ease-jab);

            &:hover {
                border-color: var(--color-border-accent);
                box-shadow: var(--shadow-raised);
            }
        }

        /* Exception: the plan the club wants people to take. Which one that is
           comes from `featured: true` in pricing.yaml, never from this file. */
        & .pricing__card[data-featured="true"] {
            border-color: var(--color-accent);
            box-shadow: var(--shadow-flat);
        }

        & .pricing__badge {
            position: absolute;
            inset-block-start: 0;
            inset-inline-end: var(--space-m);
            translate: 0 -50%;
            padding: 0.35em 0.8em;
            background-color: var(--color-accent);
            color: var(--color-on-accent);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            line-height: 1;
        }

        & .pricing__name {
            font-size: var(--size-step-1);
        }

        & .pricing__price {
            display: flex;
            align-items: baseline;
            gap: 0.15em;
            font-family: var(--font-display);
            line-height: 1;
            color: var(--color-accent);
        }

        & .pricing__amount {
            font-size: var(--size-step-2);
            font-variant-numeric: tabular-nums;
        }

        & .pricing__currency {
            font-size: var(--size-step-1);
        }

        & .pricing__unit {
            margin-inline-start: 0.3em;
            font-family: var(--font-body);
            font-size: var(--size-step--1);
            font-weight: 500;
            color: var(--color-text-muted);
        }

        /* Exception: no number to set in the display face, so this one is sized
           to sit on the same baseline as an amount without shouting like one. */
        & .pricing__on-request {
            font-size: var(--size-step-0);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        & .pricing__all-ages {
            margin-block-start: var(--space-m);
            font-family: var(--font-display);
            font-size: var(--size-step-0);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--color-accent);
        }

        & .pricing__callout {
            margin-block-start: var(--space-l);
            padding: var(--space-m);
            border-inline-start: 3px solid var(--color-accent);
            background-color: var(--color-surface-raised);
        }

        & .pricing__callout-title {
            font-family: var(--font-display);
            font-size: var(--size-step-1);
            line-height: 1.05;
            text-transform: uppercase;
        }

        & .pricing__callout-text {
            margin-block-start: var(--space-2xs);
            font-size: var(--size-step--1);
            line-height: 1.6;
            color: var(--color-text-muted);
            max-inline-size: 60ch;
        }

        & .pricing__description {
            font-size: var(--size-step--1);
            line-height: 1.5;
            color: var(--color-text-muted);
        }

        & .pricing__note {
            margin-block-start: var(--space-m);
            font-size: var(--size-step--1);
            line-height: 1.7;
            color: var(--color-text-muted);
        }

    }

    /*
     * A fixed track count, not `auto-fit`: the number of cards per group comes
     * from pricing.yaml, and auto-fit would reflow one group behind the other's
     * back the moment the club adds a fourth plan to it.
     *
     * Three across at the top end, because that is what each group currently
     * holds; a group of two simply leaves the third track empty, which reads as
     * deliberate next to the heading above it.
     */
    @media (width >= 48rem) {
        .pricing .pricing__list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-m) var(--space-s);
        }
    }

    @media (width >= 72rem) {
        .pricing .pricing__list {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}