/**
 * Artspod v2 — events listing ("Find a Show") styles.
 * Figma: desktop 144-748, mobile 144-318. Built on _tokens.css variables.
 */

/* ---------- Page frame ---------- */
.aspv2 .asp-events {
    padding-top: var(--asp-sp-6);
    padding-bottom: var(--asp-sp-8);
}

.aspv2 .asp-events__head {
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-2);
    margin-bottom: var(--asp-sp-5);
}

.aspv2 .asp-events__title {
    font-size: var(--asp-fs-hero);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.17;
    color: var(--asp-ink);
}

.aspv2 .asp-events__intro {
    max-width: 672px;
    font-size: var(--asp-fs-lg);
    line-height: 1.55;
    color: var(--asp-muted);
}

/* ---------- Sidebar + main two-column layout ---------- */
.aspv2 .asp-events__layout {
    display: flex;
    align-items: flex-start;
    gap: var(--asp-sp-5);
}

.aspv2 .asp-events__sidebar {
    width: 256px;
    flex-shrink: 0;
}

.aspv2 .asp-events__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-4);
}

/* ---------- Filter sidebar ---------- */
.aspv2 .asp-efilters {
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-4);
    padding: var(--asp-sp-4);
    background: #fff;
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius);
    box-shadow: var(--asp-shadow-sm);
}

.aspv2 .asp-efilters__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.aspv2 .asp-efilters__heading {
    font-size: var(--asp-fs-body);
    font-weight: 700;
    line-height: 1.3;
    color: var(--asp-ink);
    padding: 0;
}

/* A <legend> sits outside the fieldset's flex flow, so the group's flex gap
   never applies after it — give it the checkbox row gap explicitly. The h3
   heading (Search) is normal flow and keeps its flex-gap spacing. */
.aspv2 legend.asp-efilters__heading {
    margin-bottom: 10px;
}

/* Search */
.aspv2 .asp-efilters__searchwrap {
    position: relative;
    display: flex;
}

.aspv2 .asp-efilters__searchwrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--asp-gray);
    pointer-events: none;
}

.aspv2 .asp-efilters__search {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    font-family: var(--asp-font);
    font-size: var(--asp-fs-sm);
    color: var(--asp-ink);
    background: var(--asp-bg-soft);
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius-sm);
    outline: none;
}

.aspv2 .asp-efilters__search:focus {
    border-color: var(--asp-primary);
}

.aspv2 .asp-efilters__search::placeholder {
    color: var(--asp-gray);
}

/* Date range */
.aspv2 .asp-efilters__dates {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aspv2 .asp-efilters__field {
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-1);
}

.aspv2 .asp-efilters__label {
    font-size: var(--asp-fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--asp-muted);
}

.aspv2 .asp-efilters__date {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-family: var(--asp-font);
    font-size: var(--asp-fs-sm);
    color: var(--asp-ink);
    background: var(--asp-bg-soft);
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius-sm);
    outline: none;
}

.aspv2 .asp-efilters__date:focus {
    border-color: var(--asp-primary);
}

/* Checkbox groups */
.aspv2 .asp-efilters__checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aspv2 .asp-efilters__check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--asp-fs-sm);
    color: var(--asp-muted);
    cursor: pointer;
}

.aspv2 .asp-efilters__check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--asp-primary);
    flex-shrink: 0;
}

.aspv2 .asp-efilters__check.is-collapsed {
    display: none;
}

.aspv2 .asp-efilters__checks.is-expanded .asp-efilters__check.is-collapsed {
    display: flex;
}

.aspv2 .asp-efilters__more {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--asp-fs-sm);
    font-weight: 600;
    color: var(--asp-primary);
    cursor: pointer;
}

.aspv2 .asp-efilters__more:hover {
    color: var(--asp-primary-dark);
}

