/* ==========================================================
   420CreaStack Core Pro · Timeline interactivo widget · RC12
   Elementor Free compatible
   ========================================================== */

.cs420-scroll-timeline--widget{
  --cs420-tl-section-bg:#FBF8F2;
  --cs420-tl-accent:#C96F53;
  --cs420-tl-line:#DED2C6;
  --cs420-tl-line-width:2px;
  --cs420-tl-node-size:38px;
  --cs420-tl-node-offset:30px;
  --cs420-tl-node-bg:#FFFEFB;
  --cs420-tl-node-border:#D2BEB0;
  --cs420-tl-node-text:#6F805D;
  --cs420-tl-node-active-text:#FFFFFF;
  --cs420-tl-cursor-size:24px;
  --cs420-tl-rail-width:72px;
  --cs420-tl-copy-width:70%;
  --cs420-tl-step-gap:20px;
  --cs420-tl-media-min-height:300px;
  --cs420-tl-card-bg:#FFFEFB;
  --cs420-tl-card-border:#E7E0D6;
  --cs420-tl-card-active-border:#D9B3A2;
  --cs420-tl-card-radius:18px;
  --cs420-tl-media-bg:#F3E9DB;
  --cs420-tl-media-radius:16px;
  --cs420-tl-icon:#B68B72;
  --cs420-tl-icon-size:56px;

  position:relative;
  width:100%;
  background:var(--cs420-tl-section-bg);
  overflow:visible;
}

