/* assets/css/events-page.css — scoped overrides for pages/events.html.
   1) Auto-scroll carousel wrapper for .browse-grid.
   2) Manrope font on form elements + non-heading text.
   First-party, ≤350 lines.
*/

/* ===== 1. Carousel ===== */
.browse-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* hint for momentum scroll on touch */
  -webkit-overflow-scrolling: touch;
}
.browse-track {
  display: flex;
  gap: 18px;
  will-change: transform;
  /* prevent text selection during drag */
  user-select: none;
}
.browse-track .browse-card {
  flex: 0 0 calc((100% - 18px * 3) / 4); /* match 4-col grid: 100% - 3 gaps */
  min-width: 220px;
  display: block;
  text-decoration: none;
  color: inherit;
}
/* when fewer cards visible (filtered), cards get wider */
@media (max-width: 980px) {
  .browse-track .browse-card { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 640px) {
  .browse-track .browse-card { flex-basis: 100%; }
}

/* empty state when filter matches nothing */
.browse-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  opacity: 0.6;
}

/* ===== 2. Manrope on form elements ===== */
.browse-shell select,
.browse-shell option,
.browse-shell button,
.browse-shell input,
.browse-shell textarea,
.browse-shell label {
  font-family: var(--font-body);
  /* fonts.googleapis.com Manrope already loaded via styles.css line 1 */
}
.browse-shell button {
  font-weight: 500;
  letter-spacing: 0.01em;
}
.browse-shell .sub,
.browse-shell .chapter-tag,
.browse-shell p {
  font-family: var(--font-body);
}
/* Ensure dropdown options render Manrope (Chrome resets <option> font) */
.browse-shell select option {
  font-family: var(--font-body);
  background: #fff;
  color: var(--fg);
}

/* Make sure the existing filter chips render Manrope */
.browse-shell .filter-chip,
.browse-shell .sugar-select {
  font-family: var(--font-body);
  font-weight: 800;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff, #e8f6ff) !important;
  color: var(--fg) !important;
  box-shadow: inset 0 1px 6px rgba(255,255,255,.72), 0 10px 24px rgba(0,76,190,.1);
}

/* ===== 3. Reduced motion fallback ===== */
@media (prefers-reduced-motion: reduce) {
  .browse-track {
    transform: none !important;
    animation: none !important;
  }
  .browse-carousel {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}