/* ========================================================================
 * Timeline styles
 * ======================================================================== */

.timeline-progress-ruler {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -2px 10px rgba(0, 53, 146, 0.5);
  z-index: 1000;
  overflow: hidden;
  border-radius: 20px;
  /* 增加动画平滑 */
  transition: all 1s ease-out;
}

.timeline-progress-ruler.timeline-story-end {
  display: none;
}

.timeline-progress-fill {
  position: absolute;
  top: auto;
  left: 12px;
  right: 12px;
  height: 10px;
  bottom: 5px;
  background: linear-gradient(to right, #ffffff 0%, #ffd200 20%, #ffd200 100%);
  transition: transform 0.5s ease-out;
  pointer-events: none;
  transform-origin: left;
  transform: scaleX(0);
}

.timeline-ruler-marks {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 20px;
}

.timeline-year-mark {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.timeline-year-mark .mark-line {
  width: 1px;
  background: #333;
  margin-bottom: 5px;
}

.timeline-year-mark.decade .mark-line {
  height: 20px;
  width: 1px;
  background: #000;
}

.timeline-year-mark.regular .mark-line {
  height: 10px;
}

.timeline-year-mark .mark-label {
  font-size: 11px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
}

.timeline-body p {
  font-size: 14px;
}

.pauseable-gif {
  cursor: pointer;
}

@media (min-width: 768px) {
  .timeline-body p {
    font-size: 16px;
  }
}

/* Decade labels (1920s, 1930s, etc.) - only show labels, no tick marks */
.timeline-year-mark.decade-label {
  bottom: 17px;
}

@media (min-width: 768px) {
  .timeline-year-mark.decade-label {
    bottom: 25px;
  }
}

.timeline-year-mark.decade-label .mark-label {
  font-size: 14px;
  font-weight: 700;
  color: #000;
}

/* Edge years (1926, 2026) - only show labels, no tick marks */
.timeline-year-mark.edge .mark-label {
  font-size: 10px;
  font-weight: 700;
  color: #000;
  margin-bottom: 15px;
}

/* Active state for decade labels */
.timeline-year-mark.decade-label.active .mark-label {
  font-family: var(--font-heading);
  transform: scale(1.1);
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .timeline-progress-ruler {
    height: 50px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    position: fixed;
  }

  .timeline-progress-ruler::-webkit-scrollbar {
    height: 6px;
  }

  .timeline-progress-ruler::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
  }

  .timeline-progress-ruler::-webkit-scrollbar-thumb {
    background: #ffd700;
    border-radius: 3px;
  }

  .timeline-progress-ruler::-webkit-scrollbar-thumb:hover {
    background: #ffed4e;
  }

  .timeline-progress-fill {
    left: 10px;
    right: auto;
    transition: width 0.5s ease-out;
  }

  .timeline-ruler-marks {
    padding: 0 10px;
    /* 设置宽度为视口宽度的333%（3.33倍），使每次显示约3个10年刻度 */
    width: 333vw;
    position: relative;
  }

  .timeline-year-mark .mark-label {
    font-size: 9px;
  }

  .timeline-year-mark.decade-label .mark-label {
    font-size: 12px;
  }

  .timeline-year-mark.edge .mark-label {
    font-size: 11px;
  }

  .timeline-year-mark.decade .mark-line {
    height: 25px;
  }

  .timeline-year-mark.regular .mark-line {
    height: 12px;
  }
}

/* timeline templates */

.template-1 > img,
.template-2 > img,
.template-3 > img,
.template-4 > img,
.template-5 > img,
.template-7 > img,
.template-8 > img,
.template-9 > img,
.template-11 > img,
.template-12 > img {
  position: absolute;
  height: auto;
  max-width: none;
  min-width: auto;
}
.ctl-wrapper .ctl-story {
  margin-bottom: calc(80px + var(--ctw-cbx-bottom-margin)) !important;
}
.template-1.timeline-media,
.template-2.timeline-media,
.template-3.timeline-media,
.template-4.timeline-media,
.template-5.timeline-media,
.template-6.timeline-media,
.template-7.timeline-media,
.template-8.timeline-media,
.template-9.timeline-media,
.template-10.timeline-media,
.template-11.timeline-media,
.template-12.timeline-media,
.template-13.timeline-media {
  position: relative;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  margin-bottom: 0 !important;
}

.template-1.timeline-media,
.template-2.timeline-media,
.template-3.timeline-media,
.template-4.timeline-media,
.template-5.timeline-media,
.template-6.timeline-media,
.template-7.timeline-media,
.template-8.timeline-media,
.template-9.timeline-media,
.template-10.timeline-media,
.template-11.timeline-media,
.template-12.timeline-media {
  padding-top: 100px;
  padding-bottom: 100px;
}

.template-1.timeline-media {
  padding-top: 0;
  padding-bottom: 190px;
}

.template-2.timeline-media {
  padding-top: 0;
  padding-bottom: 70px;
}

.template-3.timeline-media {
  padding-top: 48px;
  padding-bottom: 218px;
}

.template-4.timeline-media {
  padding-top: 0;
  padding-bottom: 200px;
}

.template-5.timeline-media {
  padding-top: 0;
  padding-bottom: 320px;
}

#ctl-story-1606 .template-5.timeline-media {
  padding-bottom: 280px;
}