.cs420-scroll-timeline--widget,
.cs420-scroll-timeline--widget *{
  box-sizing:border-box;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__step{
  position:relative;
  display:flex;
  width:100%;
  align-items:stretch;
  overflow:visible;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__rail{
  position:relative;
  flex:0 0 var(--cs420-tl-rail-width);
  width:var(--cs420-tl-rail-width);
  min-width:var(--cs420-tl-rail-width);
  overflow:visible;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__line{
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:50%;
  width:var(--cs420-tl-line-width);
  margin-left:calc(var(--cs420-tl-line-width) / -2);
  border-radius:999px;
  background:var(--cs420-tl-line);
  pointer-events:none;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__step:first-child .cs420-scroll-timeline__line{
  top:var(--cs420-tl-node-offset);
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__step:last-child .cs420-scroll-timeline__line{
  bottom:calc(100% - var(--cs420-tl-node-offset));
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__node{
  position:absolute;
  z-index:4;
  top:var(--cs420-tl-node-offset);
  left:50%;
  width:var(--cs420-tl-node-size);
  height:var(--cs420-tl-node-size);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--cs420-tl-node-border);
  border-radius:999px;
  color:var(--cs420-tl-node-text);
  background:var(--cs420-tl-node-bg);
  box-shadow:0 5px 16px rgba(96,66,51,.08);
  transform:translate(-50%,-50%);
  transform-origin:center;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    color .18s ease;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__node-number{
  display:block;
  margin:0;
  padding:0;
  color:inherit;
  font-family:Inter,Arial,sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:700;
  text-align:center;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__cardcol{
  min-width:0;
  flex:1 1 auto;
  width:calc(100% - var(--cs420-tl-rail-width));
  padding:0 0 var(--cs420-tl-step-gap);
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__step:last-child .cs420-scroll-timeline__cardcol{
  padding-bottom:0;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__card{
  position:relative;
  display:flex;
  flex-direction:row;
  width:100%;
  align-items:stretch;
  overflow:hidden;
  background:var(--cs420-tl-card-bg);
  border:1px solid var(--cs420-tl-card-border);
  border-radius:var(--cs420-tl-card-radius);
  box-shadow:0 14px 38px -32px rgba(74,59,44,.15);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__step.is-media-left .cs420-scroll-timeline__card{
  flex-direction:row-reverse;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:var(--cs420-tl-copy-width);
  min-width:0;
  padding:26px 28px;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__media{
  position:relative;
  display:flex;
  width:calc(100% - var(--cs420-tl-copy-width));
  min-width:0;
  min-height:var(--cs420-tl-media-min-height);
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:10px;
  background:var(--cs420-tl-media-bg);
  border-radius:var(--cs420-tl-media-radius);
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__step.is-no-media .cs420-scroll-timeline__copy{
  width:100%;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__date{
  margin:0 0 8px;
  color:var(--cs420-tl-accent);
  font-family:Inter,Arial,sans-serif;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__title{
  margin:0 0 12px;
  color:#30392E;
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-size:31px;
  line-height:1.14;
  font-weight:500;
  letter-spacing:-.012em;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__body{
  color:#4B5148;
  font-family:Inter,Arial,sans-serif;
  font-size:14.2px;
  line-height:1.70;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__body p{
  margin:0 0 .72em;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__body p:last-child{
  margin-bottom:0;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cs420-tl-icon);
  fill:var(--cs420-tl-icon);
  font-size:var(--cs420-tl-icon-size);
  line-height:1;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__icon svg{
  width:1em;
  height:1em;
  fill:currentColor;
}

.cs420-scroll-timeline--widget .cs420-scroll-timeline__image{
  display:block;
  width:100%;
  height:100%;
  min-height:var(--cs420-tl-media-min-height);
  object-fit:cover;
  object-position:center;
  border-radius:var(--cs420-tl-media-radius);
}

/* Runtime elements also receive inline styles from JS so LiteSpeed UCSS
   cannot break the active state. These base rules are editor-friendly. */
.cs420-scroll-timeline--widget > .cs420-scroll-timeline__runtime-progress{
  position:absolute;
  z-index:30;
  width:calc(var(--cs420-tl-line-width) + 1px);
  height:0;
  border-radius:999px;
  background:var(--cs420-tl-accent);
  pointer-events:none;
}

.cs420-scroll-timeline--widget > .cs420-scroll-timeline__runtime-cursor{
  position:absolute;
  z-index:32;
  width:var(--cs420-tl-cursor-size);
  height:var(--cs420-tl-cursor-size);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:var(--cs420-tl-node-active-text);
  background:var(--cs420-tl-accent);
  border:4px solid var(--cs420-tl-section-bg);
  font:800 7px/1 Inter,Arial,sans-serif;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  .cs420-scroll-timeline--widget .cs420-scroll-timeline__card:hover{
    transform:translateY(-2px);
  }
}

@media (max-width:1024px){
  .cs420-scroll-timeline--widget .cs420-scroll-timeline__title{
    font-size:27px;
  }

  .cs420-scroll-timeline--widget .cs420-scroll-timeline__node-number{
    font-size:11px;
  }
}

@media (max-width:767px){
  .cs420-scroll-timeline--widget .cs420-scroll-timeline__title{
    font-size:23px;
  }

  .cs420-scroll-timeline--widget .cs420-scroll-timeline__body{
    font-size:13.7px;
    line-height:1.65;
  }

  .cs420-scroll-timeline--widget .cs420-scroll-timeline__node-number{
    font-size:10px;
  }

  .cs420-scroll-timeline--widget.cs420-scroll-timeline--mobile-stacked .cs420-scroll-timeline__card,
  .cs420-scroll-timeline--widget.cs420-scroll-timeline--mobile-stacked .cs420-scroll-timeline__step.is-media-left .cs420-scroll-timeline__card{
    flex-direction:column;
  }

  .cs420-scroll-timeline--widget.cs420-scroll-timeline--mobile-stacked .cs420-scroll-timeline__copy,
  .cs420-scroll-timeline--widget.cs420-scroll-timeline--mobile-stacked .cs420-scroll-timeline__media{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .cs420-scroll-timeline--widget .cs420-scroll-timeline__node,
  .cs420-scroll-timeline--widget .cs420-scroll-timeline__card{
    transition:none !important;
  }
}