/* =============================================================================
   my-events.css
   Styles for the consignor-facing My Events section:
     • /events            - overview grid of registered events
     • /find-events       - zip/city search with grid/map view toggle
     • /events/{id}/tracker, /seller-resources, /registration, /payout
   Tokens (--rz-*, --jbf-*) come from site.css; no new color literals beyond
   minimal status pill hues (matched to two-level-nav.css's pill palette so the
   left rail and main body stay visually consistent).
   ============================================================================= */

/* ── Page chrome ─────────────────────────────────────────────────────────── */
/* Top padding mirrors My Tags' .top-bar margin-top + inset so the My Events,
   My Schedule, and My Tags pages share one vertical rhythm beneath the
   AppHeader. Keep horizontal padding tight (4px) because the page already
   sits inside the routed body card's own gutter. */
.me-page {
    padding: 16px 4px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: var(--font-overpass, "Overpass", system-ui, sans-serif);
}

/* PR-6b note: the per-page :has(> .me-page) override that previously stripped
   .jbf-page-card chrome on every Events sub-page is no longer needed -
   .jbf-page-card itself is now flat (no border-radius, no shadow) globally,
   so .me-section-card tiles already float on a flat white surface without
   any per-page workaround. See site.css `.jbf-page-card` (PR-6 flatten). */

    .me-page__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .me-page__title {
        font-size: 22px;
        font-weight: 700;
        color: var(--rz-text-color, #021922);
        margin: 0;
    }

    .me-page__subtitle {
        font-size: 13px;
        color: var(--rz-text-tertiary-color, #6c757d);
        margin: 4px 0 0;
    }

    .me-page__actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

/* Buttons (light reuse of jbf primary style without coupling to the leftnav). */
.me-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--jbf-purple, #7D5B81);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .me-btn-primary:hover { background: var(--rz-primary-dark, #5a3f5e); color: #fff; }

.me-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: transparent;
    color: var(--rz-primary-darker, #5a3f5e);
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .me-btn-ghost:hover { background: var(--rz-primary-lighter); }

/* ── My Events overview cards ────────────────────────────────────────────── */
.me-card-grid {
    display: grid;
    /* Lifted from 300px → 340px so the linked-location footer that pairs
       Learn More + Pre-Register/Sign Up keeps both buttons on a single row
       at the most-common dialog widths. The grid still collapses to a
       single column below 480px via the responsive rule at the bottom of
       this file. */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.me-card {
    background: #fff;
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .me-card:hover {
        border-color: var(--rz-primary, #7D5B81);
        box-shadow: 0 2px 12px rgba(125, 91, 129, 0.08);
    }

    .me-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
    }

    .me-card__name {
        font-size: 15px;
        font-weight: 600;
        color: var(--rz-text-color, #021922);
        margin: 0;
    }

    .me-card__dates {
        font-size: 12px;
        color: var(--rz-text-tertiary-color, #6c757d);
        margin-top: 2px;
    }

    .me-card__venue {
        font-size: 12px;
        color: var(--rz-text-tertiary-color, #6c757d);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .me-card__cta {
        margin-top: auto;
        align-self: flex-start;
    }

/* Status pill (mirrors .jbf-event-card__status palette). */
.me-status {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.4;
    white-space: nowrap;
}

    .me-status--active { background: rgba(34, 139, 84, 0.14); color: #1f7a48; }
    .me-status--upcoming { background: rgba(125, 91, 129, 0.14); color: var(--rz-primary-darker, #5a3f5e); }
    /* --draft (legacy) is still used by non-registration status pills (e.g.
       EventPayout payout-method "Disabled" state). --incomplete is its alias
       for consignor registration flows where the label reads "Incomplete". */
    .me-status--draft,
    .me-status--incomplete { background: rgba(176, 124, 28, 0.14); color: #8a5a05; }
    /* PR-? seller-card 5-status taxonomy on /dashboard:
         --registering        - registration in flight (pending/in_progress/
                                invited). Shares the amber palette with
                                --incomplete since both communicate "not done
                                yet, action expected" - kept as its own class
                                so UX can split the palette later if needed.
         --registration-open  - eligible event the seller hasn't started
                                (info / call-to-action). Blue palette echoes
                                Bootstrap info-darker so it reads as a primary
                                actionable state without competing with
                                "Payment Due" red.
         --payment-due        - confirmed registration with outstanding fees;
                                paired with the in-card balance banner that
                                shows the amount + deep-link to pay. Red
                                palette to register as urgent without going
                                full Bootstrap-danger saturation. */
    .me-status--registering { background: rgba(176, 124, 28, 0.14); color: #8a5a05; }
    .me-status--registration-open { background: rgba(43, 108, 176, 0.14); color: #1e4f86; }
    .me-status--payment-due { background: rgba(196, 47, 47, 0.14); color: #a51c1c; }
    /* Pre-Register popup (find-events / my-events) lead-capture status. Soft
       pink / coral so it reads as "warm but not yet committed" - distinct from
       the in-flight amber and the confirmed teal. */
    .me-status--prereg { background: rgba(210, 60, 119, 0.14); color: #a02458; }

/* ============================================================================
   Pre-Register popup launch CTAs (find-events + my-events).
   - .fev-m-event-row + .fev-m-event-cta  -> /find-events MOBILE card per-event row
   - .me-result-card__event-actions       -> /find-events DESKTOP card per-event row
   - .me-card__cta-pair                   -> /my-events linked-location-only row
   The mobile media block lower in this file overrides these for phones.
   ============================================================================ */

.fev-m-event-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}

    .fev-m-event-row .fev-m-meta--event {
        flex: 1 1 220px;
        min-width: 0;
    }

.fev-m-event-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

    .fev-m-event-cta > .me-btn-ghost,
    .fev-m-event-cta > .me-btn-primary {
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 6px;
        text-decoration: none;
    }

.me-card__cta-pair {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
}

    /* flex: 1 1 0 + min-width: 0 lets each button take an equal share of the
       row and lets long labels truncate (whitespace: nowrap below) instead
       of pushing the second button onto a new line. The mobile media block
       at the bottom of this file relaxes these rules to flex-wrap and full
       width so buttons stay tap-friendly on phones. */
    .me-card__cta-pair__btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 12px;
        text-align: center;
        justify-content: center;
        text-decoration: none;
        white-space: nowrap;
    }

.me-empty {
    padding: 48px 16px;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--events-border-light-color, #e6e8e9);
    border-radius: 12px;
}

    .me-empty__icon {
        font-size: 28px;
        color: var(--rz-text-tertiary-color, #6c757d);
        margin-bottom: 12px;
    }

    .me-empty__title {
        font-size: 16px;
        font-weight: 600;
        color: var(--rz-text-color, #021922);
        margin: 0 0 4px;
    }

    .me-empty__body {
        font-size: 13px;
        color: var(--rz-text-tertiary-color, #6c757d);
        margin: 0 0 16px;
    }

/* ── Find Events search + view toggle ────────────────────────────────────── */
.me-find {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.me-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

    .me-search-bar__icon {
        color: var(--rz-text-tertiary-color, #6c757d);
        font-size: 14px;
    }

    .me-search-bar__input {
        flex: 1 1 auto;
        border: none;
        outline: none;
        background: transparent;
        font-size: 14px;
        color: var(--rz-text-color, #021922);
    }

    .me-search-bar__radius {
        flex: 0 0 auto;
        border: none;
        outline: none;
        background: var(--rz-primary-lighter);
        color: var(--rz-primary-darker, #5a3f5e);
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .me-search-bar__divider {
        width: 1px;
        height: 20px;
        background: var(--events-border-light-color, #e6e8e9);
    }

    .me-search-bar__view-toggle {
        display: inline-flex;
        gap: 0;
        border-radius: 999px;
        background: var(--jbf-sidebar-shell-bg, #f6f5f8);
        padding: 2px;
    }

        .me-search-bar__view-toggle button {
            border: none;
            background: transparent;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            color: var(--rz-text-tertiary-color, #6c757d);
            cursor: pointer;
        }

            .me-search-bar__view-toggle button.is-active {
                background: #fff;
                color: var(--rz-primary-darker, #5a3f5e);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            }

/* Find: split view shell - results left (or full when grid), map right (when map). */
.me-find__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* TODO(responsive): 960px is off-tier (between md=768 and lg=1024). Validate
   intent - switching to 768 splits map column at iPad mini portrait, switching
   to 1024 keeps single column there. Choose based on map UX review. */
@media (min-width: 960px) {
    .me-find__split.is-map {
        grid-template-columns: minmax(320px, 360px) 1fr;
    }
}

.me-result-list {
    display: grid;
    /* Floor lifted again from 240px → 320px so each location card has room
       to render the per-event Learn More + Pre-Register/Sign Up button pair
       on a single row without wrapping. The grid still collapses to a
       single column below 480px via the responsive rule at the bottom of
       this file. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.me-find__split.is-map .me-result-list {
    grid-template-columns: 1fr;
}

.me-result-card {
    background: #fff;
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .me-result-card.is-selected {
        border-color: var(--rz-primary, #7D5B81);
        box-shadow: 0 0 0 1px var(--rz-primary, #7D5B81) inset;
    }

    /* Header row: location name on the left, optional distance badge on the
       right. flex-wrap lets the badge drop under the name when the card is
       very narrow (small phone, side-by-side grid view). */
    .me-result-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }

    .me-result-card__name {
        font-size: 14px;
        font-weight: 600;
        color: var(--rz-text-color, #021922);
    }

    /* "12.3 mi" pill rendered when user geolocation is granted. Shares the
       rz-primary-lighter tint used on other subtle status pills so it visually
       reads as "informational" rather than "action". */
    .me-result-card__distance {
        flex: 0 0 auto;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        color: var(--rz-primary-darker, #5a3f5e);
        background: var(--rz-primary-lighter);
        white-space: nowrap;
    }

    .me-result-card__meta {
        font-size: 12px;
        color: var(--rz-text-tertiary-color, #6c757d);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .me-result-card__cta {
        margin-top: 4px;
        align-self: flex-start;
    }

    /* Find Events card action row - lays the primary "View details" + secondary
       "View on map" CTAs side-by-side on desktop and stacks on narrow cards.
       Keeps each .me-result-card__cta at its natural width (align-self: flex-start
       above) so the row doesn't stretch awkwardly when only one button is shown. */
    .me-result-card__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 6px;
    }

    /* Nested "Upcoming events" list. Each <li> is a self-contained row with
       the event name, dates, venue, and its own "View details" CTA - we no
       longer have a single card-level CTA because a location can host
       multiple upcoming events simultaneously. */
    .me-result-card__events {
        list-style: none;
        margin: 4px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .me-result-card__event-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 10px;
        border-radius: 8px;
        background: var(--jbf-sidebar-shell-bg, #f6f5f8);
    }

    .me-result-card__event-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--rz-text-color, #021922);
    }

    .me-result-card__event-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        font-size: 12px;
        color: var(--rz-text-tertiary-color, #6c757d);
    }

        .me-result-card__event-meta > span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

    .me-result-card__event-cta {
        align-self: flex-start;
        margin-top: 2px;
    }

    /* Pre-Register popup launch row: two paired buttons (Learn More + smart
       secondary). Kept on a single row at all desktop widths (flex-wrap:
       nowrap) so the wider grid floor (320px above) and the per-button
       flex: 1 1 0 / min-width: 0 / nowrap label rule guarantee both
       buttons fit side-by-side. The mobile media block at the bottom of
       this file relaxes back to wrap + full width so the buttons stay
       tap-friendly on phones. */
    .me-result-card__event-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 6px;
    }

        .me-result-card__event-actions > .me-result-card__event-cta {
            flex: 1 1 0;
            min-width: 0;
            padding: 8px 12px;
            justify-content: center;
            white-space: nowrap;
        }

/* Muted hint shown under the search bar when browser geolocation is denied
   or unavailable. Intentionally understated - we don't want it competing
   with the search bar or looking like an error. */
.me-find__geo-hint {
    margin: 0;
    font-size: 12px;
    color: var(--rz-text-tertiary-color, #6c757d);
}

.me-map-frame {
    width: 100%;
    /* clamp lets the map shrink on a small phone without clipping and grow on
       a tall desktop without dominating the page. 60vh lands nicely between
       the mobile-minimum (320px) and desktop-maximum (560px). */
    height: clamp(320px, 60vh, 560px);
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    border-radius: 12px;
    overflow: hidden;
    background: #f0f3f5;
}

    .me-map-frame iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

/* ── Per-event sub-page layout (Tracker, SR, Reg, Payout) ────────────────── */
.me-event-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 4px 32px;
    font-family: var(--font-overpass, "Overpass", system-ui, sans-serif);
}

    .me-event-page__hero {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: baseline;
        justify-content: space-between;
        padding: 16px 20px;
        background: linear-gradient(135deg, #f9f7fa 0%, #f0eaf2 100%);
        border-radius: 12px;
    }

    .me-event-page__hero h1 {
        font-size: 20px;
        font-weight: 700;
        color: var(--rz-text-color, #021922);
        margin: 0;
    }

    .me-event-page__hero-sub {
        font-size: 13px;
        color: var(--rz-text-tertiary-color, #6c757d);
        margin-top: 2px;
    }

/* Section card grid for the Tracker.
   Defaults to a flexible auto-fill grid on small/medium desktops so 3+2 wraps
   gracefully when there's not enough width for five 280px tracks. The
   .me-section-grid--kanban variant in EventSummary.razor's <style> block
   pins to 5 equal columns at xl (>=1280px) so the 5 milestone cards always
   sit on one Kanban-style row regardless of how much body content each card
   contains. */
.me-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.me-section-card {
    background: #fff;
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .me-section-card__title {
        font-size: 13px;
        font-weight: 600;
        color: var(--rz-text-color, #021922);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin: 0;
    }

/* PR-6b - desktop (lg+) override: mirror the /event/{location} .evl-card
   pattern. White card, rounded, AppHeader-style plum drop shadow, edge-to-
   edge pink (#D23C77) title bar with a 1px bottom border. Padding moves off
   the parent and onto the title + body so the title bar can stretch full
   width via negative side margins. The min-width:1024px guard mirrors
   site.css's --bp-lg breakpoint and keeps the mobile (<lg) layout - defined
   inline on EventTracker.razor with a left accent stripe + uppercase tertiary
   title - completely untouched. CSS media queries can't deref custom
   properties so the literal 1024 is intentional. */
@media (min-width: 1024px) {
    .me-section-card {
        padding: 0 16px 16px;
        gap: 8px;
        box-shadow: var(--jbf-segment-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
        overflow: hidden;
    }

    .me-section-card__title {
        margin: 0 -16px 4px;
        padding: 12px 16px;
        font-size: 16px;
        font-weight: 600;
        color: #D23C77;
        text-align: center;
        text-transform: none;
        letter-spacing: 0.005em;
        border-bottom: 1px solid var(--events-border-light-color, #e6e8e9);
    }
}

    .me-section-card__primary {
        font-size: 16px;
        font-weight: 600;
        color: var(--rz-text-color, #021922);
    }

    .me-section-card__secondary {
        font-size: 12px;
        color: var(--rz-text-tertiary-color, #6c757d);
    }

    .me-section-card__cta {
        margin-top: 8px;
        align-self: flex-start;
    }

    .me-section-card.is-stub {
        background: repeating-linear-gradient(45deg, #fff, #fff 10px, #fafafa 10px, #fafafa 20px);
        border-style: dashed;
    }

/* Balance card (Phase 2) - replaces the legacy "Total Paid" card on the
   EventRegistration Summary tab. Two stacked rows ("Paid" / "Balance due")
   so a returning seller can compare what they've covered vs what's left.
   The "is-due" modifier paints the second row with the warning palette and
   adds a subtle left rule so the eye is drawn to it without going alarm
   red - color contrast on the dollar amount stays well above 4.5:1. */
.me-balance-card {
    container-type: inline-size;
}

    .me-balance-card__row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px dashed var(--events-border-light-color, #e6e8e9);
    }

        .me-balance-card__row:last-of-type {
            border-bottom: none;
        }

        .me-balance-card__row.is-due {
            border-left: 3px solid var(--rz-warning, #b45309);
            padding-left: 10px;
            margin-left: -10px;
            background: #fff8eb;
            border-radius: 6px;
        }

    .me-balance-card__label {
        font-size: 13px;
        color: var(--rz-text-tertiary-color, #6c757d);
        font-weight: 500;
    }

    .me-balance-card__value {
        font-size: 18px;
        font-weight: 700;
        color: var(--rz-text-color, #021922);
        font-variant-numeric: tabular-nums;
    }

        .me-balance-card__value--due {
            color: #92400e;
        }

        .me-balance-card__value--paid {
            color: var(--rz-primary, #7D5B81);
            font-size: 14px;
        }

    .me-balance-card__cta {
        margin-top: 8px;
        align-self: flex-start;
    }

@container (max-width: 380px) {
    .me-balance-card__row {
        flex-direction: column;
        align-items: flex-start;
    }
    .me-balance-card__value {
        font-size: 16px;
    }
}

/* Outstanding fees table (Phase 2). Styled as a quiet "to-do" surface - the
   existing me-table look + an accent chip for the timing label. The "Pay"
   button and read-only chip share the row so the user sees clearly which
   fees they can self-pay vs which are settled in person / via payout. */
.me-outstanding {
    margin-top: 8px;
}

    .me-outstanding__chip {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 999px;
        background: #eef2ff;
        color: #1f2c5b;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap;
    }

    .me-outstanding__pay {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .me-outstanding__pay[disabled] {
        opacity: 0.65;
        cursor: not-allowed;
    }

/* Tab strip (custom - mirrors EventManagement style). */
.me-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--events-border-light-color, #e6e8e9);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

    .me-tabs button {
        background: transparent;
        border: none;
        padding: 10px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--rz-text-tertiary-color, #6c757d);
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

        .me-tabs button:hover {
            color: var(--rz-primary-darker, #5a3f5e);
        }

        .me-tabs button.is-active {
            color: var(--rz-primary, #7D5B81);
            border-bottom-color: var(--rz-primary, #7D5B81);
        }

/* Simple data table used by Registration / Payout summaries. */
.me-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .me-table th, .me-table td {
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid var(--events-border-light-color, #e6e8e9);
    }

    .me-table th {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--rz-text-tertiary-color, #6c757d);
        background: var(--jbf-sidebar-shell-bg, #f6f5f8);
        font-weight: 600;
    }

    .me-table tr:last-child td {
        border-bottom: none;
    }

    .me-table .me-table__total td {
        font-weight: 700;
        background: var(--jbf-sidebar-shell-bg, #f6f5f8);
    }

/* Seller resources two-pane shell (section nav + content). */
.me-sr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* md+ tier (≥ --bp-md = 768). @media can't deref CSS vars. */
@media (min-width: 768px) {
    .me-sr {
        grid-template-columns: 240px 1fr;
    }
}

/* Sections nav: sticks to the top of the right-column scroll container so
   consignors can see and jump between sections while the content panel
   scrolls freely below. The 12px top offset matches the page gutter and
   keeps the nav visually detached from whatever sticky app chrome sits
   above. max-height with overflow-y: auto keeps the nav itself scrollable
   on edge cases where a profile has dozens of sections and the viewport
   is short. */
.me-sr__nav {
    background: #fff;
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: start;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

    .me-sr__nav button {
        text-align: left;
        background: transparent;
        border: none;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: var(--rz-text-color, #021922);
        cursor: pointer;
    }

        .me-sr__nav button:hover {
            background: var(--rz-primary-lighter);
            color: var(--rz-primary-darker, #5a3f5e);
        }

        .me-sr__nav button.is-active {
            background: var(--rz-primary-dark, #5a3f5e);
            color: #fff;
        }

.me-sr__content {
    background: #fff;
    border: 1px solid var(--events-border-light-color, #e6e8e9);
    border-radius: 12px;
    padding: 20px;
    min-height: 360px;
}

    .me-sr__content h2 {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 12px;
        color: var(--rz-text-color, #021922);
    }

    .me-sr__content p {
        font-size: 13px;
        line-height: 1.6;
        color: var(--rz-text-color, #021922);
    }

.me-sr__section-desc {
    margin: -4px 0 16px;
    color: var(--rz-text-secondary-color, #4a5761);
}

.me-sr__block {
    padding: 12px 0;
    border-top: 1px solid var(--events-border-light-color, #e6e8e9);
}

    .me-sr__block:first-of-type {
        border-top: none;
        padding-top: 0;
    }

.me-sr__block-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--rz-text-color, #021922);
}

.me-sr__block-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--rz-text-color, #021922);
}

    .me-sr__block-body img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

.me-sr__block-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 4px;
}

.me-sr__block-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    margin-top: 4px;
}

    .me-sr__block-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.me-sr__empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 13px;
    color: var(--rz-text-secondary-color, #4a5761);
}

/* Stub banner - used on pages that intentionally show placeholder content. */
.me-stub-banner {
    padding: 8px 12px;
    background: rgba(176, 124, 28, 0.10);
    color: #8a5a05;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .me-stub-banner i { font-size: 12px; }

/* =============================================================================
   Find Events responsive rules
   The page framework/chrome is owned by another developer; the rules below
   govern only the body content (search bar, cards, map frame) so it holds up
   from ~360px through desktop. Breakpoints (768px, 960px) match the ones
   already used earlier in this file so we don't introduce a third scale.
   ============================================================================= */

/* Tablet: stack the pill-shaped search bar so the input can breathe on its
   own row and the view toggle + Search button land together below it. */
@media (max-width: 768px) {
    .me-search-bar {
        flex-wrap: wrap;
        border-radius: 16px;   /* pill turns into rounded rectangle when wrapped */
        padding: 10px 12px;
        gap: 10px;
    }

        .me-search-bar__input {
            flex: 1 1 100%;
            min-height: 36px;  /* honor the 44px touch-target when paired with bar padding */
        }

        /* Hide the vertical divider once the toolbar wraps - it would look
           disconnected sitting between wrapped groups on its own row. */
        .me-search-bar__divider {
            display: none;
        }

        .me-search-bar__view-toggle {
            flex: 0 0 auto;
        }

            .me-search-bar__view-toggle button {
                min-height: 40px;
                padding: 8px 14px;
            }

        .me-search-bar .me-btn-primary {
            flex: 1 1 auto;
            min-height: 44px;
            justify-content: center;
        }
}

/* Phone landscape and below: give the map its own full-viewport takeover and
   collapse the card list into one column so long location names aren't
   truncated mid-word. */
@media (max-width: 480px) {
    .me-result-list {
        grid-template-columns: 1fr;
    }

    /* In map view on a phone, the grid of cards above the map is a waste of
       vertical space - the user explicitly switched to the map. Hide the
       card list entirely so the map can fill the viewport; the grid view
       toggle returns them to the card list when they're done. */
    .me-find__split.is-map .me-result-list {
        display: none;
    }

    .me-result-card__event-meta {
        gap: 2px 0;
    }

        /* Each meta chip on its own row on phones: dates, venue, CTA stack
           vertically so line-height doesn't compress and the CTA gets the
           full width for easy tapping. */
        .me-result-card__event-meta > span {
            flex: 1 1 100%;
        }

    .me-result-card__event-cta {
        align-self: stretch;
        text-align: center;
        justify-content: center;
    }

    /* On phones the paired buttons each take a full row so the consignor
       gets a generous tap target for both Learn More and the secondary CTA.
       flex-wrap: wrap explicitly overrides the desktop nowrap rule above so
       the second button drops below the first instead of being squeezed in. */
    .me-result-card__event-actions {
        gap: 6px;
        flex-wrap: wrap;
    }
        .me-result-card__event-actions > .me-result-card__event-cta { flex: 1 1 100%; }

    /* /find-events mobile cards: stack the per-event CTA pair below the meta
       chip on every phone so the buttons get a full-width tap target. */
    .fev-m-event-cta {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-left: 0;
    }
        .fev-m-event-cta > .me-btn-ghost,
        .fev-m-event-cta > .me-btn-primary {
            text-align: center;
            justify-content: center;
        }

    /* /my-events linked-location footer: relax the desktop nowrap so each
       button can wrap onto its own row at phone widths (matches the
       find-events desktop card mobile rule above). */
    .me-card__cta-pair {
        flex-wrap: wrap;
    }
        .me-card__cta-pair__btn {
            flex: 1 1 100%;
            white-space: normal;
        }
}