/* ──────────────────────────────────────────────────────────────────────────
   Event Landing — public, anonymous Sell entry point
   /event/{publicWebsitePath}[/{eventSlug}]
   ────────────────────────────────────────────────────────────────────────── */

.public-page {
    --pl-bg: #f6f5f8;
    --pl-primary: #7d5b81;
    --pl-card-bg: #ffffff;
    --pl-card-border: #e6e8e9;
    --pl-text-default: #021922;
    --pl-text-muted: #4e5e65;
    --pl-text-subtle: #808c91;
    --pl-font: var(--font-overpass, 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--pl-bg);
    font-family: var(--pl-font);
    margin: 0;
    padding: 0;
    color: var(--pl-text-default);
}

.public-page *,
.public-page *::before,
.public-page *::after {
    box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────────────────────── */
/* Header chrome is supplied by the shared <AppHeader HideTopNav="true" />
   inside .onb-app-header-wrap (see onboarding.css). The old bespoke
   .public-header / .public-logo rules were retired so the EventLanding
   header visually matches the seller-onboarding flow it links into. */

/* ── Main / Footer ─────────────────────────────────────────────────────── */
.public-main {
    flex: 1;
    display: block;
    width: 100%;
    min-height: 0;
}

.public-footer {
    background: var(--pl-primary);
    color: #ffffff;
    padding: 18px 24px;
    text-align: center;
    flex-shrink: 0;
}

.public-footer-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.public-footer-link {
    color: #ffffff;
    text-decoration: underline;
}

.public-footer-link:hover {
    color: #f3eaf4;
}

/* ── Loading / Empty states ────────────────────────────────────────────── */
.evl-loading {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.evl-loading-pulse {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8c8da, #a282a6);
    animation: evlPulse 1.6s ease-in-out infinite;
}

.evl-loading-text {
    margin: 0;
    color: var(--pl-text-muted);
    font-size: 15px;
}

@keyframes evlPulse {
    0%, 100% { transform: scale(0.92); opacity: 0.65; }
    50%      { transform: scale(1);    opacity: 1;    }
}

.evl-not-found {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.evl-not-found-card {
    max-width: 520px;
    width: 100%;
    background: var(--pl-card-bg);
    border: 1px solid var(--pl-card-border);
    border-radius: 14px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.evl-not-found-title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 600;
    color: var(--pl-text-default);
}

.evl-not-found-text {
    margin: 0 0 20px;
    color: var(--pl-text-muted);
    line-height: 1.5;
}

.evl-not-found-link {
    color: var(--pl-primary);
    font-weight: 600;
    text-decoration: none;
}

.evl-not-found-link:hover {
    text-decoration: underline;
}

/* ── Page shell ────────────────────────────────────────────────────────── */
.evl-page {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.evl-hero {
    position: relative;
    min-height: 30vh;
    background-color: #2a1f2c;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
}

.evl-hero--placeholder {
    background-image: linear-gradient(135deg, #7d5b81 0%, #4a3454 60%, #2a1f2c 100%);
}

.evl-hero-overlay {
    position: relative;
    width: 100%;
    min-height: inherit;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
    padding: 32px 20px 28px;
}

.evl-hero-text {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.evl-headline {
    margin: 0 0 8px;
    font-size: clamp(26px, 6vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.evl-subheadline {
    margin: 0;
    font-size: clamp(15px, 2.6vw, 19px);
    font-weight: 400;
    line-height: 1.4;
    color: #f5edf6;
    max-width: 720px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.2);
}

/* md+ tier (>= --bp-md = 768). */
@media (min-width: 768px) {
    .evl-hero { min-height: 40vh; }
    .evl-hero-overlay { padding: 56px 48px 48px; }
}

/* ── Meta strip ────────────────────────────────────────────────────────── */
.evl-meta-strip {
    background: var(--pl-card-bg);
    border-bottom: 1px solid var(--pl-card-border);
}

.evl-meta-strip-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--pl-text-muted);
    font-size: 14px;
}

.evl-meta-event-name {
    font-weight: 600;
    color: var(--pl-text-default);
    font-size: 15px;
}

.evl-meta-divider {
    color: var(--pl-text-subtle);
}

.evl-meta-dates,
.evl-meta-venue {
    color: var(--pl-text-muted);
}

/* md+ tier (>= --bp-md = 768). */
@media (min-width: 768px) {
    .evl-meta-strip-inner { padding: 16px 48px; gap: 14px; }
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.evl-body {
    width: 100%;
    padding: 28px 20px 56px;
}

.evl-body-inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* md+ tier (>= --bp-md = 768). */
@media (min-width: 768px) {
    .evl-body { padding: 48px 48px 72px; }
    .evl-body-inner { gap: 36px; }
}

/* ── Summary HTML (RadzenHtmlEditor output) ────────────────────────────── */
.evl-summary {
    color: var(--pl-text-default);
    font-size: 16px;
    line-height: 1.6;
}

.evl-summary p { margin: 0 0 14px; }
.evl-summary p:last-child { margin-bottom: 0; }
.evl-summary h1,
.evl-summary h2,
.evl-summary h3 {
    margin: 24px 0 10px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pl-text-default);
}
.evl-summary h2 { font-size: 22px; }
.evl-summary h3 { font-size: 18px; }
.evl-summary ul,
.evl-summary ol { margin: 0 0 14px 22px; padding: 0; }
.evl-summary li { margin: 0 0 6px; }
.evl-summary a { color: var(--pl-primary); }
.evl-summary img { max-width: 100%; height: auto; border-radius: 8px; }

/* ── Highlight bullets (CustomCalloutHtml as JSON list) ────────────────── */
.evl-highlights {
    background: var(--pl-card-bg);
    border: 1px solid var(--pl-card-border);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.evl-highlight-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.evl-highlight-item {
    position: relative;
    padding-left: 26px;
    color: var(--pl-text-default);
    font-size: 15.5px;
    line-height: 1.45;
}

.evl-highlight-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pl-primary);
    box-shadow: inset 0 0 0 3px var(--pl-card-bg);
}

/* ── Callout HTML pass-through ─────────────────────────────────────────── */
.evl-callout {
    background: var(--pl-card-bg);
    border: 1px solid var(--pl-card-border);
    border-radius: 14px;
    padding: 22px 24px;
    color: var(--pl-text-default);
    line-height: 1.55;
}

/* ── Public schedule slot (placeholder, populated by later phase) ──────── */
.evl-schedule:empty {
    display: none;
}

/* ── CTA row ───────────────────────────────────────────────────────────── */
.evl-cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-top: 4px;
}

.evl-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 28px;
    background: var(--pl-primary);
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(125, 91, 129, 0.28);
    transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    cursor: pointer;
}

.evl-cta-btn:hover,
.evl-cta-btn:focus-visible {
    background: #ffffff;
    color: var(--pl-primary);
    box-shadow: 0 6px 18px rgba(125, 91, 129, 0.36);
    transform: translateY(-1px);
}

.evl-cta-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(125, 91, 129, 0.28);
}

.evl-learn-more {
    align-self: center;
    color: var(--pl-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}

.evl-learn-more:hover {
    text-decoration: underline;
}

/* TODO(responsive): off-tier literal - revisit during phase4 governance. */
@media (min-width: 600px) {
    .evl-cta-row {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 22px;
    }

    .evl-cta-btn {
        width: auto;
        min-width: 240px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Two-column Figma layout (location header + content on the left, CTA panel
   on the right). Class names use the .evl-* prefix to stay scoped to the
   public landing page; keep the legacy hero/meta-strip/highlights/cta-row
   rules above untouched — they're no longer referenced by the markup but
   removing them would invalidate any future template that re-renders the
   snapshot Headline/Subheading/Hero (those fields remain in the DB).
   ────────────────────────────────────────────────────────────────────────── */

.evl-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    /* Two columns balance content vs CTAs as a 62/38 split per the Figma; on
       narrow screens we collapse to a single column (CTA panel below the
       content) so the primary "Register"/"Start Tagging" buttons stay above
       the FAQ fold on phones. */
}

/* The full-bleed plum welcome bar (.evl-stats-bar / .evl-stats-bar__welcome)
   was removed - the plum accent now lives on the AppHeader as a
   bottom border + drop shadow (see AppHeader.razor's
   `.app-header:has(.app-header-center__location)` rule). */

/* Pink "We're So Glad You're Here!" heading rendered directly under the
   AppHeader's plum bottom border, full-width within the left content
   column. Authenia is loaded via @font-face in site.css from
   /fonts/FontsFree-Net-Authenia.ttf - falls back to sans-serif while
   the file streams in (font-display:swap). */
.evl-welcome-heading {
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: var(--font-authenia);
    font-weight: 400;
    color: #D23C77;
    /* clamp keeps it readable on phones (~32px) up through wide desktops
       (~52px) without a separate breakpoint. */
    font-size: clamp(32px, 5.5vw, 52px);
    line-height: 1.1;
    letter-spacing: 0.005em;
}

/* TODO(responsive): off-tier literal - revisit during phase4 governance. */
@media (min-width: 960px) {
    .evl-page-grid {
        grid-template-columns: minmax(0, 1.62fr) minmax(360px, 1fr);
        /* No `align-items: start` here - we want both columns to stretch to
           the same row height so the right column wrapper (.evl-cta-col)
           runs the full page height. That gives the sticky CTA panel
           inside (.evl-cta-inner) somewhere to actually slide as the
           visitor scrolls past the schedule / guidelines / FAQ stack. */
    }
}

/* ── LEFT COLUMN ─────────────────────────────────────────────────────── */
.evl-content-col {
    background: var(--jbf-canvas);
    padding: 32px 20px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* md+ tier (>= --bp-md = 768). */
@media (min-width: 768px) {
    .evl-content-col { padding: 48px 56px; gap: 36px; }
}

/* .evl-header / .evl-header-title / .evl-header-venue / .evl-header-venue-icon
   were retired along with the in-content header block - the location name and
   venue now render in the shared AppHeader (see EventLanding.razor.cs
   SyncHeaderState). Don't reintroduce them here without first reverting that
   change, otherwise the same line will appear twice. */

/* ── Stats row (Sale Date / Consignor Fee / Payout Rate) ─────────────── */
/* Old in-content .evl-stats-row / .evl-stat / .evl-stat-label /
   .evl-stat-value rules removed - the three stats now live in the
   full-bleed plum .evl-stats-bar above the page grid. */

/* ── Section blocks (Schedule, Guidelines, FAQs) ─────────────────────── */
.evl-section { display: flex; flex-direction: column; gap: 14px; }

.evl-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--pl-text-default);
    letter-spacing: 0.01em;
}

/* JBF pink - applied to the owner-customizable Sale Schedule and Sale
   Guidelines headings so they read as branded chrome rather than generic
   body text. Scoped to those two sections (not .evl-faqs) because the FAQ
   heading is intentionally a quieter section break. Matches the date-line
   accent in the shared AppHeader. */
.evl-schedule .evl-section-title,
.evl-guidelines .evl-section-title,
.evl-faqs .evl-section-title {
    color: #D23C77;
}

.evl-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

/* TODO(responsive): off-tier literal - revisit during phase4 governance. */
@media (min-width: 720px) {
    .evl-card-grid { grid-template-columns: 1fr 1fr; gap: 18px; }

    /* When only one card was authored (the other side's HTML is blank and
       the @if guard skipped rendering it), collapse the grid to a single
       full-width column so the lone card spans the full row instead of
       sitting in the left half with empty space to its right.
       :has() is safe to use unconditionally - JBFOne's supported browser
       matrix (Chrome/Edge/Firefox/Safari evergreen) all ship :has(). */
    .evl-card-grid:has(> .evl-card:only-child) {
        grid-template-columns: 1fr;
    }
}

.evl-card {
    background: var(--pl-card-bg);
    border: 1px solid var(--pl-card-border);
    border-radius: 12px;
    /* Padding moved onto .evl-card__title / .evl-card__body so the title
       bar can stretch edge-to-edge with its bottom border, and so the
       body's HTML content sits flush against the card frame. */
    padding: 0;
    color: var(--pl-text-default);
    line-height: 1.55;
    font-size: 15px;
    overflow: hidden; /* clips title-bar bottom border to the rounded corners */
    /* Match the AppHeader's plum drop shadow (AppHeader.razor's
       `.app-header:has(.app-header-center__location)` rule) so the
       header / cards / right CTA panel all share one shadow vocabulary. */
    box-shadow: 0 4px 10px rgba(125, 91, 129, 0.28);
}

/* Title bar at the top of each card. Centered, pink, 18px so the title
   reads as a brand accent rather than body chrome. Bottom border uses the
   same `--pl-card-border` token as the card's outer border so the divider
   visually completes the card frame. Per-card title strings come from
   sale_schedule_heading / sale_guidelines_heading / sale_extras_heading
   on location_event_landing_page (see LocationEventLandingPageRecordDto
   for the column-to-card map); the auto Event Info card uses the event
   name verbatim. */
.evl-card__title {
    padding: 12px 22px;
    font-size: 18px;
    font-weight: 600;
    color: #D23C77;
    text-align: center;
    border-bottom: 1px solid var(--pl-card-border);
    letter-spacing: 0.005em;
}

.evl-card__body {
    padding: 16px 22px 20px;
}

/* Auto Event Info card (Card 1 on the public 2x2 grid + read-only preview
   in the Registration Landing editor). Renders a stack of label/value rows
   instead of authored HTML - see EventInfoCard.razor. The body uses a
   slightly tighter row gap than the editable cards so 4 rows still fit
   alongside Card 2 without making the grid lopsided. */
.evl-card__body--info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.evl-info-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.evl-info-row__label {
    color: #7d5b81;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    text-transform: none;
}

.evl-info-row__value {
    color: var(--pl-text-default);
    font-size: 14.5px;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Each line inside the value column (e.g. row 1 = venue name, row 2 = address)
   is its own block so the Google Maps link only wraps the address. */
.evl-info-row__line {
    display: block;
}

.evl-info-row__value a {
    color: var(--pl-primary);
    text-decoration: underline;
}
.evl-info-row__value a:hover { text-decoration: none; }

/* RadzenHtmlEditor output normalization inside the card body. */
.evl-card__body p:first-child { margin-top: 0; }
.evl-card__body p:last-child  { margin-bottom: 0; }
.evl-card__body h1, .evl-card__body h2,
.evl-card__body h3, .evl-card__body h4 {
    margin: 14px 0 8px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pl-text-default);
}
.evl-card__body h2 { font-size: 17px; }
.evl-card__body h3 { font-size: 15.5px; }
.evl-card__body ul, .evl-card__body ol { margin: 6px 0 10px 22px; padding: 0; }
.evl-card__body li { margin: 0 0 4px; }
.evl-card__body a  { color: var(--pl-primary); }

/* Responsive media inside authored card bodies. RadzenHtmlEditor stamps an
   inline style on every inserted image (e.g. `width: 1000px; height: auto;
   max-width: 1000px`) which would overflow the card -- and clip on mobile -
   so we override with !important to clamp every embedded media element to
   the card's content width while preserving its aspect ratio. Same list of
   tags handled by EventLandingHtmlContent.MediaTagRegex so the empty-body
   check and the responsive sizing rule stay aligned. */
.evl-card__body img,
.evl-card__body video,
.evl-card__body iframe,
.evl-card__body picture,
.evl-card__body embed,
.evl-card__body object,
.evl-card__body canvas,
.evl-card__body svg {
    display: block;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 6px auto;
    border-radius: 8px;
}

/* Same responsive clamp inside FAQ answers - editors can paste an image
   into an answer and we don't want it to blow out the accordion either. */
.evl-faq-answer img,
.evl-faq-answer video,
.evl-faq-answer iframe,
.evl-faq-answer picture,
.evl-faq-answer embed,
.evl-faq-answer object,
.evl-faq-answer canvas,
.evl-faq-answer svg {
    display: block;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 6px auto;
    border-radius: 8px;
}

/* ── FAQ accordion (native <details>/<summary>) ──────────────────────── */
.evl-faq-list { display: flex; flex-direction: column; gap: 10px; }

.evl-faq-item {
    background: var(--pl-card-bg);
    border: 1px solid var(--pl-card-border);
    border-radius: 12px;
    overflow: hidden;
    /* Same plum drop shadow as the AppHeader and .evl-card above. */
    box-shadow: 0 4px 10px rgba(125, 91, 129, 0.28);
}

.evl-faq-question {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pl-text-default);
    user-select: none;
}

/* Hide the native disclosure triangle in WebKit + Firefox. */
.evl-faq-question::-webkit-details-marker { display: none; }
.evl-faq-question::marker { content: ""; }

/* Custom +/- glyph that rotates open. */
.evl-faq-icon {
    width: 18px;
    height: 18px;
    position: relative;
    flex-shrink: 0;
}
.evl-faq-icon::before,
.evl-faq-icon::after {
    content: "";
    position: absolute;
    background: var(--pl-primary);
    border-radius: 1px;
    transition: transform 160ms ease, opacity 160ms ease;
}
.evl-faq-icon::before { top: 8px; left: 0;  width: 100%; height: 2px; }
.evl-faq-icon::after  { top: 0;  left: 8px; width: 2px;  height: 100%; }
.evl-faq-item[open] .evl-faq-icon::after { transform: scaleY(0); opacity: 0; }

.evl-faq-answer {
    padding: 0 20px 18px;
    color: var(--pl-text-muted);
    font-size: 14.5px;
    line-height: 1.55;
}
.evl-faq-answer p:first-child { margin-top: 0; }
.evl-faq-answer p:last-child  { margin-bottom: 0; }
.evl-faq-answer a { color: var(--pl-primary); }

/* ── RIGHT COLUMN — CTA panel ────────────────────────────────────────── */
.evl-cta-col {
    background: #fbfbfc;
    padding: 32px 20px 48px;
    border-top: 1px solid var(--pl-card-border);
}

/* Mobile (single-column layout, <960px): pin the CTA panel to the bottom
   of the viewport so Register / Start Tagging / Contact Us stay one tap
   away no matter how far the visitor has scrolled into the schedule /
   guidelines / FAQ sections. The `:has(.irf)` opt-out below releases the
   pin while the contact form is open - the form is too tall to fit in a
   bottom strip and works better as a normal in-flow section. */
@media (max-width: 959px) {
    .evl-cta-col {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-top: 1px solid var(--pl-card-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Compact: drop the marketing chrome so the bar stays slim. The
       What's-next title/sub and the legal disclaimer are still readable
       from the body of the page (they're just informational); the bar's
       only job here is the three actions. */
    .evl-cta-col .evl-whats-next,
    .evl-cta-col .evl-disclaimer {
        display: none;
    }

    .evl-cta-col .evl-cta-stack {
        gap: 8px;
    }

    .evl-cta-col .evl-cta-stack .evl-cta-btn {
        padding: 12px 18px;
        font-size: 14.5px;
    }

    /* Push the body up so the last bit of content (FAQ / guidelines) isn't
       permanently hidden behind the fixed bar. ~210px covers the bar's
       max realistic height (3 stacked compact buttons + paddings). */
    .evl-content-col {
        padding-bottom: 210px;
    }

    /* Contact form opt-out: when the visitor taps "Contact Us" the form
       renders inside .evl-cta-col and is far too tall for a bottom strip
       - release the pin, restore normal flow, and let the page scroll. */
    .evl-cta-col:has(.irf) {
        position: static;
        max-height: none;
        overflow: visible;
        background: #fbfbfc;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        padding: 32px 20px 48px;
    }

    .evl-content-col:has(~ .evl-cta-col .irf) {
        padding-bottom: 48px;
    }
}

/* TODO(responsive): off-tier literal - revisit during phase4 governance. */
@media (min-width: 960px) {
    .evl-cta-col {
        /* Full-length right column: stretches to the grid row height so the
           plum left-edge shadow runs the full height of the page, not just
           the height of the floating CTA box inside it. The float behavior
           moved down to .evl-cta-inner so the shadow stays put while the
           CTAs ride up on scroll. */
        padding: 56px 48px;
        border-top: none;
        border-left: 1px solid var(--pl-card-border);
        /* Plum drop shadow on the LEFT edge - matches the AppHeader's
           bottom shadow (and the .evl-card / .evl-faq-item shadows) so
           the header + cards + right panel all read as one cohesive
           shadow vocabulary. Negative x-offset casts the shadow toward
           the left content column. */
        box-shadow: -4px 0 10px rgba(125, 91, 129, 0.28);
    }

    /* Sticky moved here from .evl-cta-col so the CTA box can float on
       scroll while the column wrapper above stays static (and keeps its
       full-height background + left border + plum shadow visible the
       whole way down). `top: 96px` clears the sticky AppHeader (~81px
       tall) plus a small gap. */
    .evl-cta-inner {
        position: sticky;
        top: 96px;
    }
}

.evl-cta-inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 420px;
    margin: 0 auto;
}

.evl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pl-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.evl-back-link:hover { color: var(--pl-primary); text-decoration: underline; }

.evl-whats-next { display: flex; flex-direction: column; gap: 6px; }

.evl-whats-next-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    /* Brand pink - pairs with the plum primary CTA below and matches the
       Sale Schedule / Guidelines / FAQ section headings on the left. */
    color: #D23C77;
    letter-spacing: -0.01em;
}

.evl-whats-next-sub {
    margin: 0;
    color: var(--pl-text-muted);
    font-size: 14.5px;
    line-height: 1.5;
}

.evl-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* New CTA buttons share base sizing with the legacy .evl-cta-btn but with
   modifier classes for primary/secondary/ghost variants. We re-declare here
   with higher specificity (`.evl-cta-stack .evl-cta-btn`) so the legacy
   shadow/transform rules above don't apply to the new compact stack. */
.evl-cta-stack .evl-cta-btn {
    width: 100%;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
    transform: none;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Primary CTA - JBF plum (#7d5b81). Pairs with the pink "What's next?"
   heading + section-title accents so the right CTA panel reads as
   plum/pink, not all-pink (which got too monochrome). */
.evl-cta-btn--primary {
    background: #7d5b81;
    color: #ffffff;
    border: 1px solid #7d5b81;
}
/* Hover/focus inverts the primary CTA: white background with plum reused
   for text + border. Mirrors the inverted treatment used by every primary
   button in the app (see jbf-html-editor, local-website, fsc-library,
   image-picker for matching rules). */
.evl-cta-btn--primary:hover,
.evl-cta-btn--primary:focus-visible {
    background: #ffffff;
    color: #7d5b81;
    border-color: #7d5b81;
    box-shadow: none;
    transform: none;
}

.evl-cta-btn--secondary {
    background: #ffffff;
    color: var(--pl-primary);
    border: 1px solid var(--pl-primary);
}
.evl-cta-btn--secondary:hover,
.evl-cta-btn--secondary:focus-visible {
    background: #f3eaf4;
    box-shadow: none;
    transform: none;
}

.evl-cta-btn--ghost {
    background: transparent;
    color: var(--pl-text-muted);
    border: 1px solid var(--pl-card-border);
}
.evl-cta-btn--ghost:hover,
.evl-cta-btn--ghost:focus-visible {
    background: #f1f1f3;
    color: var(--pl-text-default);
    box-shadow: none;
    transform: none;
}

/* Disabled state for the CTA buttons. Used by preview mode on the public
   Event Landing page to suppress the Register / Start Tagging / Send
   Message hand-offs without changing the layout. Covers buttons rendered
   in both the per-event article CTA stack (.evl-cta-stack) and the
   Mode-2 card grid CTA row (.ll-event-card__cta-row). The :disabled
   selector covers <button disabled>; aria-disabled covers any future
   <a> rendering that opts out of navigation. */
.evl-cta-btn:disabled,
.evl-cta-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    background: #ffffff;
    color: var(--pl-text-subtle);
    border-color: var(--pl-card-border);
    box-shadow: none;
    transform: none;
    pointer-events: none;
}

.evl-disclaimer {
    margin: 0;
    color: var(--pl-text-subtle);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.evl-disclaimer a {
    color: var(--pl-primary);
    text-decoration: none;
}

.evl-disclaimer a:hover { text-decoration: underline; }

/* ── Narrow-screen polish ────────────────────────────────────────────── */
/* xs tier (< --bp-sm = 480). 479.98 mirrors --bp-sm; @media can't deref vars. */
@media (max-width: 479.98px) {
    .evl-stats-row { padding: 16px 18px; }
    .evl-card { font-size: 14.5px; }
    .evl-card__title { padding: 10px 18px; font-size: 14.5px; }
    .evl-card__body  { padding: 14px 18px 16px; }
    .evl-faq-question { padding: 14px 16px; font-size: 14.5px; }
    .evl-faq-answer { padding: 0 16px 14px; }
    .evl-content-col, .evl-cta-col { padding-left: 16px; padding-right: 16px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   InfoRequestForm - reusable contact / "send us a note" form.
   Class names use the .irf-* / .irf__* prefix so the same stylesheet can be
   lifted to a global location once a second producing surface ships (currently
   the public Event Landing page is the only consumer, so the rules live here
   alongside .evl-*). The form is sized to drop into the right CTA panel with
   no additional layout work - same max-width as .evl-cta-inner, same gap, so
   sticky positioning and disclaimer spacing carry over.
   ────────────────────────────────────────────────────────────────────────── */

.irf {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.irf__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.irf__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--pl-text-default);
    letter-spacing: -0.01em;
}

.irf__subtitle {
    margin: 0;
    color: var(--pl-text-muted);
    font-size: 14.5px;
    line-height: 1.5;
}

/* Two-column row used for first / last name on wide screens; collapses on
   narrow viewports so each input still gets full breathing room. */
.irf__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 480px) {
    .irf__row--two {
        grid-template-columns: 1fr 1fr;
    }
}

.irf__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.irf__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pl-text-default);
    letter-spacing: 0.01em;
}

.irf__required {
    color: #c0392b;
    margin-left: 2px;
}

/* Subtle "(optional)" hint shown next to non-required field labels (e.g.
   the Phone input). Visually de-emphasizes the field so the eye still
   gravitates to the required ones. */
.irf__optional {
    color: var(--pl-text-subtle);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
    letter-spacing: 0;
    text-transform: none;
}

.irf__input {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--pl-text-default);
    background: #ffffff;
    border: 1px solid var(--pl-card-border);
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.irf__input:focus,
.irf__input:focus-visible {
    outline: none;
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.18);
}

.irf__input--textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.45;
}

