/**
 * Bark Events Public CSS - v1.0.6
 *
 * Mobile-first layout with three breakpoints:
 *   < 768px  → mobile (full-width hero cards, stacked buttons)
 *   768-1023 → tablet (side-by-side cards with 180x100 thumbs)
 *   >= 1024  → desktop (side-by-side cards with 240x126 thumbs)
 *
 * Naming convention: all classes prefixed with .bbe-
 */

/* ── Layout container ──────────────────────────────────────── */
.bbe-container {
    max-width: 1200px; /* Matched to GeneratePress container + future directory plugin for visual consistency (no width "blip" navigating between them). Change all three together. */
    margin: 0 auto;
    padding: 16px 12px; /* tighter horizontal padding on mobile for more text room */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1a1a1a;
    line-height: 1.55;
}

@media (min-width: 768px) {
    .bbe-container {
        padding: 24px;
    }
}

/* ── Single event page ────────────────────────────────────── */
.bbe-single-event .bbe-event-photo {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

/* ── Title row: H1 + inline Share button (desktop only) ───── */
.bbe-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 8px;
    flex-wrap: wrap; /* very long titles can wrap below share */
}

.bbe-single-event h1.bbe-event-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #111;
    flex: 1 1 auto;
    min-width: 0; /* allow flex shrinking past content size */
}

.bbe-single-event h2.bbe-event-summary {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #444;
    margin: 0 0 20px;
}

@media (min-width: 768px) {
    .bbe-single-event h1.bbe-event-title { font-size: 36px; }
    .bbe-single-event h2.bbe-event-summary { font-size: 20px; }
}

/* Title-row right side: Share + Interested buttons grouped together.
   The wrapper itself is hidden on mobile (single rule, no specificity wars
   with individual button display rules later in the file). Shown on tablet+. */
.bbe-title-row-buttons {
    display: none; /* hidden on mobile */
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Share button visibility: mobile vs desktop */
/* Desktop: show inline Share + Interested in title row; hide mobile pair in actions */
/* Mobile:  hide inline desktop buttons; show Share + Interested as a pair at bottom */
.bbe-btn-share-desktop {
    display: none; /* hidden on mobile */
    flex-shrink: 0;
    white-space: nowrap; /* keep "SHARE THIS" on one line */
}
.bbe-btn-interest-desktop {
    display: none; /* hidden on mobile */
    flex-shrink: 0;
}
.bbe-btn-share-mobile {
    display: inline-flex; /* visible on mobile */
    white-space: nowrap; /* keep "SHARE THIS" on one line */
}
.bbe-mobile-pair {
    display: flex;
    gap: 10px;
    width: 100%;
    margin: 12px 0 20px; /* breathing room between summary above and meta block below */
}
.bbe-mobile-pair .bbe-btn {
    /* flex-basis auto + grow 1 = buttons size to their CONTENT and then share
       leftover space, rather than forcing exact 50/50. The Interested button
       (heart + label + count) is wider than "SHARE THIS", so equal widths
       crammed the count against the edge. Content-aware widths give Interested
       the bit of extra room it needs while Share takes a little less. */
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    /* Trim the side padding (base is 16px) so content sits comfortably. */
    padding-left: 10px;
    padding-right: 10px;
}
/* Bump the heart on the MOBILE Interested button up to match the visual
   weight of the desktop heart. Mobile-only - desktop is left untouched.
   Using inline-block + explicit size so the emoji scales reliably inside
   the flex button regardless of how the platform renders it. */
/* Heart on the MOBILE Interested button. The emoji ignored plain font-size
   sizing on iOS Safari in this flex button (tested em and px - no effect).
   This approach forces the SPAN to a fixed em-box as a flex container and
   centers the emoji inside it, which sizes the glyph via the box rather than
   via font-size alone. Mobile-only; desktop heart is left untouched. */
.bbe-mobile-pair .bbe-btn-interest .bbe-interest-heart-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
    width: 1.1em;
    height: 1.1em;
    margin-right: 2px;
    transform: translateY(-1px);
}

@media (min-width: 768px) {
    .bbe-title-row-buttons {
        display: flex; /* visible on tablet+ */
    }
    .bbe-btn-share-desktop {
        display: inline-flex; /* visible on tablet+ */
    }
    .bbe-btn-interest-desktop {
        display: inline-flex; /* visible on tablet+ */
    }
    /* On tablet+, hide the mobile Share+Interest pair entirely - we use the
       desktop versions up in the title row instead. */
    .bbe-mobile-pair {
        display: none;
    }
}

