/* ========================================================
   VERSO — Races (Event List) Page CSS
   ======================================================== */

/* ========== HERO ========== */
.hero-section { position: relative; overflow: hidden; }
.hero-bg { width: 100%; height: 320px; object-fit: cover; object-position: center; display: block; }

/* ========== TAB TOGGLE ========== */
.tab-section { display: flex; justify-content: center; padding: 32px 20px 0; }
.tab-toggle { display: flex; border: 1.5px solid var(--border-light); border-radius: 10px; overflow: hidden; }
.tab-btn {
  padding: 10px 24px;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500;
  border: none; background: white; color: var(--text-dark);
  cursor: pointer; transition: all 0.2s;
}
.tab-btn.active { background: var(--primary-orange); color: white; }
.tab-btn:not(.active):hover { background: var(--bg-light); }

/* ========== FILTER ========== */
.filter-section { max-width: 1400px; margin: 0 auto; padding: 28px 40px 0; }
.filter-label { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.filter-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.filter-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-tag {
  padding: 8px 18px; border-radius: 8px;
  border: 1.5px solid var(--border-light);
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--text-dark); background: white; cursor: pointer; transition: all 0.2s;
}
.filter-tag.active { background: var(--primary-orange); color: white; border-color: var(--primary-orange); }
.filter-tag:not(.active):hover { border-color: var(--primary-orange); color: var(--primary-orange); }
.sort-dropdown { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sort-dropdown strong { font-weight: 600; }
.sort-dropdown select {
  border: 1.5px solid var(--border-light); border-radius: 8px;
  padding: 6px 12px; font-family: 'Poppins', sans-serif;
  font-size: 13px; color: var(--text-dark); background: white;
  cursor: pointer; outline: none;
}

/* ========== EVENT GRID ========== */
.events-section { max-width: 1400px; margin: 0 auto; padding: 28px 40px 20px; }

/* ========== PAGINATION ========== */
.pagination-section { max-width: 1400px; margin: 0 auto; padding: 20px 40px 60px; text-align: center; }
.page-numbers { display: flex; justify-content: center; align-items: center; gap: 4px; margin-bottom: 20px; }
.page-num {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 14px; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  transition: all 0.2s; cursor: pointer; border: none; background: none;
}
.page-num:hover, .page-num.active { color: var(--text-dark); background: var(--bg-light); }
.page-dots { color: var(--text-muted); font-size: 14px; padding: 0 4px; }
.page-buttons { display: flex; justify-content: center; gap: 12px; }
.page-btn {
  padding: 10px 24px; border-radius: 10px;
  border: 1.5px solid var(--border-light);
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--text-dark); background: white; cursor: pointer; transition: all 0.2s;
}
.page-btn:hover { border-color: var(--primary-orange); color: var(--primary-orange); }

/* ========== RESPONSIVE ========== */
@media (max-width: 991px) {
  .hero-bg { height: 260px; }
  .events-section { padding: 24px 30px; }
  .filter-section { padding: 24px 30px 0; }
}
@media (max-width: 767px) {
  .hero-bg { height: 200px; }
  .tab-section { padding: 24px 20px 0; }
  .tab-btn { padding: 8px 18px; font-size: 13px; }
  .filter-section { padding: 20px 20px 0; }
  .filter-row { flex-direction: column; align-items: flex-start; }
  .sort-dropdown { align-self: flex-end; }
  .filter-tags { gap: 8px; }
  .filter-tag { padding: 6px 14px; font-size: 12px; }
  .events-section { padding: 20px 20px; }
  .pagination-section { padding: 16px 20px 40px; }
  .page-num { width: 28px; height: 28px; font-size: 13px; }
  .page-btn { padding: 8px 18px; font-size: 13px; }
}
@media (max-width: 480px) {
  .hero-bg { height: 160px; }
}