/* ==========================================================================
   Membership plan cards — responsive layout override
   --------------------------------------------------------------------------
   The theme lays these out as fixed-width floats (960px wrapper, 300px cards).
   Because the cards are not the same height, the third one catches on the
   tallest card and wraps onto its own row, and the fixed widths do not adapt
   to narrow screens.

   This replaces that with a grid: always 3 across on desktop, 2 on tablet,
   1 on phones, with every card the same height and the price/button block
   pinned to the bottom so the rows line up.

   Loaded after css/style.css on the homepage and the Membership Plans page.
   ========================================================================== */

.pricing-wrapper {
    width: auto !important;       /* beats the theme's 960px / 768px / 420px */
    max-width: 1080px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

.pricing-wrapper .pricing-table {
    width: auto !important;       /* beats the theme's 300px / 236px / 100% */
    float: none !important;
    margin: 0 !important;
    display: flex !important;     /* beats the theme's display:block at <768px */
    flex-direction: column;
    min-width: 0;                 /* let long words wrap instead of overflowing */
}

/* The feature list absorbs the spare height, so every card's price row and
   Register button sit on the same baseline. */
.pricing-wrapper .pricing-table .table-list {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.pricing-wrapper .pricing-table .table-buy {
    margin-top: auto;
}

/* Long plan titles / prices should wrap rather than spill out of the card. */
.pricing-wrapper .pricing-title,
.pricing-wrapper .price,
.pricing-wrapper .table-list li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ---- Tablet: still three across, just tighter ----
   Deliberately no two-column step: two cards plus a lone third looks
   lopsided, which is the layout this file exists to fix. It is three
   across or a clean single stack, nothing in between. */
@media (max-width: 1100px) {
    .pricing-wrapper {
        gap: 18px;
        padding: 0 4px;
    }

    .pricing-wrapper .table-list li {
        font-size: 13px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .pricing-wrapper .price {
        font-size: 1.7em;
    }

    .pricing-wrapper .pricing-title {
        font-size: 15px;
    }
}

/* Narrow tablets: keep three across, but stack the price above the button.
   The theme lays that row out as `display:flex; justify-content:space-between`
   with a `white-space:nowrap` button, so in a ~250px card the two cannot
   shrink and the button gets clipped off the card edge. */
@media (max-width: 991px) {
    .pricing-wrapper .pricing-table .table-buy {
        flex-direction: column;
        gap: 9px;
        padding: 14px 10px;
        text-align: center;
    }

    .pricing-wrapper .pricing-table .table-buy p {
        float: none !important;
        font-size: 19px;
    }

    .pricing-wrapper .pricing-table .pricing-action {
        float: none !important;
        display: block;
        padding: 10px 18px;
        font-size: 14px;
    }
}

/* ---- Phone: one across ---- */
@media (max-width: 767px) {
    .pricing-wrapper {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        gap: 18px;
        margin-top: 26px;
        padding: 0;
    }

    /* Back to the roomy defaults now there is a full width to play with. */
    .pricing-wrapper .table-list li {
        font-size: 14px;
    }

    .pricing-wrapper .table-buy p,
    .pricing-wrapper .table-buy .pricing-action {
        display: inline-block;
        margin: 0;
    }
}

/* ==========================================================================
   "Charges & Subscription" cards on the Contact page
   These are driven by the membership plans, so they carry a plan name and a
   short feature list rather than a single description line.
   ========================================================================== */

.fee-plan .fee-plan-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #8a1538;
}

.fee-plan .fee-plan-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    text-align: left;
    display: inline-block;
}

.fee-plan .fee-plan-list li {
    font-size: 14px;
    line-height: 1.75;
    color: #555;
}

.fee-plan .fee-plan-list li .fa {
    color: #1f9d55;
    margin-right: 7px;
}