/* Timeline layout inspired by https://codepen.io/bcarvalho/pen/RZqmZX.
   Independent implementation; all styles are scoped to this plugin. */
.stls { --stls-admin-height: 0px; width: 100%; max-width: none; margin: 0; padding: 0; font-family: inherit; }
body.admin-bar .stls { --stls-admin-height: 32px; }
@media (max-width: 782px) { body.admin-bar .stls { --stls-admin-height: 46px; } }
body.elementor-template-canvas.stls-canvas-page { margin: 0; padding: 0; }
body.elementor-template-canvas.stls-canvas-page .stls-canvas-shell {
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important; gap: 0 !important;
  min-height: 0 !important; align-self: stretch;
  --container-max-width: 100%; --content-width: 100%;
}
.stls, .stls * { box-sizing: border-box; }
.stls .stls-stage { position: relative; height: calc(100vh - var(--stls-admin-height)); height: calc(100dvh - var(--stls-admin-height)); overflow: hidden; background: var(--stls-bg); isolation: isolate; touch-action: pan-y; }
.stls .stls-slide { position: absolute; inset: 0; margin: 0; color: var(--stls-text); background: var(--stls-bg); opacity: 0; visibility: hidden; transform: translateX(8%); transition: opacity .7s ease, transform 1s cubic-bezier(.2,.7,.2,1), visibility 1s; pointer-events: none; }
.stls .stls-slide.is-active { opacity: 1; visibility: visible; transform: translate(0); z-index: 1; pointer-events: auto; }
.stls .stls-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; border: 0; }
.stls .stls-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0002, #000b); pointer-events: none; }
.stls .stls-content { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); left: 10%; width: 80%; max-height: calc(100% - 170px); overflow: auto; text-align: center; padding: 8px; overflow-wrap: anywhere; }
.stls .stls-year { display: block; font-size: 42px; line-height: 1.3; font-style: italic; font-weight: 300; color: var(--stls-accent); margin: 0 0 22px; }
.stls .stls-title { margin: 0 0 24px; padding: 0; color: var(--stls-text); font-size: clamp(26px, 4vw, 46px); line-height: 1.15; font-weight: 800; }
.stls .stls-description { margin: 0; font-size: 15px; line-height: 1.65; color: var(--stls-text); white-space: pre-line; }
.stls button { font: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; border-radius: 0; }
.stls .stls-controls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.stls .stls-controls button, .stls .stls-years { pointer-events: auto; }
.stls .stls-arrow { position: absolute; top: 16px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--stls-accent); font-size: 44px; line-height: 1; }
.stls .stls-prev { left: 6%; }
.stls .stls-next { right: 6%; }
.stls .stls-arrow:disabled { opacity: .25; cursor: default; }
.stls .stls-years { position: absolute; bottom: 12px; left: 6%; right: 6%; display: flex; gap: 8px; overflow: auto; max-height: 65px; }
.stls .stls-dot { position: relative; min-width: 44px; min-height: 44px; flex-shrink: 0; padding: 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--stls-accent); font-size: 16px; font-style: italic; }
.stls .stls-dot[aria-current="true"] { border-color: var(--stls-accent); font-weight: 800; }
.stls button:hover { background: #ffffff12; color: var(--stls-accent); }
.stls button:focus-visible, .stls .stls-stage:focus-visible { outline: 2px solid var(--stls-accent); outline-offset: -3px; }
.stls .stls-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 768px) {
  .stls .stls-slide { transform: translateY(12%); }
  .stls .stls-slide.is-active { transform: translateY(0); }
  .stls .stls-content { left: auto; right: 27%; top: 50%; transform: translateY(-50%); width: 42%; max-width: 420px; max-height: 80%; text-align: right; }
  .stls .stls-year { font-size: 34px; margin-bottom: 8px; }
  .stls .stls-years { left: auto; right: 6%; top: 20%; bottom: 20%; width: 17%; max-height: none; flex-direction: column; gap: 8px; border-left: 1px solid #ffffff40; padding-left: 12px; }
  .stls .stls-dot { text-align: left; border-bottom: 0; border-left: 3px solid transparent; padding-left: 12px; overflow-wrap: anywhere; }
  .stls .stls-prev { left: auto; right: 12%; top: 8%; transform: rotate(90deg); }
  .stls .stls-next { right: 12%; top: auto; bottom: 8%; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .stls .stls-slide { transition: none; transform: none; } }