.template-6.timeline-media {
  padding-top: 0;
  padding-bottom: 115px;
}

.template-7.timeline-media {
  padding-top: 30px;
  padding-bottom: 60px;
}

.template-7.timeline-media.t7-1956 {
  padding-top: 30px;
  padding-bottom: 70px;
}

.template-8.timeline-media {
  padding-top: 148px;
  padding-bottom: 175px;
}

.template-9.timeline-media {
  padding-top: 148px;
  padding-bottom: 166px;
}

.template-10.timeline-media {
  padding-top: 100px;
  padding-bottom: 126px;
}

.template-11.timeline-media {
  padding-top: 0;
  padding-bottom: 86px;
}

.template-12.timeline-media {
  padding-top: 87px;
  padding-bottom: 0;
}

.template-13.timeline-media {
  padding-top: 138px;
  padding-bottom: 144px;
}

/* timeline css- m */
.template-8 img:not(.main-image) {
  min-width: auto;
}
.template-8 .img-fluid.left-bottom-gif {
  max-width: 180px !important;
  display: block;
  bottom: 30px;
  left: 30px;
  z-index: 3;
  margin-top: -30px;
}
.template-8 .img-fluid.left-bottom {
  max-width: 130px;
  display: block;
  bottom: 80px;
  left: 30px;
  margin: 0 !important;
  z-index: 3;
}
.template-8 .img-fluid.right-bottom {
  right: 10%;
  bottom: 0;
  z-index: 1;
  margin-bottom: 0 !important;
}
.template-8 .img-fluid.main-image {
  max-width: 400px;
  z-index: 2 !important;
  position: relative;
}
.template-8 .img-fluid.solid-block {
  top: 10%;
  right: 38%;
  z-index: 1;
  max-width: 160px;
}
.template-8 .img-fluid.top-right {
  right: 30px;
  top: 0;
  z-index: 3;
  max-width: 230px;
  margin-bottom: 0 !important;
}
/* ========= TEMPLATE 13 – RESPONSIVE COLLAGE ========= */
/* Remove extra bottom margin that comes from .mb-4 on these images */
.template-13 .img-fluid {
  margin-bottom: 0;
}
/* Main video image – fluid, defines the height of the collage */
.template-13 a.glightbox.main-image {
  position: relative;
  display: block;
  max-width: 100%;
  z-index: 3;
}
.template-13 a.glightbox.main-image img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* All extra images are absolutely positioned relative to .template-13 */
.template-13 > img {
  position: absolute;
  height: auto;
  max-width: none;
  min-width: auto;
}
/* MAN PORTRAIT (top-left-13) */
.img-fluid.top-left-13 {
  max-width: 138px;
  left: 5%;
  top: 0;
  z-index: 4;
  margin: 0 !important;
}
/* YELLOW BLOCK (behind video) */
.img-fluid.solid-block-13 {
  max-width: 30%;
  left: 18%;
  top: 10%;
  z-index: 1;
}
/* ARROW (top-right-13) */
.img-fluid.top-right-13 {
  max-width: 20%;
  right: 5%;
  top: 0;
  z-index: 4;
}
/* BOTTOM PHOTO (bottom-right-13) */

