/* =============================================================================
   LibParl v3 — members-style.css
   Caucus directory (libparl.ca homepage) + any /members/ page.
   ============================================================================= */

/* ── Hero ────────────────────────────────────────────────────────────────────
   Full-bleed photo hero, same language as the MP homepage: image, dark scrim,
   white type bottom-left, accent rule under the title. The transparent header
   sits over it, so the top padding here clears the fixed 62px bar.
   -------------------------------------------------------------------------- */
.lp-members-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 460px;
    min-height: min(62svh, 540px);
    padding: 110px 24px 36px;
    overflow: hidden;
    background: #0d0f12;   /* shows while the photo loads */
}

.lp-members-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Biased low so the front bench — Carney, Champagne, Anand — stays in
       frame as the hero gets shorter on smaller viewports. */
    object-position: 50% 38%;
    z-index: 0;
}

/* Two scrims: one from the bottom so the headline sits on darkness rather
   than on someone's face, one from the top so the transparent header's white
   logo and burger stay legible against the bright gold curtain. */
.lp-members-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(to top,
            rgba(8,10,12,.95) 0%,
            rgba(8,10,12,.86) 22%,
            rgba(8,10,12,.52) 46%,
            rgba(8,10,12,.20) 66%,
            rgba(8,10,12,.26) 84%,
            rgba(8,10,12,.68) 100%),
        linear-gradient(to right,
            rgba(8,10,12,.70) 0%,
            rgba(8,10,12,.34) 38%,
            rgba(8,10,12,.05) 66%,
            rgba(8,10,12,0) 80%);
}

.lp-members-hero__inner {
    position: relative; z-index: 2;
    max-width: var(--lp-max-width, 1200px);
    margin: 0 auto;
    width: 100%;
}

/* Diffuse the photo behind the copy only — a masked backdrop blur that fades
   out to the right, so the headline reads cleanly while the faces on the
   right stay sharp. Purely additive: if backdrop-filter is unsupported the
   scrim above already carries the contrast. */
.lp-members-hero__inner::before {
    content: '';
    position: absolute;
    top: -30px; bottom: -30px; left: -48px; right: 18%;
    z-index: -1;
    pointer-events: none;
    backdrop-filter: blur(18px) saturate(.85);
    -webkit-backdrop-filter: blur(18px) saturate(.85);
    background: linear-gradient(to right, rgba(8,10,12,.42), rgba(8,10,12,.10) 78%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 52%, transparent 96%);
            mask-image: linear-gradient(to right, #000 0%, #000 52%, transparent 96%);
}
@media (max-width: 700px) {
    /* Narrow screens: the copy spans the full width, so blur the whole band. */
    .lp-members-hero__inner::before { right: -24px; left: -24px;
        -webkit-mask-image: none; mask-image: none;
        background: rgba(8,10,12,.34);
    }
}

.lp-members-hero__eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: #fff;
    margin-bottom: 10px;
    text-shadow: 0 1px 14px rgba(0,0,0,.6);
}

.lp-members-hero__title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.03;
    margin: 0;
    text-shadow: 0 2px 28px rgba(0,0,0,.55);
}
/* Same accent rule the rest of v3 uses under a page title. */
.lp-members-hero__title::after {
    content: ''; display: block;
    width: 44px; height: 4px;
    background: var(--lp-accent);
    border-radius: 2px;
    margin-top: 18px;
}

.lp-members-hero__stats { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.lp-members-stat {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 12px; padding: 10px 18px; text-align: center;
}
.lp-members-stat__num {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 24px; font-weight: 800; color: #fff; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.lp-members-stat__label {
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: #fff; margin-top: 4px; opacity: .92;
}

.lp-members-hero__admin { margin-top: 16px; font-size: 12px; color: rgba(255,255,255,.92); }
.lp-members-hero__admin a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lp-members-hero__admin a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 700px) {
    .lp-members-hero { min-height: 340px; min-height: min(52svh, 380px); padding: 92px 18px 26px; }
    .lp-members-hero__img { object-position: 55% 42%; }
    .lp-members-hero__stats { gap: 8px; margin-top: 18px; }
    .lp-members-stat { padding: 8px 14px; }
    .lp-members-stat__num { font-size: 20px; }
}

