/**
 * Add-listing type chooser — the Faith Village card, in a grid.
 *
 * Same anatomy as `.mfl-fv__card` on the home page (photo, a tone-coloured disc
 * straddling the seam, name, one line of copy) so choosing a type on
 * /add-listing/ looks like choosing one on the home page. Two deliberate
 * differences: no fan — these are a decision list, not a display shelf, and a
 * rotated card is harder to scan — and the cards are wider, so the picture is
 * 4:3 rather than the fan's 3:4 and every size steps up with it.
 */

.mfv-tc {
    --tc-badge: #0e7490;
    --tc-tint: #e8f4f8;
    display: grid;
    /* Three across, which lands seven types as 3 / 3 / 1. `auto-fit` rather
       than a fixed three so the row collapses on its own on narrow screens
       instead of needing a breakpoint per step. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(16px, 2vw, 26px);
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
@media (min-width: 900px) { .mfv-tc { grid-template-columns: repeat(3, 1fr); } }

.mfv-tc__card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--mfv-radius-card, 14px);
    background: var(--tc-tint);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 38px -22px rgba(15, 23, 42, .45);
    overflow: visible;
    transition: transform .2s ease, box-shadow .2s ease;
}
.mfv-tc__card:hover,
.mfv-tc__card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08), 0 28px 54px -24px rgba(15, 23, 42, .5);
}

/* ⚠️ The clipping happens on `__frame`, never on `__photo`: the disc straddles
   the photo's bottom edge, and `overflow: hidden` here shaves it in half. */
.mfv-tc__photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #dbe7ee;
    border-radius: var(--mfv-radius-card, 14px) var(--mfv-radius-card, 14px) 0 0;
}
.mfv-tc__frame {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
}
.mfv-tc__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.mfv-tc__card:hover .mfv-tc__frame img { transform: scale(1.04); }

.mfv-tc__badge {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 4;
    transform: translate(-50%, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--tc-badge);
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}
.mfv-tc__badge i,
.mfv-tc__badge svg { font-size: 24px; width: 24px; height: 24px; line-height: 1; color: #fff; }

.mfv-tc__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* 38px clears the 52px disc, which overhangs the seam by 26. */
    padding: 38px 16px 20px;
    text-align: center;
}
.mfv-tc__name {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f2350;
    overflow-wrap: anywhere;
}
.mfv-tc__text {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: var(--mfv-slate-600, #475569);
}

/* The whole card is the target. A stretched pseudo-element rather than wrapping
   the card in an <a>, so the markup stays a list and nothing nests in a link. */
.mfv-tc__tap { position: static; }
.mfv-tc__tap::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.mfv-tc__tap:focus-visible::after { outline: 3px solid var(--mfv-primary, #0e7490); outline-offset: 3px; }

/* The theme's flip-card skin would otherwise still be styling these. */
.choose-type .mfv-tc .cat-card,
.choose-type .mfv-tc .ac-front-side,
.choose-type .mfv-tc .ac-back-side { display: none !important; }