/* ========================
   Timeline Section
   ======================== */

.timeline-section .section-header {
  margin-bottom: var(--space-20);
}

/* Desktop/Mobile Toggle */
.timeline-desktop {
  display: none;
}

.timeline-mobile {
  display: block;
}
.timeline-swiper {
  margin: 0 -0.7rem;
}

/* ========================
   Horizontal Scroller
   ======================== */

.timeline-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  display: block;
  justify-content: center;
}

.timeline-track {
  position: relative;
  justify-content: center;
  width: max-content;
  min-width: 100%;
}

/* ========================
   Central Axis Line
   ======================== */

.timeline-axis {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 0.125rem;
  background: var(--bs-primary-400);
  z-index: 1;
  pointer-events: none;
  width: 100%;
}

.timeline-scroller:focus {
  outline: 0.1875rem solid rgba(var(--bs-primary-400-rgb), 0.45);
  outline-offset: 0.375rem;
  border-radius: 0.625rem;
}

.timeline-item:focus-visible {
  box-shadow:
    0 0.5rem 1.875rem rgba(0, 0, 0, 0.24),
    0 0 0 0.25rem rgba(var(--bs-primary-400-rgb), 0.09);
  transform: translateY(-0.25rem);
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms;
}

/* ========================
   Grid Layout
   ======================== */

.timeline-grid {
  --card-w: 13.75rem;
  --card-h: 17.125rem;
  --stem-gap: 4.375rem;
  --dot-size: 0.875rem;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  grid-template-rows: 1fr 1fr;
  column-gap: var(--space-10);
  row-gap: 0;
  min-height: calc(var(--card-h) + var(--stem-gap) + 2.5rem);
  position: relative;
  z-index: 2;
  align-content: center;
}

.timeline-scroller {
  scroll-snap-type: x mandatory;
}

.timeline-item {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Alternating row positioning */
.timeline-grid > .timeline-item:nth-child(odd) {
  grid-row: 2;
  transform: none;
}

.timeline-grid > .timeline-item:nth-child(even) {
  grid-row: 1;
  transform: translateX(calc(-1 * (var(--card-w) + var(--space-11)) / 2));
}

.timeline-grid > .timeline-item.is-top {
  grid-row: 1;
  transform: translateX(calc(-1 * (var(--card-w) + var(--space-11)) / 2));
}

.timeline-grid > .timeline-item.is-bottom {
  grid-row: 2;
  transform: none;
}

/* ========================
   Timeline Items
   ======================== */

.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0;
}

.timeline-item.is-top {
  grid-row: 1 / 2;
  justify-content: flex-end;
  align-self: end;
  padding-bottom: 0;
  transform: translateX(calc(-1 * (var(--card-w) + var(--space-11)) / 2));
  will-change: transform;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.timeline-item.is-bottom {
  grid-row: 2 / 3;
  justify-content: flex-start;
  align-self: start;
  padding-top: 0;
}

.timeline-item.is-top .timeline-card {
  margin-bottom: calc(var(--stem-gap) + 1.25rem);
}

.timeline-item.is-bottom .timeline-card {
  margin-top: calc(var(--stem-gap) + 0.625rem);
}

/* ========================
   Card - Three Section Design
   ======================== */

.timeline-card {
  width: 100%;
  height: 17.125rem;
  position: relative;
  background: var(--bs-primary-100);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.12);
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.timeline-card:hover {
  box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.18);
}

.timeline-item {
  overflow: visible;
}

.timeline-stem {
  height: calc(var(--stem-gap) + (var(--dot-size) / 2));
}

.timeline-item.is-top .timeline-stem {
  bottom: calc((var(--dot-size) / 2) * -1);
}

.timeline-item.is-bottom .timeline-stem {
  top: calc((var(--dot-size) / 2) * -1);
}

/* Card content wrapper */
.timeline-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ========================
   Top Section - Mint Background
   ======================== */

.timeline-top {
  background: var(--bs-primary-100);
  padding: var(--space-7) var(--space-11);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 9rem;
  flex: 0 0 auto;
  border-radius: 1rem 1rem 0 0;
  gap: 0;
  position: relative;
  border-bottom: 0.09375rem solid var(--bs-primary-400);
}
.timeline-item.is-bottom .timeline-top {
  background: var(--neutral-100);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  min-height: 5.625rem;
  flex: 1 1 auto;
  position: relative;
}
.timeline-logo-wrap {
  width: 8.75rem;
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ========================
   Bottom Section - Mint Background
   ======================== */

.timeline-bottom {
  background: var(--neutral-100);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  min-height: 5.625rem;
  flex: 1 1 auto;
  border-radius: 0 0 1rem 1rem;
  position: relative;
}
.timeline-item.is-bottom .timeline-bottom {
  background: var(--bs-primary-100);
  padding: var(--space-7) var(--space-11);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 9rem;
  flex: 0 0 auto;
  gap: 0;
  position: relative;
  /* border-bottom: 0.09375rem solid var(--bs-primary-400); */
}
.timeline-description {
  color: var(--bs-primary-700);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}
.timeline-year {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);

  color: var(--bs-primary-800);
  margin-top: auto;
  flex-shrink: 0;
}

/* ========================
   Stem and Dot
   ======================== */

.timeline-stem {
  position: absolute;
  left: 50%;
  width: 0.09375rem;
  background: var(--bs-primary-400);
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-dot {
  position: absolute;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bs-primary-400);
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
}

.timeline-item.is-top .timeline-dot {
  bottom: calc(var(--stem-gap) - 0.25rem);
}

.timeline-item.is-top .timeline-stem {
  bottom: 0;
  height: var(--stem-gap);
}

.timeline-item.is-bottom .timeline-dot {
  top: calc(var(--stem-gap) - 0.25rem);
}

.timeline-item.is-bottom .timeline-stem {
  top: 0;
  height: var(--stem-gap);
}

/* ========================
   RESPONSIVE DESIGN
   ======================== */

/* X-Small devices (portrait phones, less than 576px) - Default/Base Styles */
/* Base styles defined above */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .timeline-section .section-header {
    margin-bottom: var(--space-20);
  }

  .timeline-grid {
    --card-w: 15rem;
    --card-h: 17.5rem;
  }

  .timeline-logo-wrap {
    width: 8.75rem;
    height: 3.125rem;
  }

  .timeline-top {
    min-height: 9rem;
  }

  .timeline-bottom {
    min-height: 5.625rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .timeline-section .section-header {
    margin-bottom: var(--space-22);
  }

  .timeline-grid {
    --card-w: 16.25rem;
    --card-h: 18.125rem;
    --stem-gap: 4.6875rem;
  }

  .timeline-top {
    min-height: 9.375rem;
  }

  .timeline-bottom {
    min-height: 6.25rem;
  }

  .timeline-logo-wrap {
    width: 9.375rem;
    height: 3.4375rem;
  }
}

/* Large devices (desktops, 992px and up) - Switch to desktop timeline */
@media (min-width: 992px) {
  .timeline-desktop {
    display: flex;
  }

  .timeline-mobile {
    display: none;
  }

  .timeline-grid {
    --card-w: 13.75rem;
    --card-h: 17.125rem;
    --stem-gap: 4.375rem;
  }
  .timeline-card {
    width: 100%;
    height: var(--card-h);
  }
}

@media (min-width: 1400px) {
  .timeline-scroller {
    width: fit-content;
    margin: 0 auto;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .timeline-item {
    transition: none;
  }

  .timeline-card {
    transition: none;
  }
}