.bbe-share-icon {
    font-size: 16px;
    line-height: 1;
}

/* ── Event meta block (date, location, price) ──────────────── */
.bbe-event-meta {
    background: #f7f8fa;
    border-radius: 8px;
    margin: 16px 0;
    overflow: hidden; /* keep columns inside the rounded corners */
}

/* ── Two-column grid (desktop) ──────────────────────────────────────── */
@media (min-width: 768px) {
    .bbe-event-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .bbe-meta-col {
        padding: 7px 16px; /* 3px tighter top/bottom than original 10px */
    }
    /* Vertical divider between columns - pseudo-element so it doesn't
       touch the rounded corners at top and bottom of the card */
    .bbe-meta-col:first-child {
        position: relative;
    }
    .bbe-meta-col:first-child::after {
        content: '';
        position: absolute;
        right: 0;
        top: 10px;    /* inset from top edge */
        bottom: 10px; /* inset from bottom edge */
        width: 1px;
        background: #e5e7eb;
    }
}

/* ── Single-column (mobile) ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .bbe-meta-col {
        padding: 6px 12px;
    }
    /* Separator line between the two column groups when stacked */
    .bbe-meta-col:first-child {
        border-bottom: 1px solid #e5e7eb;
        padding-top: 3px;    /* tighter above When row */
        padding-bottom: 4px;
    }
    .bbe-meta-col:last-child {
        padding-top: 4px;
        padding-bottom: 3px; /* tighter below Organizer row */
    }
}

.bbe-event-meta .bbe-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
}
/* Remove bottom border from the last row inside each column */
.bbe-meta-col .bbe-meta-row:last-child {
    border-bottom: none;
}
.bbe-event-meta .bbe-meta-label {
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap; /* keep labels from wrapping mid-word */
    /* flex-shrink:0 stops the label from being compressed when the value is
       long and wraps to a second line. That compression was the real cause of
       the misalignment Dave spotted (a wrapping "Where" value squeezed its
       label narrower than the non-wrapping "When" label, shifting the value's
       start position). With shrink disabled, each label keeps its natural
       width and values start consistently - WITHOUT reserving a wide fixed
       column, so short labels like "When:" stay tight against their value. */
    flex: 0 0 auto;
}
/* Emoji icon in front of each meta label (When/Where/Price/Organizer).
   Sized slightly larger than the label text so it reads as an icon, and
   vertically nudged to sit centered against the label baseline. Inline so
   it stays glued to its label and wraps with it on mobile. */
.bbe-event-meta .bbe-meta-icon {
    font-size: 1.15em;
    line-height: 1;
    margin-right: 2px;
    vertical-align: -0.1em;
}
.bbe-event-meta .bbe-meta-value {
    color: #1a1a1a;
}
.bbe-event-meta .bbe-meta-value a {
    color: #2271b1;
    text-decoration: none;
}
.bbe-event-meta .bbe-meta-value a:hover,
.bbe-event-meta .bbe-meta-value a:active {
    text-decoration: underline;
}

/* Address link specifically (under the venue name) */
.bbe-address-link {
    display: inline-block;
}

/* Quiet county label - only appears on non-Broward events on single event page.
   Smaller, muted color, italic to read as supplementary geographic context. */
.bbe-county-label {
    display: inline-block;
    margin-top: 2px;
    font-size: 13px;
    font-style: italic;
    color: #6b7280;
}

/* ── Price badge ───────────────────────────────────────────── */

/* Global (used in event cards on archive page) - keep as plain colored text */
.bbe-price-free {
    color: #15803d;
    font-weight: 700;
}

/* Pill version - only inside the event meta block on single event pages */
.bbe-event-meta .bbe-price-free {
    display: inline-flex;
    align-items: center;
    padding: 2px 11px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.4;
    vertical-align: 3px;
}

/* Donation pill - sky blue */
.bbe-event-meta .bbe-price-donation {
    display: inline-flex;
    align-items: center;
    padding: 2px 11px;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.4;
    vertical-align: 3px;
}

