/* ============================================================
   SAMA TIMELINE STORIA — spina verticale con linea rossa che si
   disegna allo scroll, punti che si accendono, card alternate.
   Le variabili --sama-* arrivano dal child theme; i fallback
   garantiscono la resa anche senza child attivo.
   ============================================================ */
.sama-tl{position:relative;width:1100px;max-width:92%;margin-inline:auto}
.sama-tl::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--sama-linea,#e8e8e5);transform:translateX(-50%)}
.sama-tl-progress{position:absolute;top:0;left:50%;width:2px;height:0;background:linear-gradient(var(--sama-rosso,#e30613),var(--sama-rosso-scuro,#b8050f));transform:translateX(-50%);z-index:1}
.sama-tl-item{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;margin-bottom:36px;margin-bottom:clamp(36px,5vw,64px)}
.sama-tl-item:last-child{margin-bottom:0}
.sama-tl-dot{grid-column:2;grid-row:1;justify-self:center;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--sama-bordo-search,#c4c4c4);position:relative;z-index:2;transition:border-color .4s,background .4s,transform .4s var(--sama-ease,cubic-bezier(.22,1,.36,1))}
.sama-tl-item.attiva .sama-tl-dot{background:var(--sama-rosso,#e30613);border-color:var(--sama-rosso,#e30613);transform:scale(1.15)}
.sama-tl-item.attiva .sama-tl-dot::after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;border:1px solid var(--sama-rosso,#e30613);animation:sama-tl-ring 1.6s var(--sama-ease,cubic-bezier(.22,1,.36,1)) infinite}
@keyframes sama-tl-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.1);opacity:0}}
.sama-tl-anno{position:absolute;top:50%;transform:translateY(-50%);font-family:"Archivo",Arial,sans-serif;font-weight:700;font-stretch:118%;font-size:64px;font-size:clamp(64px,8vw,120px);line-height:1;color:var(--sama-grigio-bg,#f6f6f4);z-index:0;transition:color .6s;user-select:none}
.sama-tl-item.attiva .sama-tl-anno{color:var(--sama-rosso-soft,#fdeced)}
.sama-tl-item:nth-child(odd) .sama-tl-anno{right:calc(50% + 70px)}
.sama-tl-item:nth-child(even) .sama-tl-anno{left:calc(50% + 70px)}
.sama-tl-card{position:relative;z-index:1;grid-row:1;background:#fff;border:1px solid var(--sama-linea,#e8e8e5);border-radius:16px;padding:26px 28px;box-shadow:0 18px 44px -28px rgba(0,0,0,.18);opacity:0;transition:opacity .7s var(--sama-ease,cubic-bezier(.22,1,.36,1)),transform .7s var(--sama-ease,cubic-bezier(.22,1,.36,1)),box-shadow .3s,border-color .4s}
.sama-tl-card:hover{box-shadow:0 26px 50px -25px rgba(0,0,0,.28)}
/* tappa attiva: il bordo della card si accende col pallino */
.sama-tl-item.attiva .sama-tl-card{border-color:var(--sama-rosso,#e30613)}
.sama-tl-item:nth-child(odd) .sama-tl-card{grid-column:1;transform:translateX(-42px)}
.sama-tl-item:nth-child(even) .sama-tl-card{grid-column:3;transform:translateX(42px)}
.sama-tl-item.vista .sama-tl-card{opacity:1;transform:translateX(0)}
.sama-tl-badge{display:inline-block;font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.16em;color:#fff;background:var(--sama-rosso,#e30613);padding:5px 14px;border-radius:100px;margin-bottom:12px}
.sama-tl-card h3{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:19px;line-height:1.3;color:var(--sama-ink,#161616);margin:0}
.sama-tl-card p{font-size:14.5px;color:var(--sama-grigio,#5c6360);margin:8px 0 0;line-height:1.6}
@media (max-width:900px){
  .sama-tl::before,.sama-tl-progress{left:12px;transform:none}
  .sama-tl-item{grid-template-columns:40px 1fr;margin-bottom:32px}
  .sama-tl-dot{grid-column:1;justify-self:start;margin-left:4px}
  .sama-tl-anno{display:none}
  .sama-tl-item:nth-child(odd) .sama-tl-card,
  .sama-tl-item:nth-child(even) .sama-tl-card{grid-column:2;transform:translateY(26px)}
  .sama-tl-item.vista .sama-tl-card{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .sama-tl-card{opacity:1 !important;transform:none !important}
  .sama-tl-item.attiva .sama-tl-dot::after{animation:none}
}
/* nell'editor di Elementor le card restano sempre visibili */
.elementor-editor-active .sama-tl-card{opacity:1;transform:none}