/* ============================================================
   COMPONENTI PER I CONTENUTI REALI
   (timeline esperienza, gruppi di competenze, chip strumenti,
    badge certificazioni, card progetti)
   ============================================================ */

/* ---------- TIMELINE (esperienza / formazione) ---------- */

.tl{ display:flex; flex-direction:column }

.tl__item{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem clamp(1rem,3vw,2.5rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}
.tl__item:last-child{ padding-bottom:0 }

/* the rail line + node */
.tl__item::before{
  content:"";
  position:absolute;
  left:11px; top:26px; bottom:-6px;
  width:2px;
  background:linear-gradient(var(--blue),rgba(61,202,177,.12));
}
.tl__item:last-child::before{ display:none }

.tl__dot{
  position:relative;
  z-index:1;
  width:24px; height:24px;
  margin-top:4px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--blue);
  display:grid;
  place-items:center;
}
.tl__dot::after{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--blue);
}
.tl__item.is-current .tl__dot{
  border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(61,202,177,.14);
}
.tl__item.is-current .tl__dot::after{ background:var(--ink) }

.tl__body{ min-width:0 }

.tl__role{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.6vw,1.8rem);
  line-height:1.15;
}
.tl__company{
  font-size:1.05rem;
  margin-top:.2rem;
}
.tl__company a{ border-bottom:1px solid var(--line) }
.tl__company a:hover{ color:var(--blue) }

.tl__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem .9rem;
  margin-top:.5rem;
  font-size:.85rem;
  color:var(--muted);
}
.tl__when{ letter-spacing:.03em }
.tl__now{
  font-family:var(--display);
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:none;
  background:var(--blue);
  color:#fff;
  border-radius:99px;
  padding:.15rem .6rem;
}
.tl__sep{ opacity:.5 }

.tl__points{
  margin:1rem 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  max-width:64ch;
}
.tl__points li{
  position:relative;
  padding-left:1.5rem;
  color:#2b2f36;
  font-size:.98rem;
}
.tl__points li::before{
  content:"▹";
  position:absolute;
  left:0;
  top:-.05rem;
  color:var(--blue);
  font-weight:700;
}

.tl__highlight{
  display:inline-block;
  margin-top:1rem;
  font-family:var(--display);
  font-size:.95rem;
  background:rgba(61,202,177,.09);
  border-left:3px solid var(--blue);
  border-radius:0 8px 8px 0;
  padding:.5rem .9rem;
}

/* ---------- GRUPPI DI COMPETENZE ---------- */