/* Paid pill - soft violet */
.bbe-event-meta .bbe-price-paid {
    display: inline-flex;
    align-items: center;
    padding: 2px 11px;
    background: #f3e8ff;
    color: #7c3aed;
    border: 1px solid #c4b5fd;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.4;
    vertical-align: 3px;
}

/* Note after price pill (e.g. "- first 20 free", "- suggested $5") */
.bbe-price-note {
    font-size: 14px;
    color: #4b5563;
    margin-left: 4px;
    vertical-align: 3px;
}

/* ── Status banners ────────────────────────────────────────── */
.bbe-event-banner {
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    margin: 16px 0;
    font-size: 14px;
}
.bbe-banner-past {
    background: #e5e7eb;
    color: #4b5563;
}
.bbe-banner-cancelled {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.bbe-banner-postponed {
    background: #fef7e0;
    color: #8a6500;
    border: 1px solid #fde68a;
}
.bbe-banner-sold-out {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}
.bbe-banner-beta {
    background: #fef7e0;
    color: #8a6500;
    border: 1px solid #fde68a;
    font-size: 12px;
}

/* ── Action buttons (Tickets, Calendar, Share) ─────────────── */
.bbe-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0;
}

/* Mobile: action buttons stack full-width */
@media (max-width: 767px) {
    .bbe-actions {
        flex-direction: column;
        gap: 8px;
    }
    .bbe-actions .bbe-btn {
        width: 100%;
        justify-content: center;
    }
    /* Mobile-only: shrink event meta field text one step (When, Where,
       Price, Organizer) so the details block isn't visually dominant on
       small screens. Desktop keeps the inherited body font size.
       15.5px is the sweet spot between "barely smaller" (16px) and "too
       small" (14px) - just enough reduction to feel different. */
    .bbe-event-meta .bbe-meta-label,
    .bbe-event-meta .bbe-meta-value {
        font-size: 15.5px;
        line-height: 1.45;
    }
}

.bbe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}
.bbe-btn:hover,
.bbe-btn:active {
    background: #f9fafb;
    /* Lock the text color to brand green on hover. Some themes
       (and some performance plugins) inject hover styles that can make
       button text the same as the background - this rule defends against
       that. Specificity bump via the selector list keeps us above generic
       theme rules without resorting to !important. */
    color: #1a7f1a;
}
.bbe-btn:hover .dashicons,
.bbe-btn:active .dashicons,
.bbe-btn:hover svg,
.bbe-btn:active svg {
    color: #1a7f1a;
    fill: #1a7f1a;
}
.bbe-btn-primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}
.bbe-btn-primary:hover,
.bbe-btn-primary:active {
    background: #1d5e96;
    color: #fff;
}
.bbe-btn-calendar {
    background: #fff;
}

/* ── I'm Interested button ─────────────────────────────────── */
.bbe-btn-interest {
    background: #fff;
    /* Slightly tighter spacing inside since the heart + label + count
       can get wide; keeps the button from looking baggy at small sizes. */
    gap: 5px;
    /* Keep heart + label + count on a single line. As the count grows
       (e.g. "(4)" -> "(12)" -> "(148)") the content stays one line and the
       count remains fully visible rather than wrapping or clipping. */
    white-space: nowrap;
}
.bbe-interest-label,
.bbe-interest-count {
    line-height: 1;
}
.bbe-interest-count {
    margin-left: 2px;
    font-weight: 600;
    color: inherit;
    /* The count is social proof - never let it shrink or wrap away. If space
       ever gets tight with a large number, the label gives way before this. */
    flex: 0 0 auto;
}
/* Active state: visitor has clicked Interested. Green text + green border
   to indicate "you're in." We keep the background white so the button
   doesn't look "selected" in a heavy way - more of a quiet affirmation. */
.bbe-btn-interest.is-interested {
    color: #1a7f1a;
    border-color: #1a7f1a;
}
.bbe-btn-interest.is-interested:hover,
.bbe-btn-interest.is-interested:active {
    /* Defensive: keep the green when active, even on hover. The generic
       .bbe-btn:hover rule sets color:#1a7f1a, but on hover we also lift
       the background slightly for tactile feedback. */
    background: #f0fdf4; /* very faint green tint */
    color: #1a7f1a;
}

/* ── Remind Me "nudge" after Interested click ──────────────── */
/* After a visitor clicks Interested, the Remind Me button gets a
   subtle green highlight to suggest "your next step is here." A one-time
   pulse animation draws the eye; then the persistent border-color stays
   for the rest of the session. */
