/* =========================================================
  🧩 WRAPPER
========================================================= */
.sec-am-timeline { padding: 0 0 var(--section-padding) 0; position:relative; margin-top:-1px; }

.sec-am-timeline::before { height:100%; width:100%; }
.sec-am-timeline::before { content:""; position:absolute; top:0; left:0; }
.sec-am-timeline::after { content:"";  position:absolute; inset:0; width:100%; height:calc(100%); left: 50%; top:0; }



.sec-am-timeline::before { background: var(--section-bg); opacity:1.0; z-index:-2; }

.section.sec-am-timeline::after { background: linear-gradient(180deg, color-mix(in srgb, var(--base-color-black) 100%, transparent) 20%, color-mix(in srgb, var(--color-black-700) 90%, transparent) 100%); /* background: var( --bg-special2);

 border-radius:50%; filter:blur(90px);*/ transform: translateX(-50%); z-index:-1; transition: height var(--transition-time) ease; opacity:0.65; }
.sec-am-timeline .wrapped { display:flex; flex-direction:column; width:100%; padding:0 var(--wrapper-padding); }

.sec-am-timeline .wrapped .section-content { display:flex; flex-direction:column; gap:var(--section-gap); margin-right:0; width:100%; }


/* =========================================================
  🧩 TIMELINE ELEMENTS
========================================================= */

.sec-am-timeline .timeline-section { padding:calc(2.0 * var(--box-padding)) var(--box-padding); padding-bottom: 0; padding-right: 0; max-width:100%; margin:0 auto; position:relative; }

.sec-am-timeline .timeline-section { display:flex; flex-direction:column; gap:calc(var(--section-gap)) }


.sec-am-timeline .timeline-section .timeline-wrapper { 
  position:relative; width:100%; touch-action: pan-x; -ms-touch-action: pan-x; 
    overflow-x: auto;   /* było: overflow: visible */
  overflow-y: hidden;
  scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-top:-24px; padding-top:24px;}


.timeline-wrapper {
  overflow-x: scroll;       /* scroll działa */
  scrollbar-width: none;    /* Firefox */
}
.timeline-wrapper::-webkit-scrollbar {
  display: none;            /* Chrome, Safari */
}










/* === TRACK + LINIA (desktop/tablet poziomo) === */
.sec-am-timeline .timeline-section .timeline-track { position:relative; display:flex; transition:var(--transition); 
  overflow:visible; width:100%; gap:calc( 2.5 * var(--box-gap)); z-index:1; will-change: auto; touch-action: auto; }

/* track timeline'a
.sec-am-timeline .timeline-section .timeline-track::before {
  content:""; position:absolute; top:0px; left:60px; right:0; height:2px; background:var(--color-black-200); z-index:0; width:100%; display:none; }
 */

    /* === EVENT + KROPKA === */
.sec-am-timeline .timeline-section .node-event { width: 420px; padding-top:50px; box-sizing:border-box; position:relative; }
      /*opacity:0.4; flex:0 0 80%; min-width:80%; transition:opacity 0.3s; */


/* zapobiegamy zaznaczaniu tekstu podczas drag */
.timeline-wrapper, .timeline-track, .node-event {  scroll-snap-align: start;
/*  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none; */
}


.sec-am-timeline .timeline-section .node-event.active { /*opacity:1;*/ }

.sec-am-timeline .timeline-section .node-event ul { display:flex; flex-direction:column; gap:var(--elements-gap-s);  }

.sec-am-timeline .timeline-section .node-event ul li { color:var(--section-text-secondary); } 

.sec-am-timeline .timeline-section .node-event .list--style-disc li:before { top: 8px; }


.section.sec-am-timeline .timeline-section .h2.year,
.sec-am-timeline .timeline-section .year { display:inline-flex; line-height: 100%; width:auto; margin-bottom:1rem; }

.timeline-track .dynamic-line {
  position:absolute;
  top:0;
  height:2px;
  background:color-mix(in srgb, var(--color-black-100) 12%, transparent);

  z-index:0;
  transition:var(--transition); touch-action: pan-x;
}

.node-event { z-index: 10; position:relative; }

    .node-event::before {
      content:"";
      width:24px;
      height:24px;
      border-radius:50%;
      position:absolute;
      top:0px;
      left:60px;
      transform:translate(-50%, -50%);
      background: center / 12px 12px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5'/></svg>"), var(--base-color-green); /*var(--gradient-cta)*/
      z-index: 9999; opacity:1;
    }





