/* SoCal Gives — row-view rail layout
 * Loaded AFTER styles.css, so it reuses the palette, card design,
 * and hover-lift. This file only adds the horizontal-row browsing. */

.rails { padding: 30px 0 64px; }

.rail { margin: 0 0 40px; }
.rail:last-child { margin-bottom: 0; }

.rail-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
}
.rail-head h2 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.rail-head .rail-count {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

/* Prominent, filterable Give / Get tag on each brief card */
.tag.cat {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #fff;
  padding: 3px 10px;
}
.tag.cat-give { background: var(--give); }
.tag.cat-get { background: var(--get); }

/* Brief cards drop the description, so tighten the vertical rhythm a touch */
.card-brief { gap: 10px; }

/* The scrolling row */
.rail-viewport { position: relative; }

.rail-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 6px 4px 16px;
  -webkit-overflow-scrolling: touch;
}
.rail-track::-webkit-scrollbar { height: 8px; }
.rail-track::-webkit-scrollbar-thumb {
  background: #d5d9df;
  border-radius: 999px;
}
.rail-track::-webkit-scrollbar-track { background: transparent; }

/* Fixed-width cards in the rail; align-items:stretch (flex default)
   makes every card in a row match the tallest one. */
.rail-track .card {
  flex: 0 0 300px;
  width: 300px;
  scroll-snap-align: start;
}

.rail-empty {
  color: var(--muted);
  font-size: 0.92rem;
  padding: 6px 4px 18px;
}

/* Scroll arrows floating over the ends of the rail */
.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.rail-arrow:hover {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
}
.rail-arrow.left { left: -8px; }
.rail-arrow.right { right: -8px; }
/* At an end of the rail the arrow fades out and stops catching clicks. */
.rail-arrow:disabled { opacity: 0; pointer-events: none; }

@media (max-width: 620px) {
  /* On touch screens, drop the arrows and let people swipe. */
  .rail-arrow { display: none; }
  .rail-track .card { flex-basis: 80vw; width: 80vw; }
}