/* ==========================================================================
   Central ICT Club Bangladesh
   Events page
   Layout, cards, and the page hero all come from style.css. This file only
   adds the filter toolbar, the category banner colours, and the empty state.
   ========================================================================== */

/* ---- Filter toolbar (search plus category chips) ---------------------- */
/* Mobile first: the search sits full width on top with the chips below it.
   It only collapses into a single row on wider screens, so the search field
   always fills the width it has. */
.events-toolbar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
}

/* Search box */
.events-search {
    position: relative;
    width: 100%;
    min-width: 0;
}

.events-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--slate-400);
    pointer-events: none;
}

.events-search__input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    padding: 12px 18px 12px 44px;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.events-search__input::placeholder {
    color: var(--slate-400);
}

.events-search__input:focus {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 4px rgba(22, 163, 93, 0.14);
}

/* Category chips */
.events-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.chip {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate-700);
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease),
                border-color 0.2s var(--ease);
}

.chip:hover {
    border-color: var(--green-500);
    color: var(--green-600);
}

.chip.is-active {
    background: var(--green-600);
    border-color: var(--green-600);
    color: var(--white);
}

/* Result count line */
.events-count {
    margin: 0 0 22px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--slate-500);
}

.events-count strong {
    color: var(--ink);
    font-weight: 700;
}

/* ---- Extras layered on the shared event card -------------------------- */
.ecard__metas {
    display: grid;
    gap: 9px;
    margin-bottom: 18px;
}

.ecard__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--green-600);
}

.ecard__more svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--ease);
}

.ecard:hover .ecard__more svg {
    transform: translateX(4px);
}

/* Category banner colours, all kept inside the brand palette */
.ecard__banner--summit { background: linear-gradient(135deg, var(--navy-800), var(--blue-600)); }
.ecard__banner--hackathon { background: linear-gradient(135deg, var(--blue-600), var(--green-500)); }
.ecard__banner--bootcamp { background: linear-gradient(135deg, var(--green-600), var(--green-400)); }
.ecard__banner--workshop { background: linear-gradient(135deg, var(--navy-700), var(--green-600)); }
.ecard__banner--competition { background: linear-gradient(135deg, var(--green-500), var(--blue-600)); }

/* ---- Empty state ------------------------------------------------------ */
.events-empty {
    display: none;
    text-align: center;
    padding: 64px 20px;
    color: var(--slate-500);
}

.events-empty.is-shown {
    display: block;
}

.events-empty__icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    color: var(--slate-400);
}

.events-empty h3 {
    font-size: 1.3rem;
    color: var(--ink);
    margin: 0 0 8px;
}

.events-empty p {
    margin: 0 0 22px;
}

/* ---- Responsive ------------------------------------------------------- */
/* From tablet width up, the search and chips share a single row */
@media (min-width: 760px) {
    .events-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .events-search {
        flex: 0 1 340px;
    }

    .events-filters {
        justify-content: flex-end;
    }
}

/* On small phones let the chips scroll sideways instead of stacking tall */
@media (max-width: 520px) {
    .events-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .events-filters::-webkit-scrollbar {
        display: none;
    }

    .chip {
        flex: 0 0 auto;
    }
}