/* =========================================================
   MSHINDO PARISH — QUICK FINDER v2 (modern bento design)
   ========================================================= */

.finder.fv2 { position: relative; overflow: hidden; isolation: isolate; padding: 110px 0 120px; background: #0d0404; color: #fff; }

/* aurora glow + faint grid (replaces the section's gold line and ✦) */
.finder.fv2::before {
    content: ''; position: absolute; inset: 0; height: auto; z-index: -2;
    background:
        radial-gradient(900px 520px at 12% -5%, rgba(139,17,17,.65), transparent 60%),
        radial-gradient(700px 480px at 92% 15%, rgba(212,175,55,.20), transparent 60%),
        radial-gradient(820px 560px at 60% 115%, rgba(94,58,154,.28), transparent 60%),
        #0d0404;
}
.finder.fv2::after {
    content: ''; position: absolute; inset: 0; top: 0; left: 0; transform: none; z-index: -1; opacity: 1; font-size: 0;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 25%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 25%, #000 25%, transparent 72%);
}

/* ---------- heading ---------- */
.fv2 .ornament-line {
    display: table; margin: 0 auto 22px; padding: 7px 16px 7px 14px; border-radius: 999px;
    font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .22em;
    color: #f3d77a; background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.28);
}
.fv2 .ornament-line::before {
    content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 10px 1px 0; border-radius: 50%; vertical-align: middle;
    background: #FFD700; box-shadow: 0 0 10px #FFD700; font-size: 0;
}
.fv2 .ornament-line::after { content: none; }
.fv2 h2 {
    font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: none;
    font-size: clamp(2.3rem, 5.4vw, 4rem); letter-spacing: -.035em; line-height: 1.05;
    padding-bottom: 0; margin-bottom: 16px; text-shadow: none;
    background: linear-gradient(95deg, #fff 0%, #fff 52%, #FFD700 78%, #D4AF37 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fv2 h2::after { display: none; }
.fv2 .section-intro { color: rgba(255,255,255,.62); font-family: 'Montserrat', sans-serif; font-size: 1.02rem; margin-bottom: 26px; }

/* search bar */
.fv-search {
    display: flex; align-items: center; gap: 14px; width: min(580px, 100%); margin: 0 auto; padding: 15px 16px 15px 20px;
    border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: rgba(255,255,255,.55); font-family: 'Montserrat', sans-serif; font-size: .95rem; text-align: left; cursor: text;
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.fv-search i { color: #FFD700; }
.fv-search span { flex: 1; }
.fv-search kbd { font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.7); }
.fv-search:hover { border-color: rgba(212,175,55,.5); background: rgba(255,255,255,.09); box-shadow: 0 0 0 4px rgba(212,175,55,.12); }

/* ---------- bento grid ---------- */
.fv2 .finder-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 172px; gap: 16px; margin-top: 52px; }
.fv2 .fv-1 { grid-column: span 2; grid-row: span 2; }
.fv2 .fv-8 { grid-column: span 2; }

/* ---------- tiles ---------- */
.fv2 .finder-tile {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px;
    padding: 22px; text-align: left; text-decoration: none;
    border: 1px solid rgba(255,255,255,.09); border-radius: 22px;
    background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    transform: none;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .45s ease, background .35s ease;
}
.fv2 .finder-tile::before {
    content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c2) 26%, transparent), transparent 62%);
    transition: opacity .35s ease;
}
.fv2 .finder-tile::after { content: none; }
.fv2 .finder-tile:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--c2) 60%, transparent);
    background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
    box-shadow: 0 24px 60px -22px color-mix(in srgb, var(--c1) 90%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
}
.fv2 .finder-tile:hover::before { opacity: 1; }
.fv2 .finder-tile:focus-visible { outline: 2px solid var(--c2); outline-offset: 3px; }

