/* ============================================================
    CREWFITCLUB — event-list.css
    Event List / Challenges Listing page extension.

    Loads AFTER style.css.
    Uses all CSS custom properties from style.css :root.
    Contains ONLY classes absent from style.css.
    Zero token redefinitions.

    TABLE OF CONTENTS
    ─────────────────────────────────────────────────────────
    01. Skip link
    02. Page Hero
    03. Stats section (white card wrapping .stats-bar)
    04. Toolbar (category tabs + search + sort)
    05. Body layout (sidebar + list column)
    06. Filter panel sidebar
    07. Filter checkbox system
    08. Date input
    09. Price range slider
    10. Event list card (horizontal)
    11. Event card: image column
    12. Event card: badge overlays
    13. Event card: date overlay
    14. Event card: body column
    15. Event card: activity tags
    16. Event card: price column
    17. Mini countdown (inside card price col)
    18. Wishlist button
    19. Empty state
    20. Pagination
    21. Responsive overrides
   ============================================================ */


/* ============================================================
   01. SKIP LINK
   ============================================================ */
.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: calc(var(--z-modal) + 10);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--transition-base);
}
.skip-link:focus { transform: translateY(0); }


/* ============================================================
   02. PAGE HERO
   ============================================================ */
.el-hero {
  position: relative;
  background: var(--color-white);
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: center;
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-gray-5);
}

/* Container lets left copy sit normally; image bleeds on the right */
.el-hero__container {
  position: relative;
  z-index: 2;
}

.el-hero__copy {
  max-width: 580px;
}

.el-hero__title {
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.el-hero__subtitle {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-2);
}

/* Right side cyclist image — absolutely placed */
.el-hero__image-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
  overflow: hidden;
  pointer-events: none;
}

.el-hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* Gradient mask so image fades into white on the left */
.el-hero__image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-white) 0%, transparent 30%);
  z-index: 1;
}


/* ============================================================
   03. STATS SECTION
   Wraps the shared .stats-bar in a white bordered card.
   ============================================================ */
.el-stats-section {
  background: var(--color-white);
  padding: var(--space-6) 0;
}

.el-stats-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

/* Override stats-bar padding for horizontal variant inside the card */
.el-stats-card .stats-bar {
  padding: var(--space-5) 0;
  grid-template-columns: repeat(5, 1fr);
}

.el-stats-card .stat-widget--horizontal {
  padding: var(--space-4) var(--space-5);
  gap: var(--space-3);
}

/* Reduce stat value size to fit card */
.el-stats-card .stat-widget__value {
  font-size: var(--fs-2xl);
}

.el-stats-card .stat-widget__icon-wrap {
  width: 44px;
  height: 44px;
}

.el-stats-card .stat-widget__icon-wrap svg {
  width: 20px;
  height: 20px;
}


/* ============================================================
   04. TOOLBAR
   ============================================================ */
.el-toolbar-section {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-5);
  position: sticky;
  top: var(--navbar-height);
  z-index: var(--z-raised);
}

.el-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0;
}

/* Category tabs */
.el-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.el-tabs::-webkit-scrollbar { display: none; }

.el-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-gray-2);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
  flex-shrink: 0;
}

.el-tab:hover {
  color: var(--color-dark);
}

.el-tab.is-active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--color-primary);
}

.el-tab svg { flex-shrink: 0; }

/* Toolbar right: search + sort */
.el-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: var(--space-3) 0;
}

/* Search bar */
.el-search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.el-search-bar__icon {
  position: absolute;
  left: var(--space-3);
  color: var(--color-gray-3);
  pointer-events: none;
  flex-shrink: 0;
}

.el-search-bar__input {
  width: 200px;
  padding: 0.5rem var(--space-4) 0.5rem calc(var(--space-3) + 20px);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: var(--color-dark);
  background: var(--color-light-bg);
  border: 1.5px solid var(--color-gray-5);
  border-radius: var(--radius-pill);
  outline: none;
  transition: border-color var(--transition-fast), width var(--transition-base);
}

.el-search-bar__input::placeholder {
  color: var(--color-gray-3);
}

.el-search-bar__input:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(232, 25, 44, 0.08);
  width: 240px;
}

/* Sort dropdown */
.el-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.el-sort__label {
  font-size: var(--fs-sm);
  color: var(--color-gray-2);
  white-space: nowrap;
}

