@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --blog-bg:#060B14;
  --blog-surface:#0F1726;
  --blog-surface-2:#13203A;
  --blog-title:#F2EFE8;
  --blog-text:#C1CAD9;
  --blog-meta:#7F8CA3;
  --blog-line:#1E2B44;
  --blog-red:#8E1B2F;
  --blog-blue:#1D3557;
  --blog-bronze:#6A4425;
  --blog-green:#214634;
  --radius:16px;
  --ease:.24s ease;
}

.blog-wrap *{box-sizing:border-box}
.blog-wrap{
  color:var(--blog-text);
  line-height:1.68;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.blog-wrap a{text-decoration:none}
.blog-container{max-width:1240px;margin:0 auto;padding:0 28px}

.blog-hero{
  background:radial-gradient(circle at 15% 10%,rgba(142,27,47,.20),transparent 45%),radial-gradient(circle at 80% 20%,rgba(29,53,87,.30),transparent 50%),var(--blog-bg);
  border-bottom:1px solid var(--blog-line);
  padding:46px 0 30px;
}
.blog-hero-eyebrow{
  color:#bfa68a;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:600;
  margin-bottom:14px;
}
.blog-hero-title{
  margin:0 0 10px;
  font-family:'Bebas Neue','Oswald',sans-serif;
  font-size:clamp(42px,5.2vw,64px);
  letter-spacing:.02em;
  line-height:1.04;
  color:var(--blog-title);
  font-weight:400;
}
.blog-hero-subtitle{
  margin:0;
  max-width:760px;
  color:var(--blog-text);
  font-size:18px;
  line-height:1.65;
}
.blog-hero-stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:22px}
.blog-hero-stat-n{font-size:32px;line-height:1;font-weight:700;color:#d9c2a5}
.blog-hero-stat-l{font-size:11px;color:var(--blog-meta);text-transform:uppercase;letter-spacing:.09em;margin-top:6px}

.blog-search-bar{
  background:rgba(15,23,38,.9);
  border-bottom:1px solid var(--blog-line);
  padding:16px 0;
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(10px);
}
.blog-search-inner{display:flex;gap:12px;align-items:center}
.blog-search-input{
  flex:1;
  background:#0b1220;
  border:1px solid var(--blog-line);
  border-radius:12px;
  padding:12px 16px;
  color:var(--blog-title);
  font-size:15px;
}
.blog-search-btn{
  padding:12px 18px;
  background:linear-gradient(180deg,#8E1B2F,#721526);
  color:#f7f1e7;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
}

.blog-filters{
  padding:20px 0 12px;
  border-bottom:1px solid var(--blog-line);
  margin-bottom:28px;
}
.blog-filters-scroll{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:12px}
.blog-filter-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid var(--blog-line);
  border-radius:999px;
  color:var(--blog-text);
  font-size:13px;
  background:rgba(255,255,255,.02);
}
.blog-filter-btn.active{
  background:rgba(29,53,87,.35);
  border-color:#355585;
  color:var(--blog-title);
}
.blog-filter-count{
  background:rgba(255,255,255,.08);
  padding:1px 7px;
  border-radius:999px;
  font-size:11px;
}
.blog-filters-row2,.blog-view-switch{display:flex;gap:8px;align-items:center;padding-bottom:10px}
.blog-filters-label{font-size:11px;color:var(--blog-meta);text-transform:uppercase;letter-spacing:.08em}
.blog-diff-btn,.blog-view-btn{
  border:1px solid var(--blog-line);
  background:#0d1626;
  color:var(--blog-text);
  border-radius:999px;
  padding:6px 11px;
  font-size:12px;
}
.blog-view-btn.active{background:#1d3557;color:#f0ece4;border-color:#43638f}

.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:36px}
.blog-card{
  background:var(--blog-surface);
  border:1px solid var(--blog-line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:386px;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease),background var(--ease);
}
.blog-card:hover{
  transform:translateY(-4px);
  background:var(--blog-surface-2);
  border-color:#324867;
  box-shadow:0 18px 36px rgba(0,0,0,.34);
}
.blog-card-link{display:flex;flex-direction:column;flex:1}
.blog-card-cover{height:74px;position:relative}
.blog-card-cover-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;padding:0 16px}
.blog-card-cover-cat{
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:#efe6d8;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(6,11,20,.28);
  padding:5px 10px;
  text-transform:uppercase;
}
.blog-card-cover-lock{
  position:absolute;
  top:10px;
  right:12px;
  font-size:10px;
  color:#d4dbe8;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:4px 8px;
  background:rgba(6,11,20,.54);
}
.blog-card-body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card-meta{display:flex;justify-content:flex-end}
.blog-card-date{font-size:12px;color:var(--blog-meta)}
.blog-card-title{
  margin:0;
  color:var(--blog-title);
  font-family:'Inter',sans-serif;
  font-size:23px;
  font-weight:600;
  line-height:1.24;
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card-excerpt{
  margin:0;
  color:var(--blog-text);
  font-size:14px;
  line-height:1.58;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card-footer{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--blog-line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.blog-card-badges{display:flex;gap:8px;align-items:center}
.badge-diff{
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.badge-diff.base{background:rgba(33,70,52,.34);color:#9bc8ae}
.badge-diff.intermedio{background:rgba(106,68,37,.36);color:#dfc2a7}
.badge-diff.esperto{background:rgba(142,27,47,.34);color:#efb6c0}
.badge-tempo{font-size:12px;color:var(--blog-meta)}
.blog-card-cta{
  color:#f2efe8;
  border:1px solid #3b5271;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:600;
  transition:background var(--ease),border-color var(--ease);
}
.blog-card:hover .blog-card-cta{background:rgba(29,53,87,.30);border-color:#4f709a}

.blog-card.featured{grid-column:span 2;min-height:412px}
.blog-card.featured .blog-card-title{font-size:29px;-webkit-line-clamp:3}
.blog-card.featured .blog-card-excerpt{font-size:16px}

.blog-pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 30px}
.blog-page-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--blog-line);
  display:flex;align-items:center;justify-content:center;color:var(--blog-text);background:#0c1525;
}
.blog-page-btn.active{background:#1d3557;color:#f2efe8;border-color:#4a6890}
.blog-empty{border:1px dashed var(--blog-line);padding:30px;border-radius:var(--radius);color:var(--blog-meta)}

.blog-article-shell{max-width:980px;padding:34px 28px 56px}
.breadcrumb{font-size:12px;color:var(--blog-meta);margin-bottom:18px}
.article-kicker{
  display:inline-flex;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#d8c2a8;
  padding:6px 12px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.article-title{
  margin:0 0 12px;
  color:var(--blog-title);
  font-family:'Bebas Neue','Oswald',sans-serif;
  font-size:clamp(44px,6vw,64px);
  line-height:1.04;
  letter-spacing:.015em;
  font-weight:400;
}
.article-subtitle{margin:0 0 18px;font-size:21px;color:#ccd6e6;line-height:1.55}
.article-meta-bar{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  border-top:1px solid var(--blog-line);border-bottom:1px solid var(--blog-line);
  padding:14px 0;margin-bottom:18px;
}
.article-cover-wrap{
  border:1px solid var(--blog-line);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(160deg,#13203A,#0F1726);
  margin-bottom:20px;
}
.article-cover-placeholder{height:180px;display:flex;align-items:center;justify-content:center;padding:18px}
.cover-cat-name{
  color:#efe4d5;
  font-family:'Bebas Neue','Oswald',sans-serif;
  font-size:42px;
  letter-spacing:.03em;
  line-height:1.05;
  text-align:center;
}
.article-intro-box{
  margin:0 0 22px;
  border-left:3px solid #6A4425;
  background:rgba(106,68,37,.10);
  border-radius:0 12px 12px 0;
  padding:14px 16px;
}
.article-intro-box p{margin:0;color:#d6deea;font-size:17px;line-height:1.75}

.article-toc{
  background:#0d1626;
  border:1px solid var(--blog-line);
  border-radius:14px;
  padding:14px 16px;
  margin:0 0 20px;
}
.article-toc strong{
  font-size:11px;color:var(--blog-meta);text-transform:uppercase;letter-spacing:.09em;
}
.article-toc ul{margin:10px 0 0;padding-left:18px}
.article-toc a{color:#c8d5ea}

.blog-article-body{
  font-size:20px;
  line-height:1.9;
  color:#d8e0ec;
  max-width:75ch;
}
.blog-article-body p{margin:0 0 20px}

.blog-reactions{
  display:flex;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--blog-line);border-bottom:1px solid var(--blog-line);
  padding:14px 0;margin:20px 0;
}
.blog-reaction-btn{
  background:#101b2d;border:1px solid var(--blog-line);color:#d4dbe8;border-radius:10px;
  padding:8px 12px;font-size:13px;
}
.article-tags{margin:0 0 18px;color:var(--blog-text)}
.tags-label{color:#f0ebe2;font-weight:600}
.tag-pill{
  display:inline-block;margin:8px 6px 0 0;padding:5px 10px;border-radius:999px;
  border:1px solid var(--blog-line);background:rgba(255,255,255,.02);color:#cfd9e9;font-size:12px;
}

.articoli-correlati{margin-top:24px;padding-top:18px;border-top:1px solid var(--blog-line)}
.correlati-title{
  margin:0 0 14px;
  color:var(--blog-title);
  font-family:'Bebas Neue','Oswald',sans-serif;
  font-size:36px;
  letter-spacing:.02em;
}
.correlati-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.correlato-card{border:1px solid var(--blog-line);border-radius:14px;background:#0f1828;overflow:hidden}
.correlato-img{height:90px}
.correlato-body{padding:12px}
.correlato-titolo{margin:0;color:#e4eaf4;font-size:14px;line-height:1.5}

.blog-comments{margin-top:24px}
.blog-comment-form{display:grid;gap:10px}
.blog-comment-form .form-control{
  width:100%;background:#0c1626;border:1px solid var(--blog-line);border-radius:12px;
  color:#e5ebf4;padding:11px 12px;
}
.blog-comment{border-bottom:1px solid var(--blog-line);padding:11px 0}

.blog-wrap.view-compact .blog-card{min-height:346px}
.blog-wrap.view-compact .blog-card-title{font-size:21px;-webkit-line-clamp:3}
.blog-wrap.view-magazine .blog-grid{grid-template-columns:2fr 1fr}
.blog-wrap.view-magazine .blog-card{min-height:406px}
.blog-wrap.view-magazine .blog-card-title{font-size:27px;-webkit-line-clamp:3}

@media (max-width:980px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-card.featured{grid-column:span 1}
  .blog-wrap.view-magazine .blog-grid{grid-template-columns:1fr}
  .blog-article-body{font-size:19px}
}

@media (max-width:620px){
  .blog-container{padding:0 14px}
  .blog-hero{padding:30px 0 22px}
  .blog-hero-title{font-size:46px}
  .blog-hero-subtitle{font-size:16px}
  .blog-grid{grid-template-columns:1fr;gap:14px}
  .blog-card,.blog-wrap.view-compact .blog-card,.blog-wrap.view-magazine .blog-card{min-height:334px}
  .blog-card-title,.blog-wrap.view-compact .blog-card-title,.blog-wrap.view-magazine .blog-card-title{font-size:22px;-webkit-line-clamp:3}
  .blog-card-excerpt{font-size:14px}
  .blog-article-shell{padding:22px 14px 44px}
  .article-title{font-size:48px}
  .article-subtitle{font-size:18px}
  .cover-cat-name{font-size:32px}
  .blog-article-body{font-size:18px;line-height:1.82}
  .correlati-grid{grid-template-columns:1fr}
}