/* History timeline (About) — one Group Carousel with CSS class "history-timeline":
   desktop un-carousels into a vertical scroll-spy timeline (cream rail, horizontal
   tick per era, active tick = tan); tablet/phone keep the swipe carousel + a custom
   prev/next button. Sits on a navy panel. See js/history.js. */

/* Native arrows hidden but kept in the DOM — js/history.js .click()s them. */
.history-timeline .et_pb_group_carousel_arrow {
  display: none !important;
}

/* ── Custom prev/next control (tablet/phone) — Code module below the carousel;
      js/history.js moves it inside the carousel so it can anchor to the year line ── */
.history-nav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}
.history-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--yellow);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.history-nav__btn:hover {
  opacity: 0.7;
}
.history-nav__btn .et-pb-icon {
  font-size: 2.5rem;
  line-height: 1;
}
/* desktop is the scroll timeline — no button there */
@media (min-width: 981px) {
  .history-nav {
    display: none;
  }
}

/* ═══ Desktop (≥981px) — un-carousel into a vertical scroll-spy timeline ═══ */
@media (min-width: 981px) {
  /* show every slide stacked (stop the carousel clipping/transforming) */
  .history-timeline .et_pb_group_carousel_container,
  .history-timeline .et_pb_group_carousel_track {
    overflow: visible !important;
  }
  /* hide the loop clones (they duplicate the eras) */
  .history-timeline .et_pb_group_carousel_clone {
    display: none !important;
  }
  /* desktop shows the vertical rail, not the carousel dots */
  .history-timeline .et_pb_group_carousel_dots {
    display: none !important;
  }
  .history-timeline .et_pb_group_carousel_track {
    --hist-tick-top: 1.7rem; /* tick top within a slide (centers on the heading-lg year) — js/history.js reads this */
    transform: none !important;
    width: auto !important;
    display: block;
    position: relative;
    padding-left: calc(
      1.25rem + 3rem
    ); /* 1.25rem tick column + 3rem gap to the content */
  }
  /* each slide → a timeline entry; neutralise every carousel effect (transform/clip/overflow/opacity) */
  .history-timeline .et_pb_group_carousel_slide {
    width: 100% !important;
    position: relative;
    padding-bottom: 4rem;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  .history-timeline .et_pb_group_carousel_slide > * {
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  /* the vertical rail — js/history.js sets its exact top/height (first tick → last tick) */
  .history-timeline .et_pb_group_carousel_track::before {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    background: var(--yellow);
    top: var(--history-rail-top, 1rem);
    height: var(--history-rail-height, 80%);
    z-index: 0;
  }
  /* the tick — a short horizontal bar off the rail, aligned to the era heading */
  .history-timeline .et_pb_group_carousel_slide::before {
    content: "";
    position: absolute;
    left: calc(-3rem - 1.25rem);
    top: var(--hist-tick-top);
    width: 1.25rem;
    height: 2px;
    background: var(--yellow);
    transition:
      width 0.3s ease,
      height 0.3s ease;
    z-index: 1;
  }
  /* active era (scroll position) → a touch longer/thicker */
  .history-timeline .et_pb_group_carousel_slide.is-active::before {
    width: 1.75rem;
    height: 3px;
  }
}

/* ═══ Tablet/phone (≤980px) — swipe carousel, arrows inline with the year ═══ */
@media (max-width: 980px) {
  /* no dots line — the inline arrows are the navigation */
  .history-timeline .et_pb_group_carousel_dots {
    display: none !important;
  }
  /* anchor for the nav (js/history.js re-parents it into the carousel root) */
  .et_pb_group_carousel.history-timeline {
    position: relative;
  }
  .history-timeline .history-nav {
    position: absolute;
    top: 1.5rem; /* optically centers the arrows on the year heading */
    right: 0;
    margin: 0;
    z-index: 2;
  }
}