.groups{
  display:grid;
  gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.group{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.25rem 1.35rem 1.4rem;
  border-top:4px solid var(--c, var(--blue));
}
.group h3{ font-size:1.1rem; margin-bottom:.85rem }
.group ul{ display:flex; flex-wrap:wrap; gap:.4rem }
.group li{
  font-size:.85rem;
  background:#f6f8fc;
  border:1px solid var(--line);
  border-radius:99px;
  padding:.25rem .7rem;
  color:#3a4049;
}

/* ---------- CHIP STRUMENTI ---------- */

.toolgroup{ margin-bottom:2rem }
.toolgroup__name{
  font-family:var(--display);
  font-size:1.1rem;
  margin-bottom:.7rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.toolgroup__name::before{
  content:"";
  width:10px; height:10px;
  border-radius:3px;
  background:var(--c);
}

.tools{ display:flex; flex-wrap:wrap; gap:.5rem }

.tool{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:99px;
  padding:.4rem .9rem .4rem .45rem;
  font-size:.9rem;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tool:hover{
  transform:translateY(-2px);
  border-color:var(--c);
  box-shadow:0 8px 18px -10px rgba(17,18,20,.3);
}
.tool__mark{
  width:18px; height:18px;
  border-radius:5px;
  background:var(--c);
  flex:none;
}

/* ---------- CERTIFICAZIONI / SOFT SKILLS ---------- */

.badges{ display:flex; flex-wrap:wrap; gap:.5rem }
.badge{
  font-family:var(--display);
  font-size:.95rem;
  background:#fff;
  border:1.5px solid var(--ink);
  border-radius:99px;
  padding:.35rem 1rem;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.badge:hover{ background:var(--ink); color:#fff; transform:rotate(-2deg) }

/* ---------- CARD PROGETTI REALIZZATI ---------- */

.builds{
  display:grid;
  gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.build{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.build:hover{ transform:translateY(-5px); box-shadow:var(--shadow) }
.build__art{ aspect-ratio:16/9 }
.build__body{ padding:1.1rem 1.25rem 1.35rem; display:flex; flex-direction:column; gap:.6rem }
.build__name{ font-family:var(--display); font-size:1.5rem }
.build__desc{ color:var(--muted); font-size:.95rem }

/* ---------- FOTO PROFILO ---------- */

/* Il riquadro ha il gradiente di palette sotto: se la foto non
   c'è o non si carica, si vede il verde acqua e non un buco. */
.portrait{
  width:100%;
  aspect-ratio:1;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  object-fit:cover;
  background:linear-gradient(145deg,#0f766e,#5eead4);
}

/* ---------- DATI RAPIDI ---------- */

.stats{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.stat__n{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1;
}
.stat__l{ font-size:.85rem; color:var(--muted); margin-top:.3rem }

/* Sotto i 600px la colonna del pallino e quella del testo
   diventavano una sola: il pallino andava a capo sopra il titolo e
   la linea verticale, restata nel gutter, passava dentro al testo
   che partiva a 16px.

   Qui il griglia resta a due colonne, quindi il testo comincia
   dopo il pallino e la linea resta nel gutter. Basta accorciare
   il gap verticale, che a una colonna singola serviva solo a
   staccare il pallino dal titolo. */
@media (max-width:600px){
  .tl__item{ gap:.9rem 1rem }
}
/* ---------- CHI SONO: testo + colonna laterale ---------- */

.about{
  display:grid;
  gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  align-items:start;
}
.about__text p + p{ margin-top:1.25rem }
.about__text p{ color:#2b2f36 }

/* I tre punti di lavoro: numerati, con il titolo in grassetto
   e il resto del testo corrente. Le emoji sono parte del tono
   della voce, quindi restano. */
.about__points{
  list-style:decimal;
  padding-left:1.4rem;
  margin-top:1.1rem;
  color:#2b2f36;
}
.about__points li{ padding-left:.3rem }
.about__points li + li{ margin-top:.9rem }
.about__points li::marker{
  color:var(--blue);
  font-family:var(--display);
  font-weight:800;
}
.about__points strong{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:1.25rem;
  line-height:1.25;
  color:var(--ink);
}

.about__side{
  position:sticky;
  top:calc(var(--pad) + 3rem);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.1rem 1.15rem 1.35rem;
  text-align:center;
  box-shadow:0 14px 34px -20px rgba(17,18,20,.35);
}
.about__name{
  font-family:var(--display);
  font-size:1.4rem;
  margin-top:1rem;
  line-height:1.15;
}
.about__role{ font-size:1.05rem; color:var(--muted); margin-top:.35rem }
.about__place{ font-size:1rem; color:var(--muted) }

.about__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem;
  margin-top:1.1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.about__links a{
  font-family:var(--display);
  font-size:.9rem;
  border:1px solid var(--line);
  border-radius:99px;
  padding:.25rem .8rem;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.about__links a:hover{ background:var(--blue); border-color:var(--blue); color:#fff }

/* ---------- HERO: ruolo ---------- */

/* Il ruolo sta un gradino sotto il sottotitolo: con i due alla
   stessa altezza non si capiva quale dei due fosse la presentazione
   e quale la promessa. */
.hero__role{
  font-family:var(--ui);
  font-size:clamp(1.1rem,1.7vw,1.45rem);
  margin-top:1.4rem;
  color:var(--muted);
}

/* ---------- stats: dt/dd nell'ordine giusto ---------- */

.stat dd, .stat__n{ margin:0 }

.tl__kind{
  font-family:var(--display);
  font-size:.8rem;
  text-transform:none;
  letter-spacing:.05em;
  background:rgba(61,202,177,.1);
  color:var(--blue);
  border-radius:99px;
  padding:.15rem .65rem;
}

@media (max-width:820px){
  .about{ grid-template-columns:1fr }
  .about__side{ position:static; max-width:340px }
}

@media (max-width:820px){
  .about{ grid-template-columns:1fr }
  .about__side{ position:static; max-width:340px }
}

/* ---------- SERVICES (lista numerata + nota adesiva) ---------- */

.servwrap{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
  margin-top:2rem;
}

.servlist{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 26px -20px rgba(17,18,20,.35);
}

.servrow{
  display:grid;
  grid-template-columns:3rem 1fr auto;
  align-items:center;
  gap:1rem;
  padding:.85rem 1.1rem;
  border-top:1px solid var(--line);
  transition:background .2s ease, padding-left .25s ease;
}
.servrow:first-child{ border-top:0 }
.servrow:hover{ background:#f6f8fc; padding-left:1.5rem }

.servrow__num{ font-size:1rem; color:var(--muted); font-variant-numeric:tabular-nums }
.servrow__name{ font-size:1.3rem }
.servrow__go{ font-size:1.7rem; line-height:1; color:var(--muted) }
.servrow:hover .servrow__go{ color:var(--blue) }

/* nota adesiva */
.servside{
  position:relative;
  justify-self:end;
  width:min(280px,100%);
}
.sticky{
  position:relative;
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 16px 30px -18px rgba(17,18,20,.4);
  rotate:3deg;
  font-size:.85rem;
  line-height:1.55;
  color:#3a4049;
}
.sticky::before{
  content:"";
  display:block;
  height:26px;
  background:#ffc043;
  border-radius:4px 4px 0 0;
}
.sticky p{ padding:.9rem 1rem 1.1rem; margin:0 }
.sticky::after{
  content:"";
  position:absolute;
  left:1rem; right:2.5rem; bottom:-9px;
  height:3px;
  border-radius:2px;
  background:var(--ink);
  opacity:.7;
  rotate:-1deg;
}

/* vignetta del servizio sotto il cursore: ancorata a destra della
   lista, sopra la nota. La riga attiva si evidenzia in blu. */
.servvign{
  position:absolute;
  top:0; left:0; right:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 18px 34px -18px rgba(17,18,20,.4);
  padding:1rem 1.1rem 1.2rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.servvign[hidden]{ display:none }
.servvign.is-on{ opacity:1; transform:none }
.servvign__thumb{
  float:right;
  width:72px; height:56px;
  margin:0 0 .5rem .75rem;
  border-radius:8px;
  border:1px solid var(--line);
}
.servvign__text{
  margin:0;
  font-size:.9rem;
  line-height:1.6;
  color:#3a4049;
}

.servrow.is-active{
  background:var(--blue);
  border-color:var(--blue);
}
.servrow.is-active .servrow__num,
.servrow.is-active .servrow__name,
.servrow.is-active .servrow__go,
.servrow.is-active:hover .servrow__go{ color:#fff }

/* ---------- BLOGS (righe tabellari) ---------- */

.btable{
  display:flex;
  flex-direction:column;
  margin-top:1.5rem;
  border-top:1px solid var(--line);
}

.brow{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto auto;
  align-items:center;
  gap:1rem 1.5rem;
  padding:.7rem .75rem;
  border-bottom:1px solid var(--line);
  transition:background .2s ease, padding-left .25s ease;
}
.brow:hover{ background:#f6f8fc; padding-left:1.25rem }

.brow__thumb{
  width:44px; height:32px;
  border-radius:4px;
  border:1px solid var(--line);
}
.brow__title{ font-size:1.32rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.brow__cat{ font-size:1.1rem; color:var(--muted); white-space:nowrap }
.brow__date{ font-size:1.1rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums }

/* ---------- CTA "got something in mind?" ---------- */

.cta-mind{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:clamp(1rem,4vw,3rem);
  padding-block:clamp(4rem,10vw,7rem);
}
.cta-mind__text{ text-align:center }
.cta-mind__title{ font-size:clamp(2.4rem,7vw,5rem); text-transform:none }

.btn-touch{
  display:inline-block;
  margin-top:1.75rem;
  font-size:.95rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:.55rem 1.2rem;
  box-shadow:0 2px 6px -2px rgba(17,18,20,.15);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-touch:hover{
  transform:translateY(-2px);
  border-color:var(--blue);
  box-shadow:0 10px 22px -10px rgba(61,202,177,.5);
}

.cta-mind__arrow{ width:clamp(70px,10vw,120px); height:auto; justify-self:end }

/* ---------- RESPONSIVE tweaks ---------- */

@media (max-width:820px){
  .servwrap{ grid-template-columns:1fr }
  .sticky{ justify-self:start; rotate:-2deg }
  .brow{ grid-template-columns:36px minmax(0,1fr) auto; }
  .brow__date{ display:none }
  .cta-mind{ grid-template-columns:1fr }
  .cta-mind__arrow{ display:none }
}

@media (max-width:600px){
  .brow{ grid-template-columns:minmax(0,1fr) auto; }
  .brow__thumb, .brow__cat{ display:none }
}