.tl-caption.bottom-right-13,
.img-fluid.bottom-right-13 {
  max-width: 170px;
  /* bottom: 0; */
  right: 5%;
  z-index: -1;
}
.historical-timeline .ctl-story .timeline-media .mb-4.bottom-right-13 {
  margin-bottom: 1.9em !important;
}
.img-fluid.bottom-right-13-gif {
  max-width: 172px;
  right: 5%;
  z-index: -1;
}
.img-fluid.bottom-right-13.image-with-text-13 {
  margin-bottom: 0 !important;
}
/* ========= TEMPLATE 10 – RESPONSIVE COLLAGE ========= */
/* All extra images are absolutely positioned relative to .template-13 */
.template-10 img {
  position: absolute;
  height: auto;
}
/* Remove extra bottom margin that comes from .mb-4 on these images */
.template-10 .img-fluid {
  margin-bottom: 0 !important;
}
/* Main video image – fluid, defines the height of the collage */
.template-10 .main-image-10 {
  position: relative;
  display: block;
  max-width: 54%;
  z-index: 4;
  left: 12%;
}
/* MAN PORTRAIT (top-left-13) */
.img-fluid.top-left-10.image-with-text-10 {
  max-width: 340px;
  left: 0%;
  top: 0%;
  z-index: 3;
  margin: 0 !important;
}
.img-fluid.top-left-10 {
  max-width: 160px;
  left: 5%;
  top: 12%;
  z-index: 3;
  margin: 0 !important;
}
.img-fluid.top-right-10.image-with-text-10-right {
  max-width: 220px;
  z-index: 0;
}
.img-fluid.center-right-arrow-10 {
  right: 0;
  top: 42%;
  max-width: 130px;
}
.img-fluid.solid-block-10 {
  max-width: 30%;
  left: 21%;
  top: 0;
  z-index: 1;
}
.img-fluid.center-right-10 {
  right: 26%;
  top: 53%;
  max-width: 80px;
}

.img-fluid.top-right-10 {
  max-width: 230px;
  right: 5%;
  top: 0;
  z-index: 0;
}
.img-fluid.bottom-left-10 {
  max-width: 128px;
  bottom: 5%;
}
.img-fluid.bottom-right-10 {
  max-width: 330px;
  bottom: 5%;
  right: 0;
  z-index: 5;
}

/* template 3 */
.template-3 {
  position: relative;
  max-width: min(640px, 100%);
  /* scales down on small screens */
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 100px;
}
.template-3 img {
  position: absolute;
  height: auto;
}
.template-3 .img-fluid {
  margin-bottom: 0 !important;
}
.template-3 .main-image-3 {
  position: relative;
  display: block;
  max-width: 89%;
  z-index: 0;
}
.img-fluid.top-right-3 {
  max-width: 100px;
  right: 6%;
  top: 0;
  z-index: -1;
}
.img-fluid.bottom-left-3 {
  max-width: 200px;
  bottom: 13%;
  z-index: 4;
  left: 6%;
}
.img-fluid.bottom-right-3 {
  max-width: 400px;
  bottom: 0;
  right: 0;
  z-index: -1;
}

/* template 3 */

/* ========= TEMPLATE 5 – CRASH OF 1929 COLLAGE ========= */
/* Wrapper becomes positioning context, similar to template-13 */
/* Kill extra Bootstrap margin inside the collage */
.template-5.timeline-media .img-fluid {
  margin-bottom: 0;
  display: block;
}
/* MAIN TOP IMAGE (Crowd) – fluid */
.template-5.timeline-media .main-image-5 {
  position: relative;
  display: block;
  max-width: 422px;
  height: auto;
  z-index: 5;
}