.aspv2 .asp-efilters__apply {
    padding: 12px 18px;
    border: 1px solid var(--asp-primary);
    border-radius: var(--asp-radius-pill);
    background: var(--asp-primary);
    color: #fff;
    font: inherit;
    font-size: var(--asp-fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.aspv2 .asp-efilters__reset {
    align-self: flex-start;
    font-size: var(--asp-fs-sm);
    font-weight: 600;
    color: var(--asp-muted);
    text-decoration: underline;
}

.aspv2 .asp-efilters__reset:hover {
    color: var(--asp-primary);
}

/* Promo slots — outside the filter panel, full sidebar width. */
.aspv2 .asp-efilters__promos {
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-3);
    margin-top: var(--asp-sp-4);
}

.aspv2 .asp-efilters__promo {
    overflow: hidden;
    border: 1px solid var(--asp-line);
}

.aspv2 .asp-efilters__promo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Toolbar ---------- */
.aspv2 .asp-events__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--asp-sp-3);
    flex-wrap: wrap;
}

.aspv2 .asp-events__count {
    font-size: var(--asp-fs-body);
    color: var(--asp-muted);
}

.aspv2 .asp-events__sortwrap {
    display: flex;
    align-items: center;
    gap: var(--asp-sp-2);
}

.aspv2 .asp-events__sortlabel {
    font-size: var(--asp-fs-body);
    color: var(--asp-muted);
}

.aspv2 .asp-events__sort {
    font: inherit;
    font-size: var(--asp-fs-sm);
    font-weight: 600;
    color: var(--asp-ink);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px 4px;
}

/* ---------- Card grid ---------- */
.aspv2 .asp-events__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--asp-sp-4);
}

/* .asp-ecard rules moved to layout.css (Phase 4b canonical card). */

/* ---------- Empty state ---------- */
.aspv2 .asp-events__empty {
    padding: var(--asp-sp-6) var(--asp-sp-4);
    text-align: center;
    color: var(--asp-muted);
    background: #fff;
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius);
}

.aspv2 .asp-events__reset {
    display: inline-block;
    margin-top: var(--asp-sp-3);
    font-weight: 600;
    color: var(--asp-primary);
}

/* ---------- Pagination ---------- */
.aspv2 .asp-epages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--asp-sp-2);
    padding-top: var(--asp-sp-4);
    flex-wrap: wrap;
}

.aspv2 .asp-epages__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: var(--asp-fs-sm);
    font-weight: 600;
    color: var(--asp-muted);
    text-decoration: none;
    border: 1px solid var(--asp-line-strong);
    border-radius: var(--asp-radius-pill);
    background: #fff;
    transition: border-color var(--asp-transition), color var(--asp-transition);
}

.aspv2 a.asp-epages__btn:hover {
    border-color: var(--asp-primary);
    color: var(--asp-primary);
}

.aspv2 .asp-epages__btn.is-current {
    background: var(--asp-primary);
    border-color: var(--asp-primary);
    color: #fff;
}

.aspv2 .asp-epages__gap {
    width: 40px;
    text-align: center;
    color: var(--asp-muted);
}

/* ---------- Mobile filters toggle ---------- */
.aspv2 .asp-events__filtersbtn {
    display: none;
    align-items: center;
    gap: var(--asp-sp-2);
    align-self: flex-start;
    margin-bottom: var(--asp-sp-3);
    padding: 10px 16px;
    font: inherit;
    font-size: var(--asp-fs-sm);
    font-weight: 600;
    color: var(--asp-ink);
    background: #fff;
    border: 1px solid var(--asp-line-strong);
    border-radius: var(--asp-radius-pill);
    cursor: pointer;
}

.aspv2 .asp-events__filtersbtn[aria-expanded="true"] {
    border-color: var(--asp-primary);
    color: var(--asp-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .aspv2 .asp-events__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .aspv2 .asp-events__filtersbtn {
        display: inline-flex;
    }

    .aspv2 .asp-events__layout {
        flex-direction: column;
    }

    .aspv2 .asp-events__sidebar {
        display: none;
        width: 100%;
    }

    .aspv2 .asp-events__sidebar.is-open {
        display: block;
    }

    .aspv2 .asp-events__main {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .aspv2 .asp-events {
        padding-top: var(--asp-sp-4);
        padding-bottom: var(--asp-sp-6);
    }

    .aspv2 .asp-events__head {
        margin-bottom: var(--asp-sp-4);
    }

    .aspv2 .asp-events__grid {
        grid-template-columns: 1fr;
    }

    .aspv2 .asp-events__toolbar {
        align-items: flex-start;
    }
}