/* Horizontal rail + cards */
.timeline-wrap{position:relative;display:flex;align-items:center;gap:12px}

/* Edge flash effect when hitting scroll boundaries */
.timeline-wrap::before,
.timeline-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  transition: opacity 0.1s ease-out;
}
.timeline-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgba(171, 5, 32, 0.6), transparent);
  border-radius: 12px 0 0 12px;
}
.timeline-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgba(171, 5, 32, 0.6), transparent);
  border-radius: 0 12px 12px 0;
}
.timeline-wrap.flash-left::before,
.timeline-wrap.flash-right::after {
  animation: edge-flash 0.6s ease-out;
}
@keyframes edge-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}
.timeline-nav{appearance:none;border:0;background:#fff1;border-radius:12px;padding:10px 12px;font-size:22px;cursor:pointer}
.timeline-nav:disabled{opacity:.35;cursor:default}

/* Timeline scrolling - touch-friendly */
.timeline-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px,28vw);
  gap:16px;
  overflow-x:auto;
  padding:6px 4px;
  -webkit-overflow-scrolling:touch;
  /* Hide scrollbar on all browsers */
  scrollbar-width:none;         /* Firefox */
  -ms-overflow-style:none;      /* IE/Edge */
}
.timeline-rail::-webkit-scrollbar{display:none}  /* Chrome/Safari/Opera */

/* Smooth scroll only when not being dragged */
.timeline-rail:where(:not(.dragging)){scroll-behavior:smooth}

.timeline-card{
  display:block;
  background:#E2E9EB;
  border:1px solid #fff2;
  border-radius:14px;
  box-shadow:0 2px 10px #0002;
  text-decoration:none;
  color:#102436;
  padding:10px;
  width:100%;
  /* Prevent native drag behavior */
  -webkit-user-drag:none;
  user-drag:none;
}
.timeline-card .card-media{aspect-ratio:16/9;overflow:hidden;border-radius:12px;margin-bottom:8px}
.timeline-card .card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  /* Prevent image dragging on touch/mouse */
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
.timeline-card .card-title{font-weight:700;margin:2px 0 4px}
.timeline-card .card-teaser{opacity:.85;font-size:.95rem;line-height:1.3}

/* Highlight cards missing category data for troubleshooting */
.timeline-card.missing-category{background:#FFCDD2;border-color:#EF9A9A}

/* Section page cards: text-forward layout without images */
.timeline-card.timeline-card--section{
  min-height: 190px;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}
.timeline-card.timeline-card--section .card-meta{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.8;
}
.timeline-card.timeline-card--section .card-title{
  font-size:1.05rem;
  line-height:1.35;
}
.timeline-card.timeline-card--section .card-teaser{
  margin-top:2px;
  font-size:.95rem;
  line-height:1.4;
  opacity:.9;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}