/**
 * Events index + single event.
 *
 * Scoped under .cul-ev so nothing here reaches the listing, home or blog
 * templates. Mock palette mapped onto theme tokens rather than copied as hex;
 * the teal is declared once (the theme has no token for it) exactly as
 * blog-post.css does, so the two pages cannot drift.
 */
.cul-ev {
    --e-navy:       var(--cul-brand, #1B3A5C);
    --e-navy-dk:    var(--cul-brand-hover, #152e4a);
    --e-orange:     var(--cul-accent, #E87722);
    --e-orange-dk:  #CF5F0A;
    --e-orange-wash:#FFF6EC;
    --e-orange-line:#F2D3B4;
    --e-head:       var(--cul-brand, #1B3A5C);
    --e-ink:        #2C3E50;
    --e-ink-soft:   #64798C;
    --e-line:       #E3E9EF;
    --e-page:       var(--cul-g50, #EEF4FB);
    --e-green:      #2F9E63;
    --e-link:       #0F6B7B;
    --e-r: 5px;
    /* Same shared width + gutter the header, home, listing and blog use. */
    --e-col: var(--cul-content-w, 1160px);
    --e-gutter: var(--cul-gutter, 24px);
    --e-tap: 44px;

    font-family: var(--cul-font, 'DM Sans', system-ui, sans-serif);
    color: var(--e-ink);
    background: var(--e-page);
}
.cul-ev *, .cul-ev *::before, .cul-ev *::after { box-sizing: border-box; }
.cul-ev h1, .cul-ev h2, .cul-ev h3, .cul-ev h4 {
    color: var(--e-head); letter-spacing: -0.015em; margin: 0;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
}
.cul-ev__col { max-width: var(--e-col); margin: 0 auto; padding: 0 var(--e-gutter); }

/* ── index hero ─────────────────────────────────────────────────────── */
.cul-ev__hero {
    background:
        radial-gradient(760px 300px at 12% 8%, rgba(232,119,34,0.30), transparent 62%),
        linear-gradient(160deg, #1E4266, #122C46);
    padding: 40px 0 34px; color: #fff;
}
.cul-ev__hero-k {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #FFD0A3; margin: 0 0 9px;
}
.cul-ev .cul-ev__hero h1 { color: #fff; font-size: 40px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.02em; }
.cul-ev__hero p { margin: 0; color: #C3D6E6; font-size: 16.5px; max-width: 62ch; }

/* ── filter bar ─────────────────────────────────────────────────────── */
.cul-ev__fbar {
    background: #fff; border-bottom: 1px solid var(--e-line);
    position: sticky; top: 0; z-index: 20;
}
.cul-ev__fbar-inner {
    max-width: var(--e-col); margin: 0 auto; padding: 12px var(--e-gutter);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cul-ev__pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--e-line); border-radius: 99px;
    padding: 0 14px; min-height: 38px;
    font: inherit; font-size: 13.5px; font-weight: 650;
    color: var(--e-head) !important; cursor: pointer; text-decoration: none !important;
    white-space: nowrap;
}
.cul-ev__pill:hover { border-color: #C9D5DE; }
.cul-ev__pill.is-on { background: var(--e-navy) !important; border-color: var(--e-navy); color: #fff !important; }
.cul-ev__fdiv { width: 1px; height: 24px; background: var(--e-line); margin: 0 4px; }
.cul-ev__fright { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cul-ev__count { font-size: 13.5px; color: var(--e-ink-soft); }

/* Category menu — a <details>, so it needs no JS and closes on Escape. */
.cul-ev__cat { position: relative; }
.cul-ev__cat > summary { list-style: none; }
.cul-ev__cat > summary::-webkit-details-marker { display: none; }
.cul-ev__cat[open] > summary { background: var(--e-navy) !important; border-color: var(--e-navy); color: #fff !important; }
.cul-ev__catmenu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 220px; max-height: 320px; overflow-y: auto;
    background: #fff; border: 1px solid var(--e-line); border-radius: var(--e-r);
    box-shadow: 0 8px 28px rgba(10,24,38,0.18); padding: 6px;
}
.cul-ev__catmenu a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 10px; border-radius: 4px;
    font-size: 14px; color: var(--e-head) !important; text-decoration: none !important;
}
.cul-ev__catmenu a:hover { background: #F4F7FA; }
.cul-ev__catmenu a.is-on { font-weight: 700; }
.cul-ev__catmenu-n { color: var(--e-ink-soft); font-size: 12.5px; }

/* ── date groups + cards ────────────────────────────────────────────── */
.cul-ev__group { margin: 26px 0 0; }
.cul-ev .cul-ev__group > h2 {
    font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--e-ink-soft); margin: 0 0 12px;
    display: flex; align-items: center; gap: 12px;
}
.cul-ev .cul-ev__group > h2::after { content: ""; flex: 1; height: 1px; background: var(--e-line); }
.cul-ev__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cul-ev__card {
    display: grid; grid-template-columns: 74px 1fr 132px; gap: 16px; align-items: center;
    background: #fff; border: 1px solid var(--e-line); border-radius: var(--e-r);
    padding: 14px; overflow: hidden; text-decoration: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cul-ev__card:hover { border-color: #C9D5DE; box-shadow: 0 2px 10px rgba(22,50,79,0.08); }
/* No flyer drops the image column rather than showing a placeholder. */
.cul-ev__card--noimg { grid-template-columns: 74px 1fr; }
.cul-ev__date {
    border: 1px solid var(--e-line); border-radius: var(--e-r);
    text-align: center; padding: 9px 0; line-height: 1.1;
}
.cul-ev__date-m { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--e-orange); }
.cul-ev__date-d { display: block; font-size: 23px; font-weight: 700; color: var(--e-head); }
.cul-ev__date-w { display: block; font-size: 10.5px; color: var(--e-ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.cul-ev .cul-ev__card h3 { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 5px; }
.cul-ev__meta {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: 13.5px; color: var(--e-ink-soft);
}
.cul-ev__sep { width: 3px; height: 3px; border-radius: 50%; background: #C3CED8; }
.cul-ev__free { color: var(--e-green); font-weight: 700; }
.cul-ev__price { color: var(--e-head); font-weight: 650; }
.cul-ev__host { font-size: 13px; color: var(--e-link); font-weight: 600; margin-top: 4px; display: block; }
.cul-ev__thumb {
    aspect-ratio: 4 / 3; border-radius: 4px; display: block;
    background: #D7E0E9 center top / cover no-repeat;
}

.cul-ev__empty {
    background: #fff; border: 1px solid var(--e-line); border-radius: var(--e-r);
    padding: 30px 26px; text-align: center; color: var(--e-ink-soft); font-size: 15px;
}
.cul-ev__empty a { color: var(--e-link) !important; font-weight: 650; }

/* ── post your event band ───────────────────────────────────────────── */
.cul-ev__band {
    background: var(--e-navy); border-radius: var(--e-r); padding: 24px 26px; color: #fff;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 26px 0 0;
}
.cul-ev .cul-ev__band h2 { color: #fff; font-size: 20px; font-weight: 700; margin: 0; }
.cul-ev__band p { margin: 3px 0 0; color: #C3D6E6; font-size: 14.5px; }
.cul-ev__band a {
    margin-left: auto; background: var(--e-orange); color: #fff !important;
    border-radius: var(--e-r); min-height: 46px; padding: 0 22px;
    display: flex; align-items: center; font-weight: 700; font-size: 15px;
    text-decoration: none !important;
}
.cul-ev__band a:hover { background: var(--e-orange-dk); }

/* ── single: breadcrumb bar ─────────────────────────────────────────── */
.cul-ev__crumbs { background: var(--e-navy); padding: 11px 0; }
.cul-ev__crumbs-inner {
    max-width: var(--e-col); margin: 0 auto; padding: 0 var(--e-gutter);
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: 13px; color: #C3D6E6;
}
.cul-ev__crumbs-inner a { color: #C3D6E6 !important; text-decoration: none !important; }
.cul-ev__crumbs-inner a:hover { color: #fff !important; }
.cul-ev__crumbs .cul-ev__chip {
    background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
    border-radius: 99px; padding: 4px 12px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: #fff !important;
}

/* ── single: layout ─────────────────────────────────────────────────── */
.cul-ev__two {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px; align-items: start; padding: 20px 0 50px;
}
.cul-ev__rail { position: sticky; top: 60px; display: grid; gap: 14px; }
.cul-ev__card-lg {
    background: #fff; border: 1px solid var(--e-line); border-radius: var(--e-r);
    padding: 26px 28px; transition: border-color 0.15s ease;
}
.cul-ev__card-lg:hover { border-color: #C9D5DE; }
.cul-ev .cul-ev__title { font-size: 32px; font-weight: 700; line-height: 1.18; margin: 0 0 16px; }

/* when / where / cost */
/* Tightened: this is a reference block people scan, not something they read.
   The earlier spacing gave three short lines the footprint of a paragraph. */
.cul-ev__ww {
    display: grid; gap: 8px; margin: 0 0 18px;
    padding: 13px 15px; background: #F7F9FB; border-radius: var(--e-r);
}
.cul-ev__ww-row {
    display: flex; gap: 10px; align-items: flex-start; line-height: 1.35;
    font-size: 14.5px; color: var(--e-head); font-weight: 600; margin: 0;
}
.cul-ev__ww-row svg { color: var(--e-ink-soft); flex: 0 0 auto; margin-top: 2px; width: 15px; height: 15px; }
.cul-ev__ww-sub { display: block; font-size: 12.5px; color: var(--e-ink-soft); font-weight: 400; margin-top: 0; line-height: 1.4; }
.cul-ev__ww .cul-ev__free { font-weight: 700; }

.cul-ev__acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.cul-ev__btn-o {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--e-orange); color: #fff !important; border-radius: var(--e-r);
    min-height: 48px; padding: 0 22px; font-size: 15px; font-weight: 700;
    text-decoration: none !important; border: 0; cursor: pointer; font-family: inherit;
}
.cul-ev__btn-o:hover { background: var(--e-orange-dk); }
.cul-ev__btn-g {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--e-line); border-radius: var(--e-r);
    min-height: 48px; padding: 0 20px; font-size: 14.5px; font-weight: 650;
    color: var(--e-head) !important; text-decoration: none !important;
    cursor: pointer; font-family: inherit;
}
.cul-ev__btn-g:hover { border-color: #C9D5DE; background: #FAFCFD; }

.cul-ev__body p { font-size: 16.5px; line-height: 1.7; margin: 0 0 18px; max-width: 70ch; }
.cul-ev__body p:last-child { margin-bottom: 0; }
.cul-ev__body a { color: var(--e-link) !important; font-weight: 600; }
.cul-ev__body img { max-width: 100%; height: auto; border-radius: var(--e-r); }

/* host row */
.cul-ev__host-row {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--e-line);
}
.cul-ev__host-logo {
    width: 52px; aspect-ratio: 4 / 3; border-radius: 4px; flex: 0 0 auto;
    background: #D7E0E9 center top / cover no-repeat;
}
.cul-ev__host-k { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--e-ink-soft); margin: 0 0 2px; }
.cul-ev .cul-ev__host-row h3 { font-size: 18px; font-weight: 700; margin: 0; }
.cul-ev__host-c { font-size: 13px; color: var(--e-ink-soft); }
.cul-ev__host-view {
    margin-left: auto; border: 1px solid var(--e-line); border-radius: var(--e-r);
    min-height: 42px; padding: 0 18px; display: flex; align-items: center;
    font-size: 14px; font-weight: 650; color: var(--e-head) !important;
    text-decoration: none !important;
}
.cul-ev__host-view:hover { border-color: #C9D5DE; background: #FAFCFD; }

/* host offer strip */
.cul-ev__hostoffer {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 0;
    background: var(--e-orange-wash); border: 1px solid var(--e-orange-line);
    border-radius: var(--e-r); padding: 14px 16px;
}
.cul-ev__hostoffer-k {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--e-orange); margin: 0 0 2px; display: flex; align-items: center; gap: 6px;
}
.cul-ev__hostoffer-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--e-orange); }
.cul-ev__hostoffer-deal { font-size: 16px; font-weight: 700; color: var(--e-head); margin: 0; line-height: 1.3; }
.cul-ev__hostoffer-t { flex: 1; min-width: 200px; }
.cul-ev__hostoffer-btn {
    display: inline-flex; align-items: center; background: var(--e-orange);
    color: #fff !important; border-radius: var(--e-r);
    min-height: 42px; padding: 0 20px; font-size: 14.5px; font-weight: 700;
    white-space: nowrap; text-decoration: none !important;
}
.cul-ev__hostoffer-btn:hover { background: var(--e-orange-dk); }
.cul-ev__hostoffer-btn.is-claimed { background: #E6EDF3; color: var(--e-head) !important; pointer-events: none; }

/* map card */
.cul-ev__map {
    border: 1px solid var(--e-line); border-radius: var(--e-r);
    overflow: hidden; margin: 14px 0 0; background: #fff;
}
.cul-ev__map-img { display: block; width: 100%; height: 190px; object-fit: cover; background: #E6ECE7; }
.cul-ev__map-ad {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    font-size: 14.5px; font-weight: 600; color: var(--e-head);
    border-top: 1px solid var(--e-line);
}
.cul-ev__map-ad svg { color: var(--e-link); flex: 0 0 auto; }
.cul-ev__map-go { margin-left: auto; font-size: 13.5px; color: var(--e-link) !important; font-weight: 650; text-decoration: none !important; white-space: nowrap; }

/* Centred: it is a footnote for the whole page, not a continuation of the
   left-aligned prose above it. max-width + auto margins keep it from running
   the full column width when centred. */
.cul-ev__disclaimer {
    margin: 18px auto 0; font-size: 12.5px; color: var(--e-ink-soft);
    line-height: 1.55; max-width: 70ch; text-align: center;
}

/* ── single: rail ───────────────────────────────────────────────────── */
.cul-ev__flyer { background: #fff; border: 1px solid var(--e-line); border-radius: var(--e-r); overflow: hidden; }
.cul-ev .cul-ev__flyer h2 {
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--e-ink-soft); padding: 14px 16px 10px; margin: 0;
}
.cul-ev__flyer-img { display: block; width: calc(100% - 32px); margin: 0 16px; border-radius: 4px; height: auto; }
.cul-ev__flyer-zoom { display: block; padding: 11px 16px; font-size: 13px; color: var(--e-link) !important; font-weight: 650; text-decoration: none !important; }

.cul-ev__rcard { background: #fff; border: 1px solid var(--e-line); border-radius: var(--e-r); padding: 18px 20px; }
.cul-ev .cul-ev__rcard > h2 {
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--e-ink-soft); margin: 0 0 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cul-ev__rcard > h2 a { font-size: 12px; color: var(--e-link) !important; text-transform: none; letter-spacing: 0; text-decoration: none !important; }
.cul-ev__rev {
    display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center;
    padding: 11px 0; border-top: 1px solid var(--e-line); text-decoration: none !important;
}
.cul-ev__rev:first-of-type { border-top: 0; padding-top: 0; }
.cul-ev__rev-d { border: 1px solid var(--e-line); border-radius: 4px; text-align: center; padding: 6px 0; line-height: 1.05; }
.cul-ev__rev-m { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-orange); }
.cul-ev__rev-n { display: block; font-size: 17px; font-weight: 700; color: var(--e-head); }
.cul-ev .cul-ev__rev h3 { font-size: 14.5px; font-weight: 650; margin: 0; line-height: 1.3; }
.cul-ev__rev-t { font-size: 12.5px; color: var(--e-ink-soft); }
.cul-ev__rev:hover h3 { color: var(--e-link); }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cul-ev__list { grid-template-columns: 1fr; }
    .cul-ev__card { grid-template-columns: 64px 1fr; }
    .cul-ev__thumb { display: none; }
    .cul-ev__two { grid-template-columns: 1fr; }
    .cul-ev__rail { position: static; }
    .cul-ev .cul-ev__hero h1 { font-size: 29px; }
    .cul-ev .cul-ev__title { font-size: 25px; }
    .cul-ev__card-lg { padding: 22px 20px; }
}
@media (max-width: 480px) {
    .cul-ev__col, .cul-ev__fbar-inner, .cul-ev__crumbs-inner { padding-left: 16px; padding-right: 16px; }
    .cul-ev__band a { margin-left: 0; width: 100%; justify-content: center; }
    .cul-ev__acts .cul-ev__btn-o, .cul-ev__acts .cul-ev__btn-g { width: 100%; justify-content: center; }
    .cul-ev__host-view { margin-left: 0; width: 100%; justify-content: center; }
    .cul-ev__hostoffer-btn { width: 100%; justify-content: center; }
}

/* Share row at the foot of the write-up — the same component as the blog
   post's, so the two pages behave identically. */
.cul-ev__share {
    display: flex; align-items: center; gap: 10px;
    margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--e-line);
}
.cul-ev__share span { font-size: 13px; color: var(--e-ink-soft); font-weight: 600; }
.cul-ev__share a {
    width: 36px; height: 36px; border: 1px solid var(--e-line); border-radius: var(--e-r);
    display: flex; align-items: center; justify-content: center;
    color: var(--e-ink-soft) !important; text-decoration: none !important;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cul-ev__share a:hover { color: var(--e-link) !important; border-color: #C9D5DE; }

/* The offer strip sits directly under the host row; without this they read as
   one merged block. 7px is enough to separate them without implying they are
   unrelated — the offer usually IS the host's. */
.cul-ev__card-lg .cul-offerstrip { margin-top: 7px; }