/*!
 * Catalogue — dev-doc/senarai_acara_grid_list_directory/
 *
 * Only what is unique to this page. The card, the filter pills, the fields and
 * the chrome are apex.css, which every public page loads.
 *
 *   1. Hero          4. Empty state
 *   2. Filter bar    5. Pagination
 *   3. Toolbar       6. Organiser callout
 */

/* ---------------------------------------------------------------------------
   1. Hero
   ------------------------------------------------------------------------ */

.ax-cat-hero {
    position: relative;
    padding-top: calc(var(--ax-nav-h) + clamp(32px, 4vw, 56px));
    padding-bottom: clamp(36px, 4vw, 56px);
    background: var(--ax-lowest);
    overflow: hidden;
}

.ax-cat-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.5;
    background:
        radial-gradient(110% 90% at 85% 8%, rgba(0, 210, 255, 0.38) 0%, rgba(1, 70, 229, 0) 58%),
        linear-gradient(152deg, #131a33 0%, #0a122b 55%, #050c25 100%);
}

.ax-cat-hero__media::after {
    content: "";
    position: absolute;
    inset: -20%;
    background-image: repeating-linear-gradient(
        108deg,
        rgba(165, 231, 255, 0.06) 0px,
        rgba(165, 231, 255, 0.06) 1px,
        transparent 1px,
        transparent 46px
    );
}

.ax-cat-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, var(--ax-lowest) 0%, rgba(5, 12, 37, 0.8) 52%, rgba(5, 12, 37, 0.2) 100%);
}

.ax-cat-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.ax-cat-hero__copy { max-width: 46rem; }

.ax-cat-hero__chip { margin: 12px 0 16px; }

.ax-cat-hero__lead { margin: 14px 0 0; }

.ax-cat-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ax-cat-stat {
    padding: 14px 20px;
    border-radius: var(--ax-r-card);
    background: rgba(23, 30, 56, 0.85);
    backdrop-filter: blur(8px);
}

.ax-cat-stat strong {
    display: block;
    margin-top: 4px;
    font-family: var(--ax-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ax-cyan);
}

/* ---------------------------------------------------------------------------
   2. Filter bar
   ------------------------------------------------------------------------ */

.ax-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px;
    border-radius: var(--ax-r-card);
    background: var(--ax-low);
}

@media (min-width: 768px) {
    .ax-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ax-filters__search { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
    .ax-filters { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
    .ax-filters__search { grid-column: auto; }
}

.ax-filters .ax-field { background: var(--ax-container); }

.ax-filters__submit { padding-inline: 20px; }

/* ---------------------------------------------------------------------------
   3. Toolbar
   ------------------------------------------------------------------------ */

.ax-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(20px, 2.5vw, 32px);
}

.ax-toolbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ax-toolbar__count {
    margin: 0;
    font-family: var(--ax-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ax-outline);
}

.ax-view {
    display: inline-flex;
    padding: 4px;
    border-radius: var(--ax-r);
    background: var(--ax-low);
}

.ax-view__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ax-on-variant);
    font-family: var(--ax-body);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.ax-view__btn .material-symbols-outlined { font-size: 1.125rem; }

.ax-view__btn.is-active {
    background: var(--ax-cyan);
    color: var(--ax-on-cyan);
}

/* List mode: the same card markup, laid on its side. One DOM, two layouts —
   landing-events.js only toggles the class on the results container. */
#catalogResults.is-list { --bs-gutter-y: 12px; }

#catalogResults.is-list > .col { width: 100%; flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
    #catalogResults.is-list .ax-race {
        flex-direction: row;
        align-items: stretch;
    }

    #catalogResults.is-list .ax-race__media {
        flex: 0 0 34%;
        height: auto;
        min-height: 190px;
    }

    #catalogResults.is-list .ax-race__media::after {
        background: linear-gradient(to right, rgba(5, 12, 37, 0.2) 0%, var(--ax-low) 100%);
    }

    #catalogResults.is-list .ax-race__body {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    #catalogResults.is-list .ax-race__foot {
        flex: 0 0 220px;
    }
}

/* ---------------------------------------------------------------------------
   4. Empty state
   ------------------------------------------------------------------------ */

.ax-empty {
    padding: clamp(40px, 6vw, 72px) 24px;
    border-radius: var(--ax-r-bento);
    background: var(--ax-low);
    text-align: center;
}

.ax-empty__icon {
    font-size: 2.5rem;
    color: var(--ax-outline);
}

.ax-empty__title { margin: 16px 0 10px; text-transform: uppercase; }

.ax-empty__text {
    max-width: 38rem;
    margin: 0 auto 24px;
}

/* ---------------------------------------------------------------------------
   5. Pagination
   ------------------------------------------------------------------------ */

.ax-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: clamp(28px, 3vw, 44px);
}

.ax-pagination__label { margin: 0; }

.ax-pagination .pagination {
    --bs-pagination-bg: var(--ax-low);
    --bs-pagination-border-width: 0;
    --bs-pagination-color: var(--ax-on-variant);
    --bs-pagination-hover-bg: var(--ax-high);
    --bs-pagination-hover-color: var(--ax-on-surface);
    --bs-pagination-focus-bg: var(--ax-high);
    --bs-pagination-focus-color: var(--ax-on-surface);
    --bs-pagination-active-bg: var(--ax-cyan);
    --bs-pagination-active-color: var(--ax-on-cyan);
    --bs-pagination-disabled-bg: var(--ax-low);
    --bs-pagination-disabled-color: var(--ax-outline);
    --bs-pagination-border-radius: var(--ax-r);

    gap: 6px;
    margin: 0;
}

.ax-pagination .page-link {
    font-family: var(--ax-body);
    font-weight: 700;
    border-radius: var(--ax-r);
}

/* ---------------------------------------------------------------------------
   6. Organiser callout
   ------------------------------------------------------------------------ */

.ax-organiser {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--ax-r-bento);
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(1, 70, 229, 0.35) 0%, rgba(1, 70, 229, 0) 62%),
        var(--ax-container);
}

.ax-organiser__title {
    max-width: 22ch;
    margin-bottom: 12px;
}

.ax-organiser__lead {
    max-width: 52ch;
    margin: 0;
}

.ax-organiser__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}