.el-sort__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.el-sort__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.4375rem var(--space-8) 0.4375rem var(--space-3);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}

.el-sort__select:focus {
  border-color: var(--color-primary);
}

.el-sort__chevron {
  position: absolute;
  right: var(--space-3);
  color: var(--color-gray-2);
  pointer-events: none;
}


/* ============================================================
   05. BODY LAYOUT — sidebar + list
   ============================================================ */
.el-body-container {
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
}

.el-body-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.el-list-col {
  min-width: 0;
}


/* ============================================================
   06. FILTER PANEL SIDEBAR
   ============================================================ */
.el-filter-panel {
  position: sticky;
  top: calc(var(--navbar-height) + 57px); /* 57px = toolbar height */
  background: var(--color-white);
  border: 1px solid var(--color-gray-5);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-height: calc(100vh - var(--navbar-height) - 80px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.el-filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.el-filter-panel__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.el-filter-clear-all {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--transition-fast);
}
.el-filter-clear-all:hover { opacity: 0.75; }


/* ============================================================
   07. FILTER GROUP + CHECKBOXES
   ============================================================ */
.el-filter-group {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-gray-5);
}

.el-filter-group__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.el-filter-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Custom checkbox label */
.el-check-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-gray-1);
  cursor: pointer;
  transition: color var(--transition-fast);
  line-height: var(--lh-normal);
}

.el-check-label:hover { color: var(--color-dark); }

.el-check-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkmark box */
.el-checkmark {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-gray-4);
  border-radius: var(--radius-xs);
  background: var(--color-white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

/* Active (checked) state */
.el-check-label--active .el-checkmark,
.el-checkmark--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Checkmark tick */
.el-check-label--active .el-checkmark::after,
.el-checkmark--active::after {
  content: '';
  display: block;
  width: 9px;
  height: 6px;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: translateY(-1px) rotate(-45deg);
}

/* When the hidden checkbox is checked — JS applies el-check-label--active */
.el-check-label svg {
  color: var(--color-gray-3);
  flex-shrink: 0;
}

/* Reset button */
.el-reset-btn {
  margin-top: var(--space-5);
  font-size: var(--fs-sm) !important;
  padding: 0.5rem var(--space-4) !important;
}


/* ============================================================
   08. DATE INPUTS
   ============================================================ */
.el-date-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.el-date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.el-date-input {
  width: 100%;
  padding: 0.5rem var(--space-8) 0.5rem var(--space-3);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: var(--color-gray-3);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-5);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  /* Hide native date picker in some browsers */
  color-scheme: light;
}

.el-date-input:focus,
.el-date-input:not(:placeholder-shown) {
  border-color: var(--color-primary);
  color: var(--color-dark);
}

.el-date-input__placeholder {
  position: absolute;
  left: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-gray-3);
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

/* Hide placeholder when input has value */
.el-date-input:not(:placeholder-shown) + .el-date-input__placeholder,
.el-date-input:focus + .el-date-input__placeholder {
  opacity: 0;
}

.el-date-input__icon {
  position: absolute;
  right: var(--space-3);
  color: var(--color-gray-4);
  pointer-events: none;
  flex-shrink: 0;
}


/* ============================================================
   09. PRICE RANGE SLIDER
   ============================================================ */
.el-price-range__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-gray-2);
  margin-bottom: var(--space-3);
}

.el-price-slider-wrap {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
}

.el-price-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-gray-5);
  border-radius: var(--radius-pill);
}

.el-price-slider-fill {
  position: absolute;
  left: 0;
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  pointer-events: none;
  /* width is set by JS */
  width: 100%;
}

.el-price-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  outline: none;
  cursor: pointer;
}

/* Thumb styles */
.el-price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-spring);
}

.el-price-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.el-price-slider:hover::-webkit-slider-thumb,
.el-price-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(232, 25, 44, 0.15);
  transform: scale(1.1);
}


/* ============================================================
   10. EVENT LIST CARD (horizontal, full-width)
   ============================================================ */
.el-event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.el-event-card {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  background: var(--color-white);
  border: 1px solid var(--color-gray-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

.el-event-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--color-gray-4);
}


/* ============================================================
   11. EVENT CARD — IMAGE COLUMN
   ============================================================ */
.el-event-card__image-col {
  flex-shrink: 0;
  overflow: hidden;
}