/* =========================================================
  🧩 WRAPPER
========================================================= */





    :root {
      --fg:#0f1113;
      --dot:#12c06a;
      --transition:0.35s ease;
    }










    






    /* === STRZAŁKI === */
    .arrow {
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      background:#000c;
      backdrop-filter:blur(4px);
      border:none;
      color:#fff;
      font-size:2rem;
      width:48px;
      height:48px;
      display:flex;
      justify-content:center;
      align-items:center;
      cursor:pointer;
      z-index:20;
      border-radius:50%;
      opacity:0.85;
    }

    .arrow.disabled {
      opacity:0.25;
      pointer-events:none;
    }

    .arrow.left { left:0; }
    .arrow.right { right:0; }

    /* === RWD — tablet / desktop === */
    @media (min-width:700px) {
      /*.node-event { flex:0 0 50%; min-width:50%; } */
    }

    @media (min-width:1000px) {
      /*.node-event { flex:0 0 33%; min-width:33%; }*/
    }

    /* ============================================
       🔥 MOBILE — pionowy timeline (bez slidera)
       ============================================ */
    @media (max-width:699px) {

      .arrow {
        display:none !important;
      }


      .timeline-track {
        display:block;
        transform:none !important;
      }

      /* pionowa linia */
      .timeline-track::before {
        top:0;
        left:20px;
        width:4px;
        height:100%;
        right:auto;
      }

      .node-event {
        position:relative;
        padding-left:60px;
        padding-top:0;
        padding-bottom:3rem;
        margin:0;
        min-width:100%;
        flex:none;
        opacity:1 !important;  z-index: 10;
      }

      .node-event::before {
        left:20px;
        top:0;
        transform:translate(-50%, 0);
      }

      /* pierwszy event */
      .node-event:first-child::before {
        top:0;
      }

      /* ostatni event — kropka na dole */
      .node-event:last-child::before {
        top:auto;
        bottom:0;
        transform:translate(-50%, 50%);
      }

      .year {
        font-size:2.2rem;
      }
    }



/* dots */
.sec-am-timeline .timeline-section nav { display:flex; align-items: flex-end; justify-content: flex-end; width:100%; margin:0; order:2; padding: 0 var(--wrapper-padding); }
.sec-am-timeline .timeline-section nav .buttons { display:flex; flex-direction:row; flex:0; gap:calc(var(--section-gap)/4); width: 100%; align-items:flex-end; margin: 0; justify-content: flex-end; }

/* navigation - prev/next */
.sec-reviews .reviews .reviews-nav { position: absolute; top: 0; bottom: 0; width: var(--reviews-nav-width); display: flex; align-items: center; justify-content: center; pointer-events:none; z-index: 2; }
.sec-reviews .reviews .reviews-nav button { pointer-events:auto; border:none; cursor:pointer; z-index:3; }
.sec-reviews .reviews .reviews-nav button svg { height:24px;width:24px; }
.sec-reviews .reviews .reviews-nav--left { left: var(--space-4); height:100%; max-width:48px; }
.sec-reviews .reviews .reviews-nav--right { right: var(--space-4); height:100%; max-width:48px; }


/* =========================================================
  🧩 RWD
========================================================= */
@media (min-width: 1px) and (max-width: 480px) {
  .sec-am-timeline .timeline-section .node-event ul br { display:none; }
}

@media (min-width: 1px) and (max-width: 640px) {
  .sec-am-timeline .timeline-section .node-event { max-width:340px; width:100%; }
  .sec-am-timeline .timeline-section nav { justify-content:center; }
  .sec-am-timeline .timeline-section .node-event ul br { display:none; }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .sec-am-timeline .timeline-section .node-event { width:100%; max-width:380px; min-width:320px; text-align:left; }
}

@media (min-width: 1px) and (max-width: 699px) {
  .sec-am-timeline .timeline-section .timeline-track { gap: calc(2.5 * var(--box-gap)); flex-direction: column; max-width: 480px; margin: auto;}
  .sec-am-timeline .timeline-section .node-event { padding-top:0px; padding-bottom: 0; }
  .sec-am-timeline .timeline-section .node-event::before { top:5px; }
  .sec-am-timeline .timeline-track .dynamic-line { margin-top:5px; }
  .sec-am-timeline .timeline-section .node-event ul { width: 95%; max-width:390px; }
  .sec-am-timeline .timeline-section nav { display:none; }
  .sec-am-timeline .timeline-wrapper { touch-action: auto !important; overflow-y: auto !important; overflow-x: hidden !important; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .sec-am-timeline .timeline-section .node-event { width:100%; max-width:390px; min-width:360px; text-align:left; }
}

@media (min-width: 1200px) {
  .sec-am-timeline .wrapped { max-width:var(--width-wrap-1400); }
  /*.sec-am-timeline .section-content {  max-width:var(--width-wrap-1400); margin:auto; } */
  .sec-am-timeline .timeline-section { width:calc(1400px + ((100vw - 1400px) / 2)); margin-right:0; }
  .sec-am-timeline .timeline-section nav { width:100vw; max-width:var(--width-wrap-1400); }

  .sec-am-timeline .timeline-section .node-event { width:400px;  min-width:400px; text-align:left; }
}