/* ── Filters ─────────────────────────────────────────────────────────────── */
.lp-members-filters {
    background: #fff;
    border-bottom: 1px solid #ecebe9;
    padding: 14px 24px;
    position: sticky; top: 62px; z-index: 100;
}
.lp-members-filters__inner {
    max-width: var(--lp-max-width, 1200px); margin: 0 auto;
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.lp-members-search {
    flex: 1; min-width: 200px; padding: 9px 13px;
    border: 1px solid var(--lp-border); border-radius: 9px;
    font-size: 14px; font-family: inherit; background: #fff; color: #1d2327;
}
.lp-members-search::placeholder { color: #6f7479; }
.lp-members-search:focus { border-color: var(--lp-accent); }
.lp-members-search:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 2px; }

.lp-members-prov-filters { display: flex; gap: 6px; flex-wrap: wrap; }

/* Anchors, not buttons — they navigate and keep working without JS. */
.lp-prov-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 11px; border-radius: 7px;
    font-size: 12px; font-weight: 700; line-height: 1;
    border: 1px solid var(--lp-border); background: #fff;
    color: #4a4f55; font-family: inherit; cursor: pointer;
    text-decoration: none; transition: border-color .15s, color .15s, background .15s;
}
.lp-prov-btn:hover { border-color: var(--lp-accent); color: var(--lp-accent); text-decoration: none; }
.lp-prov-btn--active,
.lp-prov-btn[aria-current="true"] {
    background: var(--lp-accent); border-color: var(--lp-accent); color: #fff;
}
.lp-prov-btn:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 2px; }

.lp-members-count { font-size: 13px; color: #5f6368; white-space: nowrap; margin-left: auto; }

/* ── Grid ────────────────────────────────────────────────────────────────── */
.lp-members-wrap { max-width: var(--lp-max-width, 1200px); margin: 0 auto; padding: 30px 24px 64px; }
.lp-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 18px;
}
@media (max-width: 560px) { .lp-members-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.lp-mp-card {
    display: block; text-decoration: none;
    border-radius: 12px; overflow: hidden;
    border: 1px solid #ecebe9; background: #fff;
    box-shadow: 0 1px 3px rgba(20,20,25,.05);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative;
}
.lp-mp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(20,20,25,.10);
    text-decoration: none;
}
.lp-mp-card:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 3px; }

/* MPs with a live libparl site get the accent border + badge. */
.lp-mp-card--active { border-color: var(--lp-accent); }
.lp-mp-card--active::after {
    content: '✦';
    position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px;
    background: var(--lp-accent); color: #fff;
    border-radius: 50%; font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}

.lp-mp-card__photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #f0f0f1; }
.lp-mp-card__photo--placeholder {
    width: 100%; aspect-ratio: 3/4;
    background: linear-gradient(135deg, rgba(var(--lp-accent-rgb),.13), rgba(var(--lp-accent-rgb),.05));
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
}
.lp-mp-card__body { padding: 11px 13px 13px; }
.lp-mp-card__name { font-size: 13px; font-weight: 700; color: #1d2327; line-height: 1.3; margin-bottom: 3px; }
.lp-mp-card__riding { font-size: 11px; color: #5f6368; line-height: 1.35; }
.lp-mp-card__prov { font-size: 11px; color: var(--lp-accent); font-weight: 700; margin-top: 5px; letter-spacing: .04em; }

/* ── Legend / states ─────────────────────────────────────────────────────── */
.lp-members-legend {
    display: flex; gap: 18px; align-items: center;
    margin-bottom: 20px; font-size: 12px; color: #5f6368; flex-wrap: wrap;
}
.lp-legend-item { display: flex; align-items: center; gap: 6px; }
.lp-legend-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.lp-legend-dot--active { background: var(--lp-accent); }
.lp-legend-dot--inactive { background: #d3d3d5; }

.lp-members-empty { text-align: center; padding: 64px 0; color: #5f6368; }
.lp-members-empty a { color: var(--lp-accent); }
.lp-members-noresults { text-align: center; padding: 48px 0; font-size: 15px; color: #5f6368; }