.bbe-btn-remind.bbe-nudge {
    border-color: #1a7f1a;
    box-shadow: 0 0 0 1px #1a7f1a; /* doubles the visual weight of the border */
}
.bbe-btn-remind.bbe-nudge-pulse {
    animation: bbeNudgePulse 1.5s ease-out 1;
}
@keyframes bbeNudgePulse {
    0%   { box-shadow: 0 0 0 0   rgba(26, 127, 26, 0.7); }
    50%  { box-shadow: 0 0 0 8px rgba(26, 127, 26, 0); }
    100% { box-shadow: 0 0 0 1px #1a7f1a; }
}

/* ── Event description container ───────────────────────────── */
.bbe-event-description {
    margin: 24px 0;
}
.bbe-event-description h2,
.bbe-event-description h3,
.bbe-event-description h4 {
    margin-top: 24px;
}
.bbe-event-description p {
    margin: 12px 0;
}

/* ── Archive page ──────────────────────────────────────────── */
.bbe-events-archive .bbe-archive-header {
    margin-bottom: 24px;
}
.bbe-events-archive h1.bbe-archive-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}
.bbe-events-archive .bbe-archive-tagline {
    color: #6b7280;
    font-size: 16px;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .bbe-events-archive h1.bbe-archive-title { font-size: 32px; }
}

/* ── Search bar ────────────────────────────────────────────── */
.bbe-search-form {
    margin-bottom: 16px;
}
.bbe-search-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px; /* 16px min prevents iOS autozoom */
    box-sizing: border-box;
}
.bbe-search-input:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1);
}

/* ── Quick search chips ────────────────────────────────────── */
.bbe-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 20px;
}
.bbe-chip {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s;
    min-height: 36px; /* comfortable touch target */
    display: inline-flex;
    align-items: center;
}
.bbe-chip:hover,
.bbe-chip:active {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}
.bbe-chip-active {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

/* ── Filter bar ────────────────────────────────────────────── */
.bbe-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px;
    background: #f7f8fa;
    border-radius: 8px;
}
.bbe-filters select,
.bbe-filters input[type="date"] {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px; /* 16px min prevents iOS autozoom */
    background: #fff;
    min-height: 40px;
}

@media (min-width: 768px) {
    .bbe-filters select,
    .bbe-filters input[type="date"] {
        font-size: 14px;
        min-height: auto;
    }
}

/* ── Event cards on archive ────────────────────────────────── */
.bbe-date-group {
    margin-bottom: 28px;
}
.bbe-date-group-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* ── MOBILE: full-width hero card ──────────────────────────── */
/* Default styles target mobile - full-width photo on top, text stacked below */
.bbe-event-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}
.bbe-event-card:hover,
.bbe-event-card:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.bbe-event-card:last-child {
    margin-bottom: 0;
}

.bbe-card-thumb {
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    background: #e5e7eb;
    display: block;
    border-radius: 0; /* corners come from parent card */
}

.bbe-card-body {
    flex: 1;
    min-width: 0;
    padding: 12px 12px; /* tighter horizontal padding so multi-day dates fit better */
}

.bbe-card-date {
    font-size: 13px;
    font-weight: 700;
    color: #2271b1;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.bbe-card-date .bbe-price-free {
    color: #1a7f1a;
    margin-left: 6px;
}

.bbe-card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    margin: 0 0 6px;
}

.bbe-card-summary {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.4;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbe-card-location {
    font-size: 13px;
    color: #6b7280;
}

/* ── TABLET (768-1023px): side-by-side cards with 180x100 thumb ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .bbe-event-card {
        flex-direction: row;
        gap: 14px;
        padding: 14px;
        border-radius: 8px;
    }
    .bbe-card-thumb {
        flex-shrink: 0;
        width: 180px;
        height: 100px;
        aspect-ratio: auto;
        border-radius: 6px;
    }
    .bbe-card-body {
        padding: 0;
    }
    /* Tablet bracket intentionally inherits mobile text sizes (20px title,
       15px summary, etc.) - we used to force a smaller 17px title here but
       that became inconsistent once mobile was bumped to 20px. Now both
       mobile and tablet share the same readable text sizes; only the
       layout changes (full-width image on phone -> side-by-side thumb on
       tablet). Desktop (>=1024) still overrides to its larger sizes. */
}

