/* Timeline horizontal scroll styles */
.timeline-scroll {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 2rem;
  margin-top: 15px; /* Added margin between header and timeline */
  padding-left: 1rem;
  padding-right: 1rem;
}
.timeline-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 100%;
  max-width: 100%;
}
/* Ensure consistent image sizing in timeline cards */
.timeline-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
  border-radius: 0.5rem;
}
/* Responsive card widths */
@media (min-width: 1200px) { /* lg and up: 3 per page */
  .timeline-card {
    width: calc((100vw - 2rem - 2rem) / 3); /* 3 cards per viewport, minus container padding */
    max-width: calc((100vw - 4rem) / 3);
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) { /* md: 2 per page */
  .timeline-card {
    width: calc((100vw - 2rem - 2rem) / 2);
    max-width: calc((100vw - 4rem) / 2);
  }
}
@media (max-width: 767.98px) { /* sm: 1 per page */
  .timeline-card {
    width: calc(100vw - 2rem);
    max-width: 100vw;
  }
}
/* Header image sizing */
.header-logo {
  max-width: 10vw;
  width: 100%;
  height: auto;
}
/* Modern blue gradient header background */
header {
  background: linear-gradient(135deg, #0a58ca 0%, #4f8cff 100%);
  color: #fff;
}
.card-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a58ca 0%, #4f8cff 100%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
  border-radius: inherit;
}
.card-hover-text {
  position: absolute;
  inset: 0;
  color: #fff;
  background: none;
  opacity: 0;
  z-index: 3;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.3s;
  pointer-events: none;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.card.timeline-card:hover .card-hover-overlay,
.card.timeline-card:focus-within .card-hover-overlay {
  opacity: 0.95;
  pointer-events: auto;
}
.card.timeline-card:hover .card-hover-text,
.card.timeline-card:focus-within .card-hover-text {
  opacity: 1;
  pointer-events: auto;
}

/* Scroll snap for timeline cards - hard snap */
.overflow-auto {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.timeline-row > [class*="col-"] {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}