/* timeline-common.css - Common styles for vertical & horizontal timelines */

/* =========================================
   Root Variables
   Define all reusable timeline CSS variables
========================================= */
:root {
  /* Layout & Structure */
  --ks-line-width: 3px;
  --ks-shadow-size: 2px;
  --ks-line-bd-width: 0;

  /* Colors */
  --ks-line-filling-color: #ff5733;
  --ks-line-bg-color: #222;
  --ks-first-color: #ff5733;
  --ks-second-color: #ff5733;

  /* Content Box */
  --ks-content-box-title-color: #222;
  --ks-content-box-title-font-size: 20px;
  --ks-content-box-desc-color: #555;
  --ks-content-box-desc-font-size: 16px;
  --ks-content-box-padding: 20px;
  --ks-content-box-radius: 0;
  --ks-content-box-bg-color: #fff;
  --ks-content-box-border-color: #ff5733;
  --ks-content-box-border-top-width: 0;
  --ks-content-box-border-right-width: 0;
  --ks-content-box-border-bottom-width: 0;
  --ks-content-box-border-left-width: 3px;
  --ks-content-box-border-style: solid;
  --ks-content-box-space: 20;
  --ks-content-box-bottom-margin: 0;

  /* Icons & Markers */
  --ks-circle-color: #000;
  --ks-title-color: #fff;
  --ks-start-end-radius: 0;
  --ks-icon-size: 40px;
  --ks-icon-text-size: 22px;
  --ks-icon-bg: var(--ks-first-color, #222);
  --ks-icon-color: var(--ctw-cbx-bg);
  --ks-icon-radius: 50;
  --ks-icon-bd-width: var(--ks-line-width);
  --ks-icon-bd-style: none;
  --ks-icon-bd-color: var(--ks-line-bg-color);
  --ks-icon-position: 0;

  /* Year Markers */
  --ks-year-box-size: 80px;
  --ks-year-box-bg: #000;
  --ks-year-box-radius: 0;
  --ks-year-text-color: #f4f4f4;

  /* Labels */
  --ks-label-lg-color: #ff5733;
  --ks-label-sm-color: #ff5733;
  --ks-label-gap: 5px;
  --ks-label-big-size: 18px;
  --ks-label-small-size: 14px;
  --ks-label-big-weight: bold;
  --ks-label-small-weight: normal;
  --ks-label-bd-width: 2px;
  --ks-label-position: column nowrap;

  /* Navigation */
  --ks-arw-bg: #604b4b;
  --ks-nav-icon-size: 30px;
  --ks-nav-icon-color: var(--ks-line-bg, #222);
  --ks-nav-icon-radius: 0;
  --ks-nav-icon-bd-width: 0;
  --ks-nav-icon-bd-clr: var(--ks-line-bg);
  --ks-nav-icon-bd-style: solid;
}

/* Horizontal wrapper variable override */
.ks-timeline-horizontal-wrapper {
  --ks-year-box-radius: 50;
}

/* Base arrow line: connects icon and content box */
.ks-timeline-story-wrapper .ks-arrow-line {
  position: absolute;
  z-index: 2;
  background: var(--ks-line-bg-color);
  border-style: var(--ks-content-box-border-style);
  border-color: var(--ks-content-box-border-color);
  border-width: calc(var(--ks-line-bd-width) * 1px) 0;
  height: var(--ks-line-width);
  width: calc(var(--ks-icon-size) * 0.5);
  top: calc(
    var(--ks-icon-position) * 1% -
      (var(--ks-icon-size) * var(--ks-icon-position) / 100) +
      (var(--ks-icon-size) / 2) -
      (var(--ks-line-width) / 2)
  );
  left: calc(-1 * var(--ks-icon-size) * 0.5);
}

/* Left side story: arrow line positioning */
.ks-timeline-story-wrapper .ks-timeline-story-left .ks-arrow-line {
  right: calc(-1 * var(--ks-icon-size) * 0.5);
  left: auto;
}

/* Right side story: arrow line positioning */
.ks-timeline-story-wrapper .ks-timeline-story-right .ks-arrow-line {
  left: calc(-1 * var(--ks-icon-size) * 0.5);
  right: auto;
}

/* Vertical right layout: adjust arrow line for both sides */
.ks-timeline-story-wrapper
  .vertical-right
  .ks-timeline-story-left
  .ks-arrow-line,
.ks-timeline-story-wrapper
  .vertical-right
  .ks-timeline-story-right
  .ks-arrow-line {
  left: calc(-1 * var(--ks-icon-size) * 0.5);
  right: auto;
}

/* Horizontal layout: modify arrow line size & position */
.ks-timeline-story-wrapper .ks-timeline-horizontal .ks-arrow-line {
  height: calc(var(--ks-icon-size) * 0.65);
  top: calc(-1 * var(--ks-icon-size) * 0.65);
  width: var(--ks-line-width);
  left: calc(
    var(--ks-icon-position) * 1% -
      (var(--ks-icon-size) * var(--ks-icon-position) / 100) +
      (var(--ks-icon-size) / 2) -
      (var(--ks-line-width) / 2)
  );
  border-width: 0 calc(var(--ks-line-bd-width) * 1px);
}

/* Horizontal swiper: icon line adjustment */
.ks-timeline-horizontal-wrapper
  .ks-timeline-swiper-container
  .ks-timeline-icon.line {
  left: calc(
    var(--ks-icon-position) * 1% -
      (var(--ks-icon-size) * var(--ks-icon-position) / 100) +
      (var(--ks-icon-size) - var(--ks-icon-size) / 1.1)
  ) !important;
}

/* Timeline media: maintain image aspect ratio */
.ks-timeline-story .ks-timeline-content .ks-timeline-media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Responsive: adjust arrow lines and icons for mobile */
@media (max-width: 767px) {
  /* Reset arrow line position for left/right stories */
  .ks-timeline-story-wrapper .ks-timeline-story-left .ks-arrow-line,
  .ks-timeline-story-wrapper .ks-timeline-story-right .ks-arrow-line {
    left: calc(-1 * var(--ks-icon-size) * 0.5) !important;
    right: auto !important;
    top: calc(
      var(--ks-icon-position) * 1% -
        (var(--ks-icon-size) * var(--ks-icon-position) / 100) +
        (var(--ks-label-big-size) + var(--ks-label-small-size) +
          var(--ks-label-gap) + 45px) -
        ((var(--ks-label-big-size) + var(--ks-label-small-size) +
          var(--ks-label-gap) + 45px) *
          var(--ks-icon-position) /
          100)
    );
  }

  /* Adjust icon line position for mobile (left stories) */
  .ks-timeline-story .ks-timeline-story-left .ks-timeline-icon.line {
    top: calc(
      var(--ks-icon-position, 50) * 1% -
        (var(--ks-icon-size, 30px) * var(--ks-icon-position, 50) / 100) +
        (var(--ks-label-big-size, 18px) + var(--ks-label-small-size, 14px) +
          var(--ks-label-gap, 8px) + 30px) -
        ((var(--ks-label-big-size, 18px) + var(--ks-label-small-size, 14px) +
          var(--ks-label-gap, 8px) + 40px) *
          var(--ks-icon-position, 50) /
          100)
    ) !important;
  }
}