/**
 * Timeline Slider Styles
 *
 * Styles for the timeline slider module showing chronological events.
 * Responsive breakpoints:
 * - Mobile (0-767px): 1 slide
 * - Tablet (768-979px): 2 slides
 * - Medium Desktop (980-1279px): 3 slides
 * - Large Desktop (1280px+): 4 slides
 */

/* ==========================================================================
   Container
   ========================================================================== */

.timeline-slider-container {
  position: relative;
  width: 100%;
  margin-bottom: 3rem;
  padding: 0 2em;
}

/* ==========================================================================
   Navigation Buttons (Left/Right of Slider)
   ========================================================================== */

.timeline-slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--medium-gray);
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: var(--font-etmodules);
  font-size: 3em;
  line-height: 1;
}

.timeline-slider-button:not(.swiper-button-disabled):hover {
  color: var(--primary-color);
}

.timeline-slider-button:focus {
  outline-offset: 2px;
}

.timeline-slider-button:disabled,
.timeline-slider-button.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Previous button - left position and icon */
.timeline-slider-button-prev {
  left: 0;
}

.timeline-slider-button-prev::before {
  content: '\34'; /* ETmodules left chevron */
}

/* Next button - right position and icon */
.timeline-slider-button-next {
  right: 0;
}

.timeline-slider-button-next::before {
  content: '\35'; /* ETmodules right chevron */
}

/* ==========================================================================
   Scrollbar (Below Slider)
   ========================================================================== */

/* Scrollbar - bottom center */
.timeline-slider-scrollbar {
  position: relative;
  width: 100%;
  height: 10px;
  background: #eeeeee;
  border-radius: 5px;
  margin-top: 3.5em;
}

.timeline-slider-scrollbar .swiper-scrollbar-drag {
  background: var(--medium-gray);
  border-radius: 5px;
  cursor: grab;
}

.timeline-slider-scrollbar .swiper-scrollbar-drag:active {
  cursor: grabbing;
}

/* ==========================================================================
   Swiper Container
   ========================================================================== */

.timeline-slider-swiper {
  width: 100%;
  padding-top: 2.5rem; /* Space for scrollbar */
}

.timeline-slider-swiper .swiper-wrapper {
  align-items: stretch;
}

.timeline-slide {
  height: auto;
  display: flex;
}

/* ==========================================================================
   Timeline Entry Card
   ========================================================================== */

.timeline-entry {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 1.125rem;
  border-left: 2px solid var(--black);
  /* space for the square */
  margin-left: 4px;
}

/* Square at top of line */
.timeline-entry::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  width: 10px;
  height: 10px;
  background: var(--black);
}

/* Year Wrapper */
.timeline-year-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

/* Year Badge - styled like "19\n27" */
.timeline-year {
  font-family: var(--font-bauer);
  font-size: 3em;
  font-weight: 700;
  line-height: 0.88;
  color: var(--primary-color);
  margin: 0;
  padding: 0 0 1em 0;
}

/* Image */
.timeline-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Description */
.timeline-description {
  font-size: 0.875rem;
  line-height: 1.3;
  color: #333;
  flex: 1;
}

.timeline-description p {
  margin-bottom: 0.75rem;
}

.timeline-description p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Responsive Adjustments - Mobile First
   ========================================================================== */

/* Tablet (768px+) */
@media (min-width: 768px) {
  .timeline-year {
    font-size: 3em;
  }

  .timeline-year-wrapper {
    margin-bottom: 1.25rem;
  }

  .timeline-description {
    font-size: 0.9375rem;
  }
}

/* Large Desktop (981px+) */
@media (min-width: 981px) {
  .timeline-slider-container {
    padding: 0 3em;
  }

  .timeline-year {
    font-size: 4em;
  }

  .timeline-year-wrapper {
    margin-bottom: 1.5rem;
  }

  .timeline-slider-button {
    width: 50px;
    font-size: 5em;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .timeline-slider-button {
    transition: none;
  }

  .timeline-slider-swiper {
    scroll-behavior: auto;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .timeline-slider-button {
    border-width: 3px;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .timeline-slider-button-prev,
  .timeline-slider-button-next,
  .timeline-slider-pagination,
  .timeline-slider-scrollbar {
    display: none;
  }

  .timeline-slider-container {
    padding: 0;
  }

  .timeline-entry {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}