/* RIGHT-BOTTOM TALL STREET PHOTO */
.template-5.timeline-media .right-bottom-5 {
  max-width: 250px;
  right: 0;
  bottom: 0;
  z-index: 2;
}
/* BLUE SQUARE BEHIND RIGHT PHOTO */
.template-5.timeline-media .top-right-5 {
  max-width: 170px;
  right: 13%;
  top: 19%;
  z-index: 1;
}
/* NEWSPAPER BOTTOM-LEFT */
.template-5.timeline-media .left-bottom-5 {
  max-width: 230px;
  left: 12%;
  bottom: 9%;
  z-index: 3;
}
/* YELLOW BLOCK BEHIND NEWSPAPER */
.template-5.timeline-media .solid-block-5 {
  max-width: 170px;
  left: 43%;
  bottom: 3%;
  z-index: 1;
}
/* MAIN TALL REPORT IMAGE ON THE RIGHT */
.template-7.timeline-media .top-right-7 {
  position: relative;
  display: block;
  max-width: 330px;
  margin-left: auto;
  right: 5%;
  z-index: 1;
}
/* ROUND LOGO – top-left-7 */
.template-7.timeline-media .top-left-7 {
  max-width: 240px;
  left: 9%;
  top: 0;
  z-index: 3;
}

.template-7.timeline-media .big-solid-block-7-red {
  max-width: 160px;
  top: 8%;
}

.template-7.timeline-media.t7-1956 .top-left-7 {
  top: 0;
}

/* BLUE BLOCK BEHIND LOGO – big-solid-block-7 */
.template-7.timeline-media .big-solid-block-7 {
  max-width: 150px;
  left: 6%;
  bottom: 22%;
  z-index: 0;
}
/* BOTTOM GROUP PHOTO – bottom-left-7 */
.template-7.timeline-media .bottom-left-7 {
  max-width: 282px;
  left: 0;
  bottom: 0;
  z-index: 2;
}
.template-7.timeline-media .bottom-left-7.image-with-text-right-7 {
  max-width: 500px;
}
/* YELLOW BLOCK UNDER BOTTOM-RIGHT – small-solid-block-7 */
.template-7.timeline-media .small-solid-block-7 {
  max-width: 100px;
  right: 0;
  bottom: 5%;
  z-index: 0;
}
/*template 6 */
.template-6.timeline-media img:not(.top-right-6) {
  position: absolute;
}
.template-6.timeline-media img {
  min-width: auto;
}
.img-fluid.top-right-6 {
  max-width: 333px;
  min-width: auto;
  position: relative;
  left: 40%;
  z-index: 3;
}
.template-6.timeline-media img {
  min-width: auto;
}
.template-6.timeline-media {
  position: relative;
}
.img-fluid.top-left-6 {
  max-width: 150px;
  top: 8%;
  z-index: 2;
}
.img-fluid.small-solid-block-6 {
  max-width: 170px;
  bottom: 14%;
  right: 0;
}
.img-fluid.big-solid-block-6 {
  max-width: 170px;
  left: 19%;
  top: 27%;
  z-index: -1;
}
.img-fluid.bottom-left-6 {
  max-width: 336px;
  left: 13%;
  bottom: 0;
}
/*template 6 ends */

/*template 1 */
.timeline-media.template-1 .main-image-1 {
  position: relative;
}

.img-fluid.main-image-1 {
  max-width: 450px;
}
.img-fluid.bottom-left-1 {
  left: 10%;
  bottom: 20%;
  max-width: 160px;
  z-index: -1;
}
.img-fluid.bottom-right-1 {
  max-width: 290px;
  right: 0%;
  bottom: 0;
  z-index: -1;
}

/*template 1 ends*/
/*template 2 */
.timeline-media.template-2 .main-image-2 {
  position: relative;
}
.img-fluid.left-center-2 {
  max-width: 190px;
  left: 36%;
  z-index: -1;
  top: 30%;
}
.img-fluid.bottom-right-2 {
  right: 0;
  bottom: 0;
  z-index: -1;
  max-width: 330px;
}
/*template 2 ends*/

/*template 4 */
.timeline-media.template-4 .main-image-4 {
  position: relative;
}

.img-fluid.bottom-right-4 {
  right: -7%;
  bottom: 0;
  z-index: -1;
  max-width: 230px;
}
.img-fluid.bottom-left-4 {
  bottom: 0;
  left: 0;
}