.el-event-card__img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 180px;
}

.el-event-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.el-event-card:hover .el-event-card__img-wrap img {
  transform: scale(1.06);
}


/* ============================================================
   12. EVENT CARD — BADGE OVERLAYS
   ============================================================ */
.el-event-card__img-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: 0.25rem var(--space-3);
  border-radius: var(--radius-sm);
  z-index: var(--z-raised);
  line-height: 1.2;
}

.el-event-card__img-badge--earlybird {
  background: var(--color-primary);
  color: var(--color-white);
}

.el-event-card__img-badge--new {
  background: var(--color-dark);
  color: var(--color-white);
}

.el-event-card__img-badge--popular {
  background: var(--color-warning);
  color: var(--color-white);
}

.el-event-card__img-badge--upcoming {
  background: var(--color-gray-1);
  color: var(--color-white);
}

.el-event-card__img-badge--series {
  background: var(--color-dark-2);
  color: var(--color-white);
}


/* ============================================================
   13. EVENT CARD — DATE OVERLAY (bottom-left of image)
   ============================================================ */
.el-event-card__date-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.82) 0%, transparent 100%);
  padding: var(--space-5) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.el-event-card__date-day {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  line-height: 1;
}

.el-event-card__date-month {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.75);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}


/* ============================================================
   14. EVENT CARD — BODY COLUMN
   ============================================================ */
.el-event-card__body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.el-event-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.el-event-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  line-height: var(--lh-snug);
  margin-bottom: 0;
  /* Allow slight truncation but keep readable */
}

.el-event-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-2);
  line-height: var(--lh-relaxed);
  margin: var(--space-1) 0;
}

.el-event-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-2);
}

.el-event-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-gray-2);
}

.el-event-card__meta-item svg {
  color: var(--color-gray-3);
  flex-shrink: 0;
}

/* Endurance series eyebrow styling */
.el-eyebrow--series {
  color: var(--color-dark-2) !important;
}


/* ============================================================
   15. EVENT CARD — ACTIVITY TAGS
   ============================================================ */
.el-event-card__activities {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.el-activity-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gray-1);
}

.el-activity-tag svg {
  color: var(--color-gray-3);
  flex-shrink: 0;
}


/* ============================================================
   16. EVENT CARD — PRICE COLUMN
   ============================================================ */
.el-event-card__price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-left: 1px solid var(--color-gray-5);
  min-width: 160px;
  gap: var(--space-3);
  flex-shrink: 0;
}

.el-event-card__price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.el-event-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.el-event-card__price {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--color-dark);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.el-event-card__price-original {
  font-size: var(--fs-sm);
  /* inherits .text-strike from style.css */
}

.el-event-card__from-label {
  font-size: var(--fs-xs);
  color: var(--color-gray-2);
  margin-bottom: var(--space-1);
}

.el-event-card__price-label {
  font-size: var(--fs-xs);
  color: var(--color-gray-2);
  text-align: right;
  white-space: nowrap;
}

.el-join-btn {
  /* Inherits .btn-cfc .btn-primary / .btn-outline-primary .btn-full */
  border-radius: var(--radius-md) !important; /* rectangular in design */
  font-size: var(--fs-sm) !important;
  padding: 0.6rem var(--space-4) !important;
  justify-content: center;
}


/* ============================================================
   17. MINI COUNTDOWN (inside event card price column)
   ============================================================ */
.el-countdown-mini {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  justify-content: flex-end;
}

.el-countdown-mini__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.el-countdown-mini__val {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  background: var(--color-light-bg);
  border-radius: var(--radius-xs);
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.el-countdown-mini__lbl {
  font-size: 0.5625rem;
  font-weight: var(--fw-semibold);
  color: var(--color-gray-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  text-align: center;
}


/* ============================================================
   18. WISHLIST (HEART) BUTTON
   ============================================================ */
.el-wishlist-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  border: 1.5px solid var(--color-gray-5);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-gray-3);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-spring);
  flex-shrink: 0;
}

.el-wishlist-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.el-wishlist-btn.is-saved {
  color: var(--color-primary);
  background: var(--color-primary-muted);
  border-color: var(--color-primary);
}

.el-wishlist-btn.is-saved svg {
  fill: var(--color-primary);
}


/* ============================================================
   19. EMPTY STATE
   ============================================================ */
