/* ═══════════════════════════════════════════════════
   LEGO Events — Listing page + Event detail page
   Listing = agenda redesign (docs/events-redesign-spec.md)
   Listing classes use the `evl-` prefix to avoid clashing
   with detail-page `.ev-*` classes below.
   ═══════════════════════════════════════════════════ */

/* ── Events listing page ──────────────────────────── */

.ev-listing-page { padding: 2.5rem 0 4rem; }

.ev-listing-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap;
}
.ev-listing-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; margin-bottom: .25rem; line-height: 1.2; }
.ev-listing-sub   { color: var(--color-text-2); font-size: .9rem; }

/* ── Single filter row (sticky below the 92px site header) ── */
.evl-bar {
    position: sticky; top: 92px; z-index: 30;
    background: var(--color-bg);
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--color-border);
}

/* Period segmented control */
.evl-seg {
    display: inline-flex; flex-shrink: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 3px;
}
.evl-seg a {
    font-size: .82rem; font-weight: 500;
    color: var(--color-text-2); text-decoration: none;
    padding: .32rem .85rem; border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.evl-seg a:hover { color: var(--color-text); }
.evl-seg a.active { background: var(--color-primary); color: #fff; }

/* Type chips — horizontally scrollable, never wrap */
.evl-chips {
    display: flex; gap: .35rem; flex: 1; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.evl-chips::-webkit-scrollbar { display: none; }
.evl-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .75rem; border-radius: var(--radius-pill);
    font-size: .82rem; font-weight: 500; white-space: nowrap;
    border: 1px solid var(--color-border);
    color: var(--color-text-2); text-decoration: none;
    background: var(--color-surface);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.evl-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.evl-chip.active {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.evl-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Country select + clear — squared (8px) corners: select is an input,
   not a pill; pill radius stays reserved for the toggle + chips */
.evl-country {
    flex-shrink: 0; max-width: 160px;
    font-size: .82rem; font-weight: 500;
    color: var(--color-text-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .38rem .7rem;
    cursor: pointer;
}
.evl-clear {
    flex-shrink: 0;
    font-size: .82rem; color: var(--color-text-3);
    text-decoration: underline; text-underline-offset: 2px;
    padding: .3rem .2rem;
}
.evl-clear:hover { color: var(--color-text); }

/* Result count */
.ev-result-count { font-size: .82rem; color: var(--color-text-3); padding: .9rem 0 .25rem; }

/* ── Agenda list ──────────────────────────────────── */

.evl-month-head {
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-2);
    padding: 1.1rem 0 .5rem;
    border-bottom: 1px solid var(--color-border);
}
.evl-month-count {
    color: var(--color-text-3); font-weight: 500;
    letter-spacing: 0; text-transform: none; margin-left: .5rem;
}
/* Sticky month headers on desktop only — the filter bar is a single
   predictable line there (92px header + ~53px bar) */
@media (min-width: 721px) {
    .evl-month-head {
        position: sticky; top: 145px; z-index: 20;
        background: var(--color-bg);
    }
}

.evl-row {
    position: relative;
    display: grid;
    grid-template-columns: 60px 108px minmax(0, 1fr) auto;
    gap: 1rem; align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .8rem 1rem .8rem .85rem;
    margin-top: .6rem;
    transition: border-color var(--transition-fast);
}
.evl-row:hover { border-color: var(--color-primary); }
.evl-row.is-today {
    border-color: var(--color-primary);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Date block */
.evl-date { text-align: center; line-height: 1.15; }
.evl-date-dow {
    display: block; font-size: .68rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-text-3);
}
.evl-date-day {
    display: block; font-size: 1.6rem; font-weight: 700;
    letter-spacing: -.5px; font-variant-numeric: tabular-nums;
    color: var(--color-text);
}
.evl-date-range {
    display: block; font-size: .68rem; color: var(--color-text-3);
    font-variant-numeric: tabular-nums;
}
.evl-date-today {
    display: inline-block; margin-top: .2rem;
    font-size: .6rem; font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase; letter-spacing: .06em;
}

/* Thumbnail */
.evl-thumb {
    width: 108px; height: 72px;
    border-radius: var(--radius-xs); overflow: hidden;
    background: var(--color-surface-2);
}
.evl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evl-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

/* Main column */
.evl-main { min-width: 0; }
.evl-title {
    display: block;
    font-size: 1rem; font-weight: 600; letter-spacing: -.1px;
    color: var(--color-text); text-decoration: none;
    margin-bottom: .2rem; line-height: 1.35;
}
.evl-title:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Stretched link: the title anchor covers the whole row; the action
   buttons sit above it via z-index */
.evl-title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }

.evl-meta {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--color-text-2);
}
.evl-meta-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.evl-meta-sep { color: var(--color-border); }
.evl-badge-free {
    font-size: .66rem; font-weight: 700;
    background: var(--status-success-bg); color: var(--status-success-text);
    border-radius: var(--radius-xs); padding: .1em .55em;
}
.evl-badge-online {
    font-size: .66rem; font-weight: 700;
    background: var(--status-info-bg); color: var(--status-info-text);
    border-radius: var(--radius-xs); padding: .1em .55em;
}
.evl-social { font-size: .75rem; color: var(--color-text-3); margin-top: .25rem; }

/* Actions */
.evl-actions {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: .35rem;
}
.evl-star, .evl-share {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .4rem .75rem;
    font-size: .8rem; font-weight: 500;
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text-2);
    cursor: pointer; white-space: nowrap;
    transition: all var(--transition-fast);
}
.evl-share { padding: .4rem .55rem; }
.evl-star:hover, .evl-share:hover { border-color: var(--color-primary); color: var(--color-primary); }
.evl-star.ev-interest-active {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── Empty state ──────────────────────────────────── */
.evl-empty { padding: 3rem 0; text-align: center; color: var(--color-text-2); }
.evl-empty-hint { font-size: .85rem; color: var(--color-text-3); margin-top: .35rem; }

/* Share popover (shared by listing + detail pages) */
.ev-share-popover {
    position: absolute; z-index: 500;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 200px; overflow: hidden; display: none;
}
.ev-share-popover-title {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--color-text-3);
    padding: .75rem 1rem .5rem;
}
.ev-share-option {
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem 1rem; font-size: .88rem; color: var(--color-text);
    text-decoration: none; cursor: pointer; background: none; border: none;
    width: 100%; text-align: left; transition: background var(--transition-fast);
}
.ev-share-option:hover { background: var(--color-bg); }
.ev-share-overlay {
    position: fixed; inset: 0; z-index: 499; display: none;
}

/* ── Responsive — listing ─────────────────────────── */
@media (max-width: 720px) {
    .evl-bar { position: static; flex-wrap: wrap; }
    .evl-row { grid-template-columns: 52px minmax(0, 1fr); padding: .75rem .85rem; }
    .evl-thumb { display: none; }
    .evl-actions { grid-column: 2; justify-content: flex-start; margin-top: .2rem; }
    .evl-date-day { font-size: 1.35rem; }
    .evl-country { max-width: 130px; }
    .ev-listing-header { flex-direction: column; }
}


/* ══════════════════════════════════════════════════
   Event detail page  (.ev-page, .ev-* classes)
   ══════════════════════════════════════════════════ */

.ev-page { padding: 2.5rem 0; }

.ev-back { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--color-text-2); text-decoration: none; margin-bottom: 1.5rem; }
.ev-back:hover { color: var(--color-primary); }

