/* ============================================================================
   matches-v2.css — gold-header dashboard restyle for the investor Matches page
   and its page sections. Scoped under .matches-v2, so the shared .ic-* modals (Pass) are
   untouched. The redesigned curated section lives in Matches.razor.css.
   Palette matches Dashboard / Deal Flow (dealflow-v3.css).
   ========================================================================== */

/* The Investment Preferences modal styles live with the component (Components/InvestmentPreferencesModal.razor.css). */

/* ── Page sections (scoped under .matches-v2) ──────────────────────────── */
.matches-v2 .mx-panel {
    border: 1px solid #d9a53f;
    border-radius: 14px;
    overflow: hidden;
    background: #111727;
    margin-bottom: 22px;
}
.matches-v2 .mx-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 16px 22px;
    background: linear-gradient(135deg, #ecc97c, #d4a64a);
}
.matches-v2 .mx-panel-title { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; color: #241a04; }
.matches-v2 .mx-head-pill {
    font-size: 12px; font-weight: 800; letter-spacing: .03em; padding: 5px 12px; border-radius: 999px;
    background: #241a04; color: #f0cd7e;
}

/* Non-Curated Matches (the outside view): one gold-framed panel wrapping the header, explainer, card grid, and
   pager. Unlike a plain .mx-panel it doesn't clip (overflow:visible), so card hover lifts and any
   popovers are never cut off; the header rounds its own top corners to the frame's inner radius instead. */
.matches-v2 .mx-panel--list { overflow: visible; }
.matches-v2 .mx-panel--list > .mx-panel-head { border-radius: 13px 13px 0 0; }
.matches-v2 .mx-panel--list > .matches-toolbar {
    margin: 0; padding: 14px 16px; border-bottom: 1px solid #1f2740;
}
.matches-v2 .mx-panel--list > .matches-card-grid { margin: 0; padding: 16px; }
.matches-v2 .mx-panel--list > .matches-pagination { margin: 0; padding: 0 16px 16px; flex-wrap: wrap; }
@media (max-width: 480px) {
    .matches-v2 .mx-panel--list > .mx-panel-head { padding: 14px 16px; }
    .matches-v2 .mx-panel--list > .matches-toolbar { padding: 12px; }
    .matches-v2 .mx-panel--list > .matches-card-grid { padding: 12px; }
    .matches-v2 .mx-panel--list > .matches-pagination { padding: 0 12px 12px; }
}

.matches-v2 .mx-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}