/* assets/css/progressi.css — audio + timeline in stile Dhemetra */

/* ====== GRID TRACCE ====== */
.tracks-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
@media (max-width: 460px){
  .tracks-grid{ grid-template-columns: repeat(4,1fr); }
}
@media (min-width: 461px) and (max-width: 900px){
  .tracks-grid{ grid-template-columns: repeat(8,1fr); }
}

.track-card{
  grid-column: span 12;
  background: rgba(12,10,8,.50);
  border:1px solid rgba(255,215,0,.18);
  border-radius: 16px;
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
@media (min-width: 461px){ .track-card{ grid-column: span 4; } }
@media (min-width: 900px){ .track-card{ grid-column: span 4; } }

.track-card.is-active{
  box-shadow: inset 0 0 0 1px rgba(214,177,69,.35), 0 0 14px rgba(214,177,69,.18);
  border-color: rgba(214,177,69,.55);
}

.t-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.t-title{ font-family:"Cinzel",serif; font-size:1.05rem; letter-spacing:.02em; margin:0; color:#efe6d7; }
.t-meta{ color:var(--muted); font-size:.9rem; white-space:nowrap; }
.t-desc{ margin:.15rem 0 .6rem; color:#d8cfbe; opacity:.95; }

/* ====== CONTROLLI ====== */
.t-controls{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; }
.t-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:38px; border-radius:10px;
  border:1px solid rgba(255,215,0,.28); color:#e8e0ce; background:rgba(10,8,6,.25);
  cursor:pointer; font-size:1rem;
}
.t-btn:hover{ background: rgba(10,8,6,.35); }
.t-btn.play .icon{
  width:0; height:0; border-style:solid; border-width:8px 0 8px 12px; border-color:transparent transparent transparent #e8e0ce;
  transform: translateX(1px);
}
.track-card.is-playing .t-btn.play .icon{
  width:12px; height:12px; border:none; background:
    linear-gradient(#e8e0ce,#e8e0ce) 0 0/4px 12px no-repeat,
    linear-gradient(#e8e0ce,#e8e0ce) 8px 0/4px 12px no-repeat;
}

.t-timeline{
  position:relative; height:8px; width:100%;
  background: rgba(255,215,0,.16); border:1px solid rgba(255,215,0,.22);
  border-radius:999px; cursor:pointer; overflow:hidden;
}
.t-progress{
  position:absolute; inset:0 auto 0 0; width:0%;
  background: linear-gradient(90deg, rgba(214,177,69,.8), rgba(214,177,69,.35));
  box-shadow: 0 0 10px rgba(214,177,69,.25);
}
.t-time{ font-variant-numeric: tabular-nums; font-size:.9rem; opacity:.95; }
.t-btn.dl{ width:38px; height:34px; }

/* ====== TIMELINE (già presente) ====== */
.timeline{ position:relative; padding: 24px 6px; }
.t-line{ position:absolute; left:20px; top:18px; bottom:18px; width:2px; background:rgba(255,215,0,.22); }
.t-start{ position:absolute; left:14px; top:8px; width:14px; height:14px; border-radius:50%; background:rgba(255,215,0,.18); border:1px solid rgba(255,215,0,.25); }
.t-events{ list-style:none; margin:0; padding:0 0 0 40px; display:flex; flex-direction:column; gap:28px; }
.t-events li{ position:relative; }
.t-dot{ position:absolute; left:-27px; top:6px; width:10px; height:10px; border-radius:50%; background:#c9a86a; box-shadow: 0 0 8px rgba(214,177,69,.35); }
.t-card{ background: rgba(12,10,8,.4); border:1px solid rgba(255,215,0,.18); border-radius:12px; padding:8px 10px; }
.t-card h4{ margin:.1rem 0 .25rem; font-family:"Cinzel",serif; }
.t-card p{ margin:0; opacity:.95; }

/* ====== RESPONSIVE ====== */
@media (max-width: 720px){
  .t-head{ flex-direction:column; align-items:flex-start; gap:4px; }
  .t-controls{ grid-template-columns: auto 1fr; grid-template-rows:auto auto; }
  .t-time{ justify-self:start; }
  .t-btn.dl{ justify-self:end; }
}