/* =====================================================
   KC Responsive Timeline – v1.5.0
   ===================================================== */

/* -------------------------------------------------------
   CSS custom properties (overridable per-instance via
   inline style on .kc-rtimeline)
------------------------------------------------------- */
.kc-rtimeline {
  --kc-rt-nav-w:      120px;
  --kc-rt-gap:        48px;
  --kc-rt-accent:     #cc0000;
  --kc-rt-muted:      rgba(0,0,0,.28);
  --kc-rt-border:     rgba(0,0,0,.12);
  --kc-rt-nav-win-h:  420px;
  --kc-rt-font:       inherit;

  /* gallery grid columns — override to taste */
  --kc-rt-gallery-cols: 2;
  --kc-rt-gallery-gap:  12px;

  /* image border-radius — set per-timeline via inline style */
  --kc-rt-img-r:        5px;

  /* fade overlay color as RGB components e.g. 255,255,255 */
  --kc-rt-fade-rgb:     255,255,255;
}

/* -------------------------------------------------------
   Outer wrapper
------------------------------------------------------- */
.kc-rtimeline {
  position:     relative;
  padding-left: calc(var(--kc-rt-nav-w) + var(--kc-rt-gap));
  font-family:  var(--kc-rt-font);
}

/* -------------------------------------------------------
   Side nav
------------------------------------------------------- */
.kc-rtimeline__nav {
  position: absolute;
  top:      0;
  left:     0;
  width:    var(--kc-rt-nav-w);
  overflow: hidden;
  height:   var(--kc-rt-nav-win-h);
}

.kc-rtimeline__nav.is-fixed {
  position:  fixed;
  top:       50%;
  transform: translateY(-50%);
}

.kc-rtimeline__nav.is-bottom {
  position:  absolute;
  top:       auto;
  bottom:    0;
  transform: none;
}

.kc-rtimeline .kc-rtimeline__nav ul,
.kc-rtimeline .kc-rtimeline__nav li {
  list-style: none !important;
  margin:     0    !important;
  padding:    0    !important;
}

.kc-rtimeline__nav ul {
  display:        flex;
  flex-direction: column;
  border-left:    2px solid var(--kc-rt-border);
  transition:     transform 380ms cubic-bezier(.4,0,.2,1);
  will-change:    transform;
}

.kc-rtimeline__nav li { display: flex; }

/* Base nav link */
.kc-rtimeline__nav a {
  display:          block;
  width:            100%;
  padding:          7px 0 7px 16px;
  text-decoration:  none;
  font-family:      var(--kc-rt-font);
  font-weight:      700;
  line-height:      1.2;
  white-space:      nowrap;
  position:         relative;
  font-size:        12px;
  color:            var(--kc-rt-muted);
  opacity:          0.35;
  transform:        scale(0.78);
  transform-origin: left center;
  transition:
    font-size 300ms ease,
    color     300ms ease,
    opacity   300ms ease,
    transform 300ms ease;
}

/* Vertical bar indicator */
.kc-rtimeline__nav a::before {
  content:       '';
  position:      absolute;
  left:          -6px;
  top:           50%;
  transform:     translateY(-50%);
  width:         0;
  height:        0;
  border-radius: 0;
  background:    #fff;
  border:        2px solid var(--kc-rt-border);
  transition:
    border-color 300ms ease,
    background   300ms ease,
    width        300ms ease,
    height       300ms ease,
    left         300ms ease;
}

/* Distance classes */
.kc-rtimeline__nav a.is-active {
  font-size: 20px;
  color:     var(--kc-rt-accent);
  opacity:   1;
  transform: scale(1);
}
.kc-rtimeline__nav a.is-active::before {
  width:        5px;
  height:       18px;
  left:         -7px;
  border-color: var(--kc-rt-accent);
  background:   var(--kc-rt-accent);
}

.kc-rtimeline__nav a.is-near-1 { font-size: 15px;   color: rgba(0,0,0,.6);      opacity: 0.75; transform: scale(0.95); }
.kc-rtimeline__nav a.is-near-2 { font-size: 15px;   color: var(--kc-rt-muted);  opacity: 0.55; transform: scale(0.88); }
.kc-rtimeline__nav a.is-far    { font-size: 14.5px; color: var(--kc-rt-muted);  opacity: 0.28; transform: scale(0.78); }

/* -------------------------------------------------------
   Content column
------------------------------------------------------- */
.kc-rtimeline__section { min-width: 0; }

.kc-rtimeline__item {
  padding:           32px 0;
  border-bottom:     1px solid var(--kc-rt-border);
  scroll-margin-top: 120px;
}
.kc-rtimeline__item:last-child { border-bottom: none; }