/* Inline validation message rendered by Blazor's <ValidationMessage>. EditForm
   adds .validation-message to the element; we re-class it so the surrounding
   stylesheets (Radzen, etc.) don't fight us on color. */
.irf__validation,
.irf .validation-message {
    color: #c0392b;
    font-size: 12.5px;
    line-height: 1.4;
    margin: 0;
}

/* Server / network error banner (shown above the form when SubmitAsync throws). */
.irf__error-banner {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #8a1c14;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.4;
}

.irf__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 4px;
}

.irf__btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    font-family: inherit;
}

.irf__btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.irf__btn--primary {
    background: var(--pl-primary);
    color: #ffffff;
    border-color: var(--pl-primary);
}

.irf__btn--primary:hover:not(:disabled),
.irf__btn--primary:focus-visible:not(:disabled) {
    background: #ffffff;
    color: var(--pl-primary);
    border-color: var(--pl-primary);
}

.irf__btn--ghost {
    background: transparent;
    color: var(--pl-text-muted);
    border-color: var(--pl-card-border);
}

.irf__btn--ghost:hover:not(:disabled),
.irf__btn--ghost:focus-visible:not(:disabled) {
    background: #f1f1f3;
    color: var(--pl-text-default);
}

/* Inline helper note rendered below the action row when the host marks
   the form as Disabled (e.g. preview mode on the public Event Landing
   page). Tinted to match other muted-text instances on the page. */