.el-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  gap: var(--space-4);
  color: var(--color-gray-3);
}

.el-empty-state h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
}

.el-empty-state p {
  font-size: var(--fs-base);
  color: var(--color-gray-2);
}

/* Override display:none for hidden attribute */
[hidden] { display: none !important; }


/* ============================================================
   20. PAGINATION
   ============================================================ */
.el-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-5);
}

.el-pagination__btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-circle);
  border: 1.5px solid var(--color-gray-5);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-gray-2);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.el-pagination__btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-muted);
}

.el-pagination__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.el-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.el-pagination__page {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  background: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gray-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.el-pagination__page:hover {
  background: var(--color-light-bg);
  color: var(--color-dark);
}

.el-pagination__page.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.el-pagination__ellipsis {
  font-size: var(--fs-sm);
  color: var(--color-gray-3);
  padding: 0 var(--space-1);
  display: flex;
  align-items: center;
  height: 38px;
}


/* ============================================================
   21. RESPONSIVE OVERRIDES
   ============================================================ */

/* ── 1199px: tighten stats ── */
@media (max-width: 1199px) {
  .el-stats-card .stats-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .el-stats-card .stats-bar .stat-widget:nth-child(3) {
    border-right: none;
  }
  .el-stats-card .stats-bar .stat-widget:nth-child(n+4) {
    border-top: 1px solid var(--color-gray-5);
    padding-top: var(--space-4);
  }

  .el-event-card {
    grid-template-columns: 180px 1fr auto;
  }
}

/* ── 991px: collapse layout ── */
@media (max-width: 991px) {

  /* Hero: hide image on tablet, text only */
  .el-hero__image-wrap { display: none; }
  .el-hero__copy { max-width: 100%; }

  /* Stats: 2+3 or wrap */
  .el-stats-card .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .el-stats-card .stats-bar .stat-widget:nth-child(n+3) {
    border-top: 1px solid var(--color-gray-5);
    padding-top: var(--space-4);
  }
  .el-stats-card .stats-bar .stat-widget:nth-child(even) {
    border-right: none;
  }

  /* Body layout: stack filter above results */
  .el-body-layout {
    grid-template-columns: 1fr;
  }

  /* Filter panel: horizontal scrollable on tablet */
  .el-filter-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  /* Event card: slightly narrower image */
  .el-event-card {
    grid-template-columns: 160px 1fr auto;
  }
  .el-event-card__price-col {
    min-width: 140px;
  }

  /* Toolbar: allow tabs to scroll */
  .el-toolbar { flex-wrap: wrap; gap: var(--space-3); }
  .el-tabs { flex: 0 0 100%; }
  .el-toolbar__right { flex: 1; justify-content: flex-end; }
}

/* ── 767px: mobile ── */
@media (max-width: 767px) {

  /* Hero: smaller heading */
  .el-hero { padding: var(--space-6) 0; min-height: auto; }
  .el-hero__title { font-size: var(--fs-3xl); }

  /* Toolbar: stack everything */
  .el-toolbar__right { flex-wrap: wrap; width: 100%; }
  .el-search-bar { flex: 1; min-width: 0; }
  .el-search-bar__input { width: 100% !important; }
  .el-sort { width: 100%; }
  .el-sort__select { width: 100%; }

  /* Event card: stack vertically */
  .el-event-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .el-event-card__image-col {
    height: 200px;
  }

  .el-event-card__img-wrap {
    min-height: 200px;
  }

  .el-event-card__price-col {
    border-left: none;
    border-top: 1px solid var(--color-gray-5);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    min-width: 0;
  }

  .el-event-card__price-wrap {
    align-items: flex-start;
  }

  .el-join-btn {
    flex-shrink: 0;
    width: auto !important;
  }

  /* Stats: 2-column */
  .el-stats-card .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Countdown mini: hide on mobile to save space */
  .el-countdown-mini { display: none; }

  /* Pagination: compact */
  .el-pagination__page:not(.is-active):not(:first-child):not(:last-child) {
    display: none;
  }
}

/* ── 479px ── */
@media (max-width: 479px) {
  .el-event-card__price-col {
    flex-direction: column;
    align-items: flex-start;
  }
  .el-join-btn { width: 100% !important; }

  .el-event-card__activities {
    gap: var(--space-2);
  }
}