/* Vecco Timeline front styles */
/* Original style: no special width/padding/mask needed. */

/* Centered style (scoped) */
.vecco-timeline.is-centered{
  /* container width and horizontal padding */
  width: var(--vtl-width, 90%);
  margin: 0 auto;
  overflow: hidden;
  padding: 0 var(--vtl-pad-desktop, 60px);
  box-sizing: border-box;
  /* default fade strength (overridden per breakpoint below) */
  --vtl-edge-fade-current: var(--vtl-fade-desktop, 22px);
}
@media (max-width:992px){
  .vecco-timeline.is-centered{
    width: var(--vtl-width-tablet, 94%);
    padding: 0 var(--vtl-pad-tablet, 40px);
    --vtl-edge-fade-current: var(--vtl-fade-tablet, 18px);
  }
}
@media (max-width:768px){
  .vecco-timeline.is-centered{
    width: var(--vtl-width-mobile, 96%);
    padding: 0 var(--vtl-pad-mobile, 16px);
    --vtl-edge-fade-current: var(--vtl-fade-mobile, 14px);
  }
}
/* Bleed the track under the container padding to avoid hard cut at edges */
.vecco-timeline.is-centered .vecco-tl-track{
  margin: 0 calc(var(--vtl-pad-desktop, 60px) * -1);
  padding: 0 var(--vtl-pad-desktop, 60px);
}
@media (max-width:992px){ .vecco-timeline.is-centered .vecco-tl-track{ margin:0 calc(var(--vtl-pad-tablet,40px)*-1); padding:0 var(--vtl-pad-tablet,40px); } }
@media (max-width:768px){ .vecco-timeline.is-centered .vecco-tl-track{ margin:0 calc(var(--vtl-pad-mobile,16px)*-1); padding:0 var(--vtl-pad-mobile,16px); } }
/* Subtle mask fade to hide hard cuts at the extreme edges while scrolling */
.vecco-timeline.is-centered .vecco-tl-track{
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) var(--vtl-edge-fade-current), rgba(0,0,0,1) calc(100% - var(--vtl-edge-fade-current)), rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) var(--vtl-edge-fade-current), rgba(0,0,0,1) calc(100% - var(--vtl-edge-fade-current)), rgba(0,0,0,0) 100%);
}

/* Centered (no fade): keep centered layout but remove edge mask */
.vecco-timeline.is-centered.no-fade .vecco-tl-track{
  -webkit-mask-image: none;
  mask-image: none;
}

/* Original style: use horizontal margins driven by settings */
.vecco-timeline:not(.is-centered) .vecco-tl-track{ margin: 0 var(--vtl-orig-m-desktop, 30px); padding-left:0; padding-right:0; }
@media (max-width:992px){ .vecco-timeline:not(.is-centered) .vecco-tl-track{ margin: 0 var(--vtl-orig-m-tablet, 24px); } }
@media (max-width:768px){ .vecco-timeline:not(.is-centered) .vecco-tl-track{ margin: 0 var(--vtl-orig-m-mobile, 16px); } }

/* Full width style: edge-to-edge with optional safe-area gutters */
.vecco-timeline.is-fullwidth{
  width: 100%;
  margin: 0;
  padding: 0 var(--vtl-fw-safe-desktop, 0px);
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width:992px){
  .vecco-timeline.is-fullwidth{ padding: 0 var(--vtl-fw-safe-tablet, 0px); }
}
@media (max-width:768px){
  .vecco-timeline.is-fullwidth{ padding: 0 var(--vtl-fw-safe-mobile, 0px); }
}
/* Ensure track does not inherit original margins when fullwidth is active */
.vecco-timeline.is-fullwidth .vecco-tl-track{ margin: 0; padding-left:0; padding-right:0; }
/* Edge-to-edge content: trim inner item paddings at the extremes */
.vecco-timeline.is-fullwidth .vecco-tl-item:first-child{ padding-left:0; }
.vecco-timeline.is-fullwidth .vecco-tl-item:last-child{ padding-right:0; }
/* No fade mask in full width mode */
.vecco-timeline.is-fullwidth .vecco-tl-track{ -webkit-mask-image:none; mask-image:none; }