/* ── DESKTOP (>= 1024px): side-by-side with 320x168 thumb ─────── */
@media (min-width: 1024px) {
    .bbe-event-card {
        flex-direction: row;
        gap: 22px;
        padding: 18px;
        border-radius: 8px;
    }
    .bbe-card-thumb {
        flex-shrink: 0;
        width: 320px;
        height: 168px; /* 2:1 ratio preserved, matches bbe-display 1200x630 */
        aspect-ratio: auto;
        border-radius: 6px;
    }
    .bbe-card-body {
        padding: 0;
    }
    /* Tighter vertical margins to keep the content visually grouped now
       that the card is taller. Net effect: title and summary feel pulled
       up toward the date line. */
    .bbe-card-date {
        font-size: 14px;
        margin-bottom: 3px;
    }
    .bbe-card-title {
        font-size: 23px;
        margin: 0 0 4px;
    }
    .bbe-card-summary {
        font-size: 16px;
        margin: 0 0 4px;
    }
    .bbe-card-location {
        font-size: 14px;
    }
}

/* ── Pagination ────────────────────────────────────────────── */
.bbe-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 30px 0;
    flex-wrap: wrap;
}
.bbe-pagination a,
.bbe-pagination span {
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}
.bbe-pagination span.current {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
    font-weight: 600;
}

/* ── No results ─────────────────────────────────────────────── */
.bbe-no-results {
    text-align: center;
    padding: 50px 20px;
    color: #6b7280;
}
.bbe-no-results h2 {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 10px;
}

/* ─── Phase 2: Remind Me Modal ─────────────────────────────── */
.bbe-btn-remind {
    background: #fff;
}

.bbe-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    box-sizing: border-box;
}
.bbe-modal-backdrop.is-open {
    display: flex;
    animation: bbeModalFade 0.15s ease-out;
}
@keyframes bbeModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.bbe-modal-panel {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 18px 18px 14px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}
.bbe-modal-panel h3 {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.3;
    padding-right: 30px; /* leave room for X button */
}
.bbe-modal-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 6px 10px;
    z-index: 2;
}
.bbe-modal-close:hover { color: #374151; }

/* No visible label - input uses placeholder for "Your email" hint */
.bbe-remind-form input[type="email"] {
    width: 100%;
    padding: 9px 12px;
    font-size: 16px; /* prevents iOS autozoom */
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.bbe-remind-form input[type="email"]:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
}

/* Success state: hide form inputs and Set Reminder button, show Done button.
   The success message in .bbe-remind-status remains visible so the user can
   read it at their own pace and close manually. */
.bbe-remind-form .bbe-prefs-done-btn { display: none; }
.bbe-remind-form.is-success-state input[type="email"],
.bbe-remind-form.is-success-state .bbe-remind-timings,
.bbe-remind-form.is-success-state .bbe-prefs-cancel-btn,
.bbe-remind-form.is-success-state .bbe-prefs-submit-btn { display: none; }
.bbe-remind-form.is-success-state .bbe-prefs-done-btn { display: inline-block; }
.bbe-remind-form.is-success-state .bbe-remind-status.is-success {
    font-size: 15px;
    line-height: 1.5;
    padding: 8px 0 4px;
    /* The success message is built server-side with \n separating the intro
       line from the quoted event title. pre-line lets those newlines render
       as actual line breaks while still collapsing other whitespace. */
    white-space: pre-line;
}

.bbe-remind-timings {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 12px 6px;
    margin: 0 0 10px;
}
.bbe-remind-timings legend {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #374151;
    padding: 0 6px;
}
.bbe-remind-timings label {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 14px;
    color: #1a1a1a;
    margin: 4px 0;
    cursor: pointer;
}
.bbe-remind-timings input[type="checkbox"] {
    margin-right: 8px;
    transform: translateY(1px);
}

.bbe-remind-status {
    min-height: 18px;
    font-size: 13px;
    margin-bottom: 8px;
}
.bbe-remind-status.is-error {
    color: #b91c1c;
}
.bbe-remind-status.is-success {
    color: #15803d;
}

.bbe-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

@media (max-width: 480px) {
    .bbe-modal-panel {
        padding: 18px 14px 12px;
        max-width: 340px;
    }
    .bbe-modal-panel h3 {
        font-size: 17px;
        padding-right: 36px; /* extra room on mobile so X doesn't crowd the heading */
    }
    /* On mobile, move X button further from edge so it doesn't sit
       right on top of edge content of overlapping elements. */
    .bbe-modal-close {
        top: 4px;
        right: 6px;
        padding: 8px 12px;
        font-size: 22px;
    }
    .bbe-modal-actions {
        flex-direction: column-reverse;
    }
    .bbe-modal-actions .bbe-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Map + Ad row (Phase 3 stub)
   ─────────────────────────────────────────────────────────────────────
   Two equal square columns on desktop. Stacks vertically on mobile.
   Square aspect ratio achieved with aspect-ratio: 1/1 (supported in all
   modern browsers - WP admin uses it elsewhere already).
   
   Layout (v1.7.1 update):
     Map pushed to LEFT edge of container, banner pushed to RIGHT edge.
     Empty space in the middle. A subtle 2px vertical divider sits
     centered in that empty space (desktop only) as a design accent.
   
   Width cap:
     Each column capped at 500px wide. At wider containers, the columns
     stay 500px and the middle gap grows. At narrower widths, columns
     shrink to fit.
   ─────────────────────────────────────────────────────────────────────
*/
.bbe-event-mapad-row {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 380px);
    gap: 16px;
    margin: 30px 0 20px;
    justify-content: space-between; /* push map left, banner right */
    align-items: stretch;
    position: relative; /* anchor for the centered divider pseudo-element */
}

/* When no active banner exists, collapse to single column so the map
   spans full width rather than sitting at half-width with empty space. */
.bbe-event-mapad-row--map-only {
    grid-template-columns: minmax(0, 380px);
    justify-content: flex-start;
}

/* Decorative vertical divider between map and banner.
   Desktop only - hidden on map-only rows, at tablet (<=900px), and mobile. */
@media (min-width: 901px) {
    .bbe-event-mapad-row:not(.bbe-event-mapad-row--map-only)::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 12.5%;
        bottom: 12.5%;
        width: 1px;
        background: #e5e7eb;
        transform: translateX(-50%);
        pointer-events: none;
    }
}

