/* ============================================================
   REIS HR — Labaton-Style Horizontal Timeline Slider
   Premium horizontal interactive timeline with fixed left navigation
   ============================================================ */

/* ─── Timeline Section ────────────────────────────────────── */
.labaton-horizontal-section {
  background: #FFFFFF;
  position: relative;
  padding: clamp(60px, 8vw, 80px) 0;
  overflow: hidden;
}

.labaton-horizontal-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.labaton-horizontal-intro .eyebrow {
  margin-bottom: 16px;
}

.labaton-horizontal-intro h2 {
  margin-bottom: 12px;
  color: #0A192F;
}

/* ─── Timeline Main Wrapper ───────────────────────────────── */
.labaton-timeline-wrapper {
  position: relative;
  padding-left: 160px;
}

/* ─── Continuous Horizontal Axis Line ───────────────────────── */
.labaton-axis {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #CBD5E1;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

/* ─── Fixed Left Navigation Buttons ─────────────────────────── */
.timeline-nav-controls {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 24px;
  pointer-events: auto;
}

.timeline-nav-btn {
  width: 60px;
  height: 60px;
  background: #0A192F;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.timeline-nav-btn:hover:not(:disabled) {
  background: #0F2027;
  transform: scale(1.05);
}

.timeline-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: scale(1);
}

/* ─── Horizontal Scroll Container ───────────────────────────── */
.labaton-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 80px 0;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

.labaton-scroll-container::-webkit-scrollbar {
  display: none;
}

/* ─── Horizontal Track ─────────────────────────────────────── */
.labaton-track {
  display: flex;
  gap: 120px;
  align-items: flex-start;
}

/* ─── Timeline Node ─────────────────────────────────────────── */
.timeline-node {
  flex: 0 0 auto;
  width: 540px;
  display: flex;
  flex-direction: column;
}

