/* The grid itself (3 equal columns, 32px gap, straight to 1 column at lg) lived in the
   prototype's layout/pricing.css, scoped to .pricing-hero .pricing-cards, never copied into
   this theme when card-pricing was first built — only the card recipe below was. Made it a bare
   rule here instead of re-scoping to a hero class, since .pricing-cards only ever exists as
   tt360/card-grid's own auto-detected pricing recipe now (see inc/blocks/card-grid/render.php),
   not a page-specific selector that needs scoping to avoid colliding with anything else. */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 55px;
}

/* lg: three plans don't split evenly into two columns, so this skips straight to one column
   instead of squeezing three into a shrinking row, matching the prototype exactly. */
@media (max-width: 991.98px) {
    .pricing-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pricing-card {
    position: relative;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--dark-green), 0.15);
    border-radius: 0 0 6px 6px;
}

.pricing-card .card-body {
    display: flex;
    flex-direction: column;
    padding: 32px;
}

.pricing-card .plan-eyebrow {
    margin: 0;
    font-family: var(--font-eyebrow);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(var(--charcoal), 1);
}

.pricing-card .plan-name {
    margin: 16px 0 0;
    font-family: var(--font-headline);
    font-size: 55px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1.28px;
    color: rgba(var(--terra-green), 1);
}

.pricing-card .plan-minimum {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(var(--charcoal), 1);
}

.pricing-card .minimum-icon {
    flex: none;
    color: rgba(var(--terra-green), 1);
}

.pricing-card .plan-included-label {
    margin: 16px 0 0;
    font-size: 14px;
    color: rgba(var(--charcoal), 1);
}

.pricing-card .plan-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.pricing-card .plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    line-height: 1.5;
}

/* The static prototype hardcoded width/height="18" directly on each inline <svg>. The theme
   injects the same checkmark from the shared icon library instead (its native size is 32x32,
   sized for the lifecycle Closeout stage's own larger circle), so this context needs its own
   explicit size the prototype never had to set in CSS. */
.pricing-card .plan-features svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: rgba(var(--terra-green), 1);
}

.pricing-card .plan-footnote {
    margin: 16px 0 0;
    font-size: 14px;
    font-style: italic;
    text-align: right;
    color: rgba(var(--charcoal), 1);
}

/* .pricing-cta now lives on a real core/button block (inside core/buttons), not the plain <div>
   this rule originally targeted when the shared CTA was hardcoded PHP markup. Gutenberg's own
   global styles set a competing rule on any direct child of a flex-layout container
   (".is-layout-flex > :is(*, div)", margin: 0, and separately ".wp-block-buttons >
   .wp-block-button", display: inline-block) at a combined specificity this single class alone
   can't beat regardless of stylesheet order. Repeating the wrapper class is the same bump
   already used in components/button-block-styles.css for an unrelated instance of this same
   problem. */
.wp-block-button.wp-block-button.pricing-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    margin: 40px auto 0;
}

/* Each card gets its own CTA on tablet and phones (the same range where the cards already stack
   to one column), so the shared button below the row is dropped there. The card-grid block's own
   "Show card buttons" setting (default "On phones only") can switch this to always-visible — for
   a page that removes the shared button entirely and still needs a button on every card at every
   width — via the pricing-cards-buttons-always class card-grid's render.php adds when that
   setting is "Always." More specific than the bare rule above, so it wins at every width,
   including desktop, regardless of stylesheet order. */
.pricing-card .pricing-card-cta {
    display: none;
    width: 100%;
    margin: 16px 0 0;
}

.pricing-cards.pricing-cards-buttons-always .pricing-card-cta {
    display: flex;
    justify-content: center;
}

/* lg */
@media (max-width: 991.98px) {
    .pricing-card .pricing-card-cta {
        display: flex;
        justify-content: center;
    }

    /* Same specificity bump as the base rule above, needed here too: Gutenberg's own
       ".wp-block-buttons > .wp-block-button" global-styles rule (display: inline-block) would
       otherwise win over a plain ".pricing-cta { display: none }" and the shared button would
       stay visible on tablet/phone alongside each card's own copy. */
    .wp-block-button.wp-block-button.pricing-cta {
        display: none;
    }
}