/* ═══════════════════════════════════════════════
   BLOG INDEX — blog-home.css
   Include tokens CSS per sicurezza
═══════════════════════════════════════════════ */

/* ── TOKENS ── */

.ins-page { position:relative; z-index:1; padding-top:64px; min-height:100vh; }
.ins-section { padding:5rem 0 7rem; position:relative; }

.ins-container { max-width:900px; margin:0 auto; padding:0 2rem; }

.ins-header { text-align:center; margin-bottom:4rem; }
.ins-eyebrow { font-family:var(--mono); font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; }
.ins-title { font-family:var(--sans); font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700; color:rgba(245,242,235,.96); line-height:1.15; margin-bottom:1.4rem; display:inline-block; }
.ins-title::after { content:''; display:block; width:3rem; height:1px; background:var(--gold); margin:1.4rem auto 0; opacity:.6; }
.ins-dot { color:var(--gold); }
.ins-desc { font-size:1.05rem; color:var(--text-soft); max-width:640px; margin:0 auto; line-height:1.8; font-family:var(--sans,system-ui,-apple-system,sans-serif); }

.list-feed { display:flex; flex-direction:column; gap:1.8rem; }

.list-item { display:flex; flex-direction:row; border:1px solid var(--line); background:rgba(255,255,255,.02); overflow:hidden; transition:border-color .3s,background .3s; }
.list-item:hover { border-color:var(--gold-border); background:rgba(255,215,0,.015); }

.list-thumb { position:relative; flex-shrink:0; width:280px; min-height:200px; overflow:hidden; background:rgba(255,255,255,.04); display:block; text-decoration:none; align-self:stretch; }
.list-item--featured .list-thumb { width:300px; min-height:200px; }
.list-thumb img { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s cubic-bezier(.4,0,.2,1); aspect-ratio:3/2; }
/* Fix animazione non composita: mob-drawer-dot usa box-shadow in keyframes → sostituire con opacity+scale nel tema */
/* Qui forziamo will-change per promuoverla al GPU compositor */
.mob-drawer-dot { will-change: transform, opacity; }
.list-item:hover .list-thumb img { transform:scale(1.05); }
.list-thumb-placeholder { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,215,0,.06),rgba(255,215,0,.02)); }
.list-overlay { position:absolute; inset:0; background:linear-gradient(to right,transparent 60%,rgba(8,8,16,.45)); pointer-events:none; z-index:1; }
.list-badge { position:absolute; top:.9rem; left:.9rem; font-family:var(--mono); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; padding:.28rem .7rem; background:var(--gold); color:var(--ink); z-index:2; }

.list-body { flex:1 1 0; min-width:0; padding:1.8rem 2.2rem; display:flex; flex-direction:column; justify-content:center; gap:.65rem; border-left:1px solid var(--line); }
.list-item--featured .list-body { padding:1.8rem 2.2rem; gap:.65rem; }

.list-num { font-family:var(--mono); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:.6rem; }
.list-num::after { content:''; flex:0 0 2rem; height:1px; background:var(--line); }
.list-cat {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: opacity .2s;
  border: 1px solid var(--gold-border);
  padding: .2rem .55rem;
  align-self: flex-start; /* ← impedisce lo stretch a tutta larghezza */
}
.list-cat:hover { border-color:var(--gold); background:var(--gold-dim); opacity:1; }
.list-title { font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.4; color:rgba(245,242,235,.96); margin:0; }
.list-item--featured .list-title { font-size:1.1rem; line-height:1.4; }
.list-title a { color:inherit; text-decoration:none; transition:color .2s; }
.list-title a:hover { color:var(--gold); }
.list-meta { font-family:var(--mono); font-size:.57rem; letter-spacing:.08em; color:var(--text-soft); display:flex; align-items:center; gap:.8rem; }
.list-meta-sep::before { content:'·'; }
.list-excerpt { font-size:.9rem; font-weight:300; line-height:1.75; color:var(--text-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.list-item--featured .list-excerpt { -webkit-line-clamp:4; }
.list-read { font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,215,0,.85); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem; transition:color .2s; }
.list-read:hover { color:var(--gold); }
.l-arrow { display:inline-block; transition:transform .2s; }
.list-read:hover .l-arrow { transform:translateX(4px); }

.ins-no-posts { text-align:center; padding:4rem 0; }
.ins-no-posts-title { font-family:var(--sans); font-size:1.4rem; font-weight:300; color:var(--paper); margin-bottom:.8rem; }
.ins-no-posts-text { font-family:var(--sans); font-size:.95rem; color:var(--text-soft); }

.ins-pagination { display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:4rem; }
.ins-page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; height:2.4rem; padding:0 .8rem; background:transparent; border:1px solid var(--line); color:var(--text-soft); font-family:var(--mono); font-size:.7rem; text-decoration:none; transition:background .2s,border-color .2s,color .2s; cursor:pointer; }
.ins-page-btn:hover:not(.disabled):not(.active-pg) { background:var(--gold-dim); border-color:var(--gold-border); color:var(--gold); }
.ins-page-btn.active-pg { background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:600; pointer-events:none; }
.ins-page-btn.disabled { opacity:.35; pointer-events:none; cursor:not-allowed; }
.ins-page-dots { font-family:var(--mono); font-size:.7rem; color:var(--text-soft); padding:0 .3rem; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }
.list-item--featured.reveal { opacity:1; transform:none; transition:none; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width:768px) {
  .list-item, .list-item--featured { flex-direction:column; }
  .list-thumb, .list-item--featured .list-thumb { width:100%; height:220px; flex-shrink:0; }
  .list-body, .list-item--featured .list-body { border-left:none; border-top:1px solid var(--line); padding:1.6rem; }
}
@media (max-width:640px) {
  .ins-section { padding:3rem 0 5rem; }
  .ins-container { padding:0 1.2rem; }
  .list-thumb, .list-item--featured .list-thumb { height:180px; }
}
/* Riga sopra footer — pagine senza blog-section */
body:not(.home) .site-footer {
  border-top: 1px solid var(--line, rgba(245,242,235,.07));
}
/* ── Read article — bordo oro con hover fill ── */
.list-read {
  border: 1px solid var(--gold-border);
  padding: .45rem 1rem;
  margin-top: .6rem;
  align-self: flex-start;
  transition: border-color .2s, color .2s, background .2s;
}
.list-read:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--gold);
}