/* ===========================
   STORIA — Timeline Orizzontale (Slider 1 slide per volta)
   File: assets/css/section-storia.css
   =========================== */

:root{
  --np-primary: #485693;
  --np-muted: #94a3b8;
  --np-border: #e5e7eb;
  --np-bg-soft: #f8f9fb;
}

/* Sezione */
.section-storia{
  position: relative;
  background: linear-gradient(
  180deg,
  #f4f6fb 0%,
  #ffffff 100%
);
}

/* ===========================
   NAV (barra anni) — sempre visibile
   =========================== */
.timeline-nav-wrapper{
  /* position: sticky; */
  top: 90px;
  z-index: 80;
  background: #ffffff;
  border-bottom: 1px solid var(--np-border);
}

.timeline-nav{
  display: flex;
  gap: 50px;
  align-items: center;
  justify-content: center;
  padding: 22px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* scrollbar nascosta */
.timeline-nav::-webkit-scrollbar{ display:none; }
.timeline-nav{ scrollbar-width: none; }

/* Anni */
.timeline-link{
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--np-muted);
  cursor: pointer;
  position: relative;
  transition: color .25s ease, opacity .25s ease;
  white-space: nowrap;
}

.timeline-link:hover{ opacity: .85; }

.timeline-link.active{
  color: var(--np-primary);
}

.timeline-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:2px;
  background: var(--np-primary);
}

/* ===========================
   SLIDER (viewport + track)
   =========================== */
.timeline-slider-wrapper{
  position: relative;
  overflow: hidden;
}

/* Track */
.timeline-slider{
  display: flex;
  width: 100%;
  will-change: transform;
  transition: transform .7s cubic-bezier(.77,0,.18,1);
}

/* Slide: una pagina per viewport */
.timeline-slide{
  flex: 0 0 100%;
  min-width: 100%;
  position: relative;

  /* Fade premium */
  opacity: .25;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}

.timeline-slide.is-active{
  opacity: 1;
  transform: translateY(0);
}

/* Contenuto interno */
.timeline-inner{
  width: 100%;
  padding: 70px 0;          /* aria verticale della slide */
  padding-bottom: 100px;
}

/* Testo */
.timeline-text h3{
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 18px;
  color: #111827;
}

/* Immagine */
.timeline-image img{
 /*
  width: 100%;
  height: auto;
 */
  width: 600px;
  height: 500px;
  border-radius: 14px;
  display: block;
}

/* Layout interno slide */
.timeline-inner .row {
    display: flex;
    align-items: center
}

/* Colonne */
.timeline-text,
.timeline-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Se vuoi ancora più precisione */
.timeline-text {
    padding-right: 40px;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 992px){
  .timeline-nav{ gap: 28px; justify-content: flex-start; padding-left: 18px; padding-right: 18px; }
  .timeline-link{ font-size: 16px; }
  .timeline-inner{ padding: 50px 0; }
  .timeline-text h3{ font-size: 22px; }
  
   .timeline-text{
        padding-right:0 !important;
        margin-top:30px;
        text-align:left;
    }

    .timeline-image img{
        width:100%;
        height:auto;
        border-radius:10px;
    }

    .timeline-slide{
        padding:40px 0;
    }
}

@media (max-width: 768px){
  .timeline-inner{ padding: 40px 0; }
  .timeline-text{ margin-bottom: 22px; }
}

/* FRECCE */

.timeline-arrow{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:46px;
    height:46px;

    border-radius:50%;
    border:1px solid #d1d5db;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:10;

    transition:all .25s ease;
}

.timeline-arrow:hover{
    background:#485693;
    color:#fff;
    border-color:#485693;
}

/* posizione */

.timeline-prev{
    left:20px;
}

.timeline-next{
    right:20px;
}