/* Hero image */
.ev-hero-img-wrap { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; max-height: 420px; }
.ev-hero-img { width: 100%; height: 420px; object-fit: cover; display: block; }

/* Two-column layout */
.ev-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }

/* Header */
.ev-header { margin-bottom: 1.5rem; }
.ev-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.ev-type-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; color: #fff; padding: .25em .75em; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: .05em; }
.ev-badge-featured { background: var(--color-warning, #f59e0b) !important; }
.ev-badge-free     { background: var(--color-green-alt) !important; }
.ev-badge-online   { background: var(--color-online, #0EA5E9) !important; }
.ev-title          { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.25; margin-bottom: .75rem; }
.ev-location-line  { display: flex; align-items: flex-start; gap: .5rem; font-size: .95rem; color: var(--color-text-2); }
.ev-location-line i { flex-shrink: 0; margin-top: .15rem; }

/* Action buttons */
.ev-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--color-border); }
.ev-btn-action { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1.5px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font-size: .85rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: all var(--transition-fast); white-space: nowrap; }
.ev-btn-action:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(var(--color-primary-rgb, 59,74,168),.05); }
.ev-btn-action.ev-btn-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ev-btn-action.ev-btn-active:hover { opacity: .9; }
.ev-btn-count { background: rgba(255,255,255,.25); border-radius: var(--radius-pill); font-size: .7rem; font-weight: 700; padding: .05em .45em; min-width: 1.4em; text-align: center; }
.ev-btn-action:not(.ev-btn-active) .ev-btn-count { background: var(--color-border); color: var(--color-text-2); }

/* Main-column sections: About → Details → Location */
.ev-section { margin-bottom: 2rem; }
.ev-section-title { font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }

.ev-about { font-size: .95rem; line-height: 1.7; overflow-x: hidden; word-break: break-word; overflow-wrap: break-word; }
.ev-about > *:first-child { margin-top: 0; }
.ev-about > *:last-child { margin-bottom: 0; }
.ev-about img { max-width: 100%; height: auto; }

/* Details facts grid (two columns, below About) */
.ev-facts {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 1.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: .4rem 1.25rem;
}
.ev-fact {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .8rem 0;
    border-bottom: 1px solid var(--color-bg);
    min-width: 0;
}
.ev-fact:nth-last-child(-n+2) { border-bottom: none; }
.ev-fact > i { font-size: 1.1rem; flex-shrink: 0; width: 1.5rem; text-align: center; color: var(--color-text-3); margin-top: .1rem; }
.ev-fact-primary { font-size: .95rem; font-weight: 500; }
.ev-fact-secondary { font-size: .85rem; color: var(--color-text-2); margin-top: .2rem; }
.ev-fact-secondary a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.ev-meta-dash { margin: 0 .25rem; color: var(--color-text-3); }
.ev-attendance-summary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ev-dot { color: var(--color-text-3); }

/* Comments */
.ev-main .comments-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }

/* Sidebar */
.ev-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 1.5rem; }
.ev-sidebar-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.ev-sidebar-card-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-3); padding: 1rem 1.25rem .75rem; display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid var(--color-border); }

/* Map — lives in the main column inside a .ev-section */
.ev-map {
    height: 320px; width: 100%; cursor: grab;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.ev-map:active { cursor: grabbing; }
.ev-map-link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .82rem; color: var(--color-primary);
    padding: .5rem 0 0; text-decoration: underline; text-underline-offset: 2px;
}

/* Sidebar utility cards (add to calendar, suggest) */
.ev-sidebar-body { padding: 1rem 1.25rem 1.25rem; }
.ev-sidebar-actions { display: flex; flex-direction: column; gap: .5rem; }
.ev-sidebar-actions .btn { justify-content: center; }
.ev-sidebar-note { font-size: .82rem; color: var(--color-text-2); margin-bottom: .75rem; line-height: 1.5; }
.ev-sidebar-all {
    display: block; text-align: center;
    font-size: .82rem; font-weight: 600; color: var(--color-primary);
    padding: .7rem 1rem; border-top: 1px solid var(--color-border);
    text-decoration: none;
}
.ev-sidebar-all:hover { background: var(--color-bg); }

/* Nearby events */
.ev-nearby-list { display: flex; flex-direction: column; gap: 0; }
.ev-nearby-item { display: flex; gap: .75rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--color-border); align-items: flex-start; }
.ev-nearby-item:last-child { border-bottom: none; }
.ev-nearby-thumb-wrap { flex-shrink: 0; }
.ev-nearby-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius); display: block; }
.ev-nearby-info { flex: 1; min-width: 0; }
.ev-nearby-type  { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: .2rem; }
.ev-nearby-title { font-size: .85rem; font-weight: 600; color: var(--color-text); text-decoration: none; display: block; margin-bottom: .25rem; line-height: 1.35; }
.ev-nearby-title:hover { color: var(--color-primary); }
.ev-nearby-date  { font-size: .75rem; color: var(--color-text-3); display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.ev-nearby-attend-btn { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 500; padding: .3rem .65rem; border: 1.5px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text-2); cursor: pointer; transition: all var(--transition-fast); }
.ev-nearby-attend-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ev-nearby-attend-btn.ev-nearby-attend-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ev-nearby-count { background: rgba(255,255,255,.25); border-radius: var(--radius-pill); font-size: .7rem; font-weight: 700; padding: .05em .4em; }
.ev-nearby-attend-btn:not(.ev-nearby-attend-active) .ev-nearby-count { background: var(--color-border); color: var(--color-text-3); }

/* Responsive — event detail */
@media (max-width: 960px) {
    .ev-layout  { grid-template-columns: 1fr; }
    .ev-sidebar { position: static; }
    .ev-map     { height: 280px; }
    .ev-hero-img { height: 260px; }
    .ev-title   { font-size: 1.6rem; }
    .ev-btn-label { display: none; }
    .ev-btn-action { padding: .5rem .65rem; }
}
@media (max-width: 600px) {
    .ev-title        { font-size: 1.35rem; }
    .ev-hero-img     { height: 200px; }
    .ev-page         { overflow-x: hidden; }
    .ev-about        { font-size: .9rem; }
    .ev-facts        { grid-template-columns: 1fr; padding: .4rem 1rem; }
    .ev-fact:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-bg); }
    .ev-fact:last-child { border-bottom: none; }
    .ev-actions      { gap: .35rem; }
}