/* Custom scrollbar (Swiper-like) */
.vecco-timeline .vecco-scrollbar{ position:relative; height:6px; border-radius:6px; background:rgba(255,255,255,.15); margin:20px auto 0; overflow:hidden; width:clamp(180px, 42%, 560px) }
.vecco-timeline .vecco-scrollbar-horizontal{ width:clamp(180px, 42%, 560px) }
.vecco-timeline .vecco-scrollbar .vecco-scrollbar-drag{ position:absolute; left:0; top:0; height:100%; width:40px; border-radius:6px; background:rgba(255,255,255,.5); transition:background .15s ease }
.vecco-timeline .vecco-scrollbar:hover .vecco-scrollbar-drag{ background:rgba(255,255,255,.7) }
/* Dark backgrounds support */
.vecco-timeline{ --vtl-scrollbar-track: rgba(255,255,255,.15); --vtl-scrollbar-thumb: rgba(255,255,255,.55); }
.vecco-timeline .vecco-scrollbar{ background: var(--vtl-scrollbar-track); }
.vecco-timeline .vecco-scrollbar .vecco-scrollbar-drag{ background: var(--vtl-scrollbar-thumb); }
@media (max-width:560px){
  .vecco-timeline .vecco-scrollbar,
  .vecco-timeline .vecco-scrollbar-horizontal{ width:clamp(140px, 52%, 320px); margin:14px auto 0; }
}
.vecco-timeline .vecco-tl-track{ display:flex; gap:0; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.vecco-timeline .vecco-tl-track::-webkit-scrollbar{ display:none; }

/* Item sizing: 6 per view on desktop, responsive down (scoped to plugin class) */
.vecco-timeline .vecco-tl-item{ flex:0 0 calc(100%/var(--vtl-items-desktop, 6)); max-width:calc(100%/var(--vtl-items-desktop, 6)); box-sizing:border-box; text-align:center; padding:10px var(--vtl-item-pad-desktop, 12px); }
@media (max-width:1200px){ .vecco-timeline .vecco-tl-item{ flex-basis:calc(100%/5); max-width:calc(100%/5); } }
@media (max-width:992px){ .vecco-timeline .vecco-tl-item{ flex-basis:calc(100%/4); max-width:calc(100%/4); } }
@media (max-width:768px){ .vecco-timeline .vecco-tl-item{ flex-basis:calc(100%/var(--vtl-items-mobile, 2)); max-width:calc(100%/var(--vtl-items-mobile, 2)); } }
@media (max-width:768px){ .vecco-timeline .vecco-tl-track{ gap:0; } }
@media (max-width:768px){ .vecco-timeline .vecco-tl-endpad{ display:none !important; flex:0 0 0 !important; width:0 !important; max-width:0 !important; } }

/* Pin/icon */
.vecco-timeline .vecco-tl-pin{ display:flex; align-items:center; justify-content:center; margin: 0 auto 10px; line-height:0; }
.vecco-timeline .vecco-tl-pin img{ max-width:72px; height:auto; display:block; }
.vecco-timeline .vecco-tl-pin .vecco-tl-svg{ display:inline-block; width:72px; height:auto; line-height:0; color:inherit; }
.vecco-timeline .vecco-tl-pin .vecco-tl-svg svg{ display:block; width:100%; height:auto; stroke:currentColor; }

/* Text */
.vecco-timeline .vecco-tl-year{ font-weight:700; margin-bottom:6px; letter-spacing:0.015em; }
.vecco-timeline .vecco-tl-title{ font-weight:600; margin-bottom:4px; font-size:1.05em; }
.vecco-timeline .vecco-tl-desc{ color:#444; opacity:0.95; font-size:0.95em; line-height:1.45; }
/* Wrap long words nicely */
.vecco-timeline .vecco-tl-title, .vecco-timeline .vecco-tl-desc{ word-break:break-word; overflow-wrap:anywhere; hyphens:auto; }

/* Separator column; width controlled by CSS variables from settings */
.vecco-timeline .vecco-tl-sep{ position:relative; flex:0 0 var(--vtl-sep-desktop, 128px) !important; max-width:var(--vtl-sep-desktop, 128px) !important; width:var(--vtl-sep-desktop, 128px) !important; align-self:stretch; }
@media (max-width:1200px){ .vecco-timeline .vecco-tl-sep{ flex-basis:var(--vtl-sep-desktop, 128px) !important; max-width:var(--vtl-sep-desktop, 128px) !important; width:var(--vtl-sep-desktop, 128px) !important; } }
@media (max-width:992px){ .vecco-timeline .vecco-tl-sep{ flex-basis:var(--vtl-sep-desktop, 128px) !important; max-width:var(--vtl-sep-desktop, 128px) !important; width:var(--vtl-sep-desktop, 128px) !important; } }
/* Mobile: use mobile variable */
@media (max-width:768px){ .vecco-timeline .vecco-tl-sep{ display:block; flex-basis:var(--vtl-sep-mobile, 16px) !important; max-width:var(--vtl-sep-mobile, 16px) !important; width:var(--vtl-sep-mobile, 16px) !important; } }
@media (max-width:560px){ .vecco-timeline .vecco-tl-sep{ flex-basis:var(--vtl-sep-mobile, 16px) !important; max-width:var(--vtl-sep-mobile, 16px) !important; width:var(--vtl-sep-mobile, 16px) !important; } }
@media (max-width:420px){ .vecco-timeline .vecco-tl-sep{ flex-basis:var(--vtl-sep-mobile, 16px) !important;  max-width:var(--vtl-sep-mobile, 16px) !important;  width:var(--vtl-sep-mobile, 16px) !important; } }

@media (max-width:768px){ .vecco-timeline .vecco-tl-item{ padding:10px var(--vtl-item-pad-mobile, 4px); } }
@media (max-width:420px){ .vecco-timeline .vecco-tl-item{ padding:8px var(--vtl-item-pad-mobile, 4px); } }

/* Separator line - aligned with icon vertical center (consistent across all screen sizes) */
.vecco-timeline .vecco-tl-sep > .vecco-sep{ 
  position:absolute;
  left:0;
  right:0;
  /* Align with year text center: icon height + icon margin + half of year line-height */
  top: calc(72px + 10px + 1.4em + 31px);
  height:2px; 
  background:#d9d9d9; 
  border:0; 
  margin:0;
  width:100%; 
  display:block; 
}
/* Extend line slightly on desktop, tighter on mobile */
.vecco-timeline .vecco-tl-sep > .vecco-sep::before{ content:""; position:absolute; left: calc(var(--vtl-sep-ext-desktop, 96px) * -1) !important; right: calc(var(--vtl-sep-ext-desktop, 96px) * -1) !important; top:0; height:2px; background:inherit; }
@media (max-width:768px){ 
  .vecco-timeline .vecco-tl-sep > .vecco-sep::before{ left: calc(var(--vtl-sep-ext-mobile, 12px) * -1) !important; right: calc(var(--vtl-sep-ext-mobile, 12px) * -1) !important; }
}
@media (max-width:560px){ 
  .vecco-timeline .vecco-tl-sep > .vecco-sep::before{ left: calc(var(--vtl-sep-ext-mobile, 12px) * -1) !important; right: calc(var(--vtl-sep-ext-mobile, 12px) * -1) !important; }
  /* Adjust for smaller icon (64px) + margin + half year height */
  .vecco-timeline .vecco-tl-sep > .vecco-sep{ top: calc(64px + 10px + 1.3em + 31px); }
}
@media (max-width:420px){ 
  .vecco-timeline .vecco-tl-sep > .vecco-sep::before{ left: calc(var(--vtl-sep-ext-mobile, 12px) * -1) !important; right: calc(var(--vtl-sep-ext-mobile, 12px) * -1) !important; }
  /* Adjust for even smaller icon (56px) + margin + half year height */
  .vecco-timeline .vecco-tl-sep > .vecco-sep{ top: calc(56px + 10px + 1.2em + 31px); }
}

/* Reduce inner horizontal padding on small screens to visually narrow container */
@media (max-width:560px){ .vecco-timeline .vecco-tl-track{ padding:0; } }
@media (max-width:420px){ .vecco-timeline .vecco-tl-track{ padding:0; } }

/* Slightly reduce type and icon scale on phones for better fit */
@media (max-width:560px){
  .vecco-timeline .vecco-tl-year{ margin-bottom:4px; }
  .vecco-timeline .vecco-tl-title{ font-size:1em; }
  .vecco-timeline .vecco-tl-desc{ font-size:0.9em; line-height:1.35; }
  .vecco-timeline .vecco-tl-pin img{ max-width:64px; }
  .vecco-timeline .vecco-tl-pin .vecco-tl-svg{ width:64px; }
}
@media (max-width:420px){
  .vecco-timeline .vecco-tl-pin img{ max-width:56px; }
  .vecco-timeline .vecco-tl-pin .vecco-tl-svg{ width:56px; }
}