.img-fluid.right-center-4 {
  right: -3%;
  top: 25%;
  z-index: -1;
}
/*template 4 ends*/

/*template 9 */

.template-9.timeline-media img {
  min-width: auto;
}
.template-9.timeline-media {
  position: relative;
}

.img-fluid.main-image-9 {
  max-width: 75%;
  position: relative;
  left: 25%;
  z-index: 3;
}
.img-fluid.top-left-9 {
  max-width: 465px;
  top: 0;
  z-index: 2;
  left: 4%;
}

.img-fluid.top-left-img-9 {
  max-width: 258px;
  top: 0;
  z-index: 2;
  left: 0;
}

.img-fluid.top-left-9.image-left-without-text-9 {
  max-width: 200px;
}
.img-fluid.top-right-9 {
  max-width: 150px;
  top: 15%;
  z-index: -1;
  left: 222px;
}
.img-fluid.right-bottom-9 {
  right: 5%;
  max-width: 250px;
  bottom: 0;
}
.img-fluid.solid-block-red-9 {
  max-width: 111px;
  left: 19%;
  top: 52%;
  z-index: -1;
}
.img-fluid.left-bottom-9 {
  bottom: 90px;
  max-width: 200px;
  left: 0;
}

#ctl-story-1546 .swiper-outwrapper,
#ctl-story-1568 .swiper-outwrapper,
#ctl-story-1597 .swiper-outwrapper,
#ctl-story-1600 .swiper-outwrapper,
#ctl-story-1609 .swiper-outwrapper{
  margin-top: -30px;
}
#ctl-story-1546 .img-fluid.left-1-11,
#ctl-story-1568 .img-fluid.left-1-11,
#ctl-story-1597 .img-fluid.left-1-11,
#ctl-story-1600 .img-fluid.left-1-11,
#ctl-story-1609 .img-fluid.left-1-11{
  top: 38%;
}
#ctl-story-1546 .img-fluid.left-2-11,
#ctl-story-1568 .img-fluid.left-2-11,
#ctl-story-1597 .img-fluid.left-2-11,
#ctl-story-1600 .img-fluid.left-2-11,
#ctl-story-1609 .img-fluid.left-2-11{
  top: 60%;
}

.img-fluid.left-bottom-9.wp-caption {
  bottom: 0;
}
/*template 9 ends */

/*template 11 */
.template-11.timeline-media img:not(.main-image-6) {
  position: absolute;
}
.template-11.timeline-media img {
  min-width: auto;
}
.template-11.timeline-media {
  position: relative;
}

.main-image-11 img {
  position: relative !important;
  left: 24%;
}
.img-fluid.left-1-11 {
  max-width: 144px;
  top: 42%;
  z-index: 2;
  left: 10%;
}

.img-fluid.left-2-11 {
  max-width: 100px;
  top: 68%;
  z-index: -1;
  left: 0%;
}

.img-fluid.bottom-right-11 {
  right: 4%;
  max-width: 90px;
  bottom: 0%;
}

/*template 11 ends */

/*template 11 */
.template-12.timeline-media img:not(.main-image-6) {
  position: absolute;
}

.template-12.timeline-media img {
  min-width: auto;
}
.template-12.timeline-media {
  position: relative;
}

.main-image-12 {
  max-width: 130px !important;
  min-width: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.img-fluid.left-image-12 {
  max-width: 160px;
  top: 22%;
  z-index: 2;
  right: 14%;
}

.timeline-body p:last-of-type {
  margin-bottom: 40px !important;
}

.timeline-body a.glightbox::before {
    content: url(../images/play-btn80x80.svg);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 1;
}

.timeline-body a.glightbox:hover::before {
    content: url(../images/play-btn80x80-hover.svg);
}

.timeline-body .template-11 a.glightbox::before {
    content: url(../images/play-btn48x48.svg);
}

.timeline-body .template-11 a.glightbox:hover::before {
    content: url(../images/play-btn48x48-hover.svg);
}


@media (min-width: 1220px) {
  .swiper-outwrapper.timeline-media.px-5 {
    padding-right: 4.2rem !important;
    padding-left: 4.2rem !important;
  }
}