/*
    Events List — SC Design System (no Figma node; built from DS tokens +
    migrated-sample conventions). Restyles the Vue app output (EventCard /
    EventFilters / Pagination) — same markup/classes, DS look. Two roots:
      .el.el--desktop  → EventsListDesktop view  (#events-list-app-desktop)
      .el.el--mobile   → EventsListMobile view   (#events-list-app-mobile)
    Tokens: Inter; Brand/600 #465DA6, Brand/700 #384A85, Brand/25 #F6F9FF;
    Gray/900 #181D27, Gray/600 #535862, Gray/500 #717680, Gray/300 #D5D7DA,
    Gray/200 #E9EAEB, Gray/100 #F5F5F5; Success/600 #039855. Radius 8/12.
*/

/* Desktop / Mobile roots render together; CSS toggles per viewport
   (same 768px breakpoint as the other migrated desktop/mobile pairs). */
.el--desktop { display: block; }
.el--mobile  { display: none; }
@media (max-width: 768px) {
    .el--desktop { display: none; }
    .el--mobile  { display: block; }
}

.el { font-family: 'Inter', sans-serif; color: #535862; }
.el * { box-sizing: border-box; }
.el .events-list-container { padding: 24px 0; }

/* ── Card ─────────────────────────────────────────────── */
.el .event-card-wrapper { height: 100%; }
.el .event-card {
    background: #FFFFFF;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    transition: box-shadow .2s ease, transform .2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.el .event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10); }

.el .event-thumbnail { position: relative; height: 180px; overflow: hidden; background: #465DA6; }
.el .event-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.el .event-card:hover .event-thumbnail img { transform: scale(1.05); }
.el .event-thumbnail-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.7); font-size: 3rem;
}

.el .event-status {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: 9999px;
    font-size: 12px; line-height: 18px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: #FFFFFF;
}
.el .event-status.status-upcoming { background: #465DA6; }
.el .event-status.status-ongoing  { background: #039855; }
.el .event-status.status-past     { background: #717680; }

.el .event-mode {
    position: absolute; top: 12px; right: 12px;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 10px; border-radius: 9999px;
    font-size: 12px; line-height: 18px; font-weight: 500; color: #181D27;
    display: flex; align-items: center; gap: 6px;
}
.el .event-mode i { color: #465DA6; }

.el .event-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.el .event-date-time {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 14px; line-height: 20px; color: #465DA6; margin-bottom: 12px;
}
.el .event-date-time i { color: #465DA6; }
.el .event-time, .el .event-price { display: inline-flex; align-items: center; gap: 6px; }

.el .event-title { margin: 0 0 12px; font-size: 18px; line-height: 28px; font-weight: 600; }
.el .event-title a { color: #181D27; text-decoration: none; transition: color .15s ease; }
.el .event-title a:hover { color: #465DA6; }
.el .event-description { color: #535862; font-size: 14px; line-height: 20px; margin-bottom: 16px; flex-grow: 1; }

.el .event-meta {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #E9EAEB;
}
.el .event-location, .el .event-attendees {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; line-height: 20px; color: #717680;
}
.el .event-location i, .el .event-attendees i { color: #465DA6; width: 14px; }

.el .event-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
.el .event-speakers { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.el .event-speakers-placeholder { flex: 1; }
.el .speaker-avatars { display: flex; }
.el .speaker-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: #465DA6; color: #FFFFFF;
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #FFFFFF; margin-left: -8px;
}
.el .speaker-avatar:first-child { margin-left: 0; }
.el .speaker-names { font-size: 12px; line-height: 18px; color: #717680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.el .btn-view-details {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 8px;
    background: #465DA6; color: #FFFFFF;
    font-size: 14px; line-height: 20px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: background-color .15s ease;
}
.el .btn-view-details:hover { background: #384A85; color: #FFFFFF; }
.el .btn-view-details i { font-size: 12px; }

/* ── Filters ──────────────────────────────────────────── */
.el .event-filters { background: #F6F9FF; border: 1px solid #E9EAEB; border-radius: 12px; padding: 20px; margin-bottom: 32px; }
.el .event-filters .form-control {
    border: 1px solid #D5D7DA; border-radius: 8px;
    padding: 10px 14px; background: #FFFFFF;
    font-family: 'Inter', sans-serif; font-size: 16px; line-height: 24px; color: #181D27;
}
.el .event-filters .form-control:focus { outline: none; border-color: #465DA6; box-shadow: 0 0 0 3px rgba(70, 93, 166, 0.15); }
.el .event-filters .btn-primary {
    background: #465DA6; border: 1px solid #465DA6; border-radius: 8px;
    padding: 10px 18px; font-weight: 600; font-size: 16px; line-height: 24px; color: #FFFFFF;
}
.el .event-filters .btn-primary:hover { background: #384A85; border-color: #384A85; }
.el .event-filters .btn-outline-secondary {
    border-radius: 8px; border: 1px solid #D5D7DA; color: #414651;
    padding: 10px 18px; font-weight: 600; background: #FFFFFF;
}
.el .event-filters .btn-outline-secondary:hover { background: #F5F5F5; border-color: #A4A7AE; color: #181D27; }

/* ── Pagination ───────────────────────────────────────── */
.el .pagination { gap: 8px; }
.el .pagination .page-link {
    border: 1px solid transparent; border-radius: 8px;
    padding: 8px 14px; color: #414651; font-weight: 600; font-size: 14px; line-height: 20px;
    transition: background-color .15s ease, color .15s ease;
}
.el .pagination .page-link:hover { background: #F6F9FF; color: #465DA6; }
.el .pagination .page-item.active .page-link { background: #465DA6; color: #FFFFFF; border-color: #465DA6; }
.el .pagination .page-item.disabled .page-link { background: transparent; color: #D5D7DA; }

/* ── Empty / loading ──────────────────────────────────── */
.el .events-empty-state, .el .no-events {
    text-align: center; padding: 64px 32px;
    background: #F6F9FF; border: 1px solid #E9EAEB; border-radius: 12px;
}
.el .events-empty-state i, .el .no-events i { font-size: 4rem; color: #D5D7DA; margin-bottom: 24px; }
.el .events-empty-state h4, .el .no-events h4 { color: #181D27; margin-bottom: 8px; font-weight: 600; }
.el .events-empty-state p, .el .no-events p { color: #717680; }
.el .events-summary { color: #717680; font-size: 14px; line-height: 20px; margin-top: 12px; }
.el .spinner-border { color: #465DA6 !important; }

@media (max-width: 768px) {
    .el .event-footer { flex-direction: column; align-items: stretch; }
    .el .event-speakers { margin-bottom: 12px; }
    .el .btn-view-details { justify-content: center; }
}