/* Desktop: accordion button acts as a static header */
.kc-rtimeline__acc-btn {
  display:    block;
  width:      100%;
  text-align: left;
  padding:    0;
  border:     0;
  background: transparent;
  cursor:     default;
}
.kc-rtimeline__acc-btn .kc-rtimeline__acc-icon { display: none; }

.kc-rtimeline__acc-labels { display: block; margin-bottom: 12px; }

.kc-rtimeline__acc-year {
  display:     block;
  font-family: var(--kc-rt-font);
  font-size:   10px;
  font-weight: 800;
  line-height: 1.1;
  color:       var(--kc-rt-muted);
  margin:      0 0 4px;
}

.kc-rtimeline__acc-title {
  display:     block;
  font-size:   42px;
  font-family: var(--kc-rt-font);
  font-weight: 700;
  color:       #111;
  margin:      0;
}

/* Sub headline */
.kc-rtimeline__sub-headline {
  margin:         0 0 16px;
  font-family:    var(--kc-rt-font);
  font-size:      13px;
  font-weight:    600;
  line-height:    1.4;
  color:          var(--kc-rt-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Panel always visible on desktop */
.kc-rtimeline__acc-panel { overflow: visible; height: auto; }

.kc-rtimeline__milestone { display: none; }

.kc-rtimeline__title {
  margin:      0 0 12px;
  font-size:   0 !important;
  line-height: 1.35;
  color:       #111;
  font-weight: 700;
}

/* -------------------------------------------------------
   Item inner wrapper — layout classes drive the grid
------------------------------------------------------- */
.kc-rtimeline__item-inner {
  display: block; /* fallback; overridden per layout */
}

/* ---- layout-image-left / layout-image-right ---- */
.kc-rtimeline__item.layout-image-left  .kc-rtimeline__item-inner,
.kc-rtimeline__item.layout-image-right .kc-rtimeline__item-inner {
  display:     flex;
  align-items: start;
  gap:         32px;
}

/* Image left: media first, text second (default DOM order) */
.kc-rtimeline__item.layout-image-left .kc-rtimeline__media  { order: 1; }
.kc-rtimeline__item.layout-image-left .kc-rtimeline__content { order: 2; }

/* Image right: flip the order */
.kc-rtimeline__item.layout-image-right .kc-rtimeline__media  { order: 2; }
.kc-rtimeline__item.layout-image-right .kc-rtimeline__content { order: 1; }

/* Both side-by-side layouts: single image gets a fixed column width */
.kc-rtimeline__item.layout-image-left  .kc-rtimeline__media,
.kc-rtimeline__item.layout-image-right .kc-rtimeline__media {
  flex: 0 0 280px;
  max-width: 280px;
}
.kc-rtimeline__item.layout-image-left  .kc-rtimeline__content,
.kc-rtimeline__item.layout-image-right .kc-rtimeline__content {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- layout-image-top / layout-image-bottom ---- */
.kc-rtimeline__item.layout-image-top    .kc-rtimeline__item-inner,
.kc-rtimeline__item.layout-image-bottom .kc-rtimeline__item-inner {
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

.kc-rtimeline__item.layout-image-bottom .kc-rtimeline__media  { order: 2; }
.kc-rtimeline__item.layout-image-bottom .kc-rtimeline__content { order: 1; }

/* ---- layout-gallery ---- */
.kc-rtimeline__item.layout-gallery .kc-rtimeline__item-inner {
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

.kc-rtimeline__item.layout-gallery .kc-rtimeline__media {
  display:               grid;
  grid-template-columns: repeat(var(--kc-rt-gallery-cols), 1fr);
  gap:                   var(--kc-rt-gallery-gap);
}

/* ---- layout-text-only ---- */
.kc-rtimeline__item.layout-text-only .kc-rtimeline__item-inner {
  display: block;
}

/* -------------------------------------------------------
   Media wrappers and images
------------------------------------------------------- */
.kc-rtimeline__media { min-width: 0; }

.kc-rtimeline__media-item { min-width: 0; }

.kc-rtimeline__media-item img,
.kc-rtimeline__img {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: var(--kc-rt-img-r, 5px);
  object-fit:    cover;
}

/* Side-by-side layouts: cap image height so tall portrait images don't dominate */
.kc-rtimeline__item.layout-image-left  .kc-rtimeline__img,
.kc-rtimeline__item.layout-image-right .kc-rtimeline__img {
  max-height: 360px;
}

/* Gallery: fixed-height cells showing the full image without cropping.
   object-fit:contain fits the whole image; background fills letterbox gaps. */
.kc-rtimeline__item.layout-gallery .kc-rtimeline__media-item {
  background:    rgba(0,0,0,.04);
  border-radius: 8px;
  overflow:      hidden;
}
.kc-rtimeline__item.layout-gallery .kc-rtimeline__media-item img {
  height:          260px;
  object-fit:      cover;
  object-position: center center;
  border-radius:   0;
  margin-bottom: 0;
}

/* Stack multiple images in side layouts */
.kc-rtimeline__item.layout-image-left  .kc-rtimeline__media,
.kc-rtimeline__item.layout-image-right .kc-rtimeline__media {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* -------------------------------------------------------
   Content column text
------------------------------------------------------- */
.kc-rtimeline__content > :first-child { margin-top:    0; }
.kc-rtimeline__content > :last-child  { margin-bottom: 0; }

/* -------------------------------------------------------
   Bottom fade gradient on the content column.
   Only rendered when .has-fade is present on .kc-rtimeline
   (controlled by the 'Show Bottom Fade Overlay' setting).
   Color driven by --kc-rt-fade-rgb (R,G,B components).
------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .kc-rtimeline.has-fade .kc-rtimeline__section::after {
    content:        "";
    height:         40vh;
    width:          80%;
    top:            60vh;
    right:          0;
    background:     linear-gradient(
                      180deg,
                      rgba(var(--kc-rt-fade-rgb, 255,255,255), 0)    1%,
                      rgba(var(--kc-rt-fade-rgb, 255,255,255), 0.8) 48%,
                      rgba(var(--kc-rt-fade-rgb, 255,255,255), 1)   99%
                    );
    position:       fixed;
    pointer-events: none;
  }
}

/* =====================================================
   Mobile — accordion (≤ 767px)
   ===================================================== */
@media (max-width: 767px) {

  .kc-rtimeline { padding-left: 0; }

  .kc-rtimeline__nav,
  .kc-rtimeline__nav.is-fixed,
  .kc-rtimeline__nav.is-bottom {
    display:  none !important;
    position: static;
  }

  .kc-rtimeline__item {
    padding:       0;
    border-bottom: 1px solid var(--kc-rt-border);
  }

  /* Make accordion button interactive on mobile */
  .kc-rtimeline__acc-btn {
    width:           100%;
    text-align:      left;
    padding:         14px 0;
    border:          0;
    background:      transparent;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
  }
  .kc-rtimeline__acc-btn:focus-visible { outline: 2px solid rgba(0,0,0,.25); outline-offset: 4px; }

  .kc-rtimeline__acc-btn .kc-rtimeline__acc-icon {
    display:       flex;
    flex:          0 0 auto;
    width:         22px;
    height:        22px;
    border-radius: 999px;
    border:        2px solid var(--kc-rt-border);
    position:      relative;
  }

  .kc-rtimeline__acc-icon::before,
  .kc-rtimeline__acc-icon::after {
    content:    '';
    position:   absolute;
    left:       50%;
    top:        50%;
    width:      10px;
    height:     2px;
    background: var(--kc-rt-muted);
    transform:  translate(-50%,-50%);
  }
  .kc-rtimeline__acc-icon::after {
    transform: translate(-50%,-50%) rotate(90deg);
    transition: opacity .2s;
  }

  .kc-rtimeline__acc-btn[aria-expanded="true"] .kc-rtimeline__acc-icon { border-color: var(--kc-rt-accent); }
  .kc-rtimeline__acc-btn[aria-expanded="true"] .kc-rtimeline__acc-icon::before,
  .kc-rtimeline__acc-btn[aria-expanded="true"] .kc-rtimeline__acc-icon::after { background: var(--kc-rt-accent); }
  .kc-rtimeline__acc-btn[aria-expanded="true"] .kc-rtimeline__acc-icon::after { opacity: 0; }

  .kc-rtimeline__acc-year  { font-size: 20px; font-weight: 800; line-height: 1.15; color: #111; margin: 0 0 3px; }
  .kc-rtimeline__acc-title { font-size: 13px; font-weight: 700; color: var(--kc-rt-muted); margin: 0; }

  .kc-rtimeline__sub-headline { font-size: 12px; margin-bottom: 12px; }

  .kc-rtimeline__acc-panel       { overflow: hidden; height: 0; transition: height 220ms ease; }
  .kc-rtimeline__acc-panel-inner { padding-bottom: 18px; }
  .kc-rtimeline__milestone,
  .kc-rtimeline__title           { display: none; }

  /* All mobile layouts: stack vertically */
  .kc-rtimeline__item.layout-image-left  .kc-rtimeline__item-inner,
  .kc-rtimeline__item.layout-image-right .kc-rtimeline__item-inner {
    flex-direction: column;
  }

  .kc-rtimeline__item.layout-image-left  .kc-rtimeline__media,
  .kc-rtimeline__item.layout-image-right .kc-rtimeline__media,
  .kc-rtimeline__item.layout-image-left  .kc-rtimeline__content,
  .kc-rtimeline__item.layout-image-right .kc-rtimeline__content {
    order:     unset;
    flex:      unset;
    max-width: 100%;
    width:     100%;
  }

  /* Gallery: single column on mobile */
  .kc-rtimeline__item.layout-gallery .kc-rtimeline__media {
    grid-template-columns: 1fr;
  }

  /* All images full-width on mobile — no fixed columns, no max-height caps */
  .kc-rtimeline__media,
  .kc-rtimeline__media-item {
    width:     100%;
    max-width: 100%;
    flex:      unset;
  }

  .kc-rtimeline__img,
  .kc-rtimeline__media-item img {
    width:      100% !important;
    max-width:  100% !important;
    max-height: none !important;
    height:     auto !important;
  }

  /* Lightbox links also full-width */
  .kc-rtimeline__lightbox-link {
    width: 100%;
    display: block;
  }
}

/* =====================================================
   WPBakery backend editor
   ===================================================== */
.vc_editor .kc-rtimeline { padding-left: 0; display: block; }
.vc_editor .kc-rtimeline__nav { display: none; }
.vc_editor .kc-rtimeline__acc-panel { height: auto !important; overflow: visible; }

/* -------------------------------------------------------
   Lightbox link hover affordance
------------------------------------------------------- */
.kc-rtimeline__lightbox-link {
  display:  block;
  position: relative;
  overflow: hidden;
  cursor:   zoom-in;
}

.kc-rtimeline__lightbox-link img {
  transition: transform 300ms ease, opacity 300ms ease;
}

.kc-rtimeline__lightbox-link:hover img {
  transform: scale(1.03);
  opacity:   0.85;
}

.kc-rtimeline__lightbox-link::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E")
                  center / 32px no-repeat;
  opacity:        0;
  transition:     opacity 250ms ease;
  pointer-events: none;
}

.kc-rtimeline__lightbox-link:hover::after { opacity: 1; }

/* -------------------------------------------------------
   Self-contained lightbox overlay
------------------------------------------------------- */
#kc-rt-lb-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         999999;
  background:      rgba(0,0,0,.92);
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             16px;
}

#kc-rt-lb-overlay.kc-rt-lb-open {
  display: flex;
}

.kc-rt-lb-imgwrap {
  max-width:  90vw;
  max-height: 80vh;
  display:    flex;
  align-items: center;
  justify-content: center;
}

.kc-rt-lb-img {
  max-width:      90vw;
  max-height:     80vh;
  width:          auto;
  height:         auto;
  object-fit:     contain;
  border-radius:  4px;
  opacity:        0;
  transition:     opacity 250ms ease;
  display:        block;
}

.kc-rt-lb-img.kc-rt-lb-loaded { opacity: 1; }

.kc-rt-lb-caption {
  color:       rgba(255,255,255,.75);
  font-size:   13px;
  margin:      0;
  max-width:   80vw;
  text-align:  center;
  line-height: 1.4;
  min-height:  1em;
}

.kc-rt-lb-close,
.kc-rt-lb-prev,
.kc-rt-lb-next {
  position:   absolute;
  background: rgba(255,255,255,.12);
  border:     none;
  cursor:     pointer;
  color:      #fff;
  border-radius: 999px;
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease;
  padding:    0;
  line-height: 1;
}

.kc-rt-lb-close:hover,
.kc-rt-lb-prev:hover,
.kc-rt-lb-next:hover { background: rgba(255,255,255,.28); }

.kc-rt-lb-close {
  top:    16px;
  right:  16px;
  width:  40px;
  height: 40px;
}

.kc-rt-lb-close svg,
.kc-rt-lb-prev svg,
.kc-rt-lb-next svg {
  width:  22px;
  height: 22px;
  display: block;
}

.kc-rt-lb-prev,
.kc-rt-lb-next {
  top:       50%;
  transform: translateY(-50%);
  width:     48px;
  height:    48px;
}

.kc-rt-lb-prev { left:  12px; }
.kc-rt-lb-next { right: 12px; }

@media (max-width: 767px) {
  .kc-rt-lb-prev { left:  4px; }
  .kc-rt-lb-next { right: 4px; }
  .kc-rt-lb-prev,
  .kc-rt-lb-next { width: 36px; height: 36px; }
}