.bbe-event-map-col,
.bbe-event-ad-col {
    aspect-ratio: 1 / 1;
    /* Fallback for any browser without aspect-ratio support: a sensible
       max-height that approximates a square at the typical content width.
       Matches the column max-width (380px) so squares stay true. */
    max-height: 380px;
}

.bbe-event-map-col {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.bbe-event-map-col iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bbe-event-ad-col {
    display: flex;
}

/* Mobile: stack vertically, map on top, ad below. */
@media (max-width: 700px) {
    .bbe-event-mapad-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    /* Remove the desktop max-height cap on mobile - at narrower viewports
       the squares stay smaller naturally (constrained by container width),
       so max-height would actually distort the 1:1 aspect ratio. */
    .bbe-event-map-col,
    .bbe-event-ad-col {
        max-height: none;
    }
}

/* ─── Real banner ad ────────────────────────────────────────────────────
   Image fills the square with object-fit:cover (centers and crops if not
   perfectly square). No placeholder fallback - if no valid banner exists,
   the ad column is not rendered at all and the map goes full-width.
   ───────────────────────────────────────────────────────────────────── */
.bbe-event-ad-col .bbe-banner-ad-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.bbe-event-ad-col .bbe-banner-ad-link:hover {
    /* Subtle hover effect - signals "clickable" without being aggressive */
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.bbe-event-ad-col .bbe-banner-ad-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   "You might also like" - related events section
   ─────────────────────────────────────────────────────────────────────
   Sits below the map+banner row, above the "All Events" link. Shows up
   to 3 random upcoming events as cards.
   
   Desktop (>=900px):  3 cards across (grid)
   Tablet (600-899px): 2 cards across (grid)
   Mobile (<600px):    1 card per row (stacks)
   
   Reuses the .bbe-event-card visual style (rounded corners, hover lift,
   typography) but FORCES VERTICAL LAYOUT (image-on-top) at all sizes via
   the .bbe-related-card override. This is necessary because the standard
   desktop card uses image-on-left (320px wide) which won't fit 3-across.
   ───────────────────────────────────────────────────────────────────── */
.bbe-related-events {
    margin: 36px 0 20px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.bbe-related-events-heading {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 18px;
}

.bbe-related-events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Override the desktop horizontal card layout (image-left) for related
   cards. Force vertical layout (image-on-top) so 3 fit across the row.
   This is scoped to .bbe-related-card so it does NOT affect the archive
   page cards. */
.bbe-related-card.bbe-event-card,
.bbe-related-card.bbe-event-card:last-child {
    flex-direction: column;
    padding: 0;
    gap: 0;
    border-radius: 12px;
    /* Strip the base .bbe-event-card 20px margin-bottom. In the archive
       page, cards stack vertically and need that margin for separation.
       Here they're in a CSS Grid where 'gap' handles spacing. The base
       margin caused a height asymmetry: cards 1 and 2 inherited 20px
       margin-bottom while card 3 (as :last-child) got 0. Since grid
       'align-items: stretch' makes all cards equal height including the
       margin area, the third card APPEARED 20px taller than the others.
       Targeting both base and :last-child ensures ALL related cards get
       0 margin regardless of position in the grid. */
    margin-bottom: 0;
}

.bbe-related-card .bbe-card-thumb {
    width: 100%;
    /* Mobile default: scale proportionally to card width (each card is
       full-width on mobile, so the image scales with it). */
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: 0;     /* corners come from parent */
    flex-shrink: 1;
    display: block;
}

/* Mobile: the image is direct child of the card (no wrapper effect since
   wrapper has no fixed height on mobile - it just lets the image scale
   naturally with the card width). */
.bbe-related-card .bbe-card-thumb-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    display: block;
    line-height: 0;  /* eliminate any phantom space below inline image */
}

/* Desktop + tablet: cards sit side-by-side and MUST be equal height for
   visual alignment. Lock the WRAPPER to exactly 175px tall - this is
   HTML-level so no CSS rule on the image can override it. Image inside
   fills the wrapper and is cropped via object-fit:cover.
   
   This is the bulletproof approach after CSS-only height locks failed to
   override Perfmatters lazy-loading inline styles in earlier versions.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
    .bbe-related-card .bbe-card-thumb-wrap {
        height: 175px;
        max-height: 175px;
    }
    .bbe-related-card .bbe-card-thumb {
        height: 100% !important;
        width: 100% !important;
        max-height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        flex-shrink: 0;
    }
}

.bbe-related-card .bbe-card-body {
    padding: 12px 14px 14px;
    /* Body fills remaining vertical space in the card. Combined with the
       parent .bbe-event-card being a flex column (display:flex set on the
       base class), this makes the body stretch to fill whatever height
       the grid assigns to the card. No empty space below the body. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Slightly tighter typography inside related cards - keeps them visually
   secondary to the main event content. */
.bbe-related-card .bbe-card-date {
    font-size: 13px;
    margin-bottom: 4px;
}
.bbe-related-card .bbe-card-title {
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 6px;
    /* Truncate to 2 lines so cards align even when titles vary in length */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bbe-related-card .bbe-card-location {
    font-size: 13px;
    /* Push to the bottom of the flex-column card body so it always sits
       at the bottom regardless of title length. */
    margin-top: auto;
}

/* Desktop + tablet: cards sit side-by-side in a grid, where CSS Grid
   stretches all cards in a row to match the tallest one. A 1-line title
   next to a 2-line title would leave a gap of empty space below the
   shorter card. Force ALL titles to reserve 2 lines of vertical space so
   cards visually align. Scoped to ≥600px because below that, cards
   stack one-per-row and no alignment is needed. */
@media (min-width: 600px) {
    .bbe-related-card .bbe-card-title {
        min-height: calc(17px * 1.3 * 2); /* 2 lines at 17px/1.3 = ~44px */
    }
}

/* Tablet: 2 cards across instead of 3 (each card needs ~330px to look
   reasonable; on tablet we have less room) */
@media (min-width: 600px) and (max-width: 899px) {
    .bbe-related-events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 card per row (full width, stacked). Cards get their default
   .bbe-event-card mobile styling (vertical hero card). */
@media (max-width: 599px) {
    .bbe-related-events-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .bbe-related-events {
        margin: 28px 0 12px;
        padding-top: 18px;
    }
    .bbe-related-events-heading {
        font-size: 19px;
        margin-bottom: 14px;
    }
}