.irf__disabled-hint {
    margin: -2px 0 0;
    color: var(--pl-text-subtle);
    font-size: 12.5px;
    line-height: 1.4;
}

/* Post-submit success card replaces the entire form. Shares the form's
   max-width so the panel doesn't visually resize when the swap happens. */
.irf--success {
    align-items: center;
    text-align: center;
    padding: 8px 4px;
}

.irf__success-icon {
    margin-bottom: 4px;
}

.irf__success-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--pl-text-default);
}

.irf__success-msg {
    margin: 0;
    color: var(--pl-text-muted);
    font-size: 14.5px;
    line-height: 1.5;
    max-width: 340px;
}

@media (max-width: 480px) {
    .irf__title { font-size: 20px; }
    .irf__btn { padding: 10px 16px; font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Location-landing variants for /event/{path} (no slug). Mode-2 renders a
   responsive 2-up grid of EventInfoCard + per-card CTA strip; Mode-3 renders
   content-only cards plus a page-level Notify Me CTA. The .ll-* class names
   are inherited from the retired LocationLanding.razor's inline <style>
   block and ported here so EventLanding.razor can reuse them in its
   mode-aware branch.
   ───────────────────────────────────────────────────────────────────────── */

.ll-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ll-header {
    text-align: center;
    padding: 16px 8px 0;
}

.ll-header__location {
    margin: 0 0 4px;
    font-size: 2rem;
    font-weight: 700;
    color: #393E41;
}

.ll-header__tagline {
    margin: 0;
    color: #5d6066;
    font-size: 1rem;
}

/* Card grid -- 1 column when there's a single full-width card, responsive
   2-up otherwise. Used by Mode 2 (always 2-up since it requires Card 1) and
   Mode 3 (1-up vs 2-up depending on how many content-only cards survived). */
.ll-card-grid--single {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-width: 760px;
    margin: 0 auto;
}

.ll-card-grid--multi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 720px) {
    .ll-card-grid--multi {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Event-bound card wraps EventInfoCard + a CTA row underneath. The wrapper
   is needed because EventInfoCard owns its own .evl-card root, and we don't
   want to paint a second card-shape around it. */
.ll-event-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ll-event-card__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ll-event-card__cta-row .evl-cta-btn {
    flex: 1 1 auto;
}

/* Mode-3 page-level Notify Me section -- centered, plum-themed, single CTA. */
.ll-notify-section {
    display: flex;
    justify-content: center;
}

.ll-notify-card {
    background: #fff;
    border: 1px solid #e8e3eb;
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 520px;
    box-shadow: 0 4px 12px rgba(125, 91, 129, 0.08);
    text-align: center;
}

.ll-notify-card__title {
    margin: 0 0 8px;
    color: #393E41;
    font-size: 1.25rem;
    font-weight: 700;
}

.ll-notify-card__sub {
    margin: 0 0 16px;
    color: #5d6066;
}

/* Inline error sibling NotifyMeButton renders when a write fails. Used by
   the Mode-3 page-level CTA. */
.evl-notify-error {
    margin: 4px 0 0;
    color: #c0392b;
    font-size: 0.85rem;
}

.evl-notify-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ll-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes ll-spin {
    to { transform: rotate(360deg); }
}