/* ─── Top Section ───────────────────────────────────────────── */
.timeline-top {
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.timeline-year {
  font-family: Georgia, serif;
  font-size: 4rem;
  font-weight: 700;
  color: #002346;
  line-height: 1;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 10;
}

.timeline-images {
  display: flex;
  gap: 12px;
}

.timeline-images img {
  width: 160px;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* ─── Middle Axis Marker ─────────────────────────────────────── */
.timeline-marker {
  width: 12px;
  height: 12px;
  background-color: #002346;
  margin: 0 auto;
  transform: translateY(-5px);
  z-index: 5;
  flex-shrink: 0;
}

/* ─── Bottom Section ────────────────────────────────────────── */
.timeline-bottom {
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
}

.timeline-title {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #002346;
  line-height: 1.3;
  margin: 0;
}

.timeline-desc {
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
}

/* ─── Responsive Adjustments ────────────────────────────────── */
@media (max-width: 1024px) {
  .labaton-timeline-wrapper {
    padding-left: 120px;
  }
  
  .timeline-year {
    font-size: 3.5rem;
  }
  
  .timeline-node {
    width: 460px;
  }
  
  .labaton-track {
    gap: 60px;
  }
}

@media (max-width: 768px) {
  .labaton-timeline-wrapper {
    padding-left: 100px;
    padding-top: 100px;
  }
  
  .timeline-nav-controls {
    left: 20px;
    top: 20px;
    flex-direction: row;
    gap: 12px;
    z-index: 999;
    pointer-events: auto;
  }
  
  .timeline-top {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  
  .timeline-year {
    font-size: 3rem;
  }
  
  .timeline-node {
    width: 400px;
  }
  
  .labaton-scroll-container {
    padding-top: 60px;
  }
}

@media (max-width: 600px) {
  .labaton-timeline-wrapper {
    padding-left: 80px;
  }
  
  .timeline-year {
    font-size: 2.5rem;
  }
  
  .timeline-node {
    width: 340px;
  }
  
  .timeline-images img {
    width: 140px;
    height: 90px;
  }
  
  .timeline-bottom {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .labaton-timeline-wrapper {
    padding-left: 60px;
  }
  
  .timeline-year {
    font-size: 2rem;
  }
  
  .timeline-node {
    width: 280px;
  }
  
  .timeline-images img {
    width: 120px;
    height: 80px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .labaton-scroll-container {
    scroll-behavior: auto;
  }
}

/* ============================================================
   MOBILE VERTICAL STACK OVERHAUL — Timeline (width <= 768px)
   Replaces the horizontal slide slider with a 100% full-width
   vertical stack: left orange spine, node bullets along the
   line, fluid aspect-ratio images, tight 16px gutters.
   Selectors are mapped to the real .labaton-* DOM built by
   js/labaton-horizontal.js (.timeline-node / .timeline-year /
   .timeline-images img / .timeline-title / .timeline-desc).
   ============================================================ */
@media (max-width: 768px) {

  /* ── 1. Container resets — kill all horizontal slider geometry ── */
  .labaton-horizontal-section,
  .labaton-timeline-wrapper,
  .labaton-scroll-container,
  .labaton-track {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;   /* tight, clean side padding */
    padding-right: 16px !important;
    overflow-x: visible !important;
    box-sizing: border-box;
  }

  /* Wrapper no longer reserves the desktop nav rail (was 160px) */
  .labaton-timeline-wrapper {
    padding-top: 0 !important;
  }

  /* Scroll container becomes a plain block (was padded slider) */
  .labaton-scroll-container {
    overflow-y: visible !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 24px !important;
  }

  /* ── 2. Hide horizontal-slider chrome (redundant when vertical) ── */
  .timeline-nav-controls,       /* ‹ › arrow rail            */
  .timeline-nav-btn.prev,       /* #labatonPrev              */
  .timeline-nav-btn.next,       /* #labatonNext              */
  .labaton-axis,                /* desktop horizontal line   */
  .timeline-marker {            /* per-node axis square      */
    display: none !important;
  }

  /* ── 3. Vertical spine — clean line on the left ───────────────── */
  .labaton-track {
    position: relative;
    align-items: stretch !important;
    gap: 2.5rem !important;                          /* vertical rhythm  */
    padding-left: 1.75rem !important;                /* spine → cards    */
    padding-right: 0 !important;                     /* maximise width   */
    margin-left: 0.75rem;
    border-left: 2px solid rgba(241, 122, 48, 0.4);  /* subtle orange spine */
  }

  /* ── 4. Cards — full-width stack items ────────────────────────── */
  .timeline-node {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;                            /* gap() handles spacing */
    position: relative;
    box-sizing: border-box;
  }

  /* Node bullet, optically centred on the spine:
     spine centre sits at −(1.75rem + 1px); dot half-width is 8px  */
  .timeline-node::before {
    content: '';
    position: absolute;
    left: calc(-1.75rem - 9px);
    top: 0.25rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #F17A30;
    border: 2px solid #ffffff;
    z-index: 2;
  }

  /* Unlock fixed desktop height so content flows naturally */
  .timeline-top {
    height: auto !important;
    gap: 12px;
  }

  /* ── 5. Images — 100% width + smooth aspect-ratio (no cropping) ── */
  .timeline-images {
    display: grid !important;
    grid-template-columns: 1fr;                      /* stack full-width */
    gap: 10px;
    width: 100%;
  }

  .timeline-images img {
    display: block;
    width: 100% !important;
    height: auto !important;                         /* ratio drives height */
    aspect-ratio: 16 / 10;                           /* consistent frame    */
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(2, 35, 70, 0.08);
    margin-bottom: 0 !important;                     /* grid gap() handles it */
  }

  /* ── 6. Typography scale-down ─────────────────────────────────── */
  .timeline-year {
    font-size: 1.5rem !important;
    font-weight: 700;
    color: #F17A30;
    line-height: 1.1;
    letter-spacing: normal;
    margin-bottom: 0.25rem;
  }

  .timeline-title {
    font-size: 1.25rem !important;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }

  /* Dark ink on this section's white background (white text would vanish) */
  .timeline-desc {
    font-size: 0.95rem !important;
    line-height: 1.5;
    color: #5a6273;
  }

  /* Collapse the desktop 2-column title/description grid */
  .timeline-bottom {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-top: 14px !important;
  }
}

/* ============================================================
   GSAP SCROLLTRIGGER HOOKS — Mobile timeline animations
   Pre-animation states are scoped under .tl-anim / .dot-in
   (classes applied by js/labaton-scroll-animations.js), so the
   timeline remains fully visible if JS or GSAP ever fails.
   ============================================================ */
@media (max-width: 768px) {

  /* Progress line painted over the faint orange spine while scrolling */
  .timeline-spine-progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;                                     /* overlays the 2px border-left exactly */
    width: 2px;
    background: linear-gradient(180deg, #F17A30 0%, #D94526 100%);
    border-radius: 2px;
    transform-origin: top center;
    transform: scaleY(0);                           /* GSAP scrubs this to 1 */
    pointer-events: none;
    z-index: 1;                                     /* below the node dots (z-index: 2) */
  }

  /* Springy node-dot pop — pseudo-elements can't be tweened by
     GSAP directly, so ScrollTrigger toggles .dot-in instead */
  .timeline-node::before {
    transition:
      transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.25s ease-out;
  }

  /* Pre-animation state: dot shrunk away until its node enters view */
  .labaton-track.tl-anim .timeline-node::before {
    opacity: 0;
    transform: scale(0.2);
  }

  /* Shown state — higher specificity (extra .dot-in) wins the duel */
  .labaton-track.tl-anim .timeline-node.dot-in::before {
    opacity: 1;
    transform: scale(1);
  }
}