/* icon chip */
.fv-icon {
    position: absolute; top: 22px; left: 22px; z-index: 3; width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--c2) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.fv2 .finder-tile .fv-icon i { margin: 0; font-size: 1.15rem; color: #fff; text-shadow: none; transform: none !important; }
.fv2 .finder-tile:hover .fv-icon { transform: rotate(-8deg) scale(1.08); }

/* arrow */
.fv-arrow {
    position: absolute; top: 22px; right: 22px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; font-size: .8rem; color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
    transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.fv-arrow i { transform: rotate(-45deg); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.fv2 .finder-tile:hover .fv-arrow { background: #fff; color: var(--c1); border-color: #fff; }
.fv2 .finder-tile:hover .fv-arrow i { transform: rotate(0); }

/* text */
.fv2 .finder-tile strong, .fv2 .finder-tile small, .fv-live { position: relative; z-index: 2; }
.fv2 .finder-tile strong {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em;
    text-transform: none; color: #fff; line-height: 1.3;
}
.fv2 .finder-tile strong::after { content: none; }
.fv2 .finder-tile:hover strong { color: #fff; letter-spacing: -.01em; }
.fv2 .finder-tile small { font-family: 'Montserrat', sans-serif; font-size: .82rem; color: rgba(255,255,255,.58); line-height: 1.45; }
.fv2 .finder-tile:hover i { text-shadow: none; }

/* ---------- photo tiles (Mass & Location) ---------- */
.fv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: saturate(1.05); }
.fv-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(13,4,4,.15) 0%, rgba(13,4,4,.45) 45%, rgba(13,4,4,.92) 100%); }
.fv2 .fv-photo { border-color: rgba(255,255,255,.14); }
.fv2 .fv-photo:hover .fv-bg { transform: scale(1.07); filter: saturate(1.2); }
.fv2 .fv-1 .fv-bg { object-position: 50% 0; height: calc(100% + 30px); }  /* crop the source image's bottom strip */
.fv2 .fv-1 { padding: 28px; }
.fv2 .fv-1 strong { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.025em; }
.fv2 .fv-1 small { font-size: .95rem; color: rgba(255,255,255,.75); }
.fv2 .fv-8 strong { font-size: 1.25rem; }
.fv2 .fv-8 small { color: rgba(255,255,255,.75); }

/* live next-Mass pill */
.fv-live {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 14px; border-radius: 999px;
    font-family: 'Montserrat', sans-serif; font-size: .78rem; color: rgba(255,255,255,.85);
    background: rgba(13,4,4,.55); border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fv-live strong { font-size: .78rem !important; font-weight: 700; color: #FFD700 !important; letter-spacing: 0 !important; }
.fv-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.7); animation: fvPulse 1.8s infinite; flex-shrink: 0; }
@keyframes fvPulse { 70% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }

/* hide leftovers from other hover layers */
.fv2 .cursor-light { display: none !important; }

/* ---------- Scripture line ---------- */
.fv2 .fz-scripture { margin-top: 44px; }
.fv2 .fz-scripture p { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 500; font-size: clamp(1rem, 1.8vw, 1.2rem); color: rgba(255,255,255,.72); letter-spacing: -.005em; }
.fv2 .fz-scripture cite { font-family: 'Montserrat', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #D4AF37; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .fv2 .finder-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 158px; gap: 12px; }
    .fv2 .fv-1 { grid-column: span 2; grid-row: span 2; }
    .fv2 .fv-8 { grid-column: span 2; }
}
@media (max-width: 520px) {
    .finder.fv2 { padding: 80px 0 90px; }
    .fv2 .finder-tile { padding: 16px; border-radius: 18px; }
    .fv-icon { top: 16px; left: 16px; width: 40px; height: 40px; border-radius: 12px; }
    .fv-arrow { top: 16px; right: 16px; width: 30px; height: 30px; }
    .fv2 .finder-tile strong { font-size: .95rem; }
    .fv2 .finder-tile small { font-size: .74rem; }
    .fv-search kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fv-dot { animation: none; } .fv2 .finder-tile, .fv-bg { transition: none; } }

/* ---------- refinements ---------- */
.fv2 .finder-tile .fv-arrow i { margin: 0; font-size: .8rem; color: inherit; text-shadow: none; transform: rotate(-45deg) !important; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.fv2 .finder-tile:hover .fv-arrow i { transform: rotate(0deg) !important; color: inherit; }
.fv2 .fv-1 .fv-bg { object-position: 50% 42%; }
@media (max-width: 520px) {
    .fv2 .fv-1 strong { font-size: 1.5rem; }
    .fv-live { display: block; border-radius: 14px; font-size: .72rem; line-height: 1.5; padding: 8px 12px; }
    .fv-live .fv-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
}

.fv2 .fv-photo .fv-arrow { background: rgba(13,4,4,.55); border-color: rgba(255,255,255,.3); color: #fff; backdrop-filter: blur(6px); }