/* FASTO — Progress grid + lightbox (dark‑friendly) */
.fasto-progress { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.fasto-progress .fp-heading{
  text-align:center; font-size: clamp(22px, 3.2vw, 34px);
  margin: 0 0 .9rem; color:#eaf7ff; text-shadow:0 0 16px rgba(58,211,255,.18);
}

/* Grid */
.fasto-progress .fp-grid{
  display:grid; gap: clamp(10px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Card */
.fasto-progress .fp-card{
  position:relative; border:1px solid var(--fasto-border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-radius:14px; overflow:hidden; cursor:zoom-in;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fasto-progress .fp-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  background: rgba(255,255,255,.05);
}

/* Thumb */
.fasto-progress .fp-thumb{ display:block; width:100%; height:auto; }

/* Caption/Meta strip */
.fasto-progress .fp-strip{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.5rem .65rem;
  font-size:.9rem; color:#cfe8fb;
}

/* Badges */
.fasto-progress .fp-badges{ display:flex; align-items:center; gap:.35rem; }
.fasto-progress .fp-badge{
  font-size:.72rem; font-weight:700; letter-spacing:.2px; line-height:1;
  padding:.28rem .55rem; border-radius:999px; color:#061018;
  background: linear-gradient(135deg, #E7EEF6, #CFE0F5);
  border:1px solid rgba(255,255,255,.35); box-shadow:0 1px 6px rgba(0,0,0,.12);
}
.fasto-progress .fp-badge.w{ background: linear-gradient(135deg, #b8ffe2, #7affc2); }       /* weight */
.fasto-progress .fp-badge.date{ background: linear-gradient(135deg, #bcdcff, #79b6ff); }    /* date */
.fasto-progress .fp-badge.tag-start{ background: linear-gradient(135deg, #ffd8b8, #ffb27a); }
.fasto-progress .fp-badge.tag-now{ background: linear-gradient(135deg, #ffe095, #ffd15e); }
.fasto-progress .fp-badge.tag-milestone{ background: linear-gradient(135deg, #cab7ff, #9d7aff); }

/* Lightbox */
.fasto-progress .fp-lightbox[hidden]{ display:none; }
.fasto-progress .fp-lightbox{
  position:fixed; inset:0; z-index:9999; background: rgba(5,10,16,.9);
  backdrop-filter: blur(6px); display:grid; grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr auto; align-items:center; justify-items:center;
  padding: clamp(8px, 2vw, 16px);
}
.fasto-progress .fp-frame{ grid-column: 1 / 4; grid-row: 2; margin:0; text-align:center; }
.fasto-progress .fp-full{ max-width: min(92vw, 1200px); max-height: 82svh; border-radius:10px; }
.fasto-progress .fp-cap{ margin-top:.6rem; color:#eaf7ff; opacity:.85; }

.fasto-progress .fp-close,
.fasto-progress .fp-prev,
.fasto-progress .fp-next{
  position:absolute; top:10px; background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:10px;
  padding:.4rem .6rem; cursor:pointer; font-size:22px; line-height:1;
  transition: background .15s ease;
}
.fasto-progress .fp-close{ right:10px; }
.fasto-progress .fp-prev, .fasto-progress .fp-next{
  top:50%; transform: translateY(-50%);
  padding:.5rem .7rem; font-size:28px;
}
.fasto-progress .fp-prev{ left:10px; }
.fasto-progress .fp-next{ right:10px; }
.fasto-progress .fp-close:hover,
.fasto-progress .fp-prev:hover,
.fasto-progress .fp-next:hover{ background: rgba(255,255,255,.2); }

/* Tighten on mobile */
@media (max-width:680px){
  .fasto-progress .fp-strip{ font-size:.85rem; }
}