/**
 * Ticketa Theme — assets/css/events.css
 *
 * RESPONSIBILITY:
 *   Styles for the WHAT'S ON events archive page only.
 *   Includes:
 *   - Page wrapper and dark geo-patterned background
 *   - Category filter bar (horizontal scroll on mobile)
 *   - Events card grid
 *   - Empty/no-results state
 *
 * @package Ticketa
 * @since   1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   EVENTS ARCHIVE PAGE WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */

.events-archive {
    min-height: 100vh;
    background: var(--ticketa-bg);
    padding-bottom: var(--space-24);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Horizontal row of category filter buttons.
 * Scrolls horizontally on small screens without a scrollbar.
 */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;                              /* Gaps provided by separators */
    flex-wrap: wrap;
    padding: 0 var(--container-pad) var(--space-12);
    direction: rtl;                      /* Flow with site direction */
}

/* Individual filter button */
.filter-btn {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-en-head);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast);
    white-space: nowrap;
    direction: ltr;                      /* English labels stay LTR inside the button */
    position: relative;
}

/* The "all events" button uses a Hebrew label, so override font/transform.
 * Detected by data-cat="all-events". */
.filter-btn[data-cat="all-events"] {
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    direction: rtl;
}

.filter-btn:hover {
    color: var(--ticketa-white);
}

/* Active state */
.filter-btn.is-active {
    color: var(--ticketa-white);
}

/* Underline on active */
.filter-btn.is-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: var(--space-4);
    right: var(--space-4);
    height: 2px;
    background: var(--ticketa-orange);
    border-radius: var(--radius-pill);
}

/* Separator "/" between buttons */
.filter-bar__sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: var(--text-sm);
    user-select: none;
    padding: 0 var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENTS GRID
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Responsive grid of event cards.
 * 3 columns desktop → 2 tablet → 1 mobile (handled in responsive.css)
 */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    padding: 0 var(--container-pad);
    max-width: var(--container-max);
    margin-inline: auto;
}

/* Card hidden by JS filter — uses visibility+height so layout doesn't collapse */
.event-card.is-filtered-out {
    display: none;
}

/* Fade-in animation when card becomes visible via filter */
.event-card.is-entering {
    animation: card-enter var(--transition-base) ease both;
}

@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NO-RESULTS STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.events-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-20) 0;
    color: var(--ticketa-grey-muted);
}

.events-no-results__icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    display: block;
}

.events-no-results__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--ticketa-grey-muted);
    margin-bottom: var(--space-